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

[MisRob]

🙂 Looking for an issue? Welcome! This issue is open for contribution. If this is the first time you’re requesting an issue, please:

• Read Contributing guidelines carefully. Pay extra attention to Using generative AI. Pull requests and comments that don’t follow the guidelines won’t be answered.
• Confirm that you’ve read the guidelines in your comment.

Overview

Complexity: Low

Context

The test suite channelList/views/Channel/__tests__/catalogFilterBar.spec.js currently relies heavily on internal implementation details and uses Vue Test Utils in a way that couples tests tightly to component internals. This creates several issues:

• Brittle and unreliable tests (break when implementation changes even if behavior remains correct, or incorrectly pass while actual user interactions fail)
• Maintenance burden (refactoring component's internal code requires updating tests)

Related page:

The Change

Refactor channelList/views/Channel/__tests__/catalogFilterBar.spec.js test suite to use Vue Testing Library (VTL) and write tests in a way that reflects how a user interacts with the application.

Do not refactor any other areas of the codebase.

Hot to Get There

• Login as a@a.com with password a
• Go to Channels > Content library
• Use filters

Value Add

Prepares the test suite for easier updates during the upcoming refactoring to remove Vuetify from this page.

Out of Scope

Do not refactor any other areas of the codebase.

Acceptance Criteria

• Cover all major workflows while avoiding excessive testing of details
• Concise but explicit test decriptions that describe what's tested from a user point of view
• Follow Testing Library principles and Testing Library query priority recommendation
• Follow our Unit testing guide and Testing template, where you will also find how we mock router, store, composables, and more.
• Use patterns consistent with existing VTL test suites (search for from '@testing-library/vue')

References

Sub-issue of #5060

[sharma-anushka]

hey @MisRob I'd like to contribute to this

[MisRob]

Thank you @sharma-anushka, Glad to assign you. I will also soon follow-up on your report on the other issue.

[sharma-anushka]

@MisRob Thankyou. Sure.

[vtushar06]

Hii @sharma-anushka, glad you have been assigned, I have worked on these types of issue past many months, If you need any clarification or help about tests, you can tag me, happy to help you out.

[learning-equality-bot]

Hi! 👋

Thanks so much for your interest! This issue is already assigned. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues. If there are no unassigned 'help wanted' issues available, please wait until new ones are added.

We really appreciate your willingness to help. 😊

Are you preparing for Google Summer of Code? See our GSoC guidelines.

[sharma-anushka]

Thankyou @vtushar06, I will let you know.