Add latest changes from gitlab-org/gitlab@master

3 files changed, 67 insertions, 41 deletions

diff --git a/spec/frontend/boards/components/board_list_header_spec.js b/spec/frontend/boards/components/board_list_header_spec.js
index f30e3792435..7472eeb4396 100644
--- a/spec/frontend/boards/components/board_list_header_spec.js
+++ b/spec/frontend/boards/components/board_list_header_spec.js
@@ -1,5 +1,6 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 
 import { mockLabelList } from 'jest/boards/mock_data';
 import BoardListHeader from '~/boards/components/board_list_header.vue';
@@ -14,6 +15,7 @@ describe('Board List Header Component', () => {
   let store;
 
   const updateListSpy = jest.fn();
+  const toggleListCollapsedSpy = jest.fn();
 
   afterEach(() => {
     wrapper.destroy();
@@ -43,38 +45,39 @@ describe('Board List Header Component', () => {
 
     if (withLocalStorage) {
       localStorage.setItem(
-        `boards.${boardId}.${listMock.listType}.${listMock.id}.expanded`,
-        (!collapsed).toString(),
+        `boards.${boardId}.${listMock.listType}.${listMock.id}.collapsed`,
+        collapsed.toString(),
       );
     }
 
     store = new Vuex.Store({
       state: {},
-      actions: { updateList: updateListSpy },
+      actions: { updateList: updateListSpy, toggleListCollapsed: toggleListCollapsedSpy },
       getters: {},
     });
 
-    wrapper = shallowMount(BoardListHeader, {
-      store,
-      localVue,
-      propsData: {
-        disabled: false,
-        list: listMock,
-      },
-      provide: {
-        boardId,
-        weightFeatureAvailable: false,
-        currentUserId,
-      },
-    });
+    wrapper = extendedWrapper(
+      shallowMount(BoardListHeader, {
+        store,
+        localVue,
+        propsData: {
+          disabled: false,
+          list: listMock,
+        },
+        provide: {
+          boardId,
+          weightFeatureAvailable: false,
+          currentUserId,
+        },
+      }),
+    );
   };
 
   const isCollapsed = () => wrapper.vm.list.collapsed;
-  const isExpanded = () => !isCollapsed;
 
   const findAddIssueButton = () => wrapper.find({ ref: 'newIssueBtn' });
   const findTitle = () => wrapper.find('.board-title');
-  const findCaret = () => wrapper.find('.board-title-caret');
+  const findCaret = () => wrapper.findByTestId('board-title-caret');
 
   describe('Add issue button', () => {
     const hasNoAddButton = [ListType.closed];
@@ -114,40 +117,29 @@ describe('Board List Header Component', () => {
   });
 
   describe('expanding / collapsing the column', () => {
-    it('does not collapse when clicking the header', async () => {
+    it('should display collapse icon when column is expanded', async () => {
       createComponent();
 
-      expect(isCollapsed()).toBe(false);
-
-      wrapper.find('[data-testid="board-list-header"]').trigger('click');
+      const icon = findCaret();
 
-      await wrapper.vm.$nextTick();
-
-      expect(isCollapsed()).toBe(false);
+      expect(icon.props('icon')).toBe('chevron-right');
     });
 
-    it('collapses expanded Column when clicking the collapse icon', async () => {
-      createComponent();
-
-      expect(isCollapsed()).toBe(false);
-
-      findCaret().vm.$emit('click');
+    it('should display expand icon when column is collapsed', async () => {
+      createComponent({ collapsed: true });
 
-      await wrapper.vm.$nextTick();
+      const icon = findCaret();
 
-      expect(isCollapsed()).toBe(true);
+      expect(icon.props('icon')).toBe('chevron-down');
     });
 
-    it('expands collapsed Column when clicking the expand icon', async () => {
-      createComponent({ collapsed: true });
-
-      expect(isCollapsed()).toBe(true);
+    it('should dispatch toggleListCollapse when clicking the collapse icon', async () => {
+      createComponent();
 
       findCaret().vm.$emit('click');
 
       await wrapper.vm.$nextTick();
-
-      expect(isCollapsed()).toBe(false);
+      expect(toggleListCollapsedSpy).toHaveBeenCalledTimes(1);
     });
 
     it("when logged in it calls list update and doesn't set localStorage", async () => {
@@ -157,7 +149,7 @@ describe('Board List Header Component', () => {
       await wrapper.vm.$nextTick();
 
       expect(updateListSpy).toHaveBeenCalledTimes(1);
-      expect(localStorage.getItem(`${wrapper.vm.uniqueKey}.expanded`)).toBe(null);
+      expect(localStorage.getItem(`${wrapper.vm.uniqueKey}.collapsed`)).toBe(null);
     });
 
     it("when logged out it doesn't call list update and sets localStorage", async () => {
@@ -167,7 +159,7 @@ describe('Board List Header Component', () => {
       await wrapper.vm.$nextTick();
 
       expect(updateListSpy).not.toHaveBeenCalled();
-      expect(localStorage.getItem(`${wrapper.vm.uniqueKey}.expanded`)).toBe(String(isExpanded()));
+      expect(localStorage.getItem(`${wrapper.vm.uniqueKey}.collapsed`)).toBe(String(isCollapsed()));
     });
   });
 
diff --git a/spec/frontend/boards/stores/actions_spec.js b/spec/frontend/boards/stores/actions_spec.js
index 622401c1c09..9e1b5018cc1 100644
--- a/spec/frontend/boards/stores/actions_spec.js
+++ b/spec/frontend/boards/stores/actions_spec.js
@@ -452,6 +452,22 @@ describe('updateList', () => {
   });
 });
 
+describe('toggleListCollapsed', () => {
+  it('should commit TOGGLE_LIST_COLLAPSED mutation', async () => {
+    const payload = { listId: 'gid://gitlab/List/1', collapsed: true };
+    await testAction({
+      action: actions.toggleListCollapsed,
+      payload,
+      expectedMutations: [
+        {
+          type: types.TOGGLE_LIST_COLLAPSED,
+          payload,
+        },
+      ],
+    });
+  });
+});
+
 describe('removeList', () => {
   let state;
   const list = mockLists[0];
diff --git a/spec/frontend/boards/stores/mutations_spec.js b/spec/frontend/boards/stores/mutations_spec.js
index 3a94bd9160f..29a205e2ffb 100644
--- a/spec/frontend/boards/stores/mutations_spec.js
+++ b/spec/frontend/boards/stores/mutations_spec.js
@@ -202,6 +202,24 @@ describe('Board Store Mutations', () => {
     });
   });
 
+  describe('TOGGLE_LIST_COLLAPSED', () => {
+    it('updates collapsed attribute of list in boardLists state', () => {
+      const listId = 'gid://gitlab/List/1';
+      state = {
+        ...state,
+        boardLists: {
+          [listId]: mockLists[0],
+        },
+      };
+
+      expect(state.boardLists[listId].collapsed).toEqual(false);
+
+      mutations.TOGGLE_LIST_COLLAPSED(state, { listId, collapsed: true });
+
+      expect(state.boardLists[listId].collapsed).toEqual(true);
+    });
+  });
+
   describe('REMOVE_LIST', () => {
     it('removes list from boardLists', () => {
       const [list, secondList] = mockLists;