1 files changed, 25 insertions, 40 deletions

diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/labels_select_root_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/labels_select_root_spec.js
index 31819d0e2f7..c150410ff8e 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/labels_select_root_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/labels_select_root_spec.js
@@ -46,9 +46,15 @@ describe('LabelsSelectRoot', () => {
 
   describe('methods', () => {
     describe('handleVuexActionDispatch', () => {
+      const touchedLabels = [
+        {
+          id: 2,
+          touched: true,
+        },
+      ];
+
       it('calls `handleDropdownClose` when params `action.type` is `toggleDropdownContents` and state has `showDropdownButton` & `showDropdownContents` props `false`', () => {
         createComponent();
-        jest.spyOn(wrapper.vm, 'handleDropdownClose').mockImplementation();
 
         wrapper.vm.handleVuexActionDispatch(
           { type: 'toggleDropdownContents' },
@@ -59,14 +65,12 @@ describe('LabelsSelectRoot', () => {
           },
         );
 
-        expect(wrapper.vm.handleDropdownClose).toHaveBeenCalledWith(
-          expect.arrayContaining([
-            {
-              id: 2,
-              touched: true,
-            },
-          ]),
-        );
+        // We're utilizing `onDropdownClose` event emitted from the component to always include `touchedLabels`
+        // while the first param of the method is the labels list which were added/removed.
+        expect(wrapper.emitted('updateSelectedLabels')).toBeTruthy();
+        expect(wrapper.emitted('updateSelectedLabels')[0]).toEqual([touchedLabels]);
+        expect(wrapper.emitted('onDropdownClose')).toBeTruthy();
+        expect(wrapper.emitted('onDropdownClose')[0]).toEqual([touchedLabels]);
       });
 
       it('calls `handleDropdownClose` with state.labels filterd using `set` prop when dropdown variant is `embedded`', () => {
@@ -75,8 +79,6 @@ describe('LabelsSelectRoot', () => {
           variant: 'embedded',
         });
 
-        jest.spyOn(wrapper.vm, 'handleDropdownClose').mockImplementation();
-
         wrapper.vm.handleVuexActionDispatch(
           { type: 'toggleDropdownContents' },
           {
@@ -86,34 +88,17 @@ describe('LabelsSelectRoot', () => {
           },
         );
 
-        expect(wrapper.vm.handleDropdownClose).toHaveBeenCalledWith(
-          expect.arrayContaining([
+        expect(wrapper.emitted('updateSelectedLabels')).toBeTruthy();
+        expect(wrapper.emitted('updateSelectedLabels')[0]).toEqual([
+          [
             {
               id: 2,
               set: true,
             },
-          ]),
-        );
-      });
-    });
-
-    describe('handleDropdownClose', () => {
-      beforeEach(() => {
-        createComponent();
-      });
-
-      it('emits `updateSelectedLabels` & `onDropdownClose` events on component when provided `labels` param is not empty', () => {
-        wrapper.vm.handleDropdownClose([{ id: 1 }, { id: 2 }]);
-
-        expect(wrapper.emitted().updateSelectedLabels).toBeTruthy();
-        expect(wrapper.emitted().onDropdownClose).toBeTruthy();
-      });
-
-      it('emits only `onDropdownClose` event on component when provided `labels` param is empty', () => {
-        wrapper.vm.handleDropdownClose([]);
-
-        expect(wrapper.emitted().updateSelectedLabels).toBeFalsy();
-        expect(wrapper.emitted().onDropdownClose).toBeTruthy();
+          ],
+        ]);
+        expect(wrapper.emitted('onDropdownClose')).toBeTruthy();
+        expect(wrapper.emitted('onDropdownClose')[0]).toEqual([[]]);
       });
     });
 
@@ -152,13 +137,13 @@ describe('LabelsSelectRoot', () => {
 
     it('renders `dropdown-value-collapsed` component when `allowLabelCreate` prop is `true`', async () => {
       createComponent();
-      await nextTick;
+      await nextTick();
       expect(wrapper.find(DropdownValueCollapsed).exists()).toBe(true);
     });
 
     it('renders `dropdown-title` component', async () => {
       createComponent();
-      await nextTick;
+      await nextTick();
       expect(wrapper.find(DropdownTitle).exists()).toBe(true);
     });
 
@@ -166,7 +151,7 @@ describe('LabelsSelectRoot', () => {
       createComponent(mockConfig, {
         default: 'None',
       });
-      await nextTick;
+      await nextTick();
 
       const valueComp = wrapper.find(DropdownValue);
 
@@ -177,14 +162,14 @@ describe('LabelsSelectRoot', () => {
     it('renders `dropdown-button` component when `showDropdownButton` prop is `true`', async () => {
       createComponent();
       wrapper.vm.$store.dispatch('toggleDropdownButton');
-      await nextTick;
+      await nextTick();
       expect(wrapper.find(DropdownButton).exists()).toBe(true);
     });
 
     it('renders `dropdown-contents` component when `showDropdownButton` & `showDropdownContents` prop is `true`', async () => {
       createComponent();
       wrapper.vm.$store.dispatch('toggleDropdownContents');
-      await nextTick;
+      await nextTick();
       expect(wrapper.find(DropdownContents).exists()).toBe(true);
     });