Merge branch 'refactor-timeline-events-list' into 'master'

Refactor timeline events list tests

See merge request gitlab-org/gitlab!95046

spec/frontend/issues/show/components/incidents/mock_data.js

@@ -125,3 +125,8 @@ export const mockGetTimelineData = {
     },
   },
 };
+
+export const fakeDate = '2020-07-08T00:00:00.000Z';
+
+const { id, note, occurredAt } = mockEvents[0];
+export const fakeEventData = { id, note, occurredAt };

spec/frontend/issues/show/components/incidents/timeline_events_list_spec.js

@@ -3,16 +3,21 @@ 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 IncidentTimelineEventListItem from '~/issues/show/components/incidents/timeline_events_item.vue';
-import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import IncidentTimelineEventItem from '~/issues/show/components/incidents/timeline_events_item.vue';
+import { mountExtended } 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 getTimelineEvents from '~/issues/show/components/incidents/graphql/queries/get_timeline_events.query.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import { useFakeDate } from 'helpers/fake_date';
 import { createAlert } from '~/flash';
 import {
   mockEvents,
   timelineEventsDeleteEventResponse,
   timelineEventsDeleteEventError,
+  fakeDate,
+  fakeEventData,
+  timelineEventsQueryListResponse,
 } from './mock_data';
 
 Vue.use(VueApollo);
@@ -20,58 +25,61 @@ 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', () => {
+  useFakeDate(fakeDate);
   let wrapper;
+  const responseSpy = jest.fn().mockResolvedValue(timelineEventsDeleteEventResponse);
+
+  const requestHandlers = [[deleteTimelineEventMutation, responseSpy]];
+  const apolloProvider = createMockApollo(requestHandlers);
+
+  apolloProvider.clients.defaultClient.cache.writeQuery({
+    query: getTimelineEvents,
+    data: timelineEventsQueryListResponse.data,
+    variables: {
+      fullPath: 'group/project',
+      incidentId: 'gid://gitlab/Issue/1',
+    },
+  });
 
-  const mountComponent = (mockApollo) => {
-    const apollo = mockApollo ? { apolloProvider: mockApollo } : {};
-
-    wrapper = shallowMountExtended(IncidentTimelineEventList, {
+  const mountComponent = () => {
+    wrapper = mountExtended(IncidentTimelineEventList, {
+      propsData: {
+        timelineEvents: mockEvents,
+      },
       provide: {
         fullPath: 'group/project',
         issuableId: '1',
+        canUpdate: true,
       },
-      propsData: {
-        timelineEvents: mockEvents,
-      },
-      ...apollo,
+      apolloProvider,
     });
   };
 
   const findTimelineEventGroups = () => wrapper.findAllByTestId('timeline-group');
-  const findItems = (base = wrapper) => base.findAll(IncidentTimelineEventListItem);
+  const findItems = (base = wrapper) => base.findAll(IncidentTimelineEventItem);
   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] });
+    findItems().at(0).vm.$emit('delete', { fakeEventData });
     await waitForPromises();
   };
 
+  beforeEach(() => {
+    mountComponent();
+  });
+
   afterEach(() => {
-    confirmAction.mockReset();
-    deleteEventResponse.mockReset();
     wrapper.destroy();
   });
 
   describe('template', () => {
     it('groups items correctly', () => {
-      mountComponent();
-
       expect(findTimelineEventGroups()).toHaveLength(2);
 
       expect(findItems(findFirstTimelineEventGroup())).toHaveLength(1);
@@ -79,24 +87,18 @@ describe('IncidentTimelineEventList', () => {
     });
 
     it('sets the isLastItem prop correctly', () => {
-      mountComponent();
-
       expect(findItems().at(0).props('isLastItem')).toBe(false);
       expect(findItems().at(1).props('isLastItem')).toBe(false);
       expect(findItems().at(2).props('isLastItem')).toBe(true);
     });
 
     it('sets the event props correctly', () => {
-      mountComponent();
-
       expect(findItems().at(1).props('occurredAt')).toBe(mockEvents[1].occurredAt);
       expect(findItems().at(1).props('action')).toBe(mockEvents[1].action);
       expect(findItems().at(1).props('noteHtml')).toBe(mockEvents[1].noteHtml);
     });
 
     it('formats dates correctly', () => {
-      mountComponent();
-
       expect(findDates().at(0).text()).toBe('2022-03-22');
       expect(findDates().at(1).text()).toBe('2022-03-23');
     });
@@ -110,8 +112,6 @@ describe('IncidentTimelineEventList', () => {
       describe(timezone, () => {
         beforeEach(() => {
           timezoneMock.register(timezone);
-
-          mountComponent();
         });
 
         afterEach(() => {
@@ -131,12 +131,9 @@ describe('IncidentTimelineEventList', () => {
 
       it('should delete when button is clicked', async () => {
         const expectedVars = { input: { id: mockEvents[0].id } };
-
-        mountComponent(createMockApolloProvider());
-
         await clickFirstDeleteButton();
 
-        expect(deleteEventResponse).toHaveBeenCalledWith(expectedVars);
+        expect(responseSpy).toHaveBeenCalledWith(expectedVars);
       });
 
       it('should show an error when delete returns an error', async () => {
@@ -144,8 +141,7 @@ describe('IncidentTimelineEventList', () => {
           message: 'Error deleting incident timeline event: Item does not exist',
         };
 
-        mountComponent(createMockApolloProvider());
-        deleteEventResponse.mockResolvedValue(timelineEventsDeleteEventError);
+        responseSpy.mockResolvedValue(timelineEventsDeleteEventError);
 
         await clickFirstDeleteButton();
 
@@ -158,8 +154,7 @@ describe('IncidentTimelineEventList', () => {
           error: new Error(),
           message: 'Something went wrong while deleting the incident timeline event.',
         };
-        mountComponent(createMockApolloProvider());
-        deleteEventResponse.mockRejectedValueOnce();
+        responseSpy.mockRejectedValueOnce();
 
         await clickFirstDeleteButton();