Update filtered search bar tests for vue 3

What does this MR do and why?

Update filtered search bar tests for vue 3

• bring them partially up to current standards
• remove vue 3 deprecated patterns
• reimplement !144947 (merged), but fix the issue with the FOSS tests by changing storage key to one in CE
  • previously the storage key requirements was used in the test, but that is only available in EE
  • the second commit is the fix

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before	After

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

Related to #391171

Related to !144947 (merged)

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', () => {
         jest.spyOn(wrapper.vm, 'blurSearchInput');
 
         findGlFilteredSearch().vm.$emit('submit', mockFilters);
 
@@ -349,4+356,4 @@
       });
 
       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 () => {