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
|
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';
import { I18N_DELETE_TAG_MODAL } from '~/tags/constants';
let wrapper;
const tagName = 'test-tag';
const path = '/path/to/tag';
const isProtected = false;
const modalHideSpy = jest.fn();
const modalShowSpy = jest.fn();
const formSubmitSpy = jest.spyOn(HTMLFormElement.prototype, 'submit').mockImplementation();
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>',
methods: {
hide: modalHideSpy,
show: modalShowSpy,
},
}),
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', () => {
describe('Deleting a regular tag', () => {
const expectedMessage = 'Deleting the test-tag tag cannot be undone.';
beforeEach(() => {
createComponent();
});
it('renders the modal correctly', () => {
expect(findModal().props('title')).toBe(I18N_DELETE_TAG_MODAL.modalTitle);
expect(findModalMessage().text()).toMatchInterpolatedText(expectedMessage);
expect(findCancelButton().text()).toBe(I18N_DELETE_TAG_MODAL.cancelButtonText);
expect(findDeleteButton().text()).toBe(I18N_DELETE_TAG_MODAL.deleteButtonText);
expect(findForm().attributes('action')).toBe(path);
});
it('submits the form when the delete button is clicked', () => {
findDeleteButton().trigger('click');
expect(findForm().attributes('action')).toBe(path);
expect(formSubmitSpy).toHaveBeenCalledTimes(1);
});
it('calls show on the modal when a `openModal` event is received through the event hub', () => {
eventHub.$emit('openModal', {
isProtected,
tagName,
path,
});
expect(modalShowSpy).toHaveBeenCalled();
});
it('calls hide on the modal when cancel button is clicked', () => {
findCancelButton().trigger('click');
expect(modalHideSpy).toHaveBeenCalled();
});
});
describe('Deleting a protected tag (for owner or maintainer)', () => {
const expectedMessage = 'Deleting the test-tag protected tag cannot be undone.';
const expectedConfirmationText = '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(I18N_DELETE_TAG_MODAL.modalTitleProtectedTag);
});
it('renders the correct text in the modal message', () => {
expect(findModalMessage().text()).toMatchInterpolatedText(expectedMessage);
});
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(I18N_DELETE_TAG_MODAL.cancelButtonText);
expect(findDeleteButton().text()).toBe(I18N_DELETE_TAG_MODAL.deleteButtonTextProtectedTag);
});
});
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);
});
});
});
|
