2 files changed, 27 insertions, 14 deletions

diff --git a/spec/frontend/monitoring/components/variables/custom_variable_spec.js b/spec/frontend/monitoring/components/variables/dropdown_field_spec.js
index 5a2b26219b6..cc384aef231 100644
--- a/spec/frontend/monitoring/components/variables/custom_variable_spec.js
+++ b/spec/frontend/monitoring/components/variables/dropdown_field_spec.js
@@ -1,18 +1,25 @@
 import { shallowMount } from '@vue/test-utils';
 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
-import CustomVariable from '~/monitoring/components/variables/custom_variable.vue';
+import DropdownField from '~/monitoring/components/variables/dropdown_field.vue';
 
 describe('Custom variable component', () => {
   let wrapper;
-  const propsData = {
+
+  const defaultProps = {
     name: 'env',
     label: 'Select environment',
     value: 'Production',
-    options: [{ text: 'Production', value: 'prod' }, { text: 'Canary', value: 'canary' }],
+    options: {
+      values: [{ text: 'Production', value: 'prod' }, { text: 'Canary', value: 'canary' }],
+    },
   };
-  const createShallowWrapper = () => {
-    wrapper = shallowMount(CustomVariable, {
-      propsData,
+
+  const createShallowWrapper = props => {
+    wrapper = shallowMount(DropdownField, {
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
     });
   };
 
@@ -22,19 +29,25 @@ describe('Custom variable component', () => {
   it('renders dropdown element when all necessary props are passed', () => {
     createShallowWrapper();
 
-    expect(findDropdown()).toExist();
+    expect(findDropdown().exists()).toBe(true);
   });
 
   it('renders dropdown element with a text', () => {
     createShallowWrapper();
 
-    expect(findDropdown().attributes('text')).toBe(propsData.value);
+    expect(findDropdown().attributes('text')).toBe(defaultProps.value);
   });
 
   it('renders all the dropdown items', () => {
     createShallowWrapper();
 
-    expect(findDropdownItems()).toHaveLength(propsData.options.length);
+    expect(findDropdownItems()).toHaveLength(defaultProps.options.values.length);
+  });
+
+  it('renders dropdown when values are missing', () => {
+    createShallowWrapper({ options: {} });
+
+    expect(findDropdown().exists()).toBe(true);
   });
 
   it('changing dropdown items triggers update', () => {
@@ -46,7 +59,7 @@ describe('Custom variable component', () => {
       .vm.$emit('click');
 
     return wrapper.vm.$nextTick(() => {
-      expect(wrapper.vm.$emit).toHaveBeenCalledWith('onUpdate', 'env', 'canary');
+      expect(wrapper.vm.$emit).toHaveBeenCalledWith('input', 'canary');
     });
   });
 });
diff --git a/spec/frontend/monitoring/components/variables/text_variable_spec.js b/spec/frontend/monitoring/components/variables/text_field_spec.js
index f01584ae8bc..99c6facac38 100644
--- a/spec/frontend/monitoring/components/variables/text_variable_spec.js
+++ b/spec/frontend/monitoring/components/variables/text_field_spec.js
@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import { GlFormInput } from '@gitlab/ui';
-import TextVariable from '~/monitoring/components/variables/text_variable.vue';
+import TextField from '~/monitoring/components/variables/text_field.vue';
 
 describe('Text variable component', () => {
   let wrapper;
@@ -10,7 +10,7 @@ describe('Text variable component', () => {
     value: 'test-pod',
   };
   const createShallowWrapper = () => {
-    wrapper = shallowMount(TextVariable, {
+    wrapper = shallowMount(TextField, {
       propsData,
     });
   };
@@ -40,7 +40,7 @@ describe('Text variable component', () => {
     findInput().trigger('keyup.enter');
 
     return wrapper.vm.$nextTick(() => {
-      expect(wrapper.vm.$emit).toHaveBeenCalledWith('onUpdate', 'pod', 'prod-pod');
+      expect(wrapper.vm.$emit).toHaveBeenCalledWith('input', 'prod-pod');
     });
   });
 
@@ -53,7 +53,7 @@ describe('Text variable component', () => {
     findInput().trigger('blur');
 
     return wrapper.vm.$nextTick(() => {
-      expect(wrapper.vm.$emit).toHaveBeenCalledWith('onUpdate', 'pod', 'canary-pod');
+      expect(wrapper.vm.$emit).toHaveBeenCalledWith('input', 'canary-pod');
     });
   });
 });