debian-mirror-gitlab/spec/frontend/monitoring/components/refresh_button_spec.js

153 lines
4.3 KiB
JavaScript
Raw Normal View History

2021-03-11 19:13:27 +05:30
import { GlDropdown, GlDropdownItem, GlButton } from '@gitlab/ui';
2020-07-28 23:09:34 +05:30
import { shallowMount } from '@vue/test-utils';
2020-10-24 23:57:45 +05:30
import Visibility from 'visibilityjs';
2022-04-04 11:22:00 +05:30
import { nextTick } from 'vue';
2020-07-28 23:09:34 +05:30
import RefreshButton from '~/monitoring/components/refresh_button.vue';
2021-03-11 19:13:27 +05:30
import { createStore } from '~/monitoring/stores';
2020-07-28 23:09:34 +05:30
describe('RefreshButton', () => {
let wrapper;
let store;
let dispatch;
let documentHidden;
2020-10-24 23:57:45 +05:30
const createWrapper = (options = {}) => {
wrapper = shallowMount(RefreshButton, { store, ...options });
2020-07-28 23:09:34 +05:30
};
const findRefreshBtn = () => wrapper.find(GlButton);
2020-11-24 15:15:51 +05:30
const findDropdown = () => wrapper.find(GlDropdown);
const findOptions = () => findDropdown().findAll(GlDropdownItem);
2021-03-08 18:12:59 +05:30
const findOptionAt = (index) => findOptions().at(index);
2020-07-28 23:09:34 +05:30
2021-03-08 18:12:59 +05:30
const expectFetchDataToHaveBeenCalledTimes = (times) => {
2020-07-28 23:09:34 +05:30
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;
2020-10-24 23:57:45 +05:30
jest.spyOn(Visibility, 'hidden').mockImplementation(() => documentHidden);
2020-07-28 23:09:34 +05:30
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');
});
2020-10-24 23:57:45 +05:30
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);
});
});
2020-07-28 23:09:34 +05:30
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"
2022-04-04 11:22:00 +05:30
beforeEach(async () => {
2020-07-28 23:09:34 +05:30
findOptionAt(optIndex).vm.$emit('click');
2022-04-04 11:22:00 +05:30
await nextTick();
2020-07-28 23:09:34 +05:30
});
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);
2022-04-04 11:22:00 +05:30
await nextTick();
2020-07-28 23:09:34 +05:30
jest.runOnlyPendingTimers();
expectFetchDataToHaveBeenCalledTimes(3);
});
it('does not refresh data if the document is hidden', async () => {
documentHidden = true;
jest.runOnlyPendingTimers();
expectFetchDataToHaveBeenCalledTimes(1);
2022-04-04 11:22:00 +05:30
await nextTick();
2020-07-28 23:09:34 +05:30
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', () => {
2022-04-04 11:22:00 +05:30
beforeEach(async () => {
2020-07-28 23:09:34 +05:30
findOptionAt(0).vm.$emit('click');
2022-04-04 11:22:00 +05:30
await nextTick();
2020-07-28 23:09:34 +05:30
});
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);
});
});
});
});