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
139
140
141
142
143
144
145
146
|
import { GlButton } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import { useLocalStorageSpy } from 'helpers/local_storage_helper';
import FirstPipelineCard from '~/pipeline_editor/components/drawer/cards/first_pipeline_card.vue';
import GettingStartedCard from '~/pipeline_editor/components/drawer/cards/getting_started_card.vue';
import PipelineConfigReferenceCard from '~/pipeline_editor/components/drawer/cards/pipeline_config_reference_card.vue';
import VisualizeAndLintCard from '~/pipeline_editor/components/drawer/cards/visualize_and_lint_card.vue';
import PipelineEditorDrawer from '~/pipeline_editor/components/drawer/pipeline_editor_drawer.vue';
import { DRAWER_EXPANDED_KEY } from '~/pipeline_editor/constants';
import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
describe('Pipeline editor drawer', () => {
useLocalStorageSpy();
let wrapper;
const createComponent = () => {
wrapper = shallowMount(PipelineEditorDrawer, {
stubs: { LocalStorageSync },
});
};
const findFirstPipelineCard = () => wrapper.findComponent(FirstPipelineCard);
const findGettingStartedCard = () => wrapper.findComponent(GettingStartedCard);
const findPipelineConfigReferenceCard = () => wrapper.findComponent(PipelineConfigReferenceCard);
const findToggleBtn = () => wrapper.findComponent(GlButton);
const findVisualizeAndLintCard = () => wrapper.findComponent(VisualizeAndLintCard);
const findArrowIcon = () => wrapper.find('[data-testid="toggle-icon"]');
const findCollapseText = () => wrapper.find('[data-testid="collapse-text"]');
const findDrawerContent = () => wrapper.find('[data-testid="drawer-content"]');
const clickToggleBtn = async () => findToggleBtn().vm.$emit('click');
const originalObjects = [];
beforeEach(() => {
originalObjects.push(window.gon, window.gl);
});
afterEach(() => {
wrapper.destroy();
localStorage.clear();
[window.gon, window.gl] = originalObjects;
});
describe('default expanded state', () => {
it('sets the drawer to be closed by default', async () => {
createComponent();
expect(findDrawerContent().exists()).toBe(false);
});
});
describe('when the drawer is collapsed', () => {
beforeEach(async () => {
createComponent();
});
it('shows the left facing arrow icon', () => {
expect(findArrowIcon().props('name')).toBe('chevron-double-lg-left');
});
it('does not show the collapse text', () => {
expect(findCollapseText().exists()).toBe(false);
});
it('does not show the drawer content', () => {
expect(findDrawerContent().exists()).toBe(false);
});
it('can open the drawer by clicking on the toggle button', async () => {
expect(findDrawerContent().exists()).toBe(false);
await clickToggleBtn();
expect(findDrawerContent().exists()).toBe(true);
});
});
describe('when the drawer is expanded', () => {
beforeEach(async () => {
createComponent();
await clickToggleBtn();
});
it('shows the right facing arrow icon', () => {
expect(findArrowIcon().props('name')).toBe('chevron-double-lg-right');
});
it('shows the collapse text', () => {
expect(findCollapseText().exists()).toBe(true);
});
it('shows the drawer content', () => {
expect(findDrawerContent().exists()).toBe(true);
});
it('shows all the introduction cards', () => {
expect(findFirstPipelineCard().exists()).toBe(true);
expect(findGettingStartedCard().exists()).toBe(true);
expect(findPipelineConfigReferenceCard().exists()).toBe(true);
expect(findVisualizeAndLintCard().exists()).toBe(true);
});
it('can close the drawer by clicking on the toggle button', async () => {
expect(findDrawerContent().exists()).toBe(true);
await clickToggleBtn();
expect(findDrawerContent().exists()).toBe(false);
});
});
describe('local storage', () => {
it('saves the drawer expanded value to local storage', async () => {
localStorage.setItem(DRAWER_EXPANDED_KEY, 'false');
createComponent();
await clickToggleBtn();
expect(localStorage.setItem.mock.calls).toEqual([
[DRAWER_EXPANDED_KEY, 'false'],
[DRAWER_EXPANDED_KEY, 'true'],
]);
});
it('loads the drawer collapsed when local storage is set to `false`, ', async () => {
localStorage.setItem(DRAWER_EXPANDED_KEY, false);
createComponent();
await nextTick();
expect(findDrawerContent().exists()).toBe(false);
});
it('loads the drawer expanded when local storage is set to `true`, ', async () => {
localStorage.setItem(DRAWER_EXPANDED_KEY, true);
createComponent();
await nextTick();
expect(findDrawerContent().exists()).toBe(true);
});
});
});
|
