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

contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterBar.vue

@@ -7,6 +7,7 @@
         :key="`catalog-filter-${index}`"
         close
         class="ma-1"
+        :data-test="`filter-chip-${index}`"
         @input="filter.onclose"
       >
         {{ filter.text }}
@@ -16,7 +17,7 @@
         class="clear-link"
         :text="$tr('clearAll')"
         appearance="basic-link"
-        data-test="clear"
+        data-testid="clear"
         @click="clearFilters"
       />
     </div>

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

@@ -1,13 +1,10 @@
-import { mount } from '@vue/test-utils';
+import { render, screen, waitFor } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
 import { factory } from '../../../store';
 import router from '../../../router';
 import CatalogFilterBar from '../CatalogFilterBar';
 
-const store = factory();
-
-const collection = {
-  id: 'test-collection',
-};
+const collection = { id: 'test-collection' };
 
 const query = {
   keywords: 'testing',
@@ -16,11 +13,22 @@ 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('.v-chip__close');
+
+  expect(closeButton).toBeTruthy();
+  await user.click(closeButton);
+}
+
 function makeWrapper() {
-  return mount(CatalogFilterBar, {
-    sync: false,
-    router,
+  const store = factory();
+
+  return render(CatalogFilterBar, {
+    // localVue,
     store,
+    router,
     computed: {
       collections() {
         return [collection];
@@ -30,52 +38,77 @@ function makeWrapper() {
 }
 
 describe('catalogFilterBar', () => {
-  let wrapper;
   beforeEach(() => {
-    wrapper = makeWrapper();
+    router
+      .push({
+        name: 'CHANNELS_EDITABLE',
+        query: { ...query },
+      })
+      .catch(() => {});
   });
 
-  describe('removing filters', () => {
-    beforeEach(() => {
-      Object.entries(query).forEach(([key, val]) => {
-        wrapper.vm[key] = val;
-      });
-      router.replace({ query });
+  afterEach(() => {
+    router.replace({ query: {} }).catch(() => {});
+  });
+
+  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).toBe(true);
+      expect(router.currentRoute.query.collection).toBe('some-collection');
+      expect(router.currentRoute.query.languages).toBe('en,es');
     });
-    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).toBe('some-collection');
+      expect(router.currentRoute.query.languages).toBe('en,es');
+      expect(router.currentRoute.query.keywords).toBe('testing');
     });
-    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).toBe(true);
+      expect(router.currentRoute.query.collection).toBe('some-collection');
+      expect(router.currentRoute.query.keywords).toBe('testing');
     });
   });
 });