Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sharma-anushka wants to merge 5 commits into
base: unstable
Choose a base branch
from
+88 −46
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
53dd04d
changed catalogFIlterBar.spec.js to use VTL instead of VTU
sharma-anushka Jan 20, 2026
b2ee899
[pre-commit.ci lite] apply automatic fixes
pre-commit-ci-lite[bot] Jan 21, 2026
2cf5184
refactor CatalogFilterBar tests to remove Vuetify implementation
sharma-anushka Jan 24, 2026
988b3e5
refactor CatalogFilterBar tests to remove Vuetify coupling
sharma-anushka Jan 24, 2026
7294eca
[pre-commit.ci lite] apply automatic fixes
pre-commit-ci-lite[bot] Jan 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
:key="`catalog-filter-${index}`"
close
class="ma-1"
:data-test="`filter-chip-${index}`"
@input="filter.onclose"
>
{{ filter.text }}
Expand All @@ -16,7 +17,7 @@
class="clear-link"
:text="$tr('clearAll')"
appearance="basic-link"
data-test="clear"
data-testid="clear"
@click="clearFilters"
/>
</div>
Expand Down
131 changes: 86 additions & 45 deletions ...ion/contentcuration/frontend/channelList/views/Channel/__tests__/catalogFilterBar.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
import { mount } from '@vue/test-utils';
import { render, screen, waitFor } from '@testing-library/vue';
import userEvent from '@testing-library/user-event';
import Vuex from 'vuex';
import VueRouter from 'vue-router';
import Vue from 'vue';
import { factory } from '../../../store';
import router from '../../../router';
import CatalogFilterBar from '../CatalogFilterBar';

const store = factory();
Vue.use(Vuex);
Copy link
Member

@ozer550 ozer550 Feb 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

@ozer550 ozer550 Feb 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Vue.use(VueRouter);

const collection = {
id: 'test-collection',
};
const collection = { id: 'test-collection' };

const query = {
keywords: 'testing',
Expand All @@ -16,11 +19,28 @@ const query = {
collection: 'some-collection',
};

async function closeChipByText(user, text) {
const chip = await screen.findByText(text);

const closeButton = chip.closest('[data-test^="filter-chip"]').querySelector('i');
Copy link
Member

@ozer550 ozer550 Feb 3, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


await user.click(closeButton);
}

function makeWrapper() {
return mount(CatalogFilterBar, {
sync: false,
router,
const store = factory();

router
.push({
name: 'CHANNELS_EDITABLE',
query,
})
.catch(() => {});

return render(CatalogFilterBar, {
// localVue,
store,
router,
computed: {
collections() {
return [collection];
Expand All @@ -30,52 +50,73 @@ function makeWrapper() {
}

describe('catalogFilterBar', () => {
let wrapper;
beforeEach(() => {
wrapper = makeWrapper();
router
Copy link
Member

@ozer550 ozer550 Feb 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

.push({
name: 'CHANNELS_EDITABLE',
query: { ...query },
})
.catch(() => {});
});

describe('removing filters', () => {
beforeEach(() => {
Object.entries(query).forEach(([key, val]) => {
wrapper.vm[key] = val;
});
router.replace({ query });
it('clear all button should remove all filters', async () => {
const user = userEvent.setup();
makeWrapper();

await user.click(screen.getByTestId('clear'));

await waitFor(() => {
expect(router.currentRoute.query.keywords).toBeUndefined();
expect(router.currentRoute.query.coach).toBeUndefined();
expect(router.currentRoute.query.collection).toBeUndefined();
expect(router.currentRoute.query.languages).toBeUndefined();
});
it('clear all button should remove all filters', () => {
wrapper.find('[data-test="clear"]').trigger('click');
expect(wrapper.keywords).toBeUndefined();
expect(wrapper.vm.currentFilters).toHaveLength(0);
});

it('removing text-based filter should remove it from the query', async () => {
const user = userEvent.setup();
makeWrapper();

await closeChipByText(user, '"testing"');

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

@ozer550 ozer550 Feb 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

expect(router.currentRoute.query.collection).toBeTruthy();
expect(router.currentRoute.query.languages).toBeTruthy();
});
it('removing text-based filter should remove it from the query', () => {
wrapper.vm.resetKeywords();
expect(wrapper.vm.$route.query.keywords).toBeUndefined();

// Make sure other queries weren't affected
expect(wrapper.vm.$route.query.coach).toBeTruthy();
expect(wrapper.vm.$route.query.collection).toBeTruthy();
expect(wrapper.vm.$route.query.languages).toBeTruthy();
});

it('removing boolean-based filter should remove it from the query', async () => {
const user = userEvent.setup();
makeWrapper();

await closeChipByText(user, 'Coach content');

await waitFor(() => {
expect(router.currentRoute.query.coach).toBeUndefined();
expect(router.currentRoute.query.collection).toBeTruthy();
expect(router.currentRoute.query.languages).toBeTruthy();
expect(router.currentRoute.query.keywords).toBeTruthy();
});
it('removing boolean-based filter should remove it from the query', () => {
wrapper.vm.resetCoach();
expect(wrapper.vm.$route.query.coach).toBeUndefined();

// Make sure other queries weren't affected
expect(wrapper.vm.$route.query.collection).toBeTruthy();
expect(wrapper.vm.$route.query.languages).toBeTruthy();
expect(wrapper.vm.$route.query.keywords).toBeTruthy();
});

it('removing list-based filter should only remove that item from the query', async () => {
const user = userEvent.setup();
makeWrapper();
await closeChipByText(user, 'English');

await waitFor(() => {
expect(router.currentRoute.query.languages).toBe('es');
});
it('removing list-based filter should only remove that item from the query', () => {
wrapper.vm.removeLanguage('en');
expect(wrapper.vm.$route.query.languages).toBe('es');

wrapper.vm.removeLanguage('es');
expect(wrapper.vm.$route.query.languages).toBeUndefined();
await closeChipByText(user, 'Español');

// Make sure other queries weren't affected
expect(wrapper.vm.$route.query.coach).toBeTruthy();
expect(wrapper.vm.$route.query.collection).toBeTruthy();
expect(wrapper.vm.$route.query.keywords).toBeTruthy();
await waitFor(() => {
expect(router.currentRoute.query.languages).toBeUndefined();
expect(router.currentRoute.query.coach).toBeTruthy();
expect(router.currentRoute.query.collection).toBeTruthy();
expect(router.currentRoute.query.keywords).toBeTruthy();
});
});
});