Skip to content

Conversation

@vtushar06
Copy link
Contributor

@vtushar06 vtushar06 commented Nov 5, 2025

Summary

Converted Content Library (CatalogList) unit tests from Vue Test Utils to Vue Testing Library, focusing on user-observable behavior and removing implementation detail testing.

Key Changes:

  • Replaced mount() with render() and Vue Testing Library semantic queries
  • Removed 2 unused mock functions (mockDownloadChannelsCSV, mockDownloadChannelsPDF)
  • Consolidated 4 duplicate tests into 2 focused tests (10 total tests, all passing)
  • Simplified test setup using real Vuex store (component uses mapActions/mapGetters)
  • All tests now check visible outcomes: text content, button state, navigation

Test Coverage (10 tests):

  • Initial load: Results display, download button visibility, search action
  • Selection mode: Enter/exit selection, toolbar visibility, selection count
  • Channel selection: Select-all checkbox and count display
  • Search/filtering: Query parameter changes trigger search, results update
  • Download workflow: Select button availability
  • Offline/loading states tested through button disabled state

Verification:

Ran npm test -- catalogList.spec.js
It passed all 15 tests

References

Closes: #5527

Reviewer guidance

Tests focus on rendered content + business logic (VTL pattern)
No internal state access (removed tests on excluded array, component methods)

@vtushar06 vtushar06 marked this pull request as ready for review November 5, 2025 10:28
@MisRob
Copy link
Member

MisRob commented Nov 7, 2025

Thank you @vtushar06, within next two weeks, we will assign a reviewer.

@vtushar06
Copy link
Contributor Author

Hii @MisRob, I made some changes as you mentioned in my other PR about testing user-observable behavior instead of implementation details.
Please let me know If any more changes are required.

@marcellamaki marcellamaki self-assigned this Nov 18, 2025
@vtushar06
Copy link
Contributor Author

@MisRob ,I applied the approach from Issue #5474 and systematically removed stubs that weren't needed.
The remaining 4 stubs are minimal and necessary:

  • ChannelItem: isolates component under test
  • Checkbox: needed for selection mode testing
  • BottomBar: needed for toolbar testing
  • CatalogFilters: minimal stub

Tests now focus on user-visible behavior, Now PR is ready for review.

@vtushar06 vtushar06 requested a review from MisRob November 20, 2025 04:08
vtushar06 added a commit to vtushar06/studio that referenced this pull request Nov 20, 2025
…n from unstable

The contributor's StudioChip implementation is identical to ours.
We'll use their version from unstable and focus on test refactoring
following Issue learningequality#5536 patterns (data-present vs data-absent scenarios).

Following maintainer guidance from PR learningequality#5540 review.
@MisRob
Copy link
Member

MisRob commented Nov 24, 2025

@vtushar06

  • Stubs that you added because of data-testid are not needed - just add test ID on actual components. Not that it'd be wrong, but it will be simpler approach for now, and more aligned with other tests.
  • As for checkbox stub, you're basically re-implementing some parts of checkbox logic in your stub, and then based on it test that everything works well. But, in actual user experience, this implementation is not used. So again, this results in tests that actually don't reflect on what's really happening. Instead, just click the actual checkbox as user.

Stubs can be useful on some occasions, but I would generally recommend that until you get a grasp on them, it will be simpler if you always attempt not to use them at all. Only add a stub after you tried all other approaches, or if not using a stub in results in more complex or significantly slower tests. In majority of cases, you won't need them.

@vtushar06
Copy link
Contributor Author

Hi @MisRob,
Updated tests to use semantic queries (getByText) instead of test IDs. Can we move forward with this, as I have gone through merged PRs from their I thought this can be good approach for out changes.

@vtushar06
Copy link
Contributor Author

Hii @MisRob, This PR is now ready for review, please assign someone to review this and let me know If any more changes required.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Remove Vuetify from Studio] Convert Content Library unit tests to Vue Testing Library

3 participants