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 { GlDropdown, GlDropdownItem, GlButton } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import Visibility from 'visibilityjs';
import RefreshButton from '~/monitoring/components/refresh_button.vue';
import { createStore } from '~/monitoring/stores';
describe('RefreshButton', () => {
let wrapper;
let store;
let dispatch;
let documentHidden;
const createWrapper = (options = {}) => {
wrapper = shallowMount(RefreshButton, { store, ...options });
};
const findRefreshBtn = () => wrapper.find(GlButton);
const findDropdown = () => wrapper.find(GlDropdown);
const findOptions = () => findDropdown().findAll(GlDropdownItem);
const findOptionAt = (index) => findOptions().at(index);
const expectFetchDataToHaveBeenCalledTimes = (times) => {
const refreshCalls = dispatch.mock.calls.filter(([action, payload]) => {
return action === 'monitoringDashboard/fetchDashboardData' && payload === undefined;
});
expect(refreshCalls).toHaveLength(times);
};
beforeEach(() => {
store = createStore();
jest.spyOn(store, 'dispatch').mockResolvedValue();
dispatch = store.dispatch;
documentHidden = false;
jest.spyOn(Visibility, 'hidden').mockImplementation(() => documentHidden);
createWrapper();
});
afterEach(() => {
dispatch.mockReset();
wrapper.destroy();
});
it('refreshes data when "refresh" is clicked', () => {
findRefreshBtn().vm.$emit('click');
expectFetchDataToHaveBeenCalledTimes(1);
});
it('refresh rate is "Off" in the dropdown', () => {
expect(findDropdown().props('text')).toBe('Off');
});
describe('when feature flag disable_metric_dashboard_refresh_rate is on', () => {
beforeEach(() => {
createWrapper({
provide: {
glFeatures: { disableMetricDashboardRefreshRate: true },
},
});
});
it('refresh rate is not available', () => {
expect(findDropdown().exists()).toBe(false);
});
});
describe('refresh rate options', () => {
it('presents multiple options', () => {
expect(findOptions().length).toBeGreaterThan(1);
});
it('presents an "Off" option as the default option', () => {
expect(findOptionAt(0).text()).toBe('Off');
expect(findOptionAt(0).props('isChecked')).toBe(true);
});
});
describe('when a refresh rate is chosen', () => {
const optIndex = 2; // Other option than "Off"
beforeEach(() => {
findOptionAt(optIndex).vm.$emit('click');
return wrapper.vm.$nextTick;
});
it('refresh rate appears in the dropdown', () => {
expect(findDropdown().props('text')).toBe('10s');
});
it('refresh rate option is checked', () => {
expect(findOptionAt(0).props('isChecked')).toBe(false);
expect(findOptionAt(optIndex).props('isChecked')).toBe(true);
});
it('refreshes data when a new refresh rate is chosen', () => {
expectFetchDataToHaveBeenCalledTimes(1);
});
it('refreshes data after two intervals of time have passed', async () => {
jest.runOnlyPendingTimers();
expectFetchDataToHaveBeenCalledTimes(2);
await wrapper.vm.$nextTick();
jest.runOnlyPendingTimers();
expectFetchDataToHaveBeenCalledTimes(3);
});
it('does not refresh data if the document is hidden', async () => {
documentHidden = true;
jest.runOnlyPendingTimers();
expectFetchDataToHaveBeenCalledTimes(1);
await wrapper.vm.$nextTick();
jest.runOnlyPendingTimers();
expectFetchDataToHaveBeenCalledTimes(1);
});
it('data is not refreshed anymore after component is destroyed', () => {
expect(jest.getTimerCount()).toBe(1);
wrapper.destroy();
expect(jest.getTimerCount()).toBe(0);
});
describe('when "Off" refresh rate is chosen', () => {
beforeEach(() => {
findOptionAt(0).vm.$emit('click');
return wrapper.vm.$nextTick;
});
it('refresh rate is "Off" in the dropdown', () => {
expect(findDropdown().props('text')).toBe('Off');
});
it('refresh rate option is appears selected', () => {
expect(findOptionAt(0).props('isChecked')).toBe(true);
expect(findOptionAt(optIndex).props('isChecked')).toBe(false);
});
it('stops refreshing data', () => {
jest.runOnlyPendingTimers();
expectFetchDataToHaveBeenCalledTimes(1);
});
});
});
});
|
