1 files changed, 76 insertions, 10 deletions

diff --git a/spec/frontend/sidebar/components/time_tracking/report_spec.js b/spec/frontend/sidebar/components/time_tracking/report_spec.js
index 2b17e6dd6c3..5ed8810e95e 100644
--- a/spec/frontend/sidebar/components/time_tracking/report_spec.js
+++ b/spec/frontend/sidebar/components/time_tracking/report_spec.js
@@ -1,15 +1,21 @@
 import { GlLoadingIcon } from '@gitlab/ui';
-import { getAllByRole, getByRole } from '@testing-library/dom';
+import { getAllByRole, getByRole, getAllByTestId } from '@testing-library/dom';
 import { shallowMount, mount } from '@vue/test-utils';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
 import Report from '~/sidebar/components/time_tracking/report.vue';
 import getIssueTimelogsQuery from '~/vue_shared/components/sidebar/queries/get_issue_timelogs.query.graphql';
 import getMrTimelogsQuery from '~/vue_shared/components/sidebar/queries/get_mr_timelogs.query.graphql';
-import { getIssueTimelogsQueryResponse, getMrTimelogsQueryResponse } from './mock_data';
+import deleteTimelogMutation from '~/sidebar/components/time_tracking/graphql/mutations/delete_timelog.mutation.graphql';
+import {
+  getIssueTimelogsQueryResponse,
+  getMrTimelogsQueryResponse,
+  timelogToRemoveId,
+} from './mock_data';
 
 jest.mock('~/flash');
 
@@ -18,6 +24,7 @@ describe('Issuable Time Tracking Report', () => {
   let wrapper;
   let fakeApollo;
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+  const findDeleteButton = () => wrapper.findByTestId('deleteButton');
   const successIssueQueryHandler = jest.fn().mockResolvedValue(getIssueTimelogsQueryResponse);
   const successMrQueryHandler = jest.fn().mockResolvedValue(getMrTimelogsQueryResponse);
 
@@ -31,14 +38,16 @@ describe('Issuable Time Tracking Report', () => {
       [getIssueTimelogsQuery, queryHandler],
       [getMrTimelogsQuery, queryHandler],
     ]);
-    wrapper = mountFunction(Report, {
-      provide: {
-        issuableId: 1,
-        issuableType,
-      },
-      propsData: { limitToHours, issuableId: '1' },
-      apolloProvider: fakeApollo,
-    });
+    wrapper = extendedWrapper(
+      mountFunction(Report, {
+        provide: {
+          issuableId: 1,
+          issuableType,
+        },
+        propsData: { limitToHours, issuableId: '1' },
+        apolloProvider: fakeApollo,
+      }),
+    );
   };
 
   afterEach(() => {
@@ -75,6 +84,7 @@ describe('Issuable Time Tracking Report', () => {
       expect(getAllByRole(wrapper.element, 'row', { name: /Administrator/i })).toHaveLength(2);
       expect(getAllByRole(wrapper.element, 'row', { name: /A note/i })).toHaveLength(1);
       expect(getAllByRole(wrapper.element, 'row', { name: /A summary/i })).toHaveLength(2);
+      expect(getAllByTestId(wrapper.element, 'deleteButton')).toHaveLength(1);
     });
   });
 
@@ -95,6 +105,7 @@ describe('Issuable Time Tracking Report', () => {
       await waitForPromises();
 
       expect(getAllByRole(wrapper.element, 'row', { name: /Administrator/i })).toHaveLength(3);
+      expect(getAllByTestId(wrapper.element, 'deleteButton')).toHaveLength(3);
     });
   });
 
@@ -123,4 +134,59 @@ describe('Issuable Time Tracking Report', () => {
       });
     });
   });
+
+  describe('when clicking on the delete timelog button', () => {
+    beforeEach(() => {
+      mountComponent({ mountFunction: mount });
+    });
+
+    it('calls `$apollo.mutate` with deleteTimelogMutation mutation and removes the row', async () => {
+      const mutateSpy = jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue({
+        data: {
+          timelogDelete: {
+            errors: [],
+          },
+        },
+      });
+
+      await waitForPromises();
+      await findDeleteButton().trigger('click');
+      await waitForPromises();
+
+      expect(createFlash).not.toHaveBeenCalled();
+      expect(mutateSpy).toHaveBeenCalledWith({
+        mutation: deleteTimelogMutation,
+        variables: {
+          input: {
+            id: timelogToRemoveId,
+          },
+        },
+        update: expect.anything(),
+      });
+    });
+
+    it('calls `createFlash` with errorMessage and does not remove the row on promise reject', async () => {
+      const mutateSpy = jest.spyOn(wrapper.vm.$apollo, 'mutate').mockRejectedValue({});
+
+      await waitForPromises();
+      await findDeleteButton().trigger('click');
+      await waitForPromises();
+
+      expect(mutateSpy).toHaveBeenCalledWith({
+        mutation: deleteTimelogMutation,
+        variables: {
+          input: {
+            id: timelogToRemoveId,
+          },
+        },
+        update: expect.anything(),
+      });
+
+      expect(createFlash).toHaveBeenCalledWith({
+        message: 'An error occurred while removing the timelog.',
+        captureError: true,
+        error: expect.any(Object),
+      });
+    });
+  });
 });