1 files changed, 66 insertions, 38 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 8c17a974b39..1206450bbeb 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
@@ -20,22 +20,24 @@ jest.mock('~/lib/utils/common_utils', () => ({
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
-const createComponent = (config = mockConfig, slots = {}) =>
-  shallowMount(LabelsSelectRoot, {
-    localVue,
-    slots,
-    store: new Vuex.Store(labelsSelectModule()),
-    propsData: config,
-    stubs: {
-      'dropdown-contents': DropdownContents,
-    },
-  });
-
 describe('LabelsSelectRoot', () => {
   let wrapper;
+  let store;
+
+  const createComponent = (config = mockConfig, slots = {}) => {
+    wrapper = shallowMount(LabelsSelectRoot, {
+      localVue,
+      slots,
+      store,
+      propsData: config,
+      stubs: {
+        'dropdown-contents': DropdownContents,
+      },
+    });
+  };
 
   beforeEach(() => {
-    wrapper = createComponent();
+    store = new Vuex.Store(labelsSelectModule());
   });
 
   afterEach(() => {
@@ -45,6 +47,7 @@ describe('LabelsSelectRoot', () => {
   describe('methods', () => {
     describe('handleVuexActionDispatch', () => {
       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(
@@ -67,7 +70,7 @@ describe('LabelsSelectRoot', () => {
       });
 
       it('calls `handleDropdownClose` with state.labels filterd using `set` prop when dropdown variant is `embedded`', () => {
-        wrapper = createComponent({
+        createComponent({
           ...mockConfig,
           variant: 'embedded',
         });
@@ -95,6 +98,10 @@ describe('LabelsSelectRoot', () => {
     });
 
     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 }]);
 
@@ -112,6 +119,7 @@ describe('LabelsSelectRoot', () => {
 
     describe('handleCollapsedValueClick', () => {
       it('emits `toggleCollapse` event on component', () => {
+        createComponent();
         wrapper.vm.handleCollapsedValueClick();
 
         expect(wrapper.emitted().toggleCollapse).toBeTruthy();
@@ -121,6 +129,7 @@ describe('LabelsSelectRoot', () => {
 
   describe('template', () => {
     it('renders component with classes `labels-select-wrapper position-relative`', () => {
+      createComponent();
       expect(wrapper.attributes('class')).toContain('labels-select-wrapper position-relative');
     });
 
@@ -131,7 +140,7 @@ describe('LabelsSelectRoot', () => {
     `(
       'renders component root element with CSS class `$cssClass` when `state.variant` is "$variant"',
       ({ variant, cssClass }) => {
-        wrapper = createComponent({
+        createComponent({
           ...mockConfig,
           variant,
         });
@@ -142,57 +151,58 @@ describe('LabelsSelectRoot', () => {
       },
     );
 
-    it('renders `dropdown-value-collapsed` component when `allowLabelCreate` prop is `true`', () => {
+    it('renders `dropdown-value-collapsed` component when `allowLabelCreate` prop is `true`', async () => {
+      createComponent();
+      await wrapper.vm.$nextTick;
       expect(wrapper.find(DropdownValueCollapsed).exists()).toBe(true);
     });
 
-    it('renders `dropdown-title` component', () => {
+    it('renders `dropdown-title` component', async () => {
+      createComponent();
+      await wrapper.vm.$nextTick;
       expect(wrapper.find(DropdownTitle).exists()).toBe(true);
     });
 
-    it('renders `dropdown-value` component', () => {
-      const wrapperDropdownValue = createComponent(mockConfig, {
+    it('renders `dropdown-value` component', async () => {
+      createComponent(mockConfig, {
         default: 'None',
       });
+      await wrapper.vm.$nextTick;
 
-      return wrapperDropdownValue.vm.$nextTick(() => {
-        const valueComp = wrapperDropdownValue.find(DropdownValue);
+      const valueComp = wrapper.find(DropdownValue);
 
-        expect(valueComp.exists()).toBe(true);
-        expect(valueComp.text()).toBe('None');
-
-        wrapperDropdownValue.destroy();
-      });
+      expect(valueComp.exists()).toBe(true);
+      expect(valueComp.text()).toBe('None');
     });
 
-    it('renders `dropdown-button` component when `showDropdownButton` prop is `true`', () => {
+    it('renders `dropdown-button` component when `showDropdownButton` prop is `true`', async () => {
+      createComponent();
       wrapper.vm.$store.dispatch('toggleDropdownButton');
-
+      await wrapper.vm.$nextTick;
       expect(wrapper.find(DropdownButton).exists()).toBe(true);
     });
 
-    it('renders `dropdown-contents` component when `showDropdownButton` & `showDropdownContents` prop is `true`', () => {
+    it('renders `dropdown-contents` component when `showDropdownButton` & `showDropdownContents` prop is `true`', async () => {
+      createComponent();
       wrapper.vm.$store.dispatch('toggleDropdownContents');
-
-      return wrapper.vm.$nextTick(() => {
-        expect(wrapper.find(DropdownContents).exists()).toBe(true);
-      });
+      await wrapper.vm.$nextTick;
+      expect(wrapper.find(DropdownContents).exists()).toBe(true);
     });
 
     describe('sets content direction based on viewport', () => {
-      it('does not set direction when `state.variant` is not "embedded"', () => {
-        wrapper.vm.$store.dispatch('toggleDropdownContents');
+      it('does not set direction when `state.variant` is not "embedded"', async () => {
+        createComponent();
 
+        wrapper.vm.$store.dispatch('toggleDropdownContents');
         wrapper.vm.setContentIsOnViewport(wrapper.vm.$store.state);
+        await wrapper.vm.$nextTick;
 
-        return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.find(DropdownContents).props('renderOnTop')).toBe(false);
-        });
+        expect(wrapper.find(DropdownContents).props('renderOnTop')).toBe(false);
       });
 
       describe('when `state.variant` is "embedded"', () => {
         beforeEach(() => {
-          wrapper = createComponent({ ...mockConfig, variant: 'embedded' });
+          createComponent({ ...mockConfig, variant: 'embedded' });
           wrapper.vm.$store.dispatch('toggleDropdownContents');
         });
 
@@ -216,4 +226,22 @@ describe('LabelsSelectRoot', () => {
       });
     });
   });
+
+  it('calls toggleDropdownContents action when isEditing prop is changing to true', async () => {
+    createComponent();
+
+    jest.spyOn(store, 'dispatch').mockResolvedValue();
+    await wrapper.setProps({ isEditing: true });
+
+    expect(store.dispatch).toHaveBeenCalledWith('toggleDropdownContents');
+  });
+
+  it('does not call toggleDropdownContents action when isEditing prop is changing to false', async () => {
+    createComponent();
+
+    jest.spyOn(store, 'dispatch').mockResolvedValue();
+    await wrapper.setProps({ isEditing: false });
+
+    expect(store.dispatch).not.toHaveBeenCalled();
+  });
 });