1 files changed, 155 insertions, 10 deletions
diff --git a/spec/frontend/pipeline_new/components/pipeline_new_form_spec.js b/spec/frontend/pipeline_new/components/pipeline_new_form_spec.js
index 97a92778f1a..040c0fbecc5 100644
--- a/spec/frontend/pipeline_new/components/pipeline_new_form_spec.js
+++ b/spec/frontend/pipeline_new/components/pipeline_new_form_spec.js
@@ -2,6 +2,7 @@ import { mount, shallowMount } from '@vue/test-utils';
 import { GlDropdown, GlDropdownItem, GlForm, GlSprintf } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
 import waitForPromises from 'helpers/wait_for_promises';
+import httpStatusCodes from '~/lib/utils/http_status';
 import axios from '~/lib/utils/axios_utils';
 import PipelineNewForm from '~/pipeline_new/components/pipeline_new_form.vue';
 import { mockRefs, mockParams, mockPostParams, mockProjectId, mockError } from '../mock_data';
@@ -11,7 +12,8 @@ jest.mock('~/lib/utils/url_utility', () => ({
   redirectTo: jest.fn(),
 }));
 
-const pipelinesPath = '/root/project/-/pipleines';
+const pipelinesPath = '/root/project/-/pipelines';
+const configVariablesPath = '/root/project/-/pipelines/config_variables';
 const postResponse = { id: 1 };
 
 describe('Pipeline New Form', () => {
@@ -28,6 +30,7 @@ describe('Pipeline New Form', () => {
   const findVariableRows = () => wrapper.findAll('[data-testid="ci-variable-row"]');
   const findRemoveIcons = () => wrapper.findAll('[data-testid="remove-ci-variable-row"]');
   const findKeyInputs = () => wrapper.findAll('[data-testid="pipeline-form-ci-variable-key"]');
+  const findValueInputs = () => wrapper.findAll('[data-testid="pipeline-form-ci-variable-value"]');
   const findErrorAlert = () => wrapper.find('[data-testid="run-pipeline-error-alert"]');
   const findWarningAlert = () => wrapper.find('[data-testid="run-pipeline-warning-alert"]');
   const findWarningAlertSummary = () => findWarningAlert().find(GlSprintf);
@@ -39,6 +42,7 @@ describe('Pipeline New Form', () => {
       propsData: {
         projectId: mockProjectId,
         pipelinesPath,
+        configVariablesPath,
         refs: mockRefs,
         defaultBranch: 'master',
         settingsLink: '',
@@ -55,6 +59,7 @@ describe('Pipeline New Form', () => {
 
   beforeEach(() => {
     mock = new MockAdapter(axios);
+    mock.onGet(configVariablesPath).reply(httpStatusCodes.OK, {});
   });
 
   afterEach(() => {
@@ -66,7 +71,7 @@ describe('Pipeline New Form', () => {
 
   describe('Dropdown with branches and tags', () => {
     beforeEach(() => {
-      mock.onPost(pipelinesPath).reply(200, postResponse);
+      mock.onPost(pipelinesPath).reply(httpStatusCodes.OK, postResponse);
     });
 
     it('displays dropdown with all branches and tags', () => {
@@ -87,17 +92,27 @@ describe('Pipeline New Form', () => {
   });
 
   describe('Form', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       createComponent('', mockParams, mount);
 
-      mock.onPost(pipelinesPath).reply(200, postResponse);
+      mock.onPost(pipelinesPath).reply(httpStatusCodes.OK, postResponse);
+
+      await waitForPromises();
     });
+
     it('displays the correct values for the provided query params', async () => {
       expect(findDropdown().props('text')).toBe('tag-1');
+      expect(findVariableRows()).toHaveLength(3);
+    });
 
-      await wrapper.vm.$nextTick();
+    it('displays a variable from provided query params', () => {
+      expect(findKeyInputs().at(0).element.value).toBe('test_var');
+      expect(findValueInputs().at(0).element.value).toBe('test_var_val');
+    });
 
-      expect(findVariableRows()).toHaveLength(3);
+    it('displays an empty variable for the user to fill out', async () => {
+      expect(findKeyInputs().at(2).element.value).toBe('');
+      expect(findValueInputs().at(2).element.value).toBe('');
     });
 
     it('does not display remove icon for last row', () => {
@@ -124,13 +139,143 @@ describe('Pipeline New Form', () => {
     });
 
     it('creates blank variable on input change event', async () => {
-      findKeyInputs()
-        .at(2)
-        .trigger('change');
+      const input = findKeyInputs().at(2);
+      input.element.value = 'test_var_2';
+      input.trigger('change');
 
       await wrapper.vm.$nextTick();
 
       expect(findVariableRows()).toHaveLength(4);
+      expect(findKeyInputs().at(3).element.value).toBe('');
+      expect(findValueInputs().at(3).element.value).toBe('');
+    });
+
+    describe('when the form has been modified', () => {
+      const selectRef = i =>
+        findDropdownItems()
+          .at(i)
+          .vm.$emit('click');
+
+      beforeEach(async () => {
+        const input = findKeyInputs().at(0);
+        input.element.value = 'test_var_2';
+        input.trigger('change');
+
+        findRemoveIcons()
+          .at(1)
+          .trigger('click');
+
+        await wrapper.vm.$nextTick();
+      });
+
+      it('form values are restored when the ref changes', async () => {
+        expect(findVariableRows()).toHaveLength(2);
+
+        selectRef(1);
+        await waitForPromises();
+
+        expect(findVariableRows()).toHaveLength(3);
+        expect(findKeyInputs().at(0).element.value).toBe('test_var');
+      });
+
+      it('form values are restored again when the ref is reverted', async () => {
+        selectRef(1);
+        await waitForPromises();
+
+        selectRef(2);
+        await waitForPromises();
+
+        expect(findVariableRows()).toHaveLength(2);
+        expect(findKeyInputs().at(0).element.value).toBe('test_var_2');
+      });
+    });
+  });
+
+  describe('when feature flag new_pipeline_form_prefilled_vars is enabled', () => {
+    let origGon;
+
+    const mockYmlKey = 'yml_var';
+    const mockYmlValue = 'yml_var_val';
+    const mockYmlDesc = 'A var from yml.';
+
+    beforeAll(() => {
+      origGon = window.gon;
+      window.gon = { features: { newPipelineFormPrefilledVars: true } };
+    });
+
+    afterAll(() => {
+      window.gon = origGon;
+    });
+
+    describe('when yml defines a variable with description', () => {
+      beforeEach(async () => {
+        createComponent('', mockParams, mount);
+
+        mock.onGet(configVariablesPath).reply(httpStatusCodes.OK, {
+          [mockYmlKey]: {
+            value: mockYmlValue,
+            description: mockYmlDesc,
+          },
+        });
+
+        await waitForPromises();
+      });
+
+      it('displays all the variables', async () => {
+        expect(findVariableRows()).toHaveLength(4);
+      });
+
+      it('displays a variable from yml', () => {
+        expect(findKeyInputs().at(0).element.value).toBe(mockYmlKey);
+        expect(findValueInputs().at(0).element.value).toBe(mockYmlValue);
+      });
+
+      it('displays a variable from provided query params', () => {
+        expect(findKeyInputs().at(1).element.value).toBe('test_var');
+        expect(findValueInputs().at(1).element.value).toBe('test_var_val');
+      });
+
+      it('adds a description to the first variable from yml', () => {
+        expect(
+          findVariableRows()
+            .at(0)
+            .text(),
+        ).toContain(mockYmlDesc);
+      });
+
+      it('removes the description when a variable key changes', async () => {
+        findKeyInputs().at(0).element.value = 'yml_var_modified';
+        findKeyInputs()
+          .at(0)
+          .trigger('change');
+
+        await wrapper.vm.$nextTick();
+
+        expect(
+          findVariableRows()
+            .at(0)
+            .text(),
+        ).not.toContain(mockYmlDesc);
+      });
+    });
+
+    describe('when yml defines a variable without description', () => {
+      beforeEach(async () => {
+        createComponent('', mockParams, mount);
+
+        mock.onGet(configVariablesPath).reply(httpStatusCodes.OK, {
+          [mockYmlKey]: {
+            value: mockYmlValue,
+            description: null,
+          },
+        });
+
+        await waitForPromises();
+      });
+
+      it('displays all the variables', async () => {
+        expect(findVariableRows()).toHaveLength(3);
+      });
     });
   });
 
@@ -138,7 +283,7 @@ describe('Pipeline New Form', () => {
     beforeEach(() => {
       createComponent();
 
-      mock.onPost(pipelinesPath).reply(400, mockError);
+      mock.onPost(pipelinesPath).reply(httpStatusCodes.BAD_REQUEST, mockError);
 
       findForm().vm.$emit('submit', dummySubmitEvent);