Merge branch 'alert-todo-quaility' into 'master'

Alert todo GraphQL quality

See merge request gitlab-org/gitlab!40097

app/assets/javascripts/alert_management/components/sidebar/sidebar_todo.vue

 <script>
 import { s__ } from '~/locale';
 import Todo from '~/sidebar/components/todo_toggle/todo.vue';
-import createAlertTodo from '../../graphql/mutations/alert_todo_create.mutation.graphql';
-import todoMarkDone from '../../graphql/mutations/alert_todo_mark_done.mutation.graphql';
+import createAlertTodoMutation from '../../graphql/mutations/alert_todo_create.mutation.graphql';
+import todoMarkDoneMutation from '~/graphql_shared/mutations/todo_mark_done.mutation.graphql';
 import alertQuery from '../../graphql/queries/details.query.graphql';
 
 export default {
@@ -66,7 +66,7 @@ export default {
       this.isUpdating = true;
       return this.$apollo
         .mutate({
-          mutation: createAlertTodo,
+          mutation: createAlertTodoMutation,
           variables: {
             iid: this.alert.iid,
             projectPath: this.projectPath,
@@ -89,7 +89,7 @@ export default {
       this.isUpdating = true;
       return this.$apollo
         .mutate({
-          mutation: todoMarkDone,
+          mutation: todoMarkDoneMutation,
           variables: {
             id: this.firstToDoId,
           },

spec/frontend/alert_management/components/alert_management_sidebar_todo_spec.js

 import { mount } from '@vue/test-utils';
 import SidebarTodo from '~/alert_management/components/sidebar/sidebar_todo.vue';
-import AlertMarkTodo from '~/alert_management/graphql/mutations/alert_todo_create.mutation.graphql';
+import createAlertTodoMutation from '~/alert_management/graphql/mutations/alert_todo_create.mutation.graphql';
+import todoMarkDoneMutation from '~/graphql_shared/mutations/todo_mark_done.mutation.graphql';
 import mockAlerts from '../mocks/alerts.json';
 
 const mockAlert = mockAlerts[0];
@@ -61,14 +62,14 @@ describe('Alert Details Sidebar To Do', () => {
         expect(findToDoButton().text()).toBe('Add a To-Do');
       });
 
-      it('calls `$apollo.mutate` with `AlertMarkTodo` mutation and variables containing `iid`, `todoEvent`, & `projectPath`', async () => {
+      it('calls `$apollo.mutate` with `createAlertTodoMutation` mutation and variables containing `iid`, `todoEvent`, & `projectPath`', async () => {
         jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockUpdatedMutationResult);
 
         findToDoButton().trigger('click');
         await wrapper.vm.$nextTick();
 
         expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
-          mutation: AlertMarkTodo,
+          mutation: createAlertTodoMutation,
           variables: {
             iid: '1527542',
             projectPath: 'projectPath',
@@ -76,6 +77,7 @@ describe('Alert Details Sidebar To Do', () => {
         });
       });
     });
+
     describe('removing a todo', () => {
       beforeEach(() => {
         mountComponent({
@@ -91,12 +93,19 @@ describe('Alert Details Sidebar To Do', () => {
         expect(findToDoButton().text()).toBe('Mark as done');
       });
 
-      it('calls `$apollo.mutate` with `AlertMarkTodoDone` mutation and variables containing `id`', async () => {
+      it('calls `$apollo.mutate` with `todoMarkDoneMutation` mutation and variables containing `id`', async () => {
         jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockUpdatedMutationResult);
 
         findToDoButton().trigger('click');
         await wrapper.vm.$nextTick();
-        expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledTimes(1);
+
+        expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
+          mutation: todoMarkDoneMutation,
+          update: expect.anything(),
+          variables: {
+            id: '1234',
+          },
+        });
       });
     });
   });