Add Job specific variables

Adds Job specific variables to facilitate specifying variables when
running manual jobs.

2 files changed, 89 insertions, 0 deletions

diff --git a/spec/javascripts/jobs/components/job_app_spec.js b/spec/javascripts/jobs/components/job_app_spec.js
index f28d2c2a882..c58d59b4b16 100644
--- a/spec/javascripts/jobs/components/job_app_spec.js
+++ b/spec/javascripts/jobs/components/job_app_spec.js
@@ -19,6 +19,7 @@ describe('Job App ', () => {
     runnerHelpUrl: 'help/runner',
     deploymentHelpUrl: 'help/deployment',
     runnerSettingsUrl: 'settings/ci-cd/runners',
+    variablesSettingsUrl: 'settings/ci-cd/variables',
     terminalPath: 'jobs/123/terminal',
     pagePath: `${gl.TEST_HOST}jobs/123`,
     logState:
diff --git a/spec/javascripts/jobs/components/manual_variables_form_spec.js b/spec/javascripts/jobs/components/manual_variables_form_spec.js
new file mode 100644
index 00000000000..093aa905185
--- /dev/null
+++ b/spec/javascripts/jobs/components/manual_variables_form_spec.js
@@ -0,0 +1,88 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlButton } from '@gitlab/ui';
+import Form from '~/jobs/components/manual_variables_form.vue';
+
+describe('Manual Variables Form', () => {
+  let wrapper;
+  const requiredProps = {
+    action: {
+      path: '/play',
+      method: 'post',
+      button_title: 'Trigger this manual action',
+    },
+    variablesSettingsUrl: '/settings',
+  };
+
+  const factory = (props = {}) => {
+    wrapper = shallowMount(Form, {
+      propsData: props,
+    });
+  };
+
+  beforeEach(() => {
+    factory(requiredProps);
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders empty form with correct placeholders', () => {
+    expect(wrapper.find({ ref: 'inputKey' }).attributes('placeholder')).toBe('Input variable key');
+    expect(wrapper.find({ ref: 'inputSecretValue' }).attributes('placeholder')).toBe(
+      'Input variable value',
+    );
+  });
+
+  it('renders help text with provided link', () => {
+    expect(wrapper.find('p').text()).toBe(
+      'Specify variable values to be used in this run. The values specified in CI/CD settings will be used as default',
+    );
+
+    expect(wrapper.find('a').attributes('href')).toBe(requiredProps.variablesSettingsUrl);
+  });
+
+  describe('when adding a new variable', () => {
+    it('creates a new variable when user types a new key and resets the form', done => {
+      wrapper.vm
+        .$nextTick()
+        .then(() => wrapper.find({ ref: 'inputKey' }).setValue('new key'))
+        .then(() => {
+          expect(wrapper.vm.variables.length).toBe(1);
+          expect(wrapper.vm.variables[0].key).toBe('new key');
+          expect(wrapper.find({ ref: 'inputKey' }).attributes('value')).toBe(undefined);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('creates a new variable when user types a new value and resets the form', done => {
+      wrapper.vm
+        .$nextTick()
+        .then(() => wrapper.find({ ref: 'inputSecretValue' }).setValue('new value'))
+        .then(() => {
+          expect(wrapper.vm.variables.length).toBe(1);
+          expect(wrapper.vm.variables[0].secret_value).toBe('new value');
+          expect(wrapper.find({ ref: 'inputSecretValue' }).attributes('value')).toBe(undefined);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
+
+  describe('when deleting a variable', () => {
+    it('removes the variable row', () => {
+      wrapper.vm.variables = [
+        {
+          key: 'new key',
+          secret_value: 'value',
+          id: '1',
+        },
+      ];
+
+      wrapper.find(GlButton).vm.$emit('click');
+
+      expect(wrapper.vm.variables.length).toBe(0);
+    });
+  });
+});