133 lines
4.5 KiB
JavaScript
133 lines
4.5 KiB
JavaScript
import { GlSprintf, GlModal } from '@gitlab/ui';
|
||
import { shallowMount } from '@vue/test-utils';
|
||
import { TEST_HOST } from 'helpers/test_constants';
|
||
import axios from '~/lib/utils/axios_utils';
|
||
import DeleteMilestoneModal from '~/milestones/components/delete_milestone_modal.vue';
|
||
import eventHub from '~/milestones/event_hub';
|
||
import { redirectTo } from '~/lib/utils/url_utility';
|
||
import { createAlert } from '~/flash';
|
||
|
||
jest.mock('~/lib/utils/url_utility');
|
||
jest.mock('~/flash');
|
||
|
||
describe('Delete milestone modal', () => {
|
||
let wrapper;
|
||
const mockProps = {
|
||
issueCount: 1,
|
||
mergeRequestCount: 2,
|
||
milestoneId: 3,
|
||
milestoneTitle: 'my milestone title',
|
||
milestoneUrl: `${TEST_HOST}/delete_milestone_modal.vue/milestone`,
|
||
};
|
||
|
||
const findModal = () => wrapper.findComponent(GlModal);
|
||
|
||
const createComponent = (props) => {
|
||
wrapper = shallowMount(DeleteMilestoneModal, {
|
||
propsData: {
|
||
...mockProps,
|
||
...props,
|
||
},
|
||
stubs: {
|
||
GlSprintf,
|
||
},
|
||
});
|
||
};
|
||
|
||
beforeEach(() => {
|
||
createComponent();
|
||
});
|
||
|
||
afterEach(() => {
|
||
wrapper.destroy();
|
||
});
|
||
|
||
describe('onSubmit', () => {
|
||
beforeEach(() => {
|
||
jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
|
||
});
|
||
|
||
it('deletes milestone and redirects to overview page', async () => {
|
||
const responseURL = `${TEST_HOST}/delete_milestone_modal.vue/milestoneOverview`;
|
||
jest.spyOn(axios, 'delete').mockImplementation((url) => {
|
||
expect(url).toBe(mockProps.milestoneUrl);
|
||
expect(eventHub.$emit).toHaveBeenCalledWith(
|
||
'deleteMilestoneModal.requestStarted',
|
||
mockProps.milestoneUrl,
|
||
);
|
||
eventHub.$emit.mockReset();
|
||
return Promise.resolve({
|
||
request: {
|
||
responseURL,
|
||
},
|
||
});
|
||
});
|
||
await findModal().vm.$emit('primary');
|
||
expect(redirectTo).toHaveBeenCalledWith(responseURL);
|
||
expect(eventHub.$emit).toHaveBeenCalledWith('deleteMilestoneModal.requestFinished', {
|
||
milestoneUrl: mockProps.milestoneUrl,
|
||
successful: true,
|
||
});
|
||
});
|
||
|
||
it.each`
|
||
statusCode | alertMessage
|
||
${418} | ${`Failed to delete milestone ${mockProps.milestoneTitle}`}
|
||
${404} | ${`Milestone ${mockProps.milestoneTitle} was not found`}
|
||
`(
|
||
'displays error if deleting milestone failed with code $statusCode',
|
||
async ({ statusCode, alertMessage }) => {
|
||
const dummyError = new Error('deleting milestone failed');
|
||
dummyError.response = { status: statusCode };
|
||
jest.spyOn(axios, 'delete').mockImplementation((url) => {
|
||
expect(url).toBe(mockProps.milestoneUrl);
|
||
expect(eventHub.$emit).toHaveBeenCalledWith(
|
||
'deleteMilestoneModal.requestStarted',
|
||
mockProps.milestoneUrl,
|
||
);
|
||
eventHub.$emit.mockReset();
|
||
return Promise.reject(dummyError);
|
||
});
|
||
|
||
await expect(wrapper.vm.onSubmit()).rejects.toEqual(dummyError);
|
||
expect(createAlert).toHaveBeenCalledWith({
|
||
message: alertMessage,
|
||
});
|
||
expect(redirectTo).not.toHaveBeenCalled();
|
||
expect(eventHub.$emit).toHaveBeenCalledWith('deleteMilestoneModal.requestFinished', {
|
||
milestoneUrl: mockProps.milestoneUrl,
|
||
successful: false,
|
||
});
|
||
},
|
||
);
|
||
});
|
||
|
||
describe('Modal title and description', () => {
|
||
const emptyDescription = `You’re about to permanently delete the milestone ${mockProps.milestoneTitle}. This milestone is not currently used in any issues or merge requests.`;
|
||
const description = `You’re about to permanently delete the milestone ${mockProps.milestoneTitle} and remove it from 1 issue and 2 merge requests. Once deleted, it cannot be undone or recovered.`;
|
||
const title = `Delete milestone ${mockProps.milestoneTitle}?`;
|
||
|
||
it('renders proper title', () => {
|
||
const value = findModal().props('title');
|
||
expect(value).toBe(title);
|
||
});
|
||
|
||
it.each`
|
||
statement | descriptionText | issueCount | mergeRequestCount
|
||
${'1 issue and 2 merge requests'} | ${description} | ${1} | ${2}
|
||
${'no issues and merge requests'} | ${emptyDescription} | ${0} | ${0}
|
||
`(
|
||
'renders proper description when the milestone contains $statement',
|
||
({ issueCount, mergeRequestCount, descriptionText }) => {
|
||
createComponent({
|
||
issueCount,
|
||
mergeRequestCount,
|
||
});
|
||
|
||
const value = findModal().text();
|
||
expect(value).toBe(descriptionText);
|
||
},
|
||
);
|
||
});
|
||
});
|