Add latest changes from gitlab-org/gitlab@13-5-stable-eev13.5.4

2 files changed, 79 insertions, 94 deletions

diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js
index a9350bc059d..e8a126d8774 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js
@@ -1,9 +1,14 @@
 import Vuex from 'vuex';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 
-import { GlButton, GlLoadingIcon, GlSearchBoxByType, GlLink } from '@gitlab/ui';
+import {
+  GlIntersectionObserver,
+  GlButton,
+  GlLoadingIcon,
+  GlSearchBoxByType,
+  GlLink,
+} from '@gitlab/ui';
 import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/utils/keycodes';
-import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue';
 import DropdownContentsLabelsView from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue';
 import LabelItem from '~/vue_shared/components/sidebar/labels_select_vue/label_item.vue';
 
@@ -88,20 +93,25 @@ describe('DropdownContentsLabelsView', () => {
       });
     });
 
-    describe('showListContainer', () => {
+    describe('showNoMatchingResultsMessage', () => {
       it.each`
-        variant          | loading  | showList
-        ${'sidebar'}     | ${false} | ${true}
-        ${'sidebar'}     | ${true}  | ${false}
-        ${'not-sidebar'} | ${true}  | ${true}
-        ${'not-sidebar'} | ${false} | ${true}
+        searchKey | labels        | labelsDescription | returnValue
+        ${''}     | ${[]}         | ${'empty'}        | ${false}
+        ${'bug'}  | ${[]}         | ${'empty'}        | ${true}
+        ${''}     | ${mockLabels} | ${'not empty'}    | ${false}
+        ${'bug'}  | ${mockLabels} | ${'not empty'}    | ${false}
       `(
-        'returns $showList if `state.variant` is "$variant" and `labelsFetchInProgress` is $loading',
-        ({ variant, loading, showList }) => {
-          createComponent({ ...mockConfig, variant });
-          wrapper.vm.$store.state.labelsFetchInProgress = loading;
+        'returns $returnValue when searchKey is "$searchKey" and visibleLabels is $labelsDescription',
+        async ({ searchKey, labels, returnValue }) => {
+          wrapper.setData({
+            searchKey,
+          });
 
-          expect(wrapper.vm.showListContainer).toBe(showList);
+          wrapper.vm.$store.dispatch('receiveLabelsSuccess', labels);
+
+          await wrapper.vm.$nextTick();
+
+          expect(wrapper.vm.showNoMatchingResultsMessage).toBe(returnValue);
         },
       );
     });
@@ -118,6 +128,28 @@ describe('DropdownContentsLabelsView', () => {
       });
     });
 
+    describe('handleComponentDisappear', () => {
+      it('calls action `receiveLabelsSuccess` with empty array', () => {
+        jest.spyOn(wrapper.vm, 'receiveLabelsSuccess');
+
+        wrapper.vm.handleComponentDisappear();
+
+        expect(wrapper.vm.receiveLabelsSuccess).toHaveBeenCalledWith([]);
+      });
+    });
+
+    describe('handleCreateLabelClick', () => {
+      it('calls actions `receiveLabelsSuccess` with empty array and `toggleDropdownContentsCreateView`', () => {
+        jest.spyOn(wrapper.vm, 'receiveLabelsSuccess');
+        jest.spyOn(wrapper.vm, 'toggleDropdownContentsCreateView');
+
+        wrapper.vm.handleCreateLabelClick();
+
+        expect(wrapper.vm.receiveLabelsSuccess).toHaveBeenCalledWith([]);
+        expect(wrapper.vm.toggleDropdownContentsCreateView).toHaveBeenCalled();
+      });
+    });
+
     describe('handleKeyDown', () => {
       it('decreases `currentHighlightItem` value by 1 when Up arrow key is pressed', () => {
         wrapper.setData({
@@ -226,8 +258,8 @@ describe('DropdownContentsLabelsView', () => {
   });
 
   describe('template', () => {
-    it('renders component container element with class `labels-select-contents-list`', () => {
-      expect(wrapper.attributes('class')).toContain('labels-select-contents-list');
+    it('renders gl-intersection-observer as component root', () => {
+      expect(wrapper.find(GlIntersectionObserver).exists()).toBe(true);
     });
 
     it('renders gl-loading-icon component when `labelsFetchInProgress` prop is true', () => {
@@ -272,15 +304,11 @@ describe('DropdownContentsLabelsView', () => {
       expect(searchInputEl.attributes('autofocus')).toBe('true');
     });
 
-    it('renders smart-virtual-list element', () => {
-      expect(wrapper.find(SmartVirtualList).exists()).toBe(true);
-    });
-
     it('renders label elements for all labels', () => {
       expect(wrapper.findAll(LabelItem)).toHaveLength(mockLabels.length);
     });
 
-    it('renders label element with "is-focused" when value of `currentHighlightItem` is more than -1', () => {
+    it('renders label element with `highlight` set to true when value of `currentHighlightItem` is more than -1', () => {
       wrapper.setData({
         currentHighlightItem: 0,
       });
@@ -288,7 +316,7 @@ describe('DropdownContentsLabelsView', () => {
       return wrapper.vm.$nextTick(() => {
         const labelItemEl = findDropdownContent().find(LabelItem);
 
-        expect(labelItemEl.props('highlight')).toBe(true);
+        expect(labelItemEl.attributes('highlight')).toBe('true');
       });
     });
 
@@ -310,9 +338,12 @@ describe('DropdownContentsLabelsView', () => {
 
       return wrapper.vm.$nextTick(() => {
         const dropdownContent = findDropdownContent();
+        const loadingIcon = findLoadingIcon();
 
         expect(dropdownContent.exists()).toBe(true);
-        expect(dropdownContent.isVisible()).toBe(false);
+        expect(dropdownContent.isVisible()).toBe(true);
+        expect(loadingIcon.exists()).toBe(true);
+        expect(loadingIcon.isVisible()).toBe(true);
       });
     });
 
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/label_item_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/label_item_spec.js
index ad3f073fdf9..a6ec01ad7e1 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/label_item_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/label_item_spec.js
@@ -6,11 +6,15 @@ import { mockRegularLabel } from './mock_data';
 
 const mockLabel = { ...mockRegularLabel, set: true };
 
-const createComponent = ({ label = mockLabel, highlight = true } = {}) =>
+const createComponent = ({
+  label = mockLabel,
+  isLabelSet = mockLabel.set,
+  highlight = true,
+} = {}) =>
   shallowMount(LabelItem, {
     propsData: {
       label,
-      isLabelSet: label.set,
+      isLabelSet,
       highlight,
     },
   });
@@ -26,94 +30,44 @@ describe('LabelItem', () => {
     wrapper.destroy();
   });
 
-  describe('computed', () => {
-    describe('labelBoxStyle', () => {
-      it('returns an object containing `backgroundColor` based on `label` prop', () => {
-        expect(wrapper.vm.labelBoxStyle).toEqual(
-          expect.objectContaining({
-            backgroundColor: mockLabel.color,
-          }),
-        );
-      });
-    });
-  });
-
-  describe('watchers', () => {
-    describe('isLabelSet', () => {
-      it('sets value of `isLabelSet` to `isSet` data prop', () => {
-        expect(wrapper.vm.isSet).toBe(true);
-
-        wrapper.setProps({
-          isLabelSet: false,
-        });
-
-        return wrapper.vm.$nextTick(() => {
-          expect(wrapper.vm.isSet).toBe(false);
-        });
-      });
-    });
-  });
-
-  describe('methods', () => {
-    describe('handleClick', () => {
-      it('sets value of `isSet` data prop to opposite of its current value', () => {
-        wrapper.setData({
-          isSet: true,
-        });
-
-        wrapper.vm.handleClick();
-        expect(wrapper.vm.isSet).toBe(false);
-        wrapper.vm.handleClick();
-        expect(wrapper.vm.isSet).toBe(true);
-      });
-
-      it('emits event `clickLabel` on component with `label` prop as param', () => {
-        wrapper.vm.handleClick();
-
-        expect(wrapper.emitted('clickLabel')).toBeTruthy();
-        expect(wrapper.emitted('clickLabel')[0]).toEqual([mockLabel]);
-      });
-    });
-  });
-
   describe('template', () => {
     it('renders gl-link component', () => {
       expect(wrapper.find(GlLink).exists()).toBe(true);
     });
 
-    it('renders gl-link component with class `is-focused` when `highlight` prop is true', () => {
-      wrapper.setProps({
+    it('renders component root with class `is-focused` when `highlight` prop is true', () => {
+      const wrapperTemp = createComponent({
         highlight: true,
       });
 
-      return wrapper.vm.$nextTick(() => {
-        expect(wrapper.find(GlLink).classes()).toContain('is-focused');
-      });
+      expect(wrapperTemp.classes()).toContain('is-focused');
+
+      wrapperTemp.destroy();
     });
 
-    it('renders visible gl-icon component when `isSet` prop is true', () => {
-      wrapper.setData({
-        isSet: true,
+    it('renders visible gl-icon component when `isLabelSet` prop is true', () => {
+      const wrapperTemp = createComponent({
+        isLabelSet: true,
       });
 
-      return wrapper.vm.$nextTick(() => {
-        const iconEl = wrapper.find(GlIcon);
+      const iconEl = wrapperTemp.find(GlIcon);
 
-        expect(iconEl.isVisible()).toBe(true);
-        expect(iconEl.props('name')).toBe('mobile-issue-close');
-      });
+      expect(iconEl.isVisible()).toBe(true);
+      expect(iconEl.props('name')).toBe('mobile-issue-close');
+
+      wrapperTemp.destroy();
     });
 
-    it('renders visible span element as placeholder instead of gl-icon when `isSet` prop is false', () => {
-      wrapper.setData({
-        isSet: false,
+    it('renders visible span element as placeholder instead of gl-icon when `isLabelSet` prop is false', () => {
+      const wrapperTemp = createComponent({
+        isLabelSet: false,
       });
 
-      return wrapper.vm.$nextTick(() => {
-        const placeholderEl = wrapper.find('[data-testid="no-icon"]');
+      const placeholderEl = wrapperTemp.find('[data-testid="no-icon"]');
 
-        expect(placeholderEl.isVisible()).toBe(true);
-      });
+      expect(placeholderEl.isVisible()).toBe(true);
+
+      wrapperTemp.destroy();
     });
 
     it('renders label color element', () => {