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
130
131
132
133
134
135
136
137
138
|
import { GlButton, GlModal, GlFormInput, GlSprintf } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { stubComponent } from 'helpers/stub_component';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import waitForPromises from 'helpers/wait_for_promises';
import DeleteTagModal from '~/tags/components/delete_tag_modal.vue';
import eventHub from '~/tags/event_hub';
let wrapper;
const tagName = 'test-tag';
const path = '/path/to/tag';
const isProtected = false;
const createComponent = (data = {}) => {
wrapper = extendedWrapper(
shallowMount(DeleteTagModal, {
data() {
return {
tagName,
path,
isProtected,
...data,
};
},
stubs: {
GlModal: stubComponent(GlModal, {
template:
'<div><slot name="modal-title"></slot><slot></slot><slot name="modal-footer"></slot></div>',
}),
GlButton,
GlFormInput,
GlSprintf,
},
}),
);
};
const findModal = () => wrapper.findComponent(GlModal);
const findModalMessage = () => wrapper.findByTestId('modal-message');
const findDeleteButton = () => wrapper.findByTestId('delete-tag-confirmation-button');
const findCancelButton = () => wrapper.findByTestId('delete-tag-cancel-button');
const findFormInput = () => wrapper.findComponent(GlFormInput);
const findForm = () => wrapper.find('form');
describe('Delete tag modal', () => {
afterEach(() => {
wrapper.destroy();
});
describe('Deleting a regular tag', () => {
const expectedTitle = 'Delete tag. Are you ABSOLUTELY SURE?';
const expectedMessage = "You're about to permanently delete the tag test-tag.";
beforeEach(() => {
createComponent();
});
it('renders the modal correctly', () => {
expect(findModal().props('title')).toBe(expectedTitle);
expect(findModalMessage().text()).toMatchInterpolatedText(expectedMessage);
expect(findCancelButton().text()).toBe('Cancel, keep tag');
expect(findDeleteButton().text()).toBe('Yes, delete tag');
expect(findForm().attributes('action')).toBe(path);
});
it('submits the form when the delete button is clicked', () => {
const submitFormSpy = jest.spyOn(wrapper.vm.$refs.form, 'submit');
findDeleteButton().trigger('click');
expect(findForm().attributes('action')).toBe(path);
expect(submitFormSpy).toHaveBeenCalled();
});
it('calls show on the modal when a `openModal` event is received through the event hub', async () => {
const showSpy = jest.spyOn(wrapper.vm.$refs.modal, 'show');
eventHub.$emit('openModal', {
isProtected,
tagName,
path,
});
expect(showSpy).toHaveBeenCalled();
});
it('calls hide on the modal when cancel button is clicked', () => {
const closeModalSpy = jest.spyOn(wrapper.vm.$refs.modal, 'hide');
findCancelButton().trigger('click');
expect(closeModalSpy).toHaveBeenCalled();
});
});
describe('Deleting a protected tag (for owner or maintainer)', () => {
const expectedTitleProtected = 'Delete protected tag. Are you ABSOLUTELY SURE?';
const expectedMessageProtected =
"You're about to permanently delete the protected tag test-tag.";
const expectedConfirmationText =
'After you confirm and select Yes, delete protected tag, you cannot recover this tag. Please type the following to confirm: test-tag';
beforeEach(() => {
createComponent({ isProtected: true });
});
describe('rendering the modal correctly for a protected tag', () => {
it('sets the modal title for a protected tag', () => {
expect(findModal().props('title')).toBe(expectedTitleProtected);
});
it('renders the correct text in the modal message', () => {
expect(findModalMessage().text()).toMatchInterpolatedText(expectedMessageProtected);
});
it('renders the protected tag name confirmation form with expected text and action', () => {
expect(findForm().text()).toMatchInterpolatedText(expectedConfirmationText);
expect(findForm().attributes('action')).toBe(path);
});
it('renders the buttons with the correct button text', () => {
expect(findCancelButton().text()).toBe('Cancel, keep tag');
expect(findDeleteButton().text()).toBe('Yes, delete protected tag');
});
});
it('opens with the delete button disabled and enables it when tag name is confirmed', async () => {
expect(findDeleteButton().props('disabled')).toBe(true);
findFormInput().vm.$emit('input', tagName);
await waitForPromises();
expect(findDeleteButton().props('disabled')).not.toBe(true);
});
});
});
|
