1 files changed, 69 insertions, 44 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 421ad9f4939..3f1cf67127e 100644
--- a/spec/frontend/pipeline_new/components/pipeline_new_form_spec.js
+++ b/spec/frontend/pipeline_new/components/pipeline_new_form_spec.js
@@ -5,6 +5,7 @@ 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 { redirectTo } from '~/lib/utils/url_utility';
 import {
   mockBranches,
   mockTags,
@@ -13,7 +14,6 @@ import {
   mockProjectId,
   mockError,
 } from '../mock_data';
-import { redirectTo } from '~/lib/utils/url_utility';
 
 jest.mock('~/lib/utils/url_utility', () => ({
   redirectTo: jest.fn(),
@@ -34,6 +34,7 @@ describe('Pipeline New Form', () => {
   const findForm = () => wrapper.find(GlForm);
   const findDropdown = () => wrapper.find(GlDropdown);
   const findDropdownItems = () => wrapper.findAll(GlDropdownItem);
+  const findSubmitButton = () => wrapper.find('[data-testid="run_pipeline_button"]');
   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"]');
@@ -155,6 +156,18 @@ describe('Pipeline New Form', () => {
 
       await waitForPromises();
     });
+
+    it('disables the submit button immediately after submitting', async () => {
+      createComponent();
+
+      expect(findSubmitButton().props('disabled')).toBe(false);
+
+      findForm().vm.$emit('submit', dummySubmitEvent);
+      await waitForPromises();
+
+      expect(findSubmitButton().props('disabled')).toBe(true);
+    });
+
     it('creates pipeline with full ref and variables', async () => {
       createComponent();
 
@@ -167,6 +180,7 @@ describe('Pipeline New Form', () => {
       expect(getExpectedPostParams().ref).toEqual(wrapper.vm.$data.refValue.fullName);
       expect(redirectTo).toHaveBeenCalledWith(`${pipelinesPath}/${postResponse.id}`);
     });
+
     it('creates a pipeline with short ref and variables', async () => {
       // query params are used
       createComponent('', mockParams);
@@ -225,42 +239,29 @@ describe('Pipeline New Form', () => {
     });
   });
 
-  describe('when feature flag new_pipeline_form_prefilled_vars is enabled', () => {
-    let origGon;
-
+  describe('when yml defines a variable', () => {
     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('loading state', () => {
-      it('loading icon is shown when content is requested and hidden when received', async () => {
-        createComponent('', mockParams, mount);
+    it('loading icon is shown when content is requested and hidden when received', async () => {
+      createComponent('', mockParams, mount);
 
-        mock.onGet(configVariablesPath).reply(httpStatusCodes.OK, {
-          [mockYmlKey]: {
-            value: mockYmlValue,
-            description: mockYmlDesc,
-          },
-        });
+      mock.onGet(configVariablesPath).reply(httpStatusCodes.OK, {
+        [mockYmlKey]: {
+          value: mockYmlValue,
+          description: mockYmlDesc,
+        },
+      });
 
-        expect(findLoadingIcon().exists()).toBe(true);
+      expect(findLoadingIcon().exists()).toBe(true);
 
-        await waitForPromises();
+      await waitForPromises();
 
-        expect(findLoadingIcon().exists()).toBe(false);
-      });
+      expect(findLoadingIcon().exists()).toBe(false);
     });
 
-    describe('when yml defines a variable with description', () => {
+    describe('with description', () => {
       beforeEach(async () => {
         createComponent('', mockParams, mount);
 
@@ -302,7 +303,7 @@ describe('Pipeline New Form', () => {
       });
     });
 
-    describe('when yml defines a variable without description', () => {
+    describe('without description', () => {
       beforeEach(async () => {
         createComponent('', mockParams, mount);
 
@@ -325,31 +326,55 @@ describe('Pipeline New Form', () => {
   describe('Form errors and warnings', () => {
     beforeEach(() => {
       createComponent();
+    });
 
-      mock.onPost(pipelinesPath).reply(httpStatusCodes.BAD_REQUEST, mockError);
+    describe('when the error response can be handled', () => {
+      beforeEach(async () => {
+        mock.onPost(pipelinesPath).reply(httpStatusCodes.BAD_REQUEST, mockError);
 
-      findForm().vm.$emit('submit', dummySubmitEvent);
+        findForm().vm.$emit('submit', dummySubmitEvent);
 
-      return waitForPromises();
-    });
+        await waitForPromises();
+      });
 
-    it('shows both error and warning', () => {
-      expect(findErrorAlert().exists()).toBe(true);
-      expect(findWarningAlert().exists()).toBe(true);
-    });
+      it('shows both error and warning', () => {
+        expect(findErrorAlert().exists()).toBe(true);
+        expect(findWarningAlert().exists()).toBe(true);
+      });
 
-    it('shows the correct error', () => {
-      expect(findErrorAlert().text()).toBe(mockError.errors[0]);
-    });
+      it('shows the correct error', () => {
+        expect(findErrorAlert().text()).toBe(mockError.errors[0]);
+      });
 
-    it('shows the correct warning title', () => {
-      const { length } = mockError.warnings;
+      it('shows the correct warning title', () => {
+        const { length } = mockError.warnings;
 
-      expect(findWarningAlertSummary().attributes('message')).toBe(`${length} warnings found:`);
+        expect(findWarningAlertSummary().attributes('message')).toBe(`${length} warnings found:`);
+      });
+
+      it('shows the correct amount of warnings', () => {
+        expect(findWarnings()).toHaveLength(mockError.warnings.length);
+      });
+
+      it('re-enables the submit button', () => {
+        expect(findSubmitButton().props('disabled')).toBe(false);
+      });
     });
 
-    it('shows the correct amount of warnings', () => {
-      expect(findWarnings()).toHaveLength(mockError.warnings.length);
+    describe('when the error response cannot be handled', () => {
+      beforeEach(async () => {
+        mock
+          .onPost(pipelinesPath)
+          .reply(httpStatusCodes.INTERNAL_SERVER_ERROR, 'something went wrong');
+
+        findForm().vm.$emit('submit', dummySubmitEvent);
+
+        await waitForPromises();
+      });
+
+      it('re-enables the submit button', () => {
+        expect(findSubmitButton().props('disabled')).toBe(false);
+      });
     });
   });
 });