Add latest changes from gitlab-org/gitlab@master

1 files changed, 70 insertions, 66 deletions

diff --git a/spec/frontend/sidebar/components/labels/labels_select_vue/dropdown_contents_labels_view_spec.js b/spec/frontend/sidebar/components/labels/labels_select_vue/dropdown_contents_labels_view_spec.js
index 1fa613d15d4..5c6358a94ab 100644
--- a/spec/frontend/sidebar/components/labels/labels_select_vue/dropdown_contents_labels_view_spec.js
+++ b/spec/frontend/sidebar/components/labels/labels_select_vue/dropdown_contents_labels_view_spec.js
@@ -81,8 +81,26 @@ describe('DropdownContentsLabelsView', () => {
     }
   };
 
-  describe('computed', () => {
-    describe('visibleLabels', () => {
+  describe('component', () => {
+    it('calls `focusInput` on searchInput field when the component appears', async () => {
+      findIntersectionObserver().vm.$emit('appear');
+
+      await nextTick();
+
+      expect(focusInputMock).toHaveBeenCalled();
+    });
+
+    it('removes loaded labels when the component disappears', async () => {
+      jest.spyOn(store, 'dispatch');
+
+      await findIntersectionObserver().vm.$emit('disappear');
+
+      expect(store.dispatch).toHaveBeenCalledWith(expect.anything(), []);
+    });
+  });
+
+  describe('labels', () => {
+    describe('when it is visible', () => {
       beforeEach(() => {
         createComponent(undefined, mountExtended);
         store.dispatch('receiveLabelsSuccess', mockLabels);
@@ -112,6 +130,29 @@ describe('DropdownContentsLabelsView', () => {
       });
     });
 
+    describe('when it is clicked', () => {
+      beforeEach(() => {
+        createComponent(undefined, mountExtended);
+        store.dispatch('receiveLabelsSuccess', mockLabels);
+      });
+
+      it('calls action `updateSelectedLabels` with provided `label` param', () => {
+        findLabelItems().at(0).findComponent(GlLink).vm.$emit('click');
+
+        expect(updateSelectedLabelsMock).toHaveBeenCalledWith(expect.anything(), [
+          { ...mockLabels[0], indeterminate: expect.anything(), set: expect.anything() },
+        ]);
+      });
+
+      it('calls action `toggleDropdownContents` when `state.allowMultiselect` is false', () => {
+        store.state.allowMultiselect = false;
+
+        findLabelItems().at(0).findComponent(GlLink).vm.$emit('click');
+
+        expect(toggleDropdownContentsMock).toHaveBeenCalled();
+      });
+    });
+
     describe('showNoMatchingResultsMessage', () => {
       it.each`
         searchKey | labels        | labelsDescription | returnValue
@@ -132,47 +173,37 @@ describe('DropdownContentsLabelsView', () => {
     });
   });
 
-  describe('methods', () => {
-    const fakePreventDefault = jest.fn();
+  describe('create label link', () => {
+    it('calls actions `receiveLabelsSuccess` with empty array and `toggleDropdownContentsCreateView`', async () => {
+      jest.spyOn(store, 'dispatch');
 
-    describe('handleComponentAppear', () => {
-      it('calls `focusInput` on searchInput field', async () => {
-        findIntersectionObserver().vm.$emit('appear');
+      await findCreateLabelLink().vm.$emit('click');
 
-        await nextTick();
-
-        expect(focusInputMock).toHaveBeenCalled();
-      });
+      expect(store.dispatch).toHaveBeenCalledWith('receiveLabelsSuccess', []);
+      expect(store.dispatch).toHaveBeenCalledWith('toggleDropdownContentsCreateView');
     });
+  });
 
-    describe('handleComponentDisappear', () => {
-      it('calls action `receiveLabelsSuccess` with empty array', async () => {
-        jest.spyOn(store, 'dispatch');
-
-        await findIntersectionObserver().vm.$emit('disappear');
+  describe('keyboard navigation', () => {
+    const fakePreventDefault = jest.fn();
 
-        expect(store.dispatch).toHaveBeenCalledWith(expect.anything(), []);
-      });
+    beforeEach(() => {
+      createComponent(undefined, mountExtended);
+      store.dispatch('receiveLabelsSuccess', mockLabels);
     });
 
-    describe('handleCreateLabelClick', () => {
-      it('calls actions `receiveLabelsSuccess` with empty array and `toggleDropdownContentsCreateView`', async () => {
-        jest.spyOn(store, 'dispatch');
+    describe('when the "down" key is pressed', () => {
+      it('highlights the item', async () => {
+        expect(findLabelItems().at(0).classes()).not.toContain('is-focused');
 
-        await findCreateLabelLink().vm.$emit('click');
+        await findLabelsList().trigger('keydown.down');
 
-        expect(store.dispatch).toHaveBeenCalledWith('receiveLabelsSuccess', []);
-        expect(store.dispatch).toHaveBeenCalledWith('toggleDropdownContentsCreateView');
+        expect(findLabelItems().at(0).classes()).toContain('is-focused');
       });
     });
 
-    describe('handleKeyDown', () => {
-      beforeEach(() => {
-        createComponent(undefined, mountExtended);
-        store.dispatch('receiveLabelsSuccess', mockLabels);
-      });
-
-      it('decreases `currentHighlightItem` value by 1 when Up arrow key is pressed', async () => {
+    describe('when the "up" arrow key is pressed', () => {
+      it('un-highlights the item', async () => {
         await setCurrentHighlightItem(1);
 
         expect(findLabelItems().at(1).classes()).toContain('is-focused');
@@ -181,16 +212,10 @@ describe('DropdownContentsLabelsView', () => {
 
         expect(findLabelItems().at(1).classes()).not.toContain('is-focused');
       });
+    });
 
-      it('increases `currentHighlightItem` value by 1 when Down arrow key is pressed', async () => {
-        expect(findLabelItems().at(0).classes()).not.toContain('is-focused');
-
-        await findLabelsList().trigger('keydown.down');
-
-        expect(findLabelItems().at(0).classes()).toContain('is-focused');
-      });
-
-      it('resets the search text when the Enter key is pressed', async () => {
+    describe('when the "enter" key is pressed', () => {
+      it('resets the search text', async () => {
         await setCurrentHighlightItem(1);
         await findSearchBoxByType().vm.$emit('input', 'bug');
         await findLabelsList().trigger('keydown.enter', { preventDefault: fakePreventDefault });
@@ -199,21 +224,23 @@ describe('DropdownContentsLabelsView', () => {
         expect(fakePreventDefault).toHaveBeenCalled();
       });
 
-      it('calls action `updateSelectedLabels` with currently highlighted label when Enter key is pressed', async () => {
+      it('calls action `updateSelectedLabels` with currently highlighted label', async () => {
         await setCurrentHighlightItem(2);
         await findLabelsList().trigger('keydown.enter', { preventDefault: fakePreventDefault });
 
         expect(updateSelectedLabelsMock).toHaveBeenCalledWith(expect.anything(), [mockLabels[2]]);
       });
+    });
 
-      it('calls action `toggleDropdownContents` when Esc key is pressed', async () => {
+    describe('when the "esc" key is pressed', () => {
+      it('calls action `toggleDropdownContents`', async () => {
         await setCurrentHighlightItem(1);
         await findLabelsList().trigger('keydown.esc');
 
         expect(toggleDropdownContentsMock).toHaveBeenCalled();
       });
 
-      it('calls action `scrollIntoViewIfNeeded` in next tick when esc key is pressed', async () => {
+      it('scrolls dropdown content into view', async () => {
         const containerTop = 500;
         const labelTop = 0;
 
@@ -227,29 +254,6 @@ describe('DropdownContentsLabelsView', () => {
         expect(findDropdownContent().element.scrollTop).toBe(labelTop - containerTop);
       });
     });
-
-    describe('handleLabelClick', () => {
-      beforeEach(() => {
-        createComponent(undefined, mountExtended);
-        store.dispatch('receiveLabelsSuccess', mockLabels);
-      });
-
-      it('calls action `updateSelectedLabels` with provided `label` param', () => {
-        findLabelItems().at(0).findComponent(GlLink).vm.$emit('click');
-
-        expect(updateSelectedLabelsMock).toHaveBeenCalledWith(expect.anything(), [
-          { ...mockLabels[0], indeterminate: expect.anything(), set: expect.anything() },
-        ]);
-      });
-
-      it('calls action `toggleDropdownContents` when `state.allowMultiselect` is false', () => {
-        store.state.allowMultiselect = false;
-
-        findLabelItems().at(0).findComponent(GlLink).vm.$emit('click');
-
-        expect(toggleDropdownContentsMock).toHaveBeenCalled();
-      });
-    });
   });
 
   describe('template', () => {