debian-mirror-gitlab/spec/frontend/pipelines/header_component_spec.js

248 lines
7.7 KiB
JavaScript
Raw Normal View History

2022-07-16 23:28:13 +05:30
import { GlAlert, GlModal, GlLoadingIcon } from '@gitlab/ui';
2021-03-11 19:13:27 +05:30
import { shallowMount } from '@vue/test-utils';
2022-05-07 20:08:51 +05:30
import { nextTick } from 'vue';
import waitForPromises from 'helpers/wait_for_promises';
2021-03-11 19:13:27 +05:30
import HeaderComponent from '~/pipelines/components/header_component.vue';
import cancelPipelineMutation from '~/pipelines/graphql/mutations/cancel_pipeline.mutation.graphql';
import deletePipelineMutation from '~/pipelines/graphql/mutations/delete_pipeline.mutation.graphql';
import retryPipelineMutation from '~/pipelines/graphql/mutations/retry_pipeline.mutation.graphql';
2022-04-04 11:22:00 +05:30
import { BUTTON_TOOLTIP_RETRY } from '~/pipelines/constants';
2021-01-03 14:25:43 +05:30
import {
mockCancelledPipelineHeader,
mockFailedPipelineHeader,
2021-09-04 01:27:46 +05:30
mockFailedPipelineNoPermissions,
2021-01-03 14:25:43 +05:30
mockRunningPipelineHeader,
2021-09-04 01:27:46 +05:30
mockRunningPipelineNoPermissions,
2021-01-03 14:25:43 +05:30
mockSuccessfulPipelineHeader,
} from './mock_data';
2020-05-24 23:13:21 +05:30
describe('Pipeline details header', () => {
let wrapper;
let glModalDirective;
2022-05-07 20:08:51 +05:30
let mutate = jest.fn();
2020-05-24 23:13:21 +05:30
2022-10-11 01:57:18 +05:30
const findAlert = () => wrapper.findComponent(GlAlert);
const findDeleteModal = () => wrapper.findComponent(GlModal);
2021-01-03 14:25:43 +05:30
const findRetryButton = () => wrapper.find('[data-testid="retryPipeline"]');
const findCancelButton = () => wrapper.find('[data-testid="cancelPipeline"]');
const findDeleteButton = () => wrapper.find('[data-testid="deletePipeline"]');
2022-10-11 01:57:18 +05:30
const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
2021-01-03 14:25:43 +05:30
const defaultProvideOptions = {
2021-11-11 11:23:49 +05:30
pipelineId: '14',
2021-01-03 14:25:43 +05:30
pipelineIid: 1,
paths: {
2021-01-29 00:20:46 +05:30
pipelinesPath: '/namespace/my-project/-/pipelines',
2021-01-03 14:25:43 +05:30
fullProject: '/namespace/my-project',
2020-05-24 23:13:21 +05:30
},
};
2021-01-03 14:25:43 +05:30
const createComponent = (pipelineMock = mockRunningPipelineHeader, { isLoading } = false) => {
2020-05-24 23:13:21 +05:30
glModalDirective = jest.fn();
2021-01-03 14:25:43 +05:30
const $apollo = {
queries: {
pipeline: {
loading: isLoading,
stopPolling: jest.fn(),
startPolling: jest.fn(),
},
},
2022-05-07 20:08:51 +05:30
mutate,
2021-01-03 14:25:43 +05:30
};
return shallowMount(HeaderComponent, {
data() {
return {
pipeline: pipelineMock,
};
},
provide: {
...defaultProvideOptions,
2020-05-24 23:13:21 +05:30
},
directives: {
glModal: {
2021-01-03 14:25:43 +05:30
bind(_, { value }) {
2020-05-24 23:13:21 +05:30
glModalDirective(value);
},
},
},
2021-01-03 14:25:43 +05:30
mocks: { $apollo },
2020-05-24 23:13:21 +05:30
});
};
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
2021-01-03 14:25:43 +05:30
describe('initial loading', () => {
beforeEach(() => {
wrapper = createComponent(null, { isLoading: true });
2020-05-24 23:13:21 +05:30
});
2021-01-03 14:25:43 +05:30
it('shows a loading state while graphQL is fetching initial data', () => {
expect(findLoadingIcon().exists()).toBe(true);
2020-05-24 23:13:21 +05:30
});
2021-01-03 14:25:43 +05:30
});
describe('visible state', () => {
it.each`
state | pipelineData | retryValue | cancelValue
${'cancelled'} | ${mockCancelledPipelineHeader} | ${true} | ${false}
${'failed'} | ${mockFailedPipelineHeader} | ${true} | ${false}
${'running'} | ${mockRunningPipelineHeader} | ${false} | ${true}
${'successful'} | ${mockSuccessfulPipelineHeader} | ${false} | ${false}
`(
'with a $state pipeline, it will show actions: retry $retryValue and cancel $cancelValue',
({ pipelineData, retryValue, cancelValue }) => {
wrapper = createComponent(pipelineData);
expect(findRetryButton().exists()).toBe(retryValue);
expect(findCancelButton().exists()).toBe(cancelValue);
},
);
});
2020-05-24 23:13:21 +05:30
2021-01-03 14:25:43 +05:30
describe('actions', () => {
describe('Retry action', () => {
beforeEach(() => {
wrapper = createComponent(mockCancelledPipelineHeader);
});
2020-05-24 23:13:21 +05:30
2021-01-29 00:20:46 +05:30
it('should call retryPipeline Mutation with pipeline id', () => {
2021-01-03 14:25:43 +05:30
findRetryButton().vm.$emit('click');
2020-05-24 23:13:21 +05:30
2021-01-29 00:20:46 +05:30
expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
mutation: retryPipelineMutation,
variables: { id: mockCancelledPipelineHeader.id },
});
2021-01-03 14:25:43 +05:30
});
2022-04-04 11:22:00 +05:30
it('should render retry action tooltip', () => {
expect(findRetryButton().attributes('title')).toBe(BUTTON_TOOLTIP_RETRY);
});
2022-07-16 23:28:13 +05:30
it('should display error message on failure', async () => {
const failureMessage = 'failure message';
jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue({
data: {
pipelineRetry: {
errors: [failureMessage],
},
},
});
findRetryButton().vm.$emit('click');
await waitForPromises();
expect(findAlert().text()).toBe(failureMessage);
});
2020-05-24 23:13:21 +05:30
});
2022-05-07 20:08:51 +05:30
describe('Retry action failed', () => {
beforeEach(() => {
mutate = jest.fn().mockRejectedValue('error');
wrapper = createComponent(mockCancelledPipelineHeader);
});
it('retry button loading state should reset on error', async () => {
findRetryButton().vm.$emit('click');
await nextTick();
expect(findRetryButton().props('loading')).toBe(true);
await waitForPromises();
expect(findRetryButton().props('loading')).toBe(false);
});
});
2021-01-03 14:25:43 +05:30
describe('Cancel action', () => {
beforeEach(() => {
wrapper = createComponent(mockRunningPipelineHeader);
});
2021-01-29 00:20:46 +05:30
it('should call cancelPipeline Mutation with pipeline id', () => {
2021-01-03 14:25:43 +05:30
findCancelButton().vm.$emit('click');
2021-01-29 00:20:46 +05:30
expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
mutation: cancelPipelineMutation,
variables: { id: mockRunningPipelineHeader.id },
});
2021-01-03 14:25:43 +05:30
});
2022-07-16 23:28:13 +05:30
it('should display error message on failure', async () => {
const failureMessage = 'failure message';
jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue({
data: {
pipelineCancel: {
errors: [failureMessage],
},
},
});
findCancelButton().vm.$emit('click');
await waitForPromises();
expect(findAlert().text()).toBe(failureMessage);
});
2020-05-24 23:13:21 +05:30
});
2021-01-03 14:25:43 +05:30
describe('Delete action', () => {
beforeEach(() => {
wrapper = createComponent(mockFailedPipelineHeader);
});
2021-01-29 00:20:46 +05:30
it('displays delete modal when clicking on delete and does not call the delete action', () => {
2021-01-03 14:25:43 +05:30
findDeleteButton().vm.$emit('click');
2020-05-24 23:13:21 +05:30
expect(findDeleteModal().props('modalId')).toBe(wrapper.vm.$options.DELETE_MODAL_ID);
expect(glModalDirective).toHaveBeenCalledWith(wrapper.vm.$options.DELETE_MODAL_ID);
2021-01-29 00:20:46 +05:30
expect(wrapper.vm.$apollo.mutate).not.toHaveBeenCalled();
2020-05-24 23:13:21 +05:30
});
2021-01-29 00:20:46 +05:30
it('should call deletePipeline Mutation with pipeline id when modal is submitted', () => {
2022-08-13 15:12:31 +05:30
findDeleteModal().vm.$emit('primary');
2020-05-24 23:13:21 +05:30
2021-01-29 00:20:46 +05:30
expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
mutation: deletePipelineMutation,
variables: { id: mockFailedPipelineHeader.id },
});
2020-05-24 23:13:21 +05:30
});
2022-07-16 23:28:13 +05:30
it('should display error message on failure', async () => {
const failureMessage = 'failure message';
jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue({
data: {
pipelineDestroy: {
errors: [failureMessage],
},
},
});
2022-08-13 15:12:31 +05:30
findDeleteModal().vm.$emit('primary');
2022-07-16 23:28:13 +05:30
await waitForPromises();
expect(findAlert().text()).toBe(failureMessage);
});
2020-05-24 23:13:21 +05:30
});
2021-09-04 01:27:46 +05:30
describe('Permissions', () => {
it('should not display the cancel action if user does not have permission', () => {
wrapper = createComponent(mockRunningPipelineNoPermissions);
expect(findCancelButton().exists()).toBe(false);
});
it('should not display the retry action if user does not have permission', () => {
wrapper = createComponent(mockFailedPipelineNoPermissions);
expect(findRetryButton().exists()).toBe(false);
});
});
2020-05-24 23:13:21 +05:30
});
});