Merge branch 'refactor-pipeline-new-form-api-call' into 'master'

Refactor pipeline new form to use controller

See merge request gitlab-org/gitlab!40109

app/assets/javascripts/pipeline_new/components/pipeline_new_form.vue

@@ -15,7 +15,7 @@ import {
   GlSprintf,
 } from '@gitlab/ui';
 import { s__, __ } from '~/locale';
-import Api from '~/api';
+import axios from '~/lib/utils/axios_utils';
 import { redirectTo } from '~/lib/utils/url_utility';
 import { VARIABLE_TYPE, FILE_TYPE } from '../constants';
 
@@ -145,13 +145,17 @@ export default {
         ({ key, value }) => key !== '' && value !== '',
       );
 
-      return Api.createPipeline(this.projectId, {
+      return axios
+        .post(this.pipelinesPath, {
           ref: this.refValue,
           variables: filteredVariables,
         })
-        .then(({ data }) => redirectTo(data.web_url))
+        .then(({ data }) => {
+          redirectTo(`${this.pipelinesPath}/${data.id}`);
+        })
         .catch(err => {
-          this.error = err.response.data.message.base;
+          const [message] = err.response.data.base;
+          this.error = message;
         });
     },
   },

spec/frontend/pipeline_new/components/pipeline_new_form_spec.js

 import { mount, shallowMount } from '@vue/test-utils';
 import { GlNewDropdown, GlNewDropdownItem, GlForm } from '@gitlab/ui';
-import Api from '~/api';
+import MockAdapter from 'axios-mock-adapter';
+import waitForPromises from 'helpers/wait_for_promises';
+import axios from '~/lib/utils/axios_utils';
 import PipelineNewForm from '~/pipeline_new/components/pipeline_new_form.vue';
 import { mockRefs, mockParams, mockPostParams, mockProjectId } from '../mock_data';
+import { redirectTo } from '~/lib/utils/url_utility';
+
+jest.mock('~/lib/utils/url_utility', () => ({
+  redirectTo: jest.fn(),
+}));
+
+const pipelinesPath = '/root/project/-/pipleines';
+const postResponse = { id: 1 };
 
 describe('Pipeline New Form', () => {
   let wrapper;
+  let mock;
 
   const dummySubmitEvent = {
     preventDefault() {},
@@ -17,12 +28,13 @@ 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 getExpectedPostParams = () => JSON.parse(mock.history.post[0].data);
 
   const createComponent = (term = '', props = {}, method = shallowMount) => {
     wrapper = method(PipelineNewForm, {
       propsData: {
         projectId: mockProjectId,
-        pipelinesPath: '',
+        pipelinesPath,
         refs: mockRefs,
         defaultBranch: 'master',
         settingsLink: '',
@@ -37,24 +49,28 @@ describe('Pipeline New Form', () => {
   };
 
   beforeEach(() => {
-    jest.spyOn(Api, 'createPipeline').mockResolvedValue({ data: { web_url: '/' } });
+    mock = new MockAdapter(axios);
+
+    mock.onPost(pipelinesPath).reply(200, postResponse);
   });
 
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
+
+    mock.restore();
   });
 
   describe('Dropdown with branches and tags', () => {
     it('displays dropdown with all branches and tags', () => {
       createComponent();
-      expect(findDropdownItems().length).toBe(mockRefs.length);
+      expect(findDropdownItems()).toHaveLength(mockRefs.length);
     });
 
     it('when user enters search term the list is filtered', () => {
       createComponent('master');
 
-      expect(findDropdownItems().length).toBe(1);
+      expect(findDropdownItems()).toHaveLength(1);
       expect(
         findDropdownItems()
           .at(0)
@@ -67,42 +83,45 @@ describe('Pipeline New Form', () => {
     beforeEach(() => {
       createComponent('', mockParams, mount);
     });
-    it('displays the correct values for the provided query params', () => {
+    it('displays the correct values for the provided query params', async () => {
       expect(findDropdown().props('text')).toBe('tag-1');
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findVariableRows().length).toBe(3);
-      });
+      await wrapper.vm.$nextTick();
+
+      expect(findVariableRows()).toHaveLength(3);
     });
 
     it('does not display remove icon for last row', () => {
-      expect(findRemoveIcons().length).toBe(2);
+      expect(findRemoveIcons()).toHaveLength(2);
     });
 
-    it('removes ci variable row on remove icon button click', () => {
+    it('removes ci variable row on remove icon button click', async () => {
       findRemoveIcons()
         .at(1)
         .trigger('click');
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findVariableRows().length).toBe(2);
-      });
+      await wrapper.vm.$nextTick();
+
+      expect(findVariableRows()).toHaveLength(2);
     });
 
-    it('creates a pipeline on submit', () => {
+    it('creates a pipeline on submit', async () => {
       findForm().vm.$emit('submit', dummySubmitEvent);
 
-      expect(Api.createPipeline).toHaveBeenCalledWith(mockProjectId, mockPostParams);
+      await waitForPromises();
+
+      expect(getExpectedPostParams()).toEqual(mockPostParams);
+      expect(redirectTo).toHaveBeenCalledWith(`${pipelinesPath}/${postResponse.id}`);
     });
 
-    it('creates blank variable on input change event', () => {
+    it('creates blank variable on input change event', async () => {
       findKeyInputs()
         .at(2)
         .trigger('change');
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findVariableRows().length).toBe(4);
-      });
+      await wrapper.vm.$nextTick();
+
+      expect(findVariableRows()).toHaveLength(4);
     });
   });
 });