1 files changed, 39 insertions, 23 deletions
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_button_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_button_spec.js
index 214eb239432..68c9d26bb1a 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_button_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_button_spec.js
@@ -1,18 +1,19 @@
 import Vuex from 'vuex';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 
-import { GlIcon } from '@gitlab/ui';
+import { GlIcon, GlButton } from '@gitlab/ui';
 import DropdownButton from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_button.vue';
 
 import labelSelectModule from '~/vue_shared/components/sidebar/labels_select_vue/store';
 
 import { mockConfig } from './mock_data';
 
+let store;
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
 const createComponent = (initialState = mockConfig) => {
-  const store = new Vuex.Store(labelSelectModule());
+  store = new Vuex.Store(labelSelectModule());
 
   store.dispatch('setInitialState', initialState);
 
@@ -33,26 +34,32 @@ describe('DropdownButton', () => {
     wrapper.destroy();
   });
 
+  const findDropdownButton = () => wrapper.find(GlButton);
+  const findDropdownText = () => wrapper.find('.dropdown-toggle-text');
+  const findDropdownIcon = () => wrapper.find(GlIcon);
+
   describe('methods', () => {
     describe('handleButtonClick', () => {
-      it('calls action `toggleDropdownContents` and stops event propagation when `state.variant` is "standalone"', () => {
-        const event = {
-          stopPropagation: jest.fn(),
-        };
-        wrapper = createComponent({
-          ...mockConfig,
-          variant: 'standalone',
-        });
-
-        jest.spyOn(wrapper.vm, 'toggleDropdownContents');
-
-        wrapper.vm.handleButtonClick(event);
-
-        expect(wrapper.vm.toggleDropdownContents).toHaveBeenCalled();
-        expect(event.stopPropagation).toHaveBeenCalled();
-
-        wrapper.destroy();
-      });
+      it.each`
+        variant
+        ${'standalone'}
+        ${'embedded'}
+      `(
+        'toggles dropdown content and stops event propagation when `state.variant` is "$variant"',
+        ({ variant }) => {
+          const event = { stopPropagation: jest.fn() };
+
+          wrapper = createComponent({
+            ...mockConfig,
+            variant,
+          });
+
+          findDropdownButton().vm.$emit('click', event);
+
+          expect(store.state.showDropdownContents).toBe(true);
+          expect(event.stopPropagation).toHaveBeenCalled();
+        },
+      );
     });
   });
 
@@ -61,15 +68,24 @@ describe('DropdownButton', () => {
       expect(wrapper.is('gl-button-stub')).toBe(true);
     });
 
-    it('renders button text element', () => {
-      const dropdownTextEl = wrapper.find('.dropdown-toggle-text');
+    it('renders default button text element', () => {
+      const dropdownTextEl = findDropdownText();
 
       expect(dropdownTextEl.exists()).toBe(true);
       expect(dropdownTextEl.text()).toBe('Label');
     });
 
+    it('renders provided button text element', () => {
+      store.state.dropdownButtonText = 'Custom label';
+      const dropdownTextEl = findDropdownText();
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(dropdownTextEl.text()).toBe('Custom label');
+      });
+    });
+
     it('renders chevron icon element', () => {
-      const iconEl = wrapper.find(GlIcon);
+      const iconEl = findDropdownIcon();
 
       expect(iconEl.exists()).toBe(true);
       expect(iconEl.props('name')).toBe('chevron-down');