126 lines
3.8 KiB
JavaScript
126 lines
3.8 KiB
JavaScript
import { shallowMount } from '@vue/test-utils';
|
|
import Vuex from 'vuex';
|
|
import { nextTick } from 'vue';
|
|
import { updateHistory, mergeUrlParams } from '~/lib/utils/url_utility';
|
|
import DropdownField from '~/monitoring/components/variables/dropdown_field.vue';
|
|
import TextField from '~/monitoring/components/variables/text_field.vue';
|
|
import VariablesSection from '~/monitoring/components/variables_section.vue';
|
|
import { createStore } from '~/monitoring/stores';
|
|
import { convertVariablesForURL } from '~/monitoring/utils';
|
|
import { storeVariables } from '../mock_data';
|
|
|
|
jest.mock('~/lib/utils/url_utility', () => ({
|
|
updateHistory: jest.fn(),
|
|
mergeUrlParams: jest.fn(),
|
|
}));
|
|
|
|
describe('Metrics dashboard/variables section component', () => {
|
|
let store;
|
|
let wrapper;
|
|
|
|
const createShallowWrapper = () => {
|
|
wrapper = shallowMount(VariablesSection, {
|
|
store,
|
|
});
|
|
};
|
|
|
|
const findTextInputs = () => wrapper.findAllComponents(TextField);
|
|
const findCustomInputs = () => wrapper.findAllComponents(DropdownField);
|
|
|
|
beforeEach(() => {
|
|
store = createStore();
|
|
|
|
store.state.monitoringDashboard.emptyState = null;
|
|
});
|
|
|
|
it('does not show the variables section', () => {
|
|
createShallowWrapper();
|
|
const allInputs = findTextInputs().length + findCustomInputs().length;
|
|
|
|
expect(allInputs).toBe(0);
|
|
});
|
|
|
|
describe('when variables are set', () => {
|
|
beforeEach(async () => {
|
|
store.state.monitoringDashboard.variables = storeVariables;
|
|
createShallowWrapper();
|
|
|
|
await nextTick();
|
|
});
|
|
|
|
it('shows the variables section', () => {
|
|
const allInputs = findTextInputs().length + findCustomInputs().length;
|
|
|
|
expect(allInputs).toBe(storeVariables.length);
|
|
});
|
|
|
|
it('shows the right custom variable inputs', () => {
|
|
const customInputs = findCustomInputs();
|
|
|
|
expect(customInputs.at(0).props('name')).toBe('customSimple');
|
|
expect(customInputs.at(1).props('name')).toBe('customAdvanced');
|
|
});
|
|
});
|
|
|
|
describe('when changing the variable inputs', () => {
|
|
const updateVariablesAndFetchData = jest.fn();
|
|
|
|
beforeEach(() => {
|
|
store = new Vuex.Store({
|
|
modules: {
|
|
monitoringDashboard: {
|
|
namespaced: true,
|
|
state: {
|
|
emptyState: null,
|
|
variables: storeVariables,
|
|
},
|
|
actions: {
|
|
updateVariablesAndFetchData,
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
createShallowWrapper();
|
|
});
|
|
|
|
it('merges the url params and refreshes the dashboard when a text-based variables inputs are updated', async () => {
|
|
const firstInput = findTextInputs().at(0);
|
|
|
|
firstInput.vm.$emit('input', 'test');
|
|
|
|
await nextTick();
|
|
expect(updateVariablesAndFetchData).toHaveBeenCalled();
|
|
expect(mergeUrlParams).toHaveBeenCalledWith(
|
|
convertVariablesForURL(storeVariables),
|
|
window.location.href,
|
|
);
|
|
expect(updateHistory).toHaveBeenCalled();
|
|
});
|
|
|
|
it('merges the url params and refreshes the dashboard when a custom-based variables inputs are updated', async () => {
|
|
const firstInput = findCustomInputs().at(0);
|
|
|
|
firstInput.vm.$emit('input', 'test');
|
|
|
|
await nextTick();
|
|
expect(updateVariablesAndFetchData).toHaveBeenCalled();
|
|
expect(mergeUrlParams).toHaveBeenCalledWith(
|
|
convertVariablesForURL(storeVariables),
|
|
window.location.href,
|
|
);
|
|
expect(updateHistory).toHaveBeenCalled();
|
|
});
|
|
|
|
it('does not merge the url params and refreshes the dashboard if the value entered is not different that is what currently stored', () => {
|
|
const firstInput = findTextInputs().at(0);
|
|
|
|
firstInput.vm.$emit('input', 'My default value');
|
|
|
|
expect(updateVariablesAndFetchData).not.toHaveBeenCalled();
|
|
expect(mergeUrlParams).not.toHaveBeenCalled();
|
|
expect(updateHistory).not.toHaveBeenCalled();
|
|
});
|
|
});
|
|
});
|