Add latest changes from gitlab-org/gitlab@master

3 files changed, 97 insertions, 59 deletions

diff --git a/spec/frontend/work_items/components/work_item_todos_spec.js b/spec/frontend/work_items/components/work_item_todos_spec.js
index 83b61a04298..454bd97bbee 100644
--- a/spec/frontend/work_items/components/work_item_todos_spec.js
+++ b/spec/frontend/work_items/components/work_item_todos_spec.js
@@ -1,14 +1,24 @@
 import { GlButton, GlIcon } from '@gitlab/ui';
+
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+
 import WorkItemTodos from '~/work_items/components/work_item_todos.vue';
-import { ADD, TODO_DONE_ICON, TODO_ADD_ICON } from '~/work_items/constants';
-import updateWorkItemMutation from '~/work_items/graphql/update_work_item.mutation.graphql';
+import {
+  TODO_DONE_ICON,
+  TODO_ADD_ICON,
+  TODO_PENDING_STATE,
+  TODO_DONE_STATE,
+} from '~/work_items/constants';
 import { updateGlobalTodoCount } from '~/sidebar/utils';
-import { workItemResponseFactory, updateWorkItemMutationResponseFactory } from '../mock_data';
+import createWorkItemTodosMutation from '~/work_items/graphql/create_work_item_todos.mutation.graphql';
+import markDoneWorkItemTodosMutation from '~/work_items/graphql/mark_done_work_item_todos.mutation.graphql';
+import workItemByIidQuery from '~/work_items/graphql/work_item_by_iid.query.graphql';
+
+import { workItemResponseFactory, getTodosMutationResponse } from '../mock_data';
 
 jest.mock('~/sidebar/utils');
 
@@ -22,27 +32,58 @@ describe('WorkItemTodo component', () => {
 
   const errorMessage = 'Failed to add item';
   const workItemQueryResponse = workItemResponseFactory({ canUpdate: true });
-  const successHandler = jest
+  const mockWorkItemId = workItemQueryResponse.data.workItem.id;
+  const mockWorkItemIid = workItemQueryResponse.data.workItem.iid;
+  const mockWorkItemFullpath = workItemQueryResponse.data.workItem.project.fullPath;
+
+  const createTodoSuccessHandler = jest
     .fn()
-    .mockResolvedValue(updateWorkItemMutationResponseFactory({ canUpdate: true }));
+    .mockResolvedValue(getTodosMutationResponse(TODO_PENDING_STATE));
+  const markDoneTodoSuccessHandler = jest
+    .fn()
+    .mockResolvedValue(getTodosMutationResponse(TODO_DONE_STATE));
   const failureHandler = jest.fn().mockRejectedValue(new Error(errorMessage));
 
-  const inputVariables = {
-    id: 'gid://gitlab/WorkItem/1',
-    currentUserTodosWidget: {
-      action: ADD,
-    },
+  const inputVariablesCreateTodos = {
+    targetId: 'gid://gitlab/WorkItem/1',
+  };
+
+  const inputVariablesMarkDoneTodos = {
+    id: 'gid://gitlab/Todo/1',
+  };
+
+  const mockCurrentUserTodos = {
+    id: 'gid://gitlab/Todo/1',
   };
 
   const createComponent = ({
-    currentUserTodosMock = [updateWorkItemMutation, successHandler],
+    mutation = createWorkItemTodosMutation,
+    currentUserTodosHandler = createTodoSuccessHandler,
     currentUserTodos = [],
   } = {}) => {
-    const handlers = [currentUserTodosMock];
+    const mockApolloProvider = createMockApollo([[mutation, currentUserTodosHandler]]);
+
+    mockApolloProvider.clients.defaultClient.cache.writeQuery({
+      query: workItemByIidQuery,
+      variables: { fullPath: mockWorkItemFullpath, iid: mockWorkItemIid },
+      data: {
+        ...workItemQueryResponse.data,
+        workspace: {
+          __typename: 'Project',
+          id: 'gid://gitlab/Project/1',
+          workItems: {
+            nodes: [workItemQueryResponse.data.workItem],
+          },
+        },
+      },
+    });
+
     wrapper = shallowMountExtended(WorkItemTodos, {
-      apolloProvider: createMockApollo(handlers),
+      apolloProvider: mockApolloProvider,
       propsData: {
-        workItem: workItemQueryResponse.data.workItem,
+        workItemId: mockWorkItemId,
+        workItemIid: mockWorkItemIid,
+        workItemFullpath: mockWorkItemFullpath,
         currentUserTodos,
       },
     });
@@ -58,35 +99,41 @@ describe('WorkItemTodo component', () => {
 
   it('renders mark as done button when there is pending item', () => {
     createComponent({
-      currentUserTodos: [
-        {
-          node: {
-            id: 'gid://gitlab/Todo/1',
-            state: 'pending',
-          },
-        },
-      ],
+      currentUserTodos: [mockCurrentUserTodos],
     });
 
     expect(findTodoIcon().props('name')).toEqual(TODO_DONE_ICON);
     expect(findTodoIcon().classes('gl-fill-blue-500')).toBe(true);
   });
 
-  it('calls update mutation when to do button is clicked', async () => {
-    createComponent();
+  it.each`
+    assertionName  | mutation                         | currentUserTodosHandler       | currentUserTodos          | inputVariables
+    ${'create'}    | ${createWorkItemTodosMutation}   | ${createTodoSuccessHandler}   | ${[]}                     | ${inputVariablesCreateTodos}
+    ${'mark done'} | ${markDoneWorkItemTodosMutation} | ${markDoneTodoSuccessHandler} | ${[mockCurrentUserTodos]} | ${inputVariablesMarkDoneTodos}
+  `(
+    'calls $assertionName todos mutation when to do button is toggled',
+    async ({ mutation, currentUserTodosHandler, currentUserTodos, inputVariables }) => {
+      createComponent({
+        mutation,
+        currentUserTodosHandler,
+        currentUserTodos,
+      });
 
-    findTodoWidget().vm.$emit('click');
+      findTodoWidget().vm.$emit('click');
 
-    await waitForPromises();
+      await waitForPromises();
 
-    expect(successHandler).toHaveBeenCalledWith({
-      input: inputVariables,
-    });
-    expect(updateGlobalTodoCount).toHaveBeenCalled();
-  });
+      expect(currentUserTodosHandler).toHaveBeenCalledWith({
+        input: inputVariables,
+      });
+      expect(updateGlobalTodoCount).toHaveBeenCalled();
+    },
+  );
 
   it('emits error when the update mutation fails', async () => {
-    createComponent({ currentUserTodosMock: [updateWorkItemMutation, failureHandler] });
+    createComponent({
+      currentUserTodosHandler: failureHandler,
+    });
 
     findTodoWidget().vm.$emit('click');
 
diff --git a/spec/frontend/work_items/mock_data.js b/spec/frontend/work_items/mock_data.js
index 41f3adb6703..b3e716a4d4a 100644
--- a/spec/frontend/work_items/mock_data.js
+++ b/spec/frontend/work_items/mock_data.js
@@ -629,14 +629,10 @@ export const workItemResponseFactory = ({
           ? {
               type: 'CURRENT_USER_TODOS',
               currentUserTodos: {
-                edges: [
+                nodes: [
                   {
-                    node: {
-                      id: 'gid://gitlab/Todo/1',
-                      state: 'pending',
-                      __typename: 'Todo',
-                    },
-                    __typename: 'TodoEdge',
+                    id: 'gid://gitlab/Todo/1',
+                    __typename: 'Todo',
                   },
                 ],
                 __typename: 'TodoConnection',
@@ -3256,3 +3252,17 @@ export const getAwardEmojiResponse = (toggledOn) => {
     },
   };
 };
+
+export const getTodosMutationResponse = (state) => {
+  return {
+    data: {
+      todoMutation: {
+        todo: {
+          id: 'gid://gitlab/Todo/1',
+          state,
+        },
+        errors: [],
+      },
+    },
+  };
+};
diff --git a/spec/frontend/work_items/utils_spec.js b/spec/frontend/work_items/utils_spec.js
index b8af5f10a5a..aa24b80cf08 100644
--- a/spec/frontend/work_items/utils_spec.js
+++ b/spec/frontend/work_items/utils_spec.js
@@ -1,9 +1,4 @@
-import {
-  autocompleteDataSources,
-  markdownPreviewPath,
-  getWorkItemTodoOptimisticResponse,
-} from '~/work_items/utils';
-import { workItemResponseFactory } from './mock_data';
+import { autocompleteDataSources, markdownPreviewPath } from '~/work_items/utils';
 
 describe('autocompleteDataSources', () => {
   beforeEach(() => {
@@ -30,17 +25,3 @@ describe('markdownPreviewPath', () => {
     );
   });
 });
-
-describe('getWorkItemTodoOptimisticResponse', () => {
-  it.each`
-    scenario     | pendingTodo | result
-    ${'empty'}   | ${false}    | ${0}
-    ${'present'} | ${true}     | ${1}
-  `('returns correct response when pending item list is $scenario', ({ pendingTodo, result }) => {
-    const workItem = workItemResponseFactory({ canUpdate: true });
-    expect(
-      getWorkItemTodoOptimisticResponse({ workItem, pendingTodo }).workItemUpdate.workItem
-        .widgets[0].currentUserTodos.edges.length,
-    ).toBe(result);
-  });
-});