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();