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
|
import { mount } from '@vue/test-utils';
import { GlSprintf } from '@gitlab/ui';
import { nextTick } from 'vue';
import CommitsHeader from '~/vue_merge_request_widget/components/states/commits_header.vue';
describe('Commits header component', () => {
let wrapper;
const createComponent = (props) => {
wrapper = mount(CommitsHeader, {
stubs: {
GlSprintf,
},
propsData: {
isSquashEnabled: false,
targetBranch: 'main',
commitsCount: 5,
isFastForwardEnabled: false,
...props,
},
});
};
const findHeaderWrapper = () => wrapper.find('.js-mr-widget-commits-count');
const findCommitToggle = () => wrapper.find('.commit-edit-toggle');
const findTargetBranchMessage = () => wrapper.find('.label-branch');
const findModifyButton = () => wrapper.find('.modify-message-button');
describe('when fast-forward is enabled', () => {
beforeEach(() => {
createComponent({
isFastForwardEnabled: true,
isSquashEnabled: true,
});
});
it('has commits count message showing 1 commit', () => {
expect(wrapper.text()).toContain('1 commit');
});
it('has button with modify commit message', () => {
expect(findModifyButton().text()).toBe('Modify commit message');
});
it('does not have merge commit part of the message', () => {
expect(findHeaderWrapper().text()).not.toContain('1 merge commit');
});
});
describe('when collapsed', () => {
it('toggle has aria-label equal to Expand', () => {
createComponent();
expect(findCommitToggle().attributes('aria-label')).toBe('Expand');
});
it('has a chevron-right icon', () => {
createComponent();
expect(findCommitToggle().props('icon')).toBe('chevron-right');
});
describe('when squash is disabled', () => {
beforeEach(() => {
createComponent();
});
it('has commits count message showing correct amount of commits', () => {
expect(wrapper.text()).toContain('5 commits');
});
it('has button with modify merge commit message', () => {
expect(findModifyButton().text()).toBe('Modify merge commit');
});
});
describe('when squash is enabled', () => {
beforeEach(() => {
createComponent({ isSquashEnabled: true });
});
it('has commits count message showing one commit when squash is enabled', () => {
expect(wrapper.text()).toContain('1 commit');
});
it('has button with modify commit messages text', () => {
expect(findModifyButton().text()).toBe('Modify commit messages');
});
});
it('has correct target branch displayed', () => {
createComponent();
expect(findTargetBranchMessage().text()).toBe('main');
});
it('does has merge commit part of the message', () => {
createComponent();
expect(findHeaderWrapper().text()).toContain('1 merge commit');
});
});
describe('when expanded', () => {
beforeEach(async () => {
createComponent();
findCommitToggle().trigger('click');
await nextTick();
});
it('toggle has aria-label equal to collapse', () => {
expect(findCommitToggle().attributes('aria-label')).toBe('Collapse');
});
it('has a chevron-down icon', () => {
expect(findCommitToggle().props('icon')).toBe('chevron-down');
});
it('has a collapse text', () => {
expect(findHeaderWrapper().text()).toBe('Collapse');
});
});
});
|
