1 files changed, 92 insertions, 60 deletions

diff --git a/spec/frontend/jobs/components/manual_variables_form_spec.js b/spec/frontend/jobs/components/manual_variables_form_spec.js
index 7e42ee957d3..a5278af8e33 100644
--- a/spec/frontend/jobs/components/manual_variables_form_spec.js
+++ b/spec/frontend/jobs/components/manual_variables_form_spec.js
@@ -1,9 +1,9 @@
 import { GlSprintf, GlLink } from '@gitlab/ui';
-import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import { createLocalVue, mount } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import Form from '~/jobs/components/manual_variables_form.vue';
+import ManualVariablesForm from '~/jobs/components/manual_variables_form.vue';
 
 const localVue = createLocalVue();
 
@@ -21,7 +21,7 @@ describe('Manual Variables Form', () => {
     },
   };
 
-  const createComponent = ({ props = {}, mountFn = shallowMount } = {}) => {
+  const createComponent = (props = {}) => {
     store = new Vuex.Store({
       actions: {
         triggerManualJob: jest.fn(),
@@ -29,7 +29,7 @@ describe('Manual Variables Form', () => {
     });
 
     wrapper = extendedWrapper(
-      mountFn(localVue.extend(Form), {
+      mount(localVue.extend(ManualVariablesForm), {
         propsData: { ...requiredProps, ...props },
         localVue,
         store,
@@ -40,88 +40,120 @@ describe('Manual Variables Form', () => {
     );
   };
 
-  const findInputKey = () => wrapper.findComponent({ ref: 'inputKey' });
-  const findInputValue = () => wrapper.findComponent({ ref: 'inputSecretValue' });
   const findHelpText = () => wrapper.findComponent(GlSprintf);
   const findHelpLink = () => wrapper.findComponent(GlLink);
 
   const findTriggerBtn = () => wrapper.findByTestId('trigger-manual-job-btn');
   const findDeleteVarBtn = () => wrapper.findByTestId('delete-variable-btn');
+  const findAllDeleteVarBtns = () => wrapper.findAllByTestId('delete-variable-btn');
+  const findDeleteVarBtnPlaceholder = () => wrapper.findByTestId('delete-variable-btn-placeholder');
   const findCiVariableKey = () => wrapper.findByTestId('ci-variable-key');
+  const findAllCiVariableKeys = () => wrapper.findAllByTestId('ci-variable-key');
   const findCiVariableValue = () => wrapper.findByTestId('ci-variable-value');
   const findAllVariables = () => wrapper.findAllByTestId('ci-variable-row');
 
+  const setCiVariableKey = () => {
+    findCiVariableKey().setValue('new key');
+    findCiVariableKey().vm.$emit('change');
+    nextTick();
+  };
+
+  const setCiVariableKeyByPosition = (position, value) => {
+    findAllCiVariableKeys().at(position).setValue(value);
+    findAllCiVariableKeys().at(position).vm.$emit('change');
+    nextTick();
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
   afterEach(() => {
     wrapper.destroy();
   });
 
-  describe('shallowMount', () => {
-    beforeEach(() => {
-      createComponent();
-    });
+  it('creates a new variable when user enters a new key value', async () => {
+    expect(findAllVariables()).toHaveLength(1);
 
-    it('renders empty form with correct placeholders', () => {
-      expect(findInputKey().attributes('placeholder')).toBe('Input variable key');
-      expect(findInputValue().attributes('placeholder')).toBe('Input variable value');
-    });
+    await setCiVariableKey();
 
-    it('renders help text with provided link', () => {
-      expect(findHelpText().exists()).toBe(true);
-      expect(findHelpLink().attributes('href')).toBe(
-        '/help/ci/variables/index#add-a-cicd-variable-to-a-project',
-      );
-    });
+    expect(findAllVariables()).toHaveLength(2);
+  });
 
-    describe('when adding a new variable', () => {
-      it('creates a new variable when user types a new key and resets the form', async () => {
-        await findInputKey().setValue('new key');
+  it('does not create extra empty variables', async () => {
+    expect(findAllVariables()).toHaveLength(1);
 
-        expect(findAllVariables()).toHaveLength(1);
-        expect(findCiVariableKey().element.value).toBe('new key');
-        expect(findInputKey().attributes('value')).toBe(undefined);
-      });
+    await setCiVariableKey();
 
-      it('creates a new variable when user types a new value and resets the form', async () => {
-        await findInputValue().setValue('new value');
+    expect(findAllVariables()).toHaveLength(2);
 
-        expect(findAllVariables()).toHaveLength(1);
-        expect(findCiVariableValue().element.value).toBe('new value');
-        expect(findInputValue().attributes('value')).toBe(undefined);
-      });
-    });
+    await setCiVariableKey();
+
+    expect(findAllVariables()).toHaveLength(2);
   });
 
-  describe('mount', () => {
-    beforeEach(() => {
-      createComponent({ mountFn: mount });
-    });
+  it('removes the correct variable row', async () => {
+    const variableKeyNameOne = 'key-one';
+    const variableKeyNameThree = 'key-three';
 
-    describe('when deleting a variable', () => {
-      it('removes the variable row', async () => {
-        await wrapper.setData({
-          variables: [
-            {
-              key: 'new key',
-              secret_value: 'value',
-              id: '1',
-            },
-          ],
-        });
+    await setCiVariableKeyByPosition(0, variableKeyNameOne);
 
-        findDeleteVarBtn().trigger('click');
+    await setCiVariableKeyByPosition(1, 'key-two');
 
-        await wrapper.vm.$nextTick();
+    await setCiVariableKeyByPosition(2, variableKeyNameThree);
 
-        expect(findAllVariables()).toHaveLength(0);
-      });
-    });
+    expect(findAllVariables()).toHaveLength(4);
 
-    it('trigger button is disabled after trigger action', async () => {
-      expect(findTriggerBtn().props('disabled')).toBe(false);
+    await findAllDeleteVarBtns().at(1).trigger('click');
 
-      await findTriggerBtn().trigger('click');
+    expect(findAllVariables()).toHaveLength(3);
 
-      expect(findTriggerBtn().props('disabled')).toBe(true);
-    });
+    expect(findAllCiVariableKeys().at(0).element.value).toBe(variableKeyNameOne);
+    expect(findAllCiVariableKeys().at(1).element.value).toBe(variableKeyNameThree);
+    expect(findAllCiVariableKeys().at(2).element.value).toBe('');
+  });
+
+  it('trigger button is disabled after trigger action', async () => {
+    expect(findTriggerBtn().props('disabled')).toBe(false);
+
+    await findTriggerBtn().trigger('click');
+
+    expect(findTriggerBtn().props('disabled')).toBe(true);
+  });
+
+  it('delete variable button should only show when there is more than one variable', async () => {
+    expect(findDeleteVarBtn().exists()).toBe(false);
+
+    await setCiVariableKey();
+
+    expect(findDeleteVarBtn().exists()).toBe(true);
+  });
+
+  it('delete variable button placeholder should only exist when a user cannot remove', async () => {
+    expect(findDeleteVarBtnPlaceholder().exists()).toBe(true);
+  });
+
+  it('renders help text with provided link', () => {
+    expect(findHelpText().exists()).toBe(true);
+    expect(findHelpLink().attributes('href')).toBe(
+      '/help/ci/variables/index#add-a-cicd-variable-to-a-project',
+    );
+  });
+
+  it('passes variables in correct format', async () => {
+    jest.spyOn(store, 'dispatch');
+
+    await setCiVariableKey();
+
+    await findCiVariableValue().setValue('new value');
+
+    await findTriggerBtn().trigger('click');
+
+    expect(store.dispatch).toHaveBeenCalledWith('triggerManualJob', [
+      {
+        key: 'new key',
+        secret_value: 'new value',
+      },
+    ]);
   });
 });