1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
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 { HTTP_STATUS_IM_A_TEAPOT, HTTP_STATUS_NOT_FOUND } from '~/lib/utils/http_status';
import { redirectTo } from '~/lib/utils/url_utility'; // eslint-disable-line import/no-deprecated
import { createAlert } from '~/alert';
jest.mock('~/lib/utils/url_utility');
jest.mock('~/alert');
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();
});
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); // eslint-disable-line import/no-deprecated
expect(eventHub.$emit).toHaveBeenCalledWith('deleteMilestoneModal.requestFinished', {
milestoneUrl: mockProps.milestoneUrl,
successful: true,
});
});
it.each`
statusCode | alertMessage
${HTTP_STATUS_IM_A_TEAPOT} | ${`Failed to delete milestone ${mockProps.milestoneTitle}`}
${HTTP_STATUS_NOT_FOUND} | ${`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(); // eslint-disable-line import/no-deprecated
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);
},
);
});
});
|
