diff options
Diffstat (limited to 'spec/frontend/monitoring/components/variables_section_spec.js')
-rw-r--r-- | spec/frontend/monitoring/components/variables_section_spec.js | 63 |
1 files changed, 34 insertions, 29 deletions
diff --git a/spec/frontend/monitoring/components/variables_section_spec.js b/spec/frontend/monitoring/components/variables_section_spec.js index fd814e81c8f..3097906ee68 100644 --- a/spec/frontend/monitoring/components/variables_section_spec.js +++ b/spec/frontend/monitoring/components/variables_section_spec.js @@ -1,13 +1,12 @@ import { shallowMount } from '@vue/test-utils'; import Vuex from 'vuex'; import VariablesSection from '~/monitoring/components/variables_section.vue'; -import CustomVariable from '~/monitoring/components/variables/custom_variable.vue'; -import TextVariable from '~/monitoring/components/variables/text_variable.vue'; +import DropdownField from '~/monitoring/components/variables/dropdown_field.vue'; +import TextField from '~/monitoring/components/variables/text_field.vue'; import { updateHistory, mergeUrlParams } from '~/lib/utils/url_utility'; import { createStore } from '~/monitoring/stores'; import { convertVariablesForURL } from '~/monitoring/utils'; -import * as types from '~/monitoring/stores/mutation_types'; -import { mockTemplatingDataResponses } from '../mock_data'; +import { storeVariables } from '../mock_data'; jest.mock('~/lib/utils/url_utility', () => ({ updateHistory: jest.fn(), @@ -17,11 +16,6 @@ jest.mock('~/lib/utils/url_utility', () => ({ describe('Metrics dashboard/variables section component', () => { let store; let wrapper; - const sampleVariables = { - label1: mockTemplatingDataResponses.simpleText.simpleText, - label2: mockTemplatingDataResponses.advText.advText, - label3: mockTemplatingDataResponses.simpleCustom.simpleCustom, - }; const createShallowWrapper = () => { wrapper = shallowMount(VariablesSection, { @@ -29,30 +23,41 @@ describe('Metrics dashboard/variables section component', () => { }); }; - const findTextInput = () => wrapper.findAll(TextVariable); - const findCustomInput = () => wrapper.findAll(CustomVariable); + const findTextInputs = () => wrapper.findAll(TextField); + const findCustomInputs = () => wrapper.findAll(DropdownField); beforeEach(() => { store = createStore(); - store.state.monitoringDashboard.showEmptyState = false; + store.state.monitoringDashboard.emptyState = null; }); it('does not show the variables section', () => { createShallowWrapper(); - const allInputs = findTextInput().length + findCustomInput().length; + const allInputs = findTextInputs().length + findCustomInputs().length; expect(allInputs).toBe(0); }); - it('shows the variables section', () => { - createShallowWrapper(); - store.commit(`monitoringDashboard/${types.SET_VARIABLES}`, sampleVariables); + describe('when variables are set', () => { + beforeEach(() => { + store.state.monitoringDashboard.variables = storeVariables; + createShallowWrapper(); + + return wrapper.vm.$nextTick; + }); + + it('shows the variables section', () => { + const allInputs = findTextInputs().length + findCustomInputs().length; + + expect(allInputs).toBe(storeVariables.length); + }); - return wrapper.vm.$nextTick(() => { - const allInputs = findTextInput().length + findCustomInput().length; + it('shows the right custom variable inputs', () => { + const customInputs = findCustomInputs(); - expect(allInputs).toBe(Object.keys(sampleVariables).length); + expect(customInputs.at(0).props('name')).toBe('customSimple'); + expect(customInputs.at(1).props('name')).toBe('customAdvanced'); }); }); @@ -65,8 +70,8 @@ describe('Metrics dashboard/variables section component', () => { monitoringDashboard: { namespaced: true, state: { - showEmptyState: false, - variables: sampleVariables, + emptyState: null, + variables: storeVariables, }, actions: { updateVariablesAndFetchData, @@ -79,14 +84,14 @@ describe('Metrics dashboard/variables section component', () => { }); it('merges the url params and refreshes the dashboard when a text-based variables inputs are updated', () => { - const firstInput = findTextInput().at(0); + const firstInput = findTextInputs().at(0); - firstInput.vm.$emit('onUpdate', 'label1', 'test'); + firstInput.vm.$emit('input', 'test'); return wrapper.vm.$nextTick(() => { expect(updateVariablesAndFetchData).toHaveBeenCalled(); expect(mergeUrlParams).toHaveBeenCalledWith( - convertVariablesForURL(sampleVariables), + convertVariablesForURL(storeVariables), window.location.href, ); expect(updateHistory).toHaveBeenCalled(); @@ -94,14 +99,14 @@ describe('Metrics dashboard/variables section component', () => { }); it('merges the url params and refreshes the dashboard when a custom-based variables inputs are updated', () => { - const firstInput = findCustomInput().at(0); + const firstInput = findCustomInputs().at(0); - firstInput.vm.$emit('onUpdate', 'label1', 'test'); + firstInput.vm.$emit('input', 'test'); return wrapper.vm.$nextTick(() => { expect(updateVariablesAndFetchData).toHaveBeenCalled(); expect(mergeUrlParams).toHaveBeenCalledWith( - convertVariablesForURL(sampleVariables), + convertVariablesForURL(storeVariables), window.location.href, ); expect(updateHistory).toHaveBeenCalled(); @@ -109,9 +114,9 @@ describe('Metrics dashboard/variables section component', () => { }); 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 = findTextInput().at(0); + const firstInput = findTextInputs().at(0); - firstInput.vm.$emit('onUpdate', 'label1', 'Simple text'); + firstInput.vm.$emit('input', 'My default value'); expect(updateVariablesAndFetchData).not.toHaveBeenCalled(); expect(mergeUrlParams).not.toHaveBeenCalled(); |