1 files changed, 101 insertions, 51 deletions
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_spec.js
index 3c2fd0c5acc..a1b40a891ec 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_spec.js
@@ -1,77 +1,127 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import Vuex from 'vuex';
+import { GlDropdown } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
 
 import { DropdownVariant } from '~/vue_shared/components/sidebar/labels_select_widget/constants';
 import DropdownContents from '~/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue';
-import labelsSelectModule from '~/vue_shared/components/sidebar/labels_select_widget/store';
-
-import { mockConfig, mockLabels } from './mock_data';
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
-const createComponent = (initialState = mockConfig, defaultProps = {}) => {
-  const store = new Vuex.Store(labelsSelectModule());
-
-  store.dispatch('setInitialState', initialState);
-
-  return shallowMount(DropdownContents, {
-    propsData: {
-      ...defaultProps,
-      labelsCreateTitle: 'test',
-      selectedLabels: mockLabels,
-      allowMultiselect: true,
-      labelsListTitle: 'Assign labels',
-      footerCreateLabelTitle: 'create',
-      footerManageLabelTitle: 'manage',
-    },
-    localVue,
-    store,
-  });
-};
+import DropdownContentsCreateView from '~/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue';
+import DropdownContentsLabelsView from '~/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue';
+
+import { mockLabels } from './mock_data';
 
 describe('DropdownContent', () => {
   let wrapper;
 
+  const createComponent = ({ props = {}, injected = {} } = {}) => {
+    wrapper = shallowMount(DropdownContents, {
+      propsData: {
+        labelsCreateTitle: 'test',
+        selectedLabels: mockLabels,
+        allowMultiselect: true,
+        labelsListTitle: 'Assign labels',
+        footerCreateLabelTitle: 'create',
+        footerManageLabelTitle: 'manage',
+        dropdownButtonText: 'Labels',
+        variant: 'sidebar',
+        ...props,
+      },
+      provide: {
+        allowLabelCreate: true,
+        labelsManagePath: 'foo/bar',
+        ...injected,
+      },
+      stubs: {
+        GlDropdown,
+      },
+    });
+  };
+
   beforeEach(() => {
-    wrapper = createComponent();
+    createComponent();
   });
 
   afterEach(() => {
     wrapper.destroy();
   });
 
-  describe('computed', () => {
-    describe('dropdownContentsView', () => {
-      it('returns string "dropdown-contents-create-view" when `showDropdownContentsCreateView` prop is `true`', () => {
-        wrapper.vm.$store.dispatch('toggleDropdownContentsCreateView');
+  const findDropdownFooter = () => wrapper.find('[data-testid="dropdown-footer"]');
+  const findCreateLabelButton = () => wrapper.find('[data-testid="create-label-button"]');
+  const findGoBackButton = () => wrapper.find('[data-testid="go-back-button"]');
 
-        expect(wrapper.vm.dropdownContentsView).toBe('dropdown-contents-create-view');
-      });
+  describe('Create view', () => {
+    beforeEach(() => {
+      wrapper.vm.toggleDropdownContentsCreateView();
+    });
 
-      it('returns string "dropdown-contents-labels-view" when `showDropdownContentsCreateView` prop is `false`', () => {
-        expect(wrapper.vm.dropdownContentsView).toBe('dropdown-contents-labels-view');
-      });
+    it('renders create view when `showDropdownContentsCreateView` prop is `true`', () => {
+      expect(wrapper.findComponent(DropdownContentsCreateView).exists()).toBe(true);
+    });
+
+    it('does not render footer', () => {
+      expect(findDropdownFooter().exists()).toBe(false);
+    });
+
+    it('does not render create label button', () => {
+      expect(findCreateLabelButton().exists()).toBe(false);
+    });
+
+    it('renders go back button', () => {
+      expect(findGoBackButton().exists()).toBe(true);
     });
   });
 
-  describe('template', () => {
-    it('renders component container element with class `labels-select-dropdown-contents` and no styles', () => {
-      expect(wrapper.attributes('class')).toContain('labels-select-dropdown-contents');
-      expect(wrapper.attributes('style')).toBeUndefined();
+  describe('Labels view', () => {
+    it('renders labels view when `showDropdownContentsCreateView` when `showDropdownContentsCreateView` prop is `false`', () => {
+      expect(wrapper.findComponent(DropdownContentsLabelsView).exists()).toBe(true);
     });
 
-    describe('when `renderOnTop` is true', () => {
-      it.each`
-        variant                       | expected
-        ${DropdownVariant.Sidebar}    | ${'bottom: 3rem'}
-        ${DropdownVariant.Standalone} | ${'bottom: 2rem'}
-        ${DropdownVariant.Embedded}   | ${'bottom: 2rem'}
-      `('renders upward for $variant variant', ({ variant, expected }) => {
-        wrapper = createComponent({ ...mockConfig, variant }, { renderOnTop: true });
+    it('renders footer on sidebar dropdown', () => {
+      expect(findDropdownFooter().exists()).toBe(true);
+    });
+
+    it('does not render footer on standalone dropdown', () => {
+      createComponent({ props: { variant: DropdownVariant.Standalone } });
+
+      expect(findDropdownFooter().exists()).toBe(false);
+    });
 
-        expect(wrapper.attributes('style')).toContain(expected);
+    it('renders footer on embedded dropdown', () => {
+      createComponent({ props: { variant: DropdownVariant.Embedded } });
+
+      expect(findDropdownFooter().exists()).toBe(true);
+    });
+
+    it('does not render go back button', () => {
+      expect(findGoBackButton().exists()).toBe(false);
+    });
+
+    it('does not render create label button if `allowLabelCreate` is false', () => {
+      createComponent({ injected: { allowLabelCreate: false } });
+
+      expect(findCreateLabelButton().exists()).toBe(false);
+    });
+
+    describe('when `allowLabelCreate` is true', () => {
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('renders create label button', () => {
+        expect(findCreateLabelButton().exists()).toBe(true);
       });
+
+      it('triggers `toggleDropdownContent` method on create label button click', () => {
+        jest.spyOn(wrapper.vm, 'toggleDropdownContent').mockImplementation(() => {});
+        findCreateLabelButton().trigger('click');
+
+        expect(wrapper.vm.toggleDropdownContent).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('template', () => {
+    it('renders component container element with classes `gl-w-full gl-mt-2` and no styles', () => {
+      expect(wrapper.attributes('class')).toContain('gl-w-full gl-mt-2');
+      expect(wrapper.attributes('style')).toBeUndefined();
     });
   });
 });