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 { GlDisclosureDropdown, GlButton, GlFormInput, GlModal, GlSprintf } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import { stubComponent } from 'helpers/stub_component';
import waitForPromises from 'helpers/wait_for_promises';
import DeleteMergedBranches, { i18n } from '~/branches/components/delete_merged_branches.vue';
import { formPath, propsDataMock } from '../mock_data';
jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' }));
let wrapper;
const modalShowSpy = jest.fn();
const modalHideSpy = jest.fn();
const stubsData = {
GlModal: stubComponent(GlModal, {
template:
'<div><slot name="modal-title"></slot><slot></slot><slot name="modal-footer"></slot></div>',
methods: {
show: modalShowSpy,
hide: modalHideSpy,
},
}),
GlDisclosureDropdown,
GlButton,
GlFormInput,
GlSprintf,
};
const createComponent = (mountFn = shallowMountExtended, stubs = {}) => {
wrapper = mountFn(DeleteMergedBranches, {
propsData: {
...propsDataMock,
},
stubs,
});
};
const findDeleteButton = () =>
wrapper.findComponent('[data-testid="delete-merged-branches-button"]');
const findModal = () => wrapper.findComponent(GlModal);
const findConfirmationButton = () =>
wrapper.findByTestId('delete-merged-branches-confirmation-button');
const findCancelButton = () => wrapper.findByTestId('delete-merged-branches-cancel-button');
const findFormInput = () => wrapper.findComponent(GlFormInput);
const findForm = () => wrapper.find('form');
const submitFormSpy = () => jest.spyOn(findForm().element, 'submit');
describe('Delete merged branches component', () => {
beforeEach(() => {
createComponent();
});
describe('Delete merged branches button', () => {
it('has correct text', () => {
createComponent(mount, stubsData);
expect(findDeleteButton().text()).toBe(i18n.deleteButtonText);
});
it('opens modal when clicked', () => {
createComponent(mount, stubsData);
findDeleteButton().trigger('click');
expect(modalShowSpy).toHaveBeenCalled();
});
});
describe('Delete merged branches confirmation modal', () => {
beforeEach(() => {
createComponent(shallowMountExtended, stubsData);
});
it('renders correct modal title and text', () => {
const modalText = findModal().text();
expect(findModal().props('title')).toBe(i18n.modalTitle);
expect(modalText).toContain(i18n.notVisibleBranchesWarning);
expect(modalText).toContain(i18n.protectedBranchWarning);
});
it('renders confirm and cancel buttons with correct text', () => {
expect(findConfirmationButton().text()).toContain(i18n.deleteButtonText);
expect(findCancelButton().text()).toContain(i18n.cancelButtonText);
});
it('renders form with correct attributes and hiden inputs', () => {
const form = findForm();
expect(form.attributes()).toEqual({
action: formPath,
method: 'post',
});
expect(form.find('input[name="_method"]').attributes('value')).toBe('delete');
expect(form.find('input[name="authenticity_token"]').attributes('value')).toBe(
'mock-csrf-token',
);
});
it('matches snapshot', () => {
expect(wrapper.element).toMatchSnapshot();
});
it('has a disabled confirm button by default', () => {
expect(findConfirmationButton().props('disabled')).toBe(true);
});
it('keeps disabled state when wrong input is provided', async () => {
findFormInput().vm.$emit('input', 'hello');
await waitForPromises();
expect(findConfirmationButton().props('disabled')).toBe(true);
findConfirmationButton().trigger('click');
expect(submitFormSpy()).not.toHaveBeenCalled();
findFormInput().trigger('keyup.enter');
expect(submitFormSpy()).not.toHaveBeenCalled();
});
it('submits form when correct amount is provided and the confirm button is clicked', async () => {
findFormInput().vm.$emit('input', 'delete');
await waitForPromises();
findConfirmationButton().trigger('click');
expect(submitFormSpy()).toHaveBeenCalled();
});
it('calls hide on the modal when cancel button is clicked', () => {
findCancelButton().trigger('click');
expect(modalHideSpy).toHaveBeenCalled();
});
});
});
|
