Add latest changes from gitlab-org/gitlab@master

1 files changed, 78 insertions, 57 deletions

diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/label_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/label_token_spec.js
index 9d96123c17f..cfd8853119b 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/label_token_spec.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/label_token_spec.js
@@ -60,103 +60,125 @@ function createComponent(options = {}) {
 describe('LabelToken', () => {
   let mock;
   let wrapper;
+  const defaultLabels = OPTIONS_NONE_ANY;
 
   beforeEach(() => {
     mock = new MockAdapter(axios);
   });
 
+  const findBaseToken = () => wrapper.findComponent(BaseToken);
+  const findSuggestions = () => wrapper.findAllComponents(GlFilteredSearchSuggestion);
+  const findTokenSegments = () => wrapper.findAllComponents(GlFilteredSearchTokenSegment);
+  const triggerFetchLabels = (searchTerm = null) => {
+    findBaseToken().vm.$emit('fetch-suggestions', searchTerm);
+    return waitForPromises();
+  };
+
   afterEach(() => {
     mock.restore();
-    wrapper.destroy();
   });
 
   describe('methods', () => {
-    beforeEach(() => {
-      wrapper = createComponent();
-    });
-
     describe('getActiveLabel', () => {
       it('returns label object from labels array based on provided `currentValue` param', () => {
-        expect(wrapper.vm.getActiveLabel(mockLabels, 'Foo Label')).toEqual(mockRegularLabel);
+        wrapper = createComponent();
+
+        expect(findBaseToken().props('getActiveTokenValue')(mockLabels, 'Foo Label')).toEqual(
+          mockRegularLabel,
+        );
       });
     });
 
     describe('getLabelName', () => {
-      it('returns value of `name` or `title` property present in provided label param', () => {
-        let mockLabel = {
-          title: 'foo',
-        };
+      it('returns value of `name` or `title` property present in provided label param', async () => {
+        const customMockLabels = [
+          { title: 'Title with no name label' },
+          { name: 'Name Label', title: 'Title with name label' },
+        ];
+
+        wrapper = createComponent({
+          active: true,
+          config: {
+            ...mockLabelToken,
+            fetchLabels: jest.fn().mockResolvedValue({ data: customMockLabels }),
+          },
+          stubs: { Portal: true },
+        });
 
-        expect(wrapper.vm.getLabelName(mockLabel)).toBe(mockLabel.title);
+        await waitForPromises();
 
-        mockLabel = {
-          name: 'foo',
-        };
+        const suggestions = findSuggestions();
+        const indexWithTitle = defaultLabels.length;
+        const indexWithName = defaultLabels.length + 1;
 
-        expect(wrapper.vm.getLabelName(mockLabel)).toBe(mockLabel.name);
+        expect(suggestions.at(indexWithTitle).text()).toBe(customMockLabels[0].title);
+        expect(suggestions.at(indexWithName).text()).toBe(customMockLabels[1].name);
       });
     });
 
     describe('fetchLabels', () => {
-      it('calls `config.fetchLabels` with provided searchTerm param', () => {
-        jest.spyOn(wrapper.vm.config, 'fetchLabels');
-
-        wrapper.vm.fetchLabels('foo');
-
-        expect(wrapper.vm.config.fetchLabels).toHaveBeenCalledWith('foo');
-      });
+      describe('when request is successful', () => {
+        const searchTerm = 'foo';
+
+        beforeEach(async () => {
+          wrapper = createComponent({
+            config: {
+              fetchLabels: jest.fn().mockResolvedValue({ data: mockLabels }),
+            },
+          });
+          await triggerFetchLabels(searchTerm);
+        });
 
-      it('sets response to `labels` when request is succesful', () => {
-        jest.spyOn(wrapper.vm.config, 'fetchLabels').mockResolvedValue(mockLabels);
+        it('calls `config.fetchLabels` with provided searchTerm param', () => {
+          expect(findBaseToken().props('config').fetchLabels).toHaveBeenCalledWith(searchTerm);
+        });
 
-        wrapper.vm.fetchLabels('foo');
+        it('sets response to `labels`', () => {
+          expect(findBaseToken().props('suggestions')).toEqual(mockLabels);
+        });
 
-        return waitForPromises().then(() => {
-          expect(wrapper.vm.labels).toEqual(mockLabels);
+        it('sets `loading` to false when request completes', () => {
+          expect(findBaseToken().props('suggestionsLoading')).toBe(false);
         });
       });
 
-      it('calls `createAlert` with flash error message when request fails', () => {
-        jest.spyOn(wrapper.vm.config, 'fetchLabels').mockRejectedValue({});
-
-        wrapper.vm.fetchLabels('foo');
+      describe('when request fails', () => {
+        beforeEach(async () => {
+          wrapper = createComponent({
+            config: {
+              fetchLabels: jest.fn().mockRejectedValue({}),
+            },
+          });
+          await triggerFetchLabels();
+        });
 
-        return waitForPromises().then(() => {
+        it('calls `createAlert` with flash error message', () => {
           expect(createAlert).toHaveBeenCalledWith({
             message: 'There was a problem fetching labels.',
           });
         });
-      });
-
-      it('sets `loading` to false when request completes', () => {
-        jest.spyOn(wrapper.vm.config, 'fetchLabels').mockRejectedValue({});
-
-        wrapper.vm.fetchLabels('foo');
 
-        return waitForPromises().then(() => {
-          expect(wrapper.vm.loading).toBe(false);
+        it('sets `loading` to false when request completes', () => {
+          expect(findBaseToken().props('suggestionsLoading')).toBe(false);
         });
       });
     });
   });
 
   describe('template', () => {
-    const defaultLabels = OPTIONS_NONE_ANY;
-
     beforeEach(async () => {
-      wrapper = createComponent({ value: { data: `"${mockRegularLabel.title}"` } });
-
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData({
-        labels: mockLabels,
+      wrapper = createComponent({
+        value: { data: `"${mockRegularLabel.title}"` },
+        config: {
+          initialLabels: mockLabels,
+        },
       });
 
       await nextTick();
     });
 
     it('renders base-token component', () => {
-      const baseTokenEl = wrapper.findComponent(BaseToken);
+      const baseTokenEl = findBaseToken();
 
       expect(baseTokenEl.exists()).toBe(true);
       expect(baseTokenEl.props()).toMatchObject({
@@ -166,7 +188,7 @@ describe('LabelToken', () => {
     });
 
     it('renders token item when value is selected', () => {
-      const tokenSegments = wrapper.findAllComponents(GlFilteredSearchTokenSegment);
+      const tokenSegments = findTokenSegments();
 
       expect(tokenSegments).toHaveLength(3); // Label, =, "Foo Label"
       expect(tokenSegments.at(2).text()).toBe(`~${mockRegularLabel.title}`); // "Foo Label"
@@ -181,12 +203,12 @@ describe('LabelToken', () => {
         config: { ...mockLabelToken, defaultLabels },
         stubs: { Portal: true },
       });
-      const tokenSegments = wrapper.findAllComponents(GlFilteredSearchTokenSegment);
+      const tokenSegments = findTokenSegments();
       const suggestionsSegment = tokenSegments.at(2);
       suggestionsSegment.vm.$emit('activate');
       await nextTick();
 
-      const suggestions = wrapper.findAllComponents(GlFilteredSearchSuggestion);
+      const suggestions = findSuggestions();
 
       expect(suggestions).toHaveLength(defaultLabels.length);
       defaultLabels.forEach((label, index) => {
@@ -200,7 +222,7 @@ describe('LabelToken', () => {
         config: { ...mockLabelToken, defaultLabels: [] },
         stubs: { Portal: true },
       });
-      const tokenSegments = wrapper.findAllComponents(GlFilteredSearchTokenSegment);
+      const tokenSegments = findTokenSegments();
       const suggestionsSegment = tokenSegments.at(2);
       suggestionsSegment.vm.$emit('activate');
       await nextTick();
@@ -215,11 +237,10 @@ describe('LabelToken', () => {
         config: { ...mockLabelToken },
         stubs: { Portal: true },
       });
-      const tokenSegments = wrapper.findAllComponents(GlFilteredSearchTokenSegment);
+      const tokenSegments = findTokenSegments();
       const suggestionsSegment = tokenSegments.at(2);
       suggestionsSegment.vm.$emit('activate');
-
-      const suggestions = wrapper.findAllComponents(GlFilteredSearchSuggestion);
+      const suggestions = findSuggestions();
 
       expect(suggestions).toHaveLength(OPTIONS_NONE_ANY.length);
       OPTIONS_NONE_ANY.forEach((label, index) => {
@@ -234,7 +255,7 @@ describe('LabelToken', () => {
           input: mockInput,
         },
       });
-      wrapper.findComponent(BaseToken).vm.$emit('input', [{ data: 'mockData', operator: '=' }]);
+      findBaseToken().vm.$emit('input', [{ data: 'mockData', operator: '=' }]);
 
       expect(mockInput).toHaveBeenLastCalledWith([{ data: 'mockData', operator: '=' }]);
     });