[Remove Vuetify from Studio] Convert content library filter bar unit tests to Vue Testing Library by sharma-anushka · Pull Request #5653 · learningequality/studio

sharma-anushka · 2026-01-20T07:34:23Z

Summary

Converted Content Library (CatalogFilterBar) unit tests from Vue Test Utils to Vue Testing Library.

Key Changes

Replaced mount() and wrapper.vm usage with Vue Testing Library’s render() and semantic queries
Removed direct calls to component methods (resetKeywords, resetCoach, removeLanguage)
Tests now simulate real user interactions (clicking buttons and filter chips)
Router state is validated through actual navigation updates instead of manual mutation
Eliminated assertions on internal computed state (currentFilters)
Improved test resilience by asserting only user-observable behavior

Test Coverage

Clear all filters via UI interaction
Remove text-based filters (keywords)
Remove boolean-based filters (coach)
Remove list-based filters incrementally (languages)
Ensure unrelated query parameters remain unaffected

References

closes #5649

Verification

Ran pnpm test -- catalogFilterBar.spec.js

learning-equality-bot · 2026-01-20T07:34:54Z

👋 Thanks for contributing!

We will assign a reviewer within the next two weeks. In the meantime, please ensure that:

You ran pre-commit locally
All issue requirements are satisfied
The contribution is aligned with our Contributing guidelines. Pay extra attention to Using generative AI. Pull requests that don't follow the guidelines will be closed.

We'll be in touch! 😊

MisRob · 2026-01-20T07:37:59Z

Hi @sharma-anushka - Files Changed tab is showing 56 changed files which I believe wasn't intended. Can you have a look?

sharma-anushka · 2026-01-20T07:53:55Z

Yes @MisRob, I think I have forgotten to drop the changes from the other issue, Ill soon revert with only the intended changes. Sorry for the inconvenience.

MisRob · 2026-01-20T07:58:50Z

No problem @sharma-anushka , can happen. Thanks!

sharma-anushka · 2026-01-20T08:37:37Z

Hi @MisRob, Ive dropped the changes from the issue #5645. You may have a look.

MisRob · 2026-01-21T17:53:24Z

Hi @sharma-anushka, thank you! Before we assign a maintainer, I will first invite the community.

MisRob · 2026-01-21T17:54:35Z

📢 ✨ Community Review guidance for both authors and reviewers.

AadarshM07 · 2026-01-22T12:09:22Z

Hi @sharma-anushka 🖐️ ,
I tested the current implementation, and it works really well. I’m noting down a few considerations I found. Sorry if I’m mistaken anywhere anywhere, you can always clarify!

The tests currently import a component createLocalVue from @vue/test-utils. To fully migrate away from @vue/test-utils, we should replace createLocalVue by passing plugins directly to the render options or using the configureVue hook.
The code contains document.body.innerHTML = '' in afterEach. The @testing-library/vue library automatically cleans up the DOM after every test. As of this, i think manual cleanup here is not needed and might even interfere with VTL’s cleanup process
Using .v-chip__close and .v-chip relies on Vuetify implementation. This could be risky, especially since there is an ongoing effort in Studio to remove Vuetify. To ensure tests don’t break later, it would be better to target elements by adding data-test attribute, which is already widely used in the codebase.

sharma-anushka · 2026-01-23T10:57:51Z

Hi @AadarshM07. Thankyou for the considerations. I will make the changes and revert soon.

sharma-anushka · 2026-01-24T17:59:53Z

Hi @AadarshM07 Ive made the changes you suggested. I hope this is okay now. Thankyou again for the review.

sharma-anushka · 2026-02-02T09:13:31Z

Hi @ozer550, Ive made the changes according to the community review. If theres any other change required, let me know.

ozer550

Its almost there, just couple of questions and changes that came to my mind.

ozer550 · 2026-02-03T12:28:21Z

...ration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogFilterBar.spec.js

 import CatalogFilterBar from '../CatalogFilterBar';

-const store = factory();
+Vue.use(Vuex);


I think this is redundant as we already have it registered in jest_config/setup.js .

ozer550 · 2026-02-03T12:43:54Z

...ration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogFilterBar.spec.js

+
+    await waitFor(() => {
+      expect(router.currentRoute.query.keywords).toBeUndefined();
+      expect(router.currentRoute.query.coach).toBeTruthy();


Instead of toBeTruthy can we use something more precise like toBe ?

ozer550 · 2026-02-03T12:44:58Z

...ration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogFilterBar.spec.js

 import CatalogFilterBar from '../CatalogFilterBar';

-const store = factory();
+Vue.use(Vuex);


This might be redundant we already import this in jest_config/setup.js.

ozer550 · 2026-02-03T12:46:49Z

...ration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogFilterBar.spec.js

-  let wrapper;
  beforeEach(() => {
-    wrapper = makeWrapper();
+    router


Router is set up in both makeWrapper() and beforeEach() is there a specific reason for this?

Hi, No. Thankyou for catching it, I have removed it now.

ozer550 · 2026-02-03T12:53:09Z

...ration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogFilterBar.spec.js

+async function closeChipByText(user, text) {
+  const chip = await screen.findByText(text);
+
+  const closeButton = chip.closest('[data-test^="filter-chip"]').querySelector('i');


Should we rely on better semantic tag than querySelector('i')?

sharma-anushka · 2026-02-09T05:17:57Z

Hi @ozer550, apologies for the delay. I have refactored it according to you feedback. You may have a look. Thanks.

ozer550

First pass looks good, just one small comment that can be removed. Also, a small suggestion its helpful to add commit messages that are more clearer and that might help reviewers to understand the progression of the PR. Personal commit messages are usually not very informative.

ozer550 · 2026-02-16T15:46:58Z

...ration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogFilterBar.spec.js

+  const store = factory();
+
+  return render(CatalogFilterBar, {
+    // localVue,


We can remove this comment!

sharma-anushka · 2026-02-17T05:02:48Z

Hi @ozer550, Ive removed the unwanted comment, will keep commit messages clearer going forward.

sharma-anushka force-pushed the fix-issue-5649 branch from eb8fe63 to b2192f3 Compare January 20, 2026 08:29

changed catalogFIlterBar.spec.js to use VTL instead of VTU

53dd04d

sharma-anushka force-pushed the fix-issue-5649 branch from b2192f3 to 53dd04d Compare January 20, 2026 08:36

MisRob changed the title ~~Fix issue 5649~~ [Remove Vuetify from Studio] Convert content library filter bar unit tests to Vue Testing Library Jan 21, 2026

[pre-commit.ci lite] apply automatic fixes

b2ee899

sharma-anushka added 2 commits January 24, 2026 23:26

refactor CatalogFilterBar tests to remove Vuetify implementation

2cf5184

refactor CatalogFilterBar tests to remove Vuetify coupling

988b3e5

[pre-commit.ci lite] apply automatic fixes

7294eca

marcellamaki assigned ozer550 Jan 27, 2026

ozer550 requested changes Feb 3, 2026

View reviewed changes

changed according to the feedback

5f379f2

[pre-commit.ci lite] apply automatic fixes

1a72cdd

sharma-anushka requested a review from ozer550 February 9, 2026 05:19

final

9a49ad6

ozer550 requested changes Feb 16, 2026

View reviewed changes

removed unneccessary comments

df7d5f4

sharma-anushka requested a review from ozer550 February 17, 2026 05:03

Conversation

sharma-anushka commented Jan 20, 2026

Summary

Key Changes

Test Coverage

References

Verification

Uh oh!

learning-equality-bot bot commented Jan 20, 2026

Uh oh!

MisRob commented Jan 20, 2026

Uh oh!

sharma-anushka commented Jan 20, 2026

Uh oh!

MisRob commented Jan 20, 2026

Uh oh!

sharma-anushka commented Jan 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MisRob commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MisRob commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

AadarshM07 commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sharma-anushka commented Jan 23, 2026

Uh oh!

sharma-anushka commented Jan 24, 2026

Uh oh!

sharma-anushka commented Feb 2, 2026

Uh oh!

ozer550 left a comment

Choose a reason for hiding this comment

Uh oh!

ozer550 Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

ozer550 Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

ozer550 Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

ozer550 Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

sharma-anushka Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

ozer550 Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sharma-anushka commented Feb 9, 2026

Uh oh!

ozer550 left a comment

Choose a reason for hiding this comment

Uh oh!

ozer550 Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

sharma-anushka commented Feb 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

sharma-anushka commented Jan 20, 2026 •

edited

Loading

MisRob commented Jan 21, 2026 •

edited

Loading

MisRob commented Jan 21, 2026 •

edited

Loading

AadarshM07 commented Jan 22, 2026 •

edited

Loading

ozer550 Feb 3, 2026 •

edited

Loading