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
147
148
149
150
151
|
import { shallowMount } from '@vue/test-utils';
import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
import GraphGroup from '~/monitoring/components/graph_group.vue';
describe('Graph group component', () => {
let wrapper;
const findGroup = () => wrapper.find({ ref: 'graph-group' });
const findContent = () => wrapper.find({ ref: 'graph-group-content' });
const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
const findCaretIcon = () => wrapper.find(GlIcon);
const findToggleButton = () => wrapper.find('[data-testid="group-toggle-button"]');
const createComponent = propsData => {
wrapper = shallowMount(GraphGroup, {
propsData,
});
};
afterEach(() => {
wrapper.destroy();
});
describe('When group is not collapsed', () => {
beforeEach(() => {
createComponent({
name: 'panel',
collapseGroup: false,
});
});
it('should not show a loading icon', () => {
expect(findLoadingIcon().exists()).toBe(false);
});
it('should show the angle-down caret icon', () => {
expect(findContent().isVisible()).toBe(true);
expect(findCaretIcon().props('name')).toBe('angle-down');
});
it('should show the angle-right caret icon when the user collapses the group', () => {
findToggleButton().trigger('click');
return wrapper.vm.$nextTick().then(() => {
expect(findContent().isVisible()).toBe(false);
expect(findCaretIcon().props('name')).toBe('angle-right');
});
});
it('should contain a tab index for the collapse button', () => {
const groupToggle = findToggleButton();
expect(groupToggle.attributes('tabindex')).toBeDefined();
});
it('should show the open the group when collapseGroup is set to true', () => {
wrapper.setProps({
collapseGroup: true,
});
return wrapper.vm.$nextTick().then(() => {
expect(findContent().isVisible()).toBe(true);
expect(findCaretIcon().props('name')).toBe('angle-down');
});
});
});
describe('When group is collapsed', () => {
beforeEach(() => {
createComponent({
name: 'panel',
collapseGroup: true,
});
});
it('should show the angle-down caret icon when collapseGroup is true', () => {
expect(findCaretIcon().props('name')).toBe('angle-right');
});
it('should show the angle-right caret icon when collapseGroup is false', () => {
findToggleButton().trigger('click');
return wrapper.vm.$nextTick().then(() => {
expect(findCaretIcon().props('name')).toBe('angle-down');
});
});
it('should call collapse the graph group content when enter is pressed on the caret icon', () => {
const graphGroupContent = findContent();
const button = findToggleButton();
button.trigger('keyup.enter');
expect(graphGroupContent.isVisible()).toBe(false);
});
});
describe('When groups can not be collapsed', () => {
beforeEach(() => {
createComponent({
name: 'panel',
showPanels: false,
collapseGroup: false,
});
});
it('should not have a container when showPanels is false', () => {
expect(findGroup().exists()).toBe(false);
expect(findContent().exists()).toBe(true);
});
});
describe('When group is loading', () => {
beforeEach(() => {
createComponent({
name: 'panel',
isLoading: true,
});
});
it('should show a loading icon', () => {
expect(findLoadingIcon().exists()).toBe(true);
});
});
describe('When group does not show a panel heading', () => {
beforeEach(() => {
createComponent({
name: 'panel',
showPanels: false,
collapseGroup: false,
});
});
it('should collapse the panel content', () => {
expect(findContent().isVisible()).toBe(true);
expect(findCaretIcon().exists()).toBe(false);
});
it('should show the panel content when collapse is set to false', () => {
wrapper.setProps({
collapseGroup: false,
});
return wrapper.vm.$nextTick().then(() => {
expect(findContent().isVisible()).toBe(true);
expect(findCaretIcon().exists()).toBe(false);
});
});
});
});
|
