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
|
import { shallowMount } from '@vue/test-utils';
import { GlIcon } from '@gitlab/ui';
import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue';
const changedFile = () => ({ changed: true });
const stagedFile = () => ({ changed: true, staged: true });
const newFile = () => ({ changed: true, tempFile: true });
const deletedFile = () => ({ changed: false, tempFile: false, staged: false, deleted: true });
const unchangedFile = () => ({ changed: false, tempFile: false, staged: false, deleted: false });
describe('Changed file icon', () => {
let wrapper;
const factory = (props = {}) => {
wrapper = shallowMount(ChangedFileIcon, {
propsData: {
file: changedFile(),
showTooltip: true,
...props,
},
});
};
afterEach(() => {
wrapper.destroy();
});
const findIcon = () => wrapper.find(GlIcon);
const findIconName = () => findIcon().props('name');
const findIconClasses = () => findIcon().classes();
const findTooltipText = () => wrapper.attributes('title');
it('with isCentered true, adds center class', () => {
factory({
isCentered: true,
});
expect(wrapper.classes('ml-auto')).toBe(true);
});
it('with isCentered false, does not center', () => {
factory({
isCentered: false,
});
expect(wrapper.classes('ml-auto')).toBe(false);
});
it('with showTooltip false, does not show tooltip', () => {
factory({
showTooltip: false,
});
expect(findTooltipText()).toBeFalsy();
});
describe.each`
file | iconName | tooltipText | desc
${changedFile()} | ${'file-modified'} | ${'Modified'} | ${'with file changed'}
${stagedFile()} | ${'file-modified-solid'} | ${'Modified'} | ${'with file staged'}
${newFile()} | ${'file-addition'} | ${'Added'} | ${'with file new'}
${deletedFile()} | ${'file-deletion'} | ${'Deleted'} | ${'with file deleted'}
`('$desc', ({ file, iconName, tooltipText }) => {
beforeEach(() => {
factory({ file });
});
it('renders icon', () => {
expect(findIconName()).toBe(iconName);
expect(findIconClasses()).toContain(iconName);
});
it('renders tooltip text', () => {
expect(findTooltipText()).toBe(tooltipText);
});
});
describe('with file unchanged', () => {
beforeEach(() => {
factory({
file: unchangedFile(),
});
});
it('does not show icon', () => {
expect(findIcon().exists()).toBe(false);
});
it('does not have tooltip text', () => {
expect(findTooltipText()).toBeFalsy();
});
});
it('with size set, sets icon size', () => {
const size = 8;
factory({
file: changedFile(),
size,
});
expect(findIcon().props('size')).toBe(size);
});
it.each`
showStagedIcon | iconName | desc
${true} | ${'file-modified-solid'} | ${'with showStagedIcon true, renders staged icon'}
${false} | ${'file-modified'} | ${'with showStagedIcon false, renders regular icon'}
`('$desc', ({ showStagedIcon, iconName }) => {
factory({
file: stagedFile(),
showStagedIcon,
});
expect(findIconName()).toEqual(iconName);
});
});
|
