Add latest changes from gitlab-org/gitlab@master

1 files changed, 48 insertions, 57 deletions

diff --git a/spec/frontend/boards/components/board_list_header_spec.js b/spec/frontend/boards/components/board_list_header_spec.js
index 9e65e900440..f8865bb6feb 100644
--- a/spec/frontend/boards/components/board_list_header_spec.js
+++ b/spec/frontend/boards/components/board_list_header_spec.js
@@ -1,10 +1,9 @@
-import { shallowMount } from '@vue/test-utils';
+import { GlDisclosureDropdown, GlDisclosureDropdownItem } from '@gitlab/ui';
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import Vuex from 'vuex';
 import createMockApollo from 'helpers/mock_apollo_helper';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { boardListQueryResponse, mockLabelList } from 'jest/boards/mock_data';
 import BoardListHeader from '~/boards/components/board_list_header.vue';
 import { ListType } from '~/boards/constants';
@@ -64,31 +63,33 @@ describe('Board List Header Component', () => {
 
     fakeApollo = createMockApollo([[listQuery, listQueryHandler]]);
 
-    wrapper = extendedWrapper(
-      shallowMount(BoardListHeader, {
-        apolloProvider: fakeApollo,
-        store,
-        propsData: {
-          list: listMock,
-        },
-        provide: {
-          boardId,
-          weightFeatureAvailable: false,
-          currentUserId,
-          isEpicBoard: false,
-          disabled: false,
-          ...injectedProps,
-        },
-      }),
-    );
+    wrapper = shallowMountExtended(BoardListHeader, {
+      apolloProvider: fakeApollo,
+      store,
+      propsData: {
+        list: listMock,
+      },
+      provide: {
+        boardId,
+        weightFeatureAvailable: false,
+        currentUserId,
+        isEpicBoard: false,
+        disabled: false,
+        ...injectedProps,
+      },
+      stubs: {
+        GlDisclosureDropdown,
+        GlDisclosureDropdownItem,
+      },
+    });
   };
 
+  const findDropdown = () => wrapper.findComponent(GlDisclosureDropdown);
   const isCollapsed = () => wrapper.vm.list.collapsed;
-
-  const findAddIssueButton = () => wrapper.findComponent({ ref: 'newIssueBtn' });
   const findTitle = () => wrapper.find('.board-title');
   const findCaret = () => wrapper.findByTestId('board-title-caret');
-  const findSettingsButton = () => wrapper.findComponent({ ref: 'settingsBtn' });
+  const findNewIssueButton = () => wrapper.findByTestId('newIssueBtn');
+  const findSettingsButton = () => wrapper.findByTestId('settingsBtn');
 
   describe('Add issue button', () => {
     const hasNoAddButton = [ListType.closed];
@@ -100,59 +101,49 @@ describe('Board List Header Component', () => {
       ListType.assignee,
     ];
 
-    it.each(hasNoAddButton)('does not render when List Type is `%s`', (listType) => {
+    it.each(hasNoAddButton)('does not render dropdown when List Type is `%s`', (listType) => {
       createComponent({ listType });
 
-      expect(findAddIssueButton().exists()).toBe(false);
+      expect(findDropdown().exists()).toBe(false);
     });
 
     it.each(hasAddButton)('does render when List Type is `%s`', (listType) => {
       createComponent({ listType });
 
-      expect(findAddIssueButton().exists()).toBe(true);
+      expect(findDropdown().exists()).toBe(true);
+      expect(findNewIssueButton().exists()).toBe(true);
     });
 
-    it('has a test for each list type', () => {
-      createComponent();
-
-      Object.values(ListType).forEach((value) => {
-        expect([...hasAddButton, ...hasNoAddButton]).toContain(value);
-      });
-    });
-
-    it('does not render when logged out', () => {
+    it('does not render dropdown when logged out', () => {
       createComponent({
         currentUserId: null,
       });
 
-      expect(findAddIssueButton().exists()).toBe(false);
+      expect(findDropdown().exists()).toBe(false);
     });
   });
 
   describe('Settings Button', () => {
-    describe('with disabled=true', () => {
-      const hasSettings = [
-        ListType.assignee,
-        ListType.milestone,
-        ListType.iteration,
-        ListType.label,
-      ];
-      const hasNoSettings = [ListType.backlog, ListType.closed];
-
-      it.each(hasSettings)('does render for List Type `%s` when disabled=true', (listType) => {
-        createComponent({ listType, injectedProps: { disabled: true } });
-
-        expect(findSettingsButton().exists()).toBe(true);
-      });
+    const hasSettings = [ListType.assignee, ListType.milestone, ListType.iteration, ListType.label];
 
-      it.each(hasNoSettings)(
-        'does not render for List Type `%s` when disabled=true',
-        (listType) => {
-          createComponent({ listType });
+    it.each(hasSettings)('does render for List Type `%s`', (listType) => {
+      createComponent({ listType });
 
-          expect(findSettingsButton().exists()).toBe(false);
-        },
-      );
+      expect(findDropdown().exists()).toBe(true);
+      expect(findSettingsButton().exists()).toBe(true);
+    });
+
+    it('does not render dropdown when ListType `closed`', () => {
+      createComponent({ listType: ListType.closed });
+
+      expect(findDropdown().exists()).toBe(false);
+    });
+
+    it('renders dropdown but not the Settings button when ListType `backlog`', () => {
+      createComponent({ listType: ListType.backlog });
+
+      expect(findDropdown().exists()).toBe(true);
+      expect(findSettingsButton().exists()).toBe(false);
     });
   });