[Remove Vuetify from Studio] Convert content library filter bar unit tests to Vue Testing Library

[sharma-anushka]

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]

👋 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]

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

[sharma-anushka]

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]

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

[sharma-anushka]

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

[MisRob]

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

[MisRob]

📢 ✨ Community Review guidance for both authors and reviewers.

[AadarshM07]

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]

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

[sharma-anushka]

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

[sharma-anushka]

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]

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

[ozer550]

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

[ozer550]

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

[ozer550]

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

[ozer550]

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