Add latest changes from gitlab-org/gitlab@master

3 files changed, 82 insertions, 11 deletions

diff --git a/spec/frontend/boards/components/board_list_header_spec.js b/spec/frontend/boards/components/board_list_header_spec.js
index 0f91d2315cf..d4489b3c535 100644
--- a/spec/frontend/boards/components/board_list_header_spec.js
+++ b/spec/frontend/boards/components/board_list_header_spec.js
@@ -4,8 +4,13 @@ import VueApollo from 'vue-apollo';
 import Vuex from 'vuex';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import { boardListQueryResponse, mockLabelList } from 'jest/boards/mock_data';
+import {
+  boardListQueryResponse,
+  mockLabelList,
+  updateBoardListResponse,
+} from 'jest/boards/mock_data';
 import BoardListHeader from '~/boards/components/board_list_header.vue';
+import updateBoardListMutation from '~/boards/graphql/board_list_update.mutation.graphql';
 import { ListType } from '~/boards/constants';
 import listQuery from 'ee_else_ce/boards/graphql/board_lists_deferred.query.graphql';
 
@@ -19,6 +24,8 @@ describe('Board List Header Component', () => {
 
   const updateListSpy = jest.fn();
   const toggleListCollapsedSpy = jest.fn();
+  const mockClientToggleListCollapsedResolver = jest.fn();
+  const updateListHandler = jest.fn().mockResolvedValue(updateBoardListResponse);
 
   afterEach(() => {
     fakeApollo = null;
@@ -34,7 +41,7 @@ describe('Board List Header Component', () => {
     listQueryHandler = jest.fn().mockResolvedValue(boardListQueryResponse()),
     injectedProps = {},
   } = {}) => {
-    const boardId = '1';
+    const boardId = 'gid://gitlab/Board/1';
 
     const listMock = {
       ...mockLabelList,
@@ -58,8 +65,17 @@ describe('Board List Header Component', () => {
       state: {},
       actions: { updateList: updateListSpy, toggleListCollapsed: toggleListCollapsedSpy },
     });
-
-    fakeApollo = createMockApollo([[listQuery, listQueryHandler]]);
+    fakeApollo = createMockApollo(
+      [
+        [listQuery, listQueryHandler],
+        [updateBoardListMutation, updateListHandler],
+      ],
+      {
+        Mutation: {
+          clientToggleListCollapsed: mockClientToggleListCollapsedResolver,
+        },
+      },
+    );
 
     wrapper = shallowMountExtended(BoardListHeader, {
       apolloProvider: fakeApollo,
@@ -67,9 +83,9 @@ describe('Board List Header Component', () => {
       propsData: {
         list: listMock,
         filterParams: {},
+        boardId,
       },
       provide: {
-        boardId,
         weightFeatureAvailable: false,
         currentUserId,
         isEpicBoard: false,
@@ -191,7 +207,9 @@ describe('Board List Header Component', () => {
       await nextTick();
 
       expect(updateListSpy).not.toHaveBeenCalled();
-      expect(localStorage.getItem(`${wrapper.vm.uniqueKey}.collapsed`)).toBe(String(isCollapsed()));
+      expect(localStorage.getItem(`${wrapper.vm.uniqueKey}.collapsed`)).toBe(
+        String(!isCollapsed()),
+      );
     });
   });
 
@@ -214,4 +232,44 @@ describe('Board List Header Component', () => {
       expect(findTitle().classes()).toContain('gl-cursor-grab');
     });
   });
+
+  describe('Apollo boards', () => {
+    beforeEach(async () => {
+      createComponent({ listType: ListType.label, injectedProps: { isApolloBoard: true } });
+      await nextTick();
+    });
+
+    it('set active board item on client when clicking on card', async () => {
+      findCaret().vm.$emit('click');
+      await nextTick();
+
+      expect(mockClientToggleListCollapsedResolver).toHaveBeenCalledWith(
+        {},
+        {
+          list: mockLabelList,
+          collapsed: true,
+        },
+        expect.anything(),
+        expect.anything(),
+      );
+    });
+
+    it('does not call update list mutation when user is not logged in', async () => {
+      createComponent({ currentUserId: null, injectedProps: { isApolloBoard: true } });
+
+      findCaret().vm.$emit('click');
+      await nextTick();
+
+      expect(updateListHandler).not.toHaveBeenCalled();
+    });
+
+    it('calls update list mutation when user is logged in', async () => {
+      createComponent({ currentUserId: 1, injectedProps: { isApolloBoard: true } });
+
+      findCaret().vm.$emit('click');
+      await nextTick();
+
+      expect(updateListHandler).toHaveBeenCalledWith({ listId: mockLabelList.id, collapsed: true });
+    });
+  });
 });
diff --git a/spec/frontend/boards/mock_data.js b/spec/frontend/boards/mock_data.js
index 832e24d477b..d9baf88c624 100644
--- a/spec/frontend/boards/mock_data.js
+++ b/spec/frontend/boards/mock_data.js
@@ -989,4 +989,12 @@ export const updateEpicTitleResponse = {
   },
 };
 
+export const updateBoardListResponse = {
+  data: {
+    updateBoardList: {
+      list: mockList,
+    },
+  },
+};
+
 export const DEFAULT_COLOR = '#1068bf';
diff --git a/spec/frontend/lib/utils/datetime/date_format_utility_spec.js b/spec/frontend/lib/utils/datetime/date_format_utility_spec.js
index a83b0ed9fbe..6b515e9f96a 100644
--- a/spec/frontend/lib/utils/datetime/date_format_utility_spec.js
+++ b/spec/frontend/lib/utils/datetime/date_format_utility_spec.js
@@ -136,11 +136,16 @@ describe('formatTimeAsSummary', () => {
 
 describe('durationTimeFormatted', () => {
   it.each`
-    duration | expectedOutput
-    ${87}    | ${'00:01:27'}
-    ${141}   | ${'00:02:21'}
-    ${12}    | ${'00:00:12'}
-    ${60}    | ${'00:01:00'}
+    duration                        | expectedOutput
+    ${0}                            | ${'00:00:00'}
+    ${12}                           | ${'00:00:12'}
+    ${60}                           | ${'00:01:00'}
+    ${60 + 27}                      | ${'00:01:27'}
+    ${120 + 21}                     | ${'00:02:21'}
+    ${4 * 60 * 60 + 25 * 60 + 37}   | ${'04:25:37'}
+    ${35 * 60 * 60 + 3 * 60 + 7}    | ${'35:03:07'}
+    ${-60}                          | ${'-00:01:00'}
+    ${-(35 * 60 * 60 + 3 * 60 + 7)} | ${'-35:03:07'}
   `('returns $expectedOutput when provided $duration', ({ duration, expectedOutput }) => {
     expect(utils.durationTimeFormatted(duration)).toBe(expectedOutput);
   });