Add latest changes from gitlab-org/gitlab@13-2-stable-ee

6 files changed, 87 insertions, 48 deletions

diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_button_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_button_spec.js
index d02d924bd2b..79851e5db05 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_button_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_button_spec.js
@@ -82,10 +82,9 @@ describe('DropdownButtonComponent', () => {
     });
 
     it('renders dropdown button icon', () => {
-      const dropdownIconEl = vm.$el.querySelector('i.fa');
+      const dropdownIconEl = vm.$el.querySelector('.dropdown-menu-toggle .gl-icon');
 
       expect(dropdownIconEl).not.toBeNull();
-      expect(dropdownIconEl.classList.contains('fa-chevron-down')).toBe(true);
     });
   });
 });
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js
index 035af946d75..510e537b1cd 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js
@@ -29,13 +29,11 @@ describe('DropdownSearchInputComponent', () => {
     });
 
     it('renders search icon element', () => {
-      expect(vm.$el.querySelector('.fa-search.dropdown-input-search')).not.toBeNull();
+      expect(vm.$el.querySelector('.dropdown-input-search')).not.toBeNull();
     });
 
     it('renders clear search icon element', () => {
-      expect(
-        vm.$el.querySelector('.fa-times.dropdown-input-clear.js-dropdown-input-clear'),
-      ).not.toBeNull();
+      expect(vm.$el.querySelector('.dropdown-input-clear.js-dropdown-input-clear')).not.toBeNull();
     });
   });
 });
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');
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js
index 1504e1521d3..9b01e0b9637 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js
@@ -44,6 +44,7 @@ const createComponent = (initialState = mockConfig) => {
 describe('DropdownContentsLabelsView', () => {
   let wrapper;
   let wrapperStandalone;
+  let wrapperEmbedded;
 
   beforeEach(() => {
     wrapper = createComponent();
@@ -51,11 +52,16 @@ describe('DropdownContentsLabelsView', () => {
       ...mockConfig,
       variant: 'standalone',
     });
+    wrapperEmbedded = createComponent({
+      ...mockConfig,
+      variant: 'embedded',
+    });
   });
 
   afterEach(() => {
     wrapper.destroy();
     wrapperStandalone.destroy();
+    wrapperEmbedded.destroy();
   });
 
   describe('computed', () => {
@@ -211,6 +217,10 @@ describe('DropdownContentsLabelsView', () => {
       expect(wrapperStandalone.find('.dropdown-title').exists()).toBe(false);
     });
 
+    it('renders dropdown title element when `state.variant` is "embedded"', () => {
+      expect(wrapperEmbedded.find('.dropdown-title').exists()).toBe(true);
+    });
+
     it('renders dropdown close button element', () => {
       const closeButtonEl = wrapper.find('.dropdown-title').find(GlButton);
 
@@ -291,5 +301,9 @@ describe('DropdownContentsLabelsView', () => {
     it('does not render footer list items when `state.variant` is "standalone"', () => {
       expect(wrapperStandalone.find('.dropdown-footer').exists()).toBe(false);
     });
+
+    it('renders footer list items when `state.variant` is "embedded"', () => {
+      expect(wrapperEmbedded.find('.dropdown-footer').exists()).toBe(true);
+    });
   });
 });
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 ee4e9090e5d..6e97b046be2 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
@@ -89,18 +89,23 @@ describe('LabelsSelectRoot', () => {
       expect(wrapper.attributes('class')).toContain('labels-select-wrapper position-relative');
     });
 
-    it('renders component root element with CSS class `is-standalone` when `state.variant` is "standalone"', () => {
-      const wrapperStandalone = createComponent({
-        ...mockConfig,
-        variant: 'standalone',
-      });
-
-      return wrapperStandalone.vm.$nextTick(() => {
-        expect(wrapperStandalone.classes()).toContain('is-standalone');
-
-        wrapperStandalone.destroy();
-      });
-    });
+    it.each`
+      variant         | cssClass
+      ${'standalone'} | ${'is-standalone'}
+      ${'embedded'}   | ${'is-embedded'}
+    `(
+      'renders component root element with CSS class `$cssClass` when `state.variant` is "$variant"',
+      ({ variant, cssClass }) => {
+        wrapper = createComponent({
+          ...mockConfig,
+          variant,
+        });
+
+        return wrapper.vm.$nextTick(() => {
+          expect(wrapper.classes()).toContain(cssClass);
+        });
+      },
+    );
 
     it('renders `dropdown-value-collapsed` component when `allowLabelCreate` prop is `true`', () => {
       expect(wrapper.find(DropdownValueCollapsed).exists()).toBe(true);
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/getters_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/getters_spec.js
index b866117efcf..52116f757c5 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/getters_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/getters_spec.js
@@ -2,13 +2,20 @@ import * as getters from '~/vue_shared/components/sidebar/labels_select_vue/stor
 
 describe('LabelsSelect Getters', () => {
   describe('dropdownButtonText', () => {
-    it('returns string "Label" when state.labels has no selected labels', () => {
-      const labels = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }];
-
-      expect(getters.dropdownButtonText({ labels }, { isDropdownVariantSidebar: true })).toBe(
-        'Label',
-      );
-    });
+    it.each`
+      labelType    | dropdownButtonText | expected
+      ${'default'} | ${''}              | ${'Label'}
+      ${'custom'}  | ${'Custom label'}  | ${'Custom label'}
+    `(
+      'returns $labelType text when state.labels has no selected labels',
+      ({ dropdownButtonText, expected }) => {
+        const labels = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }];
+        const selectedLabels = [];
+        const state = { labels, selectedLabels, dropdownButtonText };
+
+        expect(getters.dropdownButtonText(state, {})).toBe(expected);
+      },
+    );
 
     it('returns label title when state.labels has only 1 label', () => {
       const labels = [{ id: 1, title: 'Foobar', set: true }];