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
|
import Vue from 'vue';
import VueApollo from 'vue-apollo';
import { shallowMount } from '@vue/test-utils';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import createMockApollo from 'helpers/mock_apollo_helper';
import BranchSwitcher from '~/ci/pipeline_editor/components/file_nav/branch_switcher.vue';
import PipelineEditorFileNav from '~/ci/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue';
import FileTreePopover from '~/ci/pipeline_editor/components/popovers/file_tree_popover.vue';
import getAppStatus from '~/ci/pipeline_editor/graphql/queries/client/app_status.query.graphql';
import {
EDITOR_APP_STATUS_EMPTY,
EDITOR_APP_STATUS_LOADING,
EDITOR_APP_STATUS_VALID,
} from '~/ci/pipeline_editor/constants';
Vue.use(VueApollo);
describe('Pipeline editor file nav', () => {
let wrapper;
const mockApollo = createMockApollo();
const createComponent = ({
appStatus = EDITOR_APP_STATUS_VALID,
isNewCiConfigFile = false,
} = {}) => {
mockApollo.clients.defaultClient.cache.writeQuery({
query: getAppStatus,
data: {
app: {
__typename: 'PipelineEditorApp',
status: appStatus,
},
},
});
wrapper = extendedWrapper(
shallowMount(PipelineEditorFileNav, {
apolloProvider: mockApollo,
propsData: {
isNewCiConfigFile,
},
}),
);
};
const findBranchSwitcher = () => wrapper.findComponent(BranchSwitcher);
const findFileTreeBtn = () => wrapper.findByTestId('file-tree-toggle');
const findPopoverContainer = () => wrapper.findComponent(FileTreePopover);
afterEach(() => {
wrapper.destroy();
});
describe('template', () => {
beforeEach(() => {
createComponent();
});
it('renders the branch switcher', () => {
expect(findBranchSwitcher().exists()).toBe(true);
});
});
describe('file tree', () => {
describe('when editor is in the empty state', () => {
beforeEach(() => {
createComponent({ appStatus: EDITOR_APP_STATUS_EMPTY, isNewCiConfigFile: false });
});
it('does not render the file tree button', () => {
expect(findFileTreeBtn().exists()).toBe(false);
});
it('does not render the file tree popover', () => {
expect(findPopoverContainer().exists()).toBe(false);
});
});
describe('when user is about to create their config file for the first time', () => {
beforeEach(() => {
createComponent({ appStatus: EDITOR_APP_STATUS_VALID, isNewCiConfigFile: true });
});
it('does not render the file tree button', () => {
expect(findFileTreeBtn().exists()).toBe(false);
});
it('does not render the file tree popover', () => {
expect(findPopoverContainer().exists()).toBe(false);
});
});
describe('when app is in a global loading state', () => {
it('renders the file tree button with a loading icon', () => {
createComponent({ appStatus: EDITOR_APP_STATUS_LOADING, isNewCiConfigFile: false });
expect(findFileTreeBtn().exists()).toBe(true);
expect(findFileTreeBtn().attributes('loading')).toBe('true');
});
});
describe('when editor has a non-empty config file open', () => {
beforeEach(() => {
createComponent({ appStatus: EDITOR_APP_STATUS_VALID, isNewCiConfigFile: false });
});
it('renders the file tree button', () => {
expect(findFileTreeBtn().exists()).toBe(true);
expect(findFileTreeBtn().props('icon')).toBe('file-tree');
});
it('renders the file tree popover', () => {
expect(findPopoverContainer().exists()).toBe(true);
});
it('file tree button emits toggle-file-tree event', () => {
expect(wrapper.emitted('toggle-file-tree')).toBe(undefined);
findFileTreeBtn().vm.$emit('click');
expect(wrapper.emitted('toggle-file-tree')).toHaveLength(1);
});
});
});
});
|
