Merge branch '391171-update-filtered-search-tests-ce' into 'master'

Update filtered search bar tests for vue 3

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/145070



Merged-by: Paul Slaughter <pslaughter@gitlab.com>
Approved-by: Paul Slaughter <pslaughter@gitlab.com>
Reviewed-by: Alexander Turinske <aturinske@gitlab.com>
Co-authored-by: Alexander Turinske <aturinske@gitlab.com>

spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js

 import { GlDropdownItem, GlSorting, GlFilteredSearch, GlFormCheckbox } from '@gitlab/ui';
 import { shallowMount, mount } from '@vue/test-utils';
-
 import { nextTick } from 'vue';
+import { useLocalStorageSpy } from 'helpers/local_storage_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+
 import RecentSearchesService from '~/filtered_search/services/recent_searches_service';
 import RecentSearchesStore from '~/filtered_search/stores/recent_searches_store';
 import {
@@ -34,45 +36,39 @@ jest.mock('~/vue_shared/components/filtered_search_bar/filtered_search_utils', (
   ).filterEmptySearchTerm,
 }));
 
-const createComponent = ({
-  shallow = true,
-  namespace = 'gitlab-org/gitlab-test',
-  recentSearchesStorageKey = 'requirements',
-  tokens = mockAvailableTokens,
-  sortOptions,
-  initialSortBy,
-  initialFilterValue = [],
-  showCheckbox = false,
-  checkboxChecked = false,
-  searchInputPlaceholder = 'Filter requirements',
-} = {}) => {
-  const mountMethod = shallow ? shallowMount : mount;
-
-  return mountMethod(FilteredSearchBarRoot, {
-    propsData: {
-      namespace,
-      recentSearchesStorageKey,
-      tokens,
-      sortOptions,
-      initialSortBy,
-      initialFilterValue,
-      showCheckbox,
-      checkboxChecked,
-      searchInputPlaceholder,
-    },
-  });
+const defaultProps = {
+  namespace: 'gitlab-org/gitlab-test',
+  recentSearchesStorageKey: 'issues',
+  tokens: mockAvailableTokens,
+  initialFilterValue: [],
+  showCheckbox: false,
+  checkboxChecked: false,
+  searchInputPlaceholder: 'Filter requirements',
 };
 
 describe('FilteredSearchBarRoot', () => {
+  useLocalStorageSpy();
   let wrapper;
 
+  const createComponent = ({ shallow = true, propsData = {} } = {}) => {
+    const mountMethod = shallow ? shallowMount : mount;
+
+    wrapper = mountMethod(FilteredSearchBarRoot, { propsData: { ...defaultProps, ...propsData } });
+  };
+
   const findGlSorting = () => wrapper.findComponent(GlSorting);
   const findGlFilteredSearch = () => wrapper.findComponent(GlFilteredSearch);
+  const findGlFormCheckbox = () => wrapper.findComponent(GlFormCheckbox);
+  const findGlDropdownItem = () => wrapper.findComponent(GlDropdownItem);
+
+  afterEach(() => {
+    localStorage.clear();
+  });
 
   describe('data', () => {
     describe('when `sortOptions` are provided', () => {
       beforeEach(() => {
-        wrapper = createComponent({ sortOptions: mockSortOptions });
+        createComponent({ propsData: { sortOptions: mockSortOptions } });
       });
 
       it('sets a correct initial value for GlFilteredSearch', () => {
@@ -95,7 +91,7 @@ describe('FilteredSearchBarRoot', () => {
     });
 
     it('does not initialize the sort dropdown when `sortOptions` are not provided', () => {
-      wrapper = createComponent();
+      createComponent();
 
       expect(findGlSorting().exists()).toBe(false);
     });
@@ -104,6 +100,7 @@ describe('FilteredSearchBarRoot', () => {
   describe('computed', () => {
     describe('tokenSymbols', () => {
       it('returns a map containing type and symbols from `tokens` prop', () => {
+        createComponent();
         expect(wrapper.vm.tokenSymbols).toEqual({
           [TOKEN_TYPE_AUTHOR]: '@',
           [TOKEN_TYPE_LABEL]: '~',
@@ -114,6 +111,7 @@ describe('FilteredSearchBarRoot', () => {
 
     describe('tokenTitles', () => {
       it('returns a map containing type and title from `tokens` prop', () => {
+        createComponent();
         expect(wrapper.vm.tokenTitles).toEqual({
           [TOKEN_TYPE_AUTHOR]: 'Author',
           [TOKEN_TYPE_LABEL]: 'Label',
@@ -124,7 +122,7 @@ describe('FilteredSearchBarRoot', () => {
 
     describe('sortDirectionIcon', () => {
       beforeEach(() => {
-        wrapper = createComponent({ sortOptions: mockSortOptions });
+        createComponent({ propsData: { sortOptions: mockSortOptions } });
       });
 
       it('passes isAscending=false to GlSorting by default', () => {
@@ -141,7 +139,7 @@ describe('FilteredSearchBarRoot', () => {
 
     describe('filteredRecentSearches', () => {
       beforeEach(() => {
-        wrapper = createComponent();
+        createComponent();
       });
 
       it('returns array of recent searches filtering out any string type (unsupported) items', async () => {
@@ -187,7 +185,7 @@ describe('FilteredSearchBarRoot', () => {
 
   describe('events', () => {
     it('emits component event `onFilter` with empty array and true when initially selected filter value was cleared', async () => {
-      wrapper = createComponent({ initialFilterValue: [tokenValueLabel] });
+      createComponent({ propsData: { initialFilterValue: [tokenValueLabel] } });
 
       wrapper.findComponent(GlFilteredSearch).vm.$emit('clear');
 
@@ -199,15 +197,16 @@ describe('FilteredSearchBarRoot', () => {
   describe('methods', () => {
     describe('setupRecentSearch', () => {
       it('initializes `recentSearchesService` and `recentSearchesStore` props when `recentSearchesStorageKey` is available', () => {
+        createComponent();
         expect(wrapper.vm.recentSearchesService instanceof RecentSearchesService).toBe(true);
         expect(wrapper.vm.recentSearchesStore instanceof RecentSearchesStore).toBe(true);
       });
 
       it('initializes `recentSearchesPromise` prop with a promise by using `recentSearchesService.fetch()`', () => {
-        jest.spyOn(wrapper.vm.recentSearchesService, 'fetch').mockResolvedValue([]);
-
-        wrapper.vm.setupRecentSearch();
+        expect(localStorage.setItem).not.toHaveBeenCalled();
+        createComponent();
 
+        expect(localStorage.setItem).toHaveBeenCalledWith('canUseLocalStorage', 'true');
         expect(wrapper.vm.recentSearchesPromise instanceof Promise).toBe(true);
       });
     });
@@ -216,6 +215,7 @@ describe('FilteredSearchBarRoot', () => {
       const mockFilters = [tokenValueAuthor, tokenValueLabel, tokenValueConfidential, 'foo'];
 
       it('returns filter array with unescaped strings for values which have spaces', () => {
+        createComponent();
         expect(wrapper.vm.removeQuotesEnclosure(mockFilters)).toEqual([
           tokenValueAuthor,
           tokenValueLabel,
@@ -227,7 +227,7 @@ describe('FilteredSearchBarRoot', () => {
 
     describe('handleSortOptionChange', () => {
       it('emits component event `onSort` with selected sort by value', async () => {
-        wrapper = createComponent({ sortOptions: mockSortOptions });
+        createComponent({ propsData: { sortOptions: mockSortOptions } });
 
         findGlSorting().vm.$emit('sortByChange', mockSortOptions[1].id);
         await nextTick();
@@ -239,9 +239,11 @@ describe('FilteredSearchBarRoot', () => {
 
     describe('handleSortDirectionChange', () => {
       beforeEach(() => {
-        wrapper = createComponent({
-          sortOptions: mockSortOptions,
-          initialSortBy: mockSortOptions[0].sortDirection.descending,
+        createComponent({
+          propsData: {
+            sortOptions: mockSortOptions,
+            initialSortBy: mockSortOptions[0].sortDirection.descending,
+          },
         });
       });
 
@@ -263,24 +265,27 @@ describe('FilteredSearchBarRoot', () => {
 
     describe('handleHistoryItemSelected', () => {
       it('emits `onFilter` event with provided filters param', () => {
-        jest.spyOn(wrapper.vm, 'removeQuotesEnclosure');
-
-        wrapper.vm.handleHistoryItemSelected(mockHistoryItems[0]);
-
+        createComponent();
+        expect(wrapper.emitted('onFilter')).toEqual(undefined);
+        findGlFilteredSearch().vm.$emit('history-item-selected', mockHistoryItems[0]);
         expect(wrapper.emitted('onFilter')[0]).toEqual([mockHistoryItems[0]]);
-        expect(wrapper.vm.removeQuotesEnclosure).toHaveBeenCalledWith(mockHistoryItems[0]);
       });
     });
 
     describe('handleClearHistory', () => {
       it('clears search history from recent searches store', () => {
+        createComponent();
         jest.spyOn(wrapper.vm.recentSearchesStore, 'setRecentSearches').mockReturnValue([]);
-        jest.spyOn(wrapper.vm.recentSearchesService, 'save');
 
-        wrapper.vm.handleClearHistory();
+        expect(localStorage.setItem).toHaveBeenCalledTimes(2);
+        findGlFilteredSearch().vm.$emit('clear-history');
 
         expect(wrapper.vm.recentSearchesStore.setRecentSearches).toHaveBeenCalledWith([]);
-        expect(wrapper.vm.recentSearchesService.save).toHaveBeenCalledWith([]);
+        expect(localStorage.setItem).toHaveBeenCalledTimes(4);
+        expect(localStorage.setItem).toHaveBeenLastCalledWith(
+          'gitlab-org/gitlab-test-issue-recent-searches',
+          '[]',
+        );
         expect(wrapper.vm.recentSearches).toEqual([]);
       });
     });
@@ -289,7 +294,7 @@ describe('FilteredSearchBarRoot', () => {
       const mockFilters = [tokenValueAuthor, 'foo'];
 
       beforeEach(async () => {
-        wrapper = createComponent();
+        createComponent();
 
         // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
         // eslint-disable-next-line no-restricted-syntax
@@ -319,25 +324,27 @@ describe('FilteredSearchBarRoot', () => {
       });
 
       it('calls `recentSearchesService.save` with array of searches', async () => {
-        jest.spyOn(wrapper.vm.recentSearchesService, 'save');
-
-        wrapper.vm.handleFilterSubmit();
-
-        await nextTick();
+        expect(localStorage.setItem).toHaveBeenCalledTimes(4);
+        findGlFilteredSearch().vm.$emit('submit');
+        await waitForPromises();
 
-        return wrapper.vm.recentSearchesPromise.then(() => {
-          expect(wrapper.vm.recentSearchesService.save).toHaveBeenCalledWith([mockFilters]);
-        });
+        expect(localStorage.setItem).toHaveBeenCalledTimes(6);
+        expect(localStorage.setItem).toHaveBeenLastCalledWith(
+          'gitlab-org/gitlab-test-issue-recent-searches',
+          JSON.stringify([mockFilters]),
+        );
       });
 
-      it('sets `recentSearches` data prop with array of searches', () => {
-        jest.spyOn(wrapper.vm.recentSearchesService, 'save');
-
-        wrapper.vm.handleFilterSubmit();
+      it('sets `recentSearches` data prop with array of searches', async () => {
+        expect(localStorage.setItem).toHaveBeenCalledTimes(4);
+        findGlFilteredSearch().vm.$emit('submit');
+        await waitForPromises();
 
-        return wrapper.vm.recentSearchesPromise.then(() => {
-          expect(wrapper.vm.recentSearches).toEqual([mockFilters]);
-        });
+        expect(localStorage.setItem).toHaveBeenCalledTimes(6);
+        expect(localStorage.setItem).toHaveBeenLastCalledWith(
+          'gitlab-org/gitlab-test-issue-recent-searches',
+          JSON.stringify([mockFilters]),
+        );
       });
 
       it('calls `blurSearchInput` method to remove focus from filter input field', () => {
@@ -349,20 +356,18 @@ describe('FilteredSearchBarRoot', () => {
       });
 
       it('emits component event `onFilter` with provided filters param', async () => {
-        jest.spyOn(wrapper.vm, 'removeQuotesEnclosure');
-
+        expect(wrapper.emitted('onFilter')).toEqual(undefined);
         findGlFilteredSearch().vm.$emit('submit');
         await nextTick();
 
         expect(wrapper.emitted('onFilter')[0]).toEqual([mockFilters]);
-        expect(wrapper.vm.removeQuotesEnclosure).toHaveBeenCalledWith(mockFilters);
       });
     });
   });
 
   describe('template', () => {
     it('renders gl-filtered-search component', async () => {
-      wrapper = createComponent();
+      createComponent();
       // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
       // eslint-disable-next-line no-restricted-syntax
       await wrapper.setData({
@@ -376,89 +381,70 @@ describe('FilteredSearchBarRoot', () => {
       expect(glFilteredSearchEl.props('historyItems')).toEqual(mockHistoryItems);
     });
 
-    it('renders checkbox when `showCheckbox` prop is true', () => {
-      let wrapperWithCheckbox = createComponent({
-        showCheckbox: true,
-      });
-
-      expect(wrapperWithCheckbox.findComponent(GlFormCheckbox).exists()).toBe(true);
-      expect(
-        wrapperWithCheckbox.findComponent(GlFormCheckbox).attributes('checked'),
-      ).not.toBeDefined();
-
-      wrapperWithCheckbox.destroy();
-
-      wrapperWithCheckbox = createComponent({
-        showCheckbox: true,
-        checkboxChecked: true,
-      });
-
-      expect(wrapperWithCheckbox.findComponent(GlFormCheckbox).attributes('checked')).toBe('true');
+    it('renders unchecked checkbox when `showCheckbox` prop is true', () => {
+      createComponent({ propsData: { showCheckbox: true } });
+      expect(findGlFormCheckbox().exists()).toBe(true);
+      expect(findGlFormCheckbox().attributes('checked')).not.toBeDefined();
+    });
 
-      wrapperWithCheckbox.destroy();
+    it('renders checked checkbox when `checkboxChecked` prop is true', () => {
+      createComponent({ propsData: { showCheckbox: true, checkboxChecked: true } });
+      expect(findGlFormCheckbox().attributes('checked')).toBe('true');
     });
 
     it('renders search history items dropdown with formatting done using token symbols', async () => {
-      const wrapperFullMount = createComponent({ sortOptions: mockSortOptions, shallow: false });
-      wrapperFullMount.vm.recentSearchesStore.addRecentSearch(mockHistoryItems[0]);
-
+      createComponent({ propsData: { sortOptions: mockSortOptions }, shallow: false });
+      wrapper.vm.recentSearchesStore.addRecentSearch(mockHistoryItems[0]);
       await nextTick();
 
-      const searchHistoryItemsEl = wrapperFullMount.findAll(
+      const searchHistoryItemsEl = wrapper.findAll(
         '.gl-search-box-by-click-menu .gl-search-box-by-click-history-item',
       );
 
       expect(searchHistoryItemsEl.at(0).text()).toBe(
         'Author := @rootLabel := ~bugMilestone := %v1.0"duo"',
       );
-
-      wrapperFullMount.destroy();
     });
 
     describe('when token options have `title` attribute defined', () => {
       it('renders search history items using the provided `title` attribute', async () => {
-        const wrapperFullMount = createComponent({
-          sortOptions: mockSortOptions,
-          tokens: [mockMembershipToken],
+        createComponent({
+          propsData: {
+            sortOptions: mockSortOptions,
+            tokens: [mockMembershipToken],
+          },
           shallow: false,
         });
 
-        wrapperFullMount.vm.recentSearchesStore.addRecentSearch([tokenValueMembership]);
-
+        wrapper.vm.recentSearchesStore.addRecentSearch([tokenValueMembership]);
         await nextTick();
-
-        expect(wrapperFullMount.findComponent(GlDropdownItem).text()).toBe('Membership := Direct');
-
-        wrapperFullMount.destroy();
+        expect(findGlDropdownItem().text()).toBe('Membership := Direct');
       });
     });
 
     describe('when token options have do not have `title` attribute defined', () => {
       it('renders search history items using the provided `value` attribute', async () => {
-        const wrapperFullMount = createComponent({
-          sortOptions: mockSortOptions,
-          tokens: [mockMembershipTokenOptionsWithoutTitles],
+        createComponent({
+          propsData: {
+            sortOptions: mockSortOptions,
+            tokens: [mockMembershipTokenOptionsWithoutTitles],
+          },
           shallow: false,
         });
-
-        wrapperFullMount.vm.recentSearchesStore.addRecentSearch([tokenValueMembership]);
-
+        wrapper.vm.recentSearchesStore.addRecentSearch([tokenValueMembership]);
         await nextTick();
-
-        expect(wrapperFullMount.findComponent(GlDropdownItem).text()).toBe('Membership := exclude');
-
-        wrapperFullMount.destroy();
+        expect(findGlDropdownItem().text()).toBe('Membership := exclude');
       });
     });
 
     it('renders sort dropdown component', () => {
-      wrapper = createComponent({ sortOptions: mockSortOptions });
+      createComponent({ propsData: { sortOptions: mockSortOptions } });
 
       expect(findGlSorting().exists()).toBe(true);
     });
 
     it('renders sort dropdown items', () => {
-      wrapper = createComponent({ sortOptions: mockSortOptions });
+      createComponent({ propsData: { sortOptions: mockSortOptions } });
 
       const { sortOptions, sortBy } = findGlSorting().props();
 
@@ -485,7 +471,7 @@ describe('FilteredSearchBarRoot', () => {
     };
 
     beforeEach(() => {
-      wrapper = createComponent({ sortOptions: mockSortOptions });
+      createComponent({ propsData: { sortOptions: mockSortOptions } });
     });
 
     it('syncs filter value', async () => {