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
|
import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import GraphGroup from '~/monitoring/components/graph_group.vue';
describe('Graph group component', () => {
let wrapper;
const findGroup = () => wrapper.findComponent({ ref: 'graph-group' });
const findContent = () => wrapper.findComponent({ ref: 'graph-group-content' });
const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
const findCaretIcon = () => wrapper.findComponent(GlIcon);
const findToggleButton = () => wrapper.find('[data-testid="group-toggle-button"]');
const createComponent = (propsData) => {
wrapper = shallowMount(GraphGroup, {
propsData,
});
};
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 chevron-lg-down caret icon', () => {
expect(findContent().isVisible()).toBe(true);
expect(findCaretIcon().props('name')).toBe('chevron-lg-down');
});
it('should show the chevron-lg-right caret icon when the user collapses the group', async () => {
findToggleButton().trigger('click');
await nextTick();
expect(findContent().isVisible()).toBe(false);
expect(findCaretIcon().props('name')).toBe('chevron-lg-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', async () => {
wrapper.setProps({
collapseGroup: true,
});
await nextTick();
expect(findContent().isVisible()).toBe(true);
expect(findCaretIcon().props('name')).toBe('chevron-lg-down');
});
});
describe('When group is collapsed', () => {
beforeEach(() => {
createComponent({
name: 'panel',
collapseGroup: true,
});
});
it('should show the chevron-lg-down caret icon when collapseGroup is true', () => {
expect(findCaretIcon().props('name')).toBe('chevron-lg-right');
});
it('should show the chevron-lg-right caret icon when collapseGroup is false', async () => {
findToggleButton().trigger('click');
await nextTick();
expect(findCaretIcon().props('name')).toBe('chevron-lg-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', async () => {
wrapper.setProps({
collapseGroup: false,
});
await nextTick();
expect(findContent().isVisible()).toBe(true);
expect(findCaretIcon().exists()).toBe(false);
});
});
});
|