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 { nextTick } from 'vue';
import { shallowMount } from '@vue/test-utils';
import { GlAlert } from '@gitlab/ui';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import { createMockDirective } from 'helpers/vue_mock_directive';
import PipelineEditorFileTreeContainer from '~/pipeline_editor/components/file_tree/container.vue';
import PipelineEditorFileTreeItem from '~/pipeline_editor/components/file_tree/file_item.vue';
import { FILE_TREE_TIP_DISMISSED_KEY } from '~/pipeline_editor/constants';
import { mockCiConfigPath, mockIncludes, mockIncludesHelpPagePath } from '../../mock_data';
describe('Pipeline editor file nav', () => {
let wrapper;
const createComponent = ({ includes = mockIncludes, stubs } = {}) => {
wrapper = extendedWrapper(
shallowMount(PipelineEditorFileTreeContainer, {
provide: {
ciConfigPath: mockCiConfigPath,
includesHelpPagePath: mockIncludesHelpPagePath,
},
propsData: {
includes,
},
directives: {
GlTooltip: createMockDirective(),
},
stubs,
}),
);
};
const findTip = () => wrapper.findComponent(GlAlert);
const findCurrentConfigFilename = () => wrapper.findByTestId('current-config-filename');
const fileTreeItems = () => wrapper.findAllComponents(PipelineEditorFileTreeItem);
afterEach(() => {
localStorage.clear();
wrapper.destroy();
});
describe('template', () => {
beforeEach(() => {
createComponent({ stubs: { GlAlert } });
});
it('renders config file as a file item', () => {
expect(findCurrentConfigFilename().text()).toBe(mockCiConfigPath);
});
});
describe('when includes list is empty', () => {
describe('when dismiss state is not saved in local storage', () => {
beforeEach(() => {
createComponent({
includes: [],
stubs: { GlAlert },
});
});
it('does not render filenames', () => {
expect(fileTreeItems().exists()).toBe(false);
});
it('renders alert tip', async () => {
expect(findTip().exists()).toBe(true);
});
it('renders learn more link', async () => {
expect(findTip().props('secondaryButtonLink')).toBe(mockIncludesHelpPagePath);
});
it('can dismiss the tip', async () => {
expect(findTip().exists()).toBe(true);
findTip().vm.$emit('dismiss');
await nextTick();
expect(findTip().exists()).toBe(false);
});
});
describe('when dismiss state is saved in local storage', () => {
beforeEach(() => {
localStorage.setItem(FILE_TREE_TIP_DISMISSED_KEY, 'true');
createComponent({
includes: [],
stubs: { GlAlert },
});
});
it('does not render alert tip', async () => {
expect(findTip().exists()).toBe(false);
});
});
describe('when component receives new props with includes files', () => {
beforeEach(() => {
createComponent({ includes: [] });
});
it('hides tip and renders list of files', async () => {
expect(findTip().exists()).toBe(true);
expect(fileTreeItems()).toHaveLength(0);
await wrapper.setProps({ includes: mockIncludes });
expect(findTip().exists()).toBe(false);
expect(fileTreeItems()).toHaveLength(mockIncludes.length);
});
});
});
describe('when there are includes files', () => {
beforeEach(() => {
createComponent({ stubs: { GlAlert } });
});
it('does not render alert tip', () => {
expect(findTip().exists()).toBe(false);
});
it('renders the list of files', () => {
expect(fileTreeItems()).toHaveLength(mockIncludes.length);
});
describe('when component receives new props with empty includes', () => {
it('shows tip and does not render list of files', async () => {
expect(findTip().exists()).toBe(false);
expect(fileTreeItems()).toHaveLength(mockIncludes.length);
await wrapper.setProps({ includes: [] });
expect(findTip().exists()).toBe(true);
expect(fileTreeItems()).toHaveLength(0);
});
});
});
});
|
