Add latest changes from gitlab-org/gitlab@master

3 files changed, 73 insertions, 82 deletions

diff --git a/spec/frontend/work_items/components/work_item_actions_spec.js b/spec/frontend/work_items/components/work_item_actions_spec.js
index 0045abe50d0..daa18a5dee2 100644
--- a/spec/frontend/work_items/components/work_item_actions_spec.js
+++ b/spec/frontend/work_items/components/work_item_actions_spec.js
@@ -2,6 +2,7 @@ import { GlDropdownDivider, GlModal, GlToggle } from '@gitlab/ui';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import { stubComponent } from 'helpers/stub_component';
 import waitForPromises from 'helpers/wait_for_promises';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { isLoggedIn } from '~/lib/utils/common_utils';
@@ -31,7 +32,6 @@ describe('WorkItemActions component', () => {
   Vue.use(VueApollo);
 
   let wrapper;
-  let glModalDirective;
   let mockApollo;
 
   const findModal = () => wrapper.findComponent(GlModal);
@@ -55,6 +55,7 @@ describe('WorkItemActions component', () => {
     });
   const findNotificationsToggle = () => wrapper.findComponent(GlToggle);
 
+  const modalShowSpy = jest.fn();
   const $toast = {
     show: jest.fn(),
     hide: jest.fn(),
@@ -79,7 +80,6 @@ describe('WorkItemActions component', () => {
     workItemType = 'Task',
   } = {}) => {
     const handlers = [notificationsMock];
-    glModalDirective = jest.fn();
     mockApollo = createMockApollo([
       ...handlers,
       [convertWorkItemMutation, convertWorkItemMutationHandler],
@@ -97,13 +97,6 @@ describe('WorkItemActions component', () => {
         isParentConfidential,
         workItemType,
       },
-      directives: {
-        glModal: {
-          bind(_, { value }) {
-            glModalDirective(value);
-          },
-        },
-      },
       provide: {
         fullPath: 'gitlab-org/gitlab',
         glFeatures: { workItemsMvc2: true },
@@ -111,6 +104,13 @@ describe('WorkItemActions component', () => {
       mocks: {
         $toast,
       },
+      stubs: {
+        GlModal: stubComponent(GlModal, {
+          methods: {
+            show: modalShowSpy,
+          },
+        }),
+      },
     });
   };
 
@@ -189,7 +189,7 @@ describe('WorkItemActions component', () => {
 
       findDeleteButton().vm.$emit('click');
 
-      expect(glModalDirective).toHaveBeenCalled();
+      expect(modalShowSpy).toHaveBeenCalled();
     });
 
     it('emits event when clicking OK button', () => {
diff --git a/spec/frontend/work_items/components/work_item_award_emoji_spec.js b/spec/frontend/work_items/components/work_item_award_emoji_spec.js
index 6abb941a834..82be6d990e4 100644
--- a/spec/frontend/work_items/components/work_item_award_emoji_spec.js
+++ b/spec/frontend/work_items/components/work_item_award_emoji_spec.js
@@ -8,19 +8,15 @@ import waitForPromises from 'helpers/wait_for_promises';
 import { isLoggedIn } from '~/lib/utils/common_utils';
 import AwardList from '~/vue_shared/components/awards_list.vue';
 import WorkItemAwardEmoji from '~/work_items/components/work_item_award_emoji.vue';
-import updateWorkItemMutation from '~/work_items/graphql/update_work_item.mutation.graphql';
-import {
-  EMOJI_ACTION_REMOVE,
-  EMOJI_ACTION_ADD,
-  EMOJI_THUMBSUP,
-  EMOJI_THUMBSDOWN,
-} from '~/work_items/constants';
+import updateAwardEmojiMutation from '~/work_items/graphql/update_award_emoji.mutation.graphql';
+import workItemByIidQuery from '~/work_items/graphql/work_item_by_iid.query.graphql';
+import { EMOJI_THUMBSUP, EMOJI_THUMBSDOWN } from '~/work_items/constants';
 
 import {
   workItemByIidResponseFactory,
   mockAwardsWidget,
-  updateWorkItemMutationResponseFactory,
   mockAwardEmojiThumbsUp,
+  getAwardEmojiResponse,
 } from '../mock_data';
 
 jest.mock('~/lib/utils/common_utils');
@@ -28,30 +24,19 @@ Vue.use(VueApollo);
 
 describe('WorkItemAwardEmoji component', () => {
   let wrapper;
+  let mockApolloProvider;
 
   const errorMessage = 'Failed to update the award';
-
   const workItemQueryResponse = workItemByIidResponseFactory();
-  const workItemSuccessHandler = jest
-    .fn()
-    .mockResolvedValue(updateWorkItemMutationResponseFactory());
-  const awardEmojiAddSuccessHandler = jest.fn().mockResolvedValue(
-    updateWorkItemMutationResponseFactory({
-      awardEmoji: {
-        ...mockAwardsWidget,
-        nodes: [mockAwardEmojiThumbsUp],
-      },
-    }),
-  );
-  const awardEmojiRemoveSuccessHandler = jest.fn().mockResolvedValue(
-    updateWorkItemMutationResponseFactory({
-      awardEmoji: {
-        ...mockAwardsWidget,
-        nodes: [],
-      },
-    }),
-  );
-  const workItemUpdateFailureHandler = jest.fn().mockRejectedValue(new Error(errorMessage));
+  const workItemQueryAddAwardEmojiResponse = workItemByIidResponseFactory({
+    awardEmoji: { ...mockAwardsWidget, nodes: [mockAwardEmojiThumbsUp] },
+  });
+  const workItemQueryRemoveAwardEmojiResponse = workItemByIidResponseFactory({
+    awardEmoji: { ...mockAwardsWidget, nodes: [] },
+  });
+  const awardEmojiAddSuccessHandler = jest.fn().mockResolvedValue(getAwardEmojiResponse(true));
+  const awardEmojiRemoveSuccessHandler = jest.fn().mockResolvedValue(getAwardEmojiResponse(false));
+  const awardEmojiUpdateFailureHandler = jest.fn().mockRejectedValue(new Error(errorMessage));
   const mockWorkItem = workItemQueryResponse.data.workspace.workItems.nodes[0];
   const mockAwardEmojiDifferentUserThumbsUp = {
     name: 'thumbsup',
@@ -64,16 +49,36 @@ describe('WorkItemAwardEmoji component', () => {
   };
 
   const createComponent = ({
-    mockWorkItemUpdateMutationHandler = [updateWorkItemMutation, workItemSuccessHandler],
+    awardMutationHandler = awardEmojiAddSuccessHandler,
     workItem = mockWorkItem,
+    workItemIid = '1',
     awardEmoji = { ...mockAwardsWidget, nodes: [] },
   } = {}) => {
+    mockApolloProvider = createMockApollo([[updateAwardEmojiMutation, awardMutationHandler]]);
+
+    mockApolloProvider.clients.defaultClient.writeQuery({
+      query: workItemByIidQuery,
+      variables: { fullPath: workItem.project.fullPath, iid: workItemIid },
+      data: {
+        ...workItemQueryResponse.data,
+        workspace: {
+          __typename: 'Project',
+          id: 'gid://gitlab/Project/1',
+          workItems: {
+            nodes: [workItem],
+          },
+        },
+      },
+    });
+
     wrapper = shallowMount(WorkItemAwardEmoji, {
       isLoggedIn: isLoggedIn(),
-      apolloProvider: createMockApollo([mockWorkItemUpdateMutationHandler]),
+      apolloProvider: mockApolloProvider,
       propsData: {
-        workItem,
+        workItemId: workItem.id,
+        workItemFullpath: workItem.project.fullPath,
         awardEmoji,
+        workItemIid,
       },
     });
   };
@@ -107,7 +112,6 @@ describe('WorkItemAwardEmoji component', () => {
 
     expect(findAwardsList().props('awards')).toEqual([
       {
-        id: 1,
         name: EMOJI_THUMBSUP,
         user: {
           id: 5,
@@ -115,7 +119,6 @@ describe('WorkItemAwardEmoji component', () => {
         },
       },
       {
-        id: 2,
         name: EMOJI_THUMBSDOWN,
         user: {
           id: 5,
@@ -135,7 +138,6 @@ describe('WorkItemAwardEmoji component', () => {
 
     expect(findAwardsList().props('awards')).toEqual([
       {
-        id: 1,
         name: EMOJI_THUMBSUP,
         user: {
           id: 5,
@@ -143,7 +145,6 @@ describe('WorkItemAwardEmoji component', () => {
         },
       },
       {
-        id: 2,
         name: EMOJI_THUMBSUP,
         user: {
           id: 1,
@@ -154,31 +155,27 @@ describe('WorkItemAwardEmoji component', () => {
   });
 
   it.each`
-    expectedAssertion | action                 | successHandler                    | mockAwardEmojiNodes
-    ${'added'}        | ${EMOJI_ACTION_ADD}    | ${awardEmojiAddSuccessHandler}    | ${[]}
-    ${'removed'}      | ${EMOJI_ACTION_REMOVE} | ${awardEmojiRemoveSuccessHandler} | ${[mockAwardEmojiThumbsUp]}
+    expectedAssertion | awardEmojiMutationHandler         | mockAwardEmojiNodes         | workItem
+    ${'added'}        | ${awardEmojiAddSuccessHandler}    | ${[]}                       | ${workItemQueryRemoveAwardEmojiResponse.data.workspace.workItems.nodes[0]}
+    ${'removed'}      | ${awardEmojiRemoveSuccessHandler} | ${[mockAwardEmojiThumbsUp]} | ${workItemQueryAddAwardEmojiResponse.data.workspace.workItems.nodes[0]}
   `(
     'calls mutation when an award emoji is $expectedAssertion',
-    async ({ action, successHandler, mockAwardEmojiNodes }) => {
+    ({ awardEmojiMutationHandler, mockAwardEmojiNodes, workItem }) => {
       createComponent({
-        mockWorkItemUpdateMutationHandler: [updateWorkItemMutation, successHandler],
+        awardMutationHandler: awardEmojiMutationHandler,
         awardEmoji: {
           ...mockAwardsWidget,
           nodes: mockAwardEmojiNodes,
         },
+        workItem,
       });
 
       findAwardsList().vm.$emit('award', EMOJI_THUMBSUP);
 
-      await waitForPromises();
-
-      expect(successHandler).toHaveBeenCalledWith({
+      expect(awardEmojiMutationHandler).toHaveBeenCalledWith({
         input: {
-          id: mockWorkItem.id,
-          awardEmojiWidget: {
-            action,
-            name: EMOJI_THUMBSUP,
-          },
+          awardableId: mockWorkItem.id,
+          name: EMOJI_THUMBSUP,
         },
       });
     },
@@ -186,7 +183,7 @@ describe('WorkItemAwardEmoji component', () => {
 
   it('emits error when the update mutation fails', async () => {
     createComponent({
-      mockWorkItemUpdateMutationHandler: [updateWorkItemMutation, workItemUpdateFailureHandler],
+      awardMutationHandler: awardEmojiUpdateFailureHandler,
     });
 
     findAwardsList().vm.$emit('award', EMOJI_THUMBSUP);
@@ -209,15 +206,6 @@ describe('WorkItemAwardEmoji component', () => {
   });
 
   describe('when a different users awards same emoji', () => {
-    const awardEmojiDifferentUserSuccessHandler = jest.fn().mockResolvedValue(
-      updateWorkItemMutationResponseFactory({
-        awardEmoji: {
-          ...mockAwardsWidget,
-          nodes: [mockAwardEmojiThumbsUp, mockAwardEmojiDifferentUserThumbsUp],
-        },
-      }),
-    );
-
     beforeEach(() => {
       window.gon = {
         current_user_id: 1,
@@ -225,12 +213,9 @@ describe('WorkItemAwardEmoji component', () => {
       };
     });
 
-    it('calls mutation succesfully', async () => {
+    it('calls mutation succesfully and adds the award emoji with proper user details', () => {
       createComponent({
-        mockWorkItemUpdateMutationHandler: [
-          updateWorkItemMutation,
-          awardEmojiDifferentUserSuccessHandler,
-        ],
+        awardMutationHandler: awardEmojiAddSuccessHandler,
         awardEmoji: {
           ...mockAwardsWidget,
           nodes: [mockAwardEmojiThumbsUp],
@@ -239,15 +224,10 @@ describe('WorkItemAwardEmoji component', () => {
 
       findAwardsList().vm.$emit('award', EMOJI_THUMBSUP);
 
-      await waitForPromises();
-
-      expect(awardEmojiDifferentUserSuccessHandler).toHaveBeenCalledWith({
+      expect(awardEmojiAddSuccessHandler).toHaveBeenCalledWith({
         input: {
-          id: mockWorkItem.id,
-          awardEmojiWidget: {
-            action: EMOJI_ACTION_ADD,
-            name: EMOJI_THUMBSUP,
-          },
+          awardableId: mockWorkItem.id,
+          name: EMOJI_THUMBSUP,
         },
       });
     });
diff --git a/spec/frontend/work_items/mock_data.js b/spec/frontend/work_items/mock_data.js
index 96c14ef4dd1..8867f0104e5 100644
--- a/spec/frontend/work_items/mock_data.js
+++ b/spec/frontend/work_items/mock_data.js
@@ -3172,3 +3172,14 @@ export const workItemNotesWithSystemNotesWithChangedDescription = {
     },
   },
 };
+
+export const getAwardEmojiResponse = (toggledOn) => {
+  return {
+    data: {
+      awardEmojiToggle: {
+        errors: [],
+        toggledOn,
+      },
+    },
+  };
+};