Add latest changes from gitlab-org/gitlab@master

2 files changed, 105 insertions, 12 deletions

diff --git a/spec/frontend/pipeline_schedules/components/pipeline_schedules_spec.js b/spec/frontend/pipeline_schedules/components/pipeline_schedules_spec.js
index d0292c65bcd..cce8f480928 100644
--- a/spec/frontend/pipeline_schedules/components/pipeline_schedules_spec.js
+++ b/spec/frontend/pipeline_schedules/components/pipeline_schedules_spec.js
@@ -1,13 +1,18 @@
-import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
+import { GlAlert, GlLoadingIcon, GlModal } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import PipelineSchedules from '~/pipeline_schedules/components/pipeline_schedules.vue';
 import PipelineSchedulesTable from '~/pipeline_schedules/components/table/pipeline_schedules_table.vue';
+import deletePipelineScheduleMutation from '~/pipeline_schedules/graphql/mutations/delete_pipeline_schedule.mutation.graphql';
 import getPipelineSchedulesQuery from '~/pipeline_schedules/graphql/queries/get_pipeline_schedules.query.graphql';
-import { mockGetPipelineSchedulesGraphQLResponse, mockPipelineScheduleNodes } from '../mock_data';
+import {
+  mockGetPipelineSchedulesGraphQLResponse,
+  mockPipelineScheduleNodes,
+  deleteMutationResponse,
+} from '../mock_data';
 
 Vue.use(VueApollo);
 
@@ -17,24 +22,28 @@ describe('Pipeline schedules app', () => {
   const successHandler = jest.fn().mockResolvedValue(mockGetPipelineSchedulesGraphQLResponse);
   const failedHandler = jest.fn().mockRejectedValue(new Error('GraphQL error'));
 
-  const createMockApolloProvider = (handler) => {
-    const requestHandlers = [[getPipelineSchedulesQuery, handler]];
+  const deleteMutationHandlerSuccess = jest.fn().mockResolvedValue(deleteMutationResponse);
+  const deleteMutationHandlerFailed = jest.fn().mockRejectedValue(new Error('GraphQL error'));
 
+  const createMockApolloProvider = (
+    requestHandlers = [[getPipelineSchedulesQuery, successHandler]],
+  ) => {
     return createMockApollo(requestHandlers);
   };
 
-  const createComponent = (handler = successHandler) => {
+  const createComponent = (requestHandlers) => {
     wrapper = shallowMount(PipelineSchedules, {
       provide: {
         fullPath: 'gitlab-org/gitlab',
       },
-      apolloProvider: createMockApolloProvider(handler),
+      apolloProvider: createMockApolloProvider(requestHandlers),
     });
   };
 
   const findTable = () => wrapper.findComponent(PipelineSchedulesTable);
   const findAlert = () => wrapper.findComponent(GlAlert);
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+  const findModal = () => wrapper.findComponent(GlModal);
 
   afterEach(() => {
     wrapper.destroy();
@@ -69,11 +78,84 @@ describe('Pipeline schedules app', () => {
     expect(findLoadingIcon().exists()).toBe(false);
   });
 
-  it('shows error alert', async () => {
-    createComponent(failedHandler);
+  it('shows query error alert', async () => {
+    createComponent([[getPipelineSchedulesQuery, failedHandler]]);
 
     await waitForPromises();
 
-    expect(findAlert().exists()).toBe(true);
+    expect(findAlert().text()).toBe('There was a problem fetching pipeline schedules.');
+  });
+
+  it('shows delete mutation error alert', async () => {
+    createComponent([
+      [getPipelineSchedulesQuery, successHandler],
+      [deletePipelineScheduleMutation, deleteMutationHandlerFailed],
+    ]);
+
+    await waitForPromises();
+
+    findModal().vm.$emit('primary');
+
+    await waitForPromises();
+
+    expect(findAlert().text()).toBe('There was a problem deleting the pipeline schedule.');
+  });
+
+  it('deletes pipeline schedule and refetches query', async () => {
+    createComponent([
+      [getPipelineSchedulesQuery, successHandler],
+      [deletePipelineScheduleMutation, deleteMutationHandlerSuccess],
+    ]);
+
+    jest.spyOn(wrapper.vm.$apollo.queries.schedules, 'refetch');
+
+    await waitForPromises();
+
+    const scheduleId = mockPipelineScheduleNodes[0].id;
+
+    findTable().vm.$emit('showDeleteModal', scheduleId);
+
+    expect(wrapper.vm.$apollo.queries.schedules.refetch).not.toHaveBeenCalled();
+
+    findModal().vm.$emit('primary');
+
+    await waitForPromises();
+
+    expect(deleteMutationHandlerSuccess).toHaveBeenCalledWith({
+      id: scheduleId,
+    });
+    expect(wrapper.vm.$apollo.queries.schedules.refetch).toHaveBeenCalled();
+  });
+
+  it('modal should be visible after event', async () => {
+    createComponent();
+
+    await waitForPromises();
+
+    expect(findModal().props('visible')).toBe(false);
+
+    findTable().vm.$emit('showDeleteModal', mockPipelineScheduleNodes[0].id);
+
+    await nextTick();
+
+    expect(findModal().props('visible')).toBe(true);
+  });
+
+  it('modal should be hidden', async () => {
+    createComponent();
+
+    await waitForPromises();
+
+    findTable().vm.$emit('showDeleteModal', mockPipelineScheduleNodes[0].id);
+
+    await nextTick();
+
+    expect(findModal().props('visible')).toBe(true);
+
+    findModal().vm.$emit('hide');
+
+    await nextTick();
+
+    expect(findModal().props('visible')).toBe(false);
   });
 });
diff --git a/spec/frontend/pipeline_schedules/components/table/cells/pipeline_schedule_actions_spec.js b/spec/frontend/pipeline_schedules/components/table/cells/pipeline_schedule_actions_spec.js
index 8f51269f8ab..ecc1bdeb679 100644
--- a/spec/frontend/pipeline_schedules/components/table/cells/pipeline_schedule_actions_spec.js
+++ b/spec/frontend/pipeline_schedules/components/table/cells/pipeline_schedule_actions_spec.js
@@ -1,5 +1,5 @@
 import { GlButton } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import PipelineScheduleActions from '~/pipeline_schedules/components/table/cells/pipeline_schedule_actions.vue';
 import { mockPipelineScheduleNodes, mockPipelineScheduleAsGuestNodes } from '../../../mock_data';
 
@@ -11,7 +11,7 @@ describe('Pipeline schedule actions', () => {
   };
 
   const createComponent = (props = defaultProps) => {
-    wrapper = shallowMount(PipelineScheduleActions, {
+    wrapper = shallowMountExtended(PipelineScheduleActions, {
       propsData: {
         ...props,
       },
@@ -19,6 +19,7 @@ describe('Pipeline schedule actions', () => {
   };
 
   const findAllButtons = () => wrapper.findAllComponents(GlButton);
+  const findDeleteBtn = () => wrapper.findByTestId('delete-pipeline-schedule-btn');
 
   afterEach(() => {
     wrapper.destroy();
@@ -35,4 +36,14 @@ describe('Pipeline schedule actions', () => {
 
     expect(findAllButtons()).toHaveLength(0);
   });
+
+  it('delete button emits showDeleteModal event and schedule id', () => {
+    createComponent();
+
+    findDeleteBtn().vm.$emit('click');
+
+    expect(wrapper.emitted()).toEqual({
+      showDeleteModal: [[mockPipelineScheduleNodes[0].id]],
+    });
+  });
 });