1 files changed, 61 insertions, 37 deletions

diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/branch_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/branch_token_spec.js
index 311d5a13280..6bbbfd838a0 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/branch_token_spec.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/branch_token_spec.js
@@ -9,14 +9,15 @@ import MockAdapter from 'axios-mock-adapter';
 import { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
 
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { OPTIONS_NONE_ANY } from '~/vue_shared/components/filtered_search_bar/constants';
 import BranchToken from '~/vue_shared/components/filtered_search_bar/tokens/branch_token.vue';
+import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_token.vue';
 
 import { mockBranches, mockBranchToken } from '../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 const defaultStubs = {
   Portal: true,
   GlFilteredSearchSuggestionList: {
@@ -45,6 +46,7 @@ function createComponent(options = {}) {
       portalName: 'fake target',
       alignSuggestions: function fakeAlignSuggestions() {},
       suggestionsListClass: () => 'custom-class',
+      termsAsTokens: () => false,
     },
     stubs,
   });
@@ -54,58 +56,83 @@ describe('BranchToken', () => {
   let mock;
   let wrapper;
 
+  const findBaseToken = () => wrapper.findComponent(BaseToken);
+  const triggerFetchBranches = (searchTerm = null) => {
+    findBaseToken().vm.$emit('fetch-suggestions', searchTerm);
+    return waitForPromises();
+  };
+
   beforeEach(() => {
     mock = new MockAdapter(axios);
   });
 
   afterEach(() => {
     mock.restore();
-    wrapper.destroy();
   });
 
   describe('methods', () => {
-    beforeEach(() => {
-      wrapper = createComponent();
-    });
-
     describe('fetchBranches', () => {
-      it('calls `config.fetchBranches` with provided searchTerm param', () => {
-        jest.spyOn(wrapper.vm.config, 'fetchBranches');
-
-        wrapper.vm.fetchBranches('foo');
+      it('sets loading state', async () => {
+        wrapper = createComponent({
+          config: {
+            fetchBranches: jest.fn().mockResolvedValue(new Promise(() => {})),
+          },
+        });
+        await nextTick();
 
-        expect(wrapper.vm.config.fetchBranches).toHaveBeenCalledWith('foo');
+        expect(findBaseToken().props('suggestionsLoading')).toBe(true);
       });
 
-      it('sets response to `branches` when request is succesful', () => {
-        jest.spyOn(wrapper.vm.config, 'fetchBranches').mockResolvedValue({ data: mockBranches });
+      describe('when request is successful', () => {
+        beforeEach(() => {
+          wrapper = createComponent({
+            config: {
+              fetchBranches: jest.fn().mockResolvedValue({ data: mockBranches }),
+            },
+          });
+        });
+
+        it('calls `config.fetchBranches` with provided searchTerm param', async () => {
+          const searchTerm = 'foo';
+          await triggerFetchBranches(searchTerm);
 
-        wrapper.vm.fetchBranches('foo');
+          expect(findBaseToken().props('config').fetchBranches).toHaveBeenCalledWith(searchTerm);
+        });
+
+        it('sets response to `branches`', async () => {
+          await triggerFetchBranches();
 
-        return waitForPromises().then(() => {
-          expect(wrapper.vm.branches).toEqual(mockBranches);
+          expect(findBaseToken().props('suggestions')).toEqual(mockBranches);
+        });
+
+        it('sets `loading` to false when request completes', async () => {
+          await triggerFetchBranches();
+
+          expect(findBaseToken().props('suggestionsLoading')).toBe(false);
         });
       });
 
-      it('calls `createAlert` with flash error message when request fails', () => {
-        jest.spyOn(wrapper.vm.config, 'fetchBranches').mockRejectedValue({});
+      describe('when request fails', () => {
+        beforeEach(() => {
+          wrapper = createComponent({
+            config: {
+              fetchBranches: jest.fn().mockRejectedValue({}),
+            },
+          });
+        });
 
-        wrapper.vm.fetchBranches('foo');
+        it('calls `createAlert` with alert error message when request fails', async () => {
+          await triggerFetchBranches();
 
-        return waitForPromises().then(() => {
           expect(createAlert).toHaveBeenCalledWith({
             message: 'There was a problem fetching branches.',
           });
         });
-      });
-
-      it('sets `loading` to false when request completes', () => {
-        jest.spyOn(wrapper.vm.config, 'fetchBranches').mockRejectedValue({});
 
-        wrapper.vm.fetchBranches('foo');
+        it('sets `loading` to false when request completes', async () => {
+          await triggerFetchBranches();
 
-        return waitForPromises().then(() => {
-          expect(wrapper.vm.loading).toBe(false);
+          expect(findBaseToken().props('suggestionsLoading')).toBe(false);
         });
       });
     });
@@ -120,16 +147,13 @@ describe('BranchToken', () => {
       await nextTick();
     }
 
-    beforeEach(async () => {
-      wrapper = createComponent({ value: { data: mockBranches[0].name } });
-
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData({
-        branches: mockBranches,
+    beforeEach(() => {
+      wrapper = createComponent({
+        value: { data: mockBranches[0].name },
+        config: {
+          initialBranches: mockBranches,
+        },
       });
-
-      await nextTick();
     });
 
     it('renders gl-filtered-search-token component', () => {