1 files changed, 106 insertions, 23 deletions

diff --git a/spec/frontend/issues/show/components/incidents/timeline_events_list_spec.js b/spec/frontend/issues/show/components/incidents/timeline_events_list_spec.js
index 6610ea0b832..ae07237cf7d 100644
--- a/spec/frontend/issues/show/components/incidents/timeline_events_list_spec.js
+++ b/spec/frontend/issues/show/components/incidents/timeline_events_list_spec.js
@@ -1,41 +1,81 @@
 import timezoneMock from 'timezone-mock';
-import merge from 'lodash/merge';
-import { shallowMountExtended, extendedWrapper } from 'helpers/vue_test_utils_helper';
+import VueApollo from 'vue-apollo';
+import Vue from 'vue';
+import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
 import IncidentTimelineEventList from '~/issues/show/components/incidents/timeline_events_list.vue';
-import { mockEvents } from './mock_data';
+import IncidentTimelineEventListItem from '~/issues/show/components/incidents/timeline_events_list_item.vue';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import deleteTimelineEventMutation from '~/issues/show/components/incidents/graphql/queries/delete_timeline_event.mutation.graphql';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import { createAlert } from '~/flash';
+import {
+  mockEvents,
+  timelineEventsDeleteEventResponse,
+  timelineEventsDeleteEventError,
+} from './mock_data';
+
+Vue.use(VueApollo);
+
+jest.mock('~/flash');
+jest.mock('~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal');
+
+const deleteEventResponse = jest.fn();
+
+function createMockApolloProvider() {
+  deleteEventResponse.mockResolvedValue(timelineEventsDeleteEventResponse);
+  const requestHandlers = [[deleteTimelineEventMutation, deleteEventResponse]];
+  return createMockApollo(requestHandlers);
+}
+
+const mockConfirmAction = ({ confirmed }) => {
+  confirmAction.mockResolvedValueOnce(confirmed);
+};
 
 describe('IncidentTimelineEventList', () => {
   let wrapper;
 
-  const mountComponent = () => {
-    wrapper = shallowMountExtended(
-      IncidentTimelineEventList,
-      merge({
-        provide: {
-          fullPath: 'group/project',
-          issuableId: '1',
-        },
-        propsData: {
-          timelineEvents: mockEvents,
-        },
-      }),
-    );
+  const mountComponent = (mockApollo) => {
+    const apollo = mockApollo ? { apolloProvider: mockApollo } : {};
+
+    wrapper = shallowMountExtended(IncidentTimelineEventList, {
+      provide: {
+        fullPath: 'group/project',
+        issuableId: '1',
+      },
+      propsData: {
+        timelineEvents: mockEvents,
+      },
+      ...apollo,
+    });
   };
 
-  const findGroups = () => wrapper.findAllByTestId('timeline-group');
-  const findItems = (base = wrapper) => base.findAllByTestId('timeline-event');
-  const findFirstGroup = () => extendedWrapper(findGroups().at(0));
-  const findSecondGroup = () => extendedWrapper(findGroups().at(1));
+  const findTimelineEventGroups = () => wrapper.findAllByTestId('timeline-group');
+  const findItems = (base = wrapper) => base.findAll(IncidentTimelineEventListItem);
+  const findFirstTimelineEventGroup = () => findTimelineEventGroups().at(0);
+  const findSecondTimelineEventGroup = () => findTimelineEventGroups().at(1);
   const findDates = () => wrapper.findAllByTestId('event-date');
+  const clickFirstDeleteButton = async () => {
+    findItems()
+      .at(0)
+      .vm.$emit('delete', { ...mockEvents[0] });
+    await waitForPromises();
+  };
+
+  afterEach(() => {
+    confirmAction.mockReset();
+    deleteEventResponse.mockReset();
+    wrapper.destroy();
+  });
 
   describe('template', () => {
     it('groups items correctly', () => {
       mountComponent();
 
-      expect(findGroups()).toHaveLength(2);
+      expect(findTimelineEventGroups()).toHaveLength(2);
 
-      expect(findItems(findFirstGroup())).toHaveLength(1);
-      expect(findItems(findSecondGroup())).toHaveLength(2);
+      expect(findItems(findFirstTimelineEventGroup())).toHaveLength(1);
+      expect(findItems(findSecondTimelineEventGroup())).toHaveLength(2);
     });
 
     it('sets the isLastItem prop correctly', () => {
@@ -83,5 +123,48 @@ describe('IncidentTimelineEventList', () => {
         });
       });
     });
+
+    describe('delete functionality', () => {
+      beforeEach(() => {
+        mockConfirmAction({ confirmed: true });
+      });
+
+      it('should delete when button is clicked', async () => {
+        const expectedVars = { input: { id: mockEvents[0].id } };
+
+        mountComponent(createMockApolloProvider());
+
+        await clickFirstDeleteButton();
+
+        expect(deleteEventResponse).toHaveBeenCalledWith(expectedVars);
+      });
+
+      it('should show an error when delete returns an error', async () => {
+        const expectedError = {
+          message: 'Error deleting incident timeline event: Item does not exist',
+        };
+
+        mountComponent(createMockApolloProvider());
+        deleteEventResponse.mockResolvedValue(timelineEventsDeleteEventError);
+
+        await clickFirstDeleteButton();
+
+        expect(createAlert).toHaveBeenCalledWith(expectedError);
+      });
+
+      it('should show an error when delete fails', async () => {
+        const expectedAlertArgs = {
+          captureError: true,
+          error: new Error(),
+          message: 'Something went wrong while deleting the incident timeline event.',
+        };
+        mountComponent(createMockApolloProvider());
+        deleteEventResponse.mockRejectedValueOnce();
+
+        await clickFirstDeleteButton();
+
+        expect(createAlert).toHaveBeenCalledWith(expectedAlertArgs);
+      });
+    });
   });
 });