1 files changed, 126 insertions, 0 deletions
diff --git a/spec/frontend/monitoring/components/variables_section_spec.js b/spec/frontend/monitoring/components/variables_section_spec.js
new file mode 100644
index 00000000000..095d89c9231
--- /dev/null
+++ b/spec/frontend/monitoring/components/variables_section_spec.js
@@ -0,0 +1,126 @@
+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 { 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';
+
+jest.mock('~/lib/utils/url_utility', () => ({
+  updateHistory: jest.fn(),
+  mergeUrlParams: jest.fn(),
+}));
+
+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, {
+      store,
+    });
+  };
+
+  const findTextInput = () => wrapper.findAll(TextVariable);
+  const findCustomInput = () => wrapper.findAll(CustomVariable);
+
+  beforeEach(() => {
+    store = createStore();
+
+    store.state.monitoringDashboard.showEmptyState = false;
+  });
+
+  it('does not show the variables section', () => {
+    createShallowWrapper();
+    const allInputs = findTextInput().length + findCustomInput().length;
+
+    expect(allInputs).toBe(0);
+  });
+
+  it('shows the variables section', () => {
+    createShallowWrapper();
+    store.commit(`monitoringDashboard/${types.SET_VARIABLES}`, sampleVariables);
+
+    return wrapper.vm.$nextTick(() => {
+      const allInputs = findTextInput().length + findCustomInput().length;
+
+      expect(allInputs).toBe(Object.keys(sampleVariables).length);
+    });
+  });
+
+  describe('when changing the variable inputs', () => {
+    const fetchDashboardData = jest.fn();
+    const updateVariableValues = jest.fn();
+
+    beforeEach(() => {
+      store = new Vuex.Store({
+        modules: {
+          monitoringDashboard: {
+            namespaced: true,
+            state: {
+              showEmptyState: false,
+              promVariables: sampleVariables,
+            },
+            actions: {
+              fetchDashboardData,
+              updateVariableValues,
+            },
+          },
+        },
+      });
+
+      createShallowWrapper();
+    });
+
+    it('merges the url params and refreshes the dashboard when a text-based variables inputs are updated', () => {
+      const firstInput = findTextInput().at(0);
+
+      firstInput.vm.$emit('onUpdate', 'label1', 'test');
+
+      return wrapper.vm.$nextTick(() => {
+        expect(updateVariableValues).toHaveBeenCalled();
+        expect(mergeUrlParams).toHaveBeenCalledWith(
+          convertVariablesForURL(sampleVariables),
+          window.location.href,
+        );
+        expect(updateHistory).toHaveBeenCalled();
+        expect(fetchDashboardData).toHaveBeenCalled();
+      });
+    });
+
+    it('merges the url params and refreshes the dashboard when a custom-based variables inputs are updated', () => {
+      const firstInput = findCustomInput().at(0);
+
+      firstInput.vm.$emit('onUpdate', 'label1', 'test');
+
+      return wrapper.vm.$nextTick(() => {
+        expect(updateVariableValues).toHaveBeenCalled();
+        expect(mergeUrlParams).toHaveBeenCalledWith(
+          convertVariablesForURL(sampleVariables),
+          window.location.href,
+        );
+        expect(updateHistory).toHaveBeenCalled();
+        expect(fetchDashboardData).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 = findTextInput().at(0);
+
+      firstInput.vm.$emit('onUpdate', 'label1', 'Simple text');
+
+      expect(updateVariableValues).not.toHaveBeenCalled();
+      expect(mergeUrlParams).not.toHaveBeenCalled();
+      expect(updateHistory).not.toHaveBeenCalled();
+      expect(fetchDashboardData).not.toHaveBeenCalled();
+    });
+  });
+});