446 lines
14 KiB
JavaScript
446 lines
14 KiB
JavaScript
import { GlForm, GlSprintf, GlLoadingIcon } from '@gitlab/ui';
|
|
import { mount, shallowMount } from '@vue/test-utils';
|
|
import MockAdapter from 'axios-mock-adapter';
|
|
import CreditCardValidationRequiredAlert from 'ee_component/billings/components/cc_validation_required_alert.vue';
|
|
import { TEST_HOST } from 'helpers/test_constants';
|
|
import waitForPromises from 'helpers/wait_for_promises';
|
|
import axios from '~/lib/utils/axios_utils';
|
|
import httpStatusCodes from '~/lib/utils/http_status';
|
|
import { redirectTo } from '~/lib/utils/url_utility';
|
|
import PipelineNewForm from '~/pipeline_new/components/pipeline_new_form.vue';
|
|
import RefsDropdown from '~/pipeline_new/components/refs_dropdown.vue';
|
|
import {
|
|
mockQueryParams,
|
|
mockPostParams,
|
|
mockProjectId,
|
|
mockError,
|
|
mockRefs,
|
|
mockCreditCardValidationRequiredError,
|
|
} from '../mock_data';
|
|
|
|
jest.mock('~/lib/utils/url_utility', () => ({
|
|
redirectTo: jest.fn(),
|
|
}));
|
|
|
|
const projectRefsEndpoint = '/root/project/refs';
|
|
const pipelinesPath = '/root/project/-/pipelines';
|
|
const configVariablesPath = '/root/project/-/pipelines/config_variables';
|
|
const newPipelinePostResponse = { id: 1 };
|
|
const defaultBranch = 'main';
|
|
|
|
describe('Pipeline New Form', () => {
|
|
let wrapper;
|
|
let mock;
|
|
let dummySubmitEvent;
|
|
|
|
const findForm = () => wrapper.find(GlForm);
|
|
const findRefsDropdown = () => wrapper.findComponent(RefsDropdown);
|
|
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"]');
|
|
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);
|
|
const findWarnings = () => wrapper.findAll('[data-testid="run-pipeline-warning"]');
|
|
const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
|
|
const findCCAlert = () => wrapper.findComponent(CreditCardValidationRequiredAlert);
|
|
const getFormPostParams = () => JSON.parse(mock.history.post[0].data);
|
|
|
|
const selectBranch = (branch) => {
|
|
// Select a branch in the dropdown
|
|
findRefsDropdown().vm.$emit('input', {
|
|
shortName: branch,
|
|
fullName: `refs/heads/${branch}`,
|
|
});
|
|
};
|
|
|
|
const createComponent = (props = {}, method = shallowMount) => {
|
|
wrapper = method(PipelineNewForm, {
|
|
provide: {
|
|
projectRefsEndpoint,
|
|
},
|
|
propsData: {
|
|
projectId: mockProjectId,
|
|
pipelinesPath,
|
|
configVariablesPath,
|
|
defaultBranch,
|
|
refParam: defaultBranch,
|
|
settingsLink: '',
|
|
maxWarnings: 25,
|
|
...props,
|
|
},
|
|
});
|
|
};
|
|
|
|
beforeEach(() => {
|
|
mock = new MockAdapter(axios);
|
|
mock.onGet(configVariablesPath).reply(httpStatusCodes.OK, {});
|
|
mock.onGet(projectRefsEndpoint).reply(httpStatusCodes.OK, mockRefs);
|
|
|
|
dummySubmitEvent = {
|
|
preventDefault: jest.fn(),
|
|
};
|
|
});
|
|
|
|
afterEach(() => {
|
|
wrapper.destroy();
|
|
wrapper = null;
|
|
|
|
mock.restore();
|
|
});
|
|
|
|
describe('Form', () => {
|
|
beforeEach(async () => {
|
|
createComponent(mockQueryParams, mount);
|
|
|
|
mock.onPost(pipelinesPath).reply(httpStatusCodes.OK, newPipelinePostResponse);
|
|
|
|
await waitForPromises();
|
|
});
|
|
|
|
it('displays the correct values for the provided query params', async () => {
|
|
expect(findRefsDropdown().props('value')).toEqual({ shortName: 'tag-1' });
|
|
expect(findVariableRows()).toHaveLength(3);
|
|
});
|
|
|
|
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');
|
|
});
|
|
|
|
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', () => {
|
|
expect(findRemoveIcons()).toHaveLength(2);
|
|
});
|
|
|
|
it('removes ci variable row on remove icon button click', async () => {
|
|
findRemoveIcons().at(1).trigger('click');
|
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
expect(findVariableRows()).toHaveLength(2);
|
|
});
|
|
|
|
it('creates blank variable on input change event', async () => {
|
|
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('Pipeline creation', () => {
|
|
beforeEach(async () => {
|
|
mock.onPost(pipelinesPath).reply(httpStatusCodes.OK, newPipelinePostResponse);
|
|
|
|
await waitForPromises();
|
|
});
|
|
|
|
it('does not submit the native HTML form', async () => {
|
|
createComponent();
|
|
|
|
findForm().vm.$emit('submit', dummySubmitEvent);
|
|
|
|
expect(dummySubmitEvent.preventDefault).toHaveBeenCalled();
|
|
});
|
|
|
|
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();
|
|
|
|
findForm().vm.$emit('submit', dummySubmitEvent);
|
|
await waitForPromises();
|
|
|
|
expect(getFormPostParams().ref).toEqual(`refs/heads/${defaultBranch}`);
|
|
expect(redirectTo).toHaveBeenCalledWith(`${pipelinesPath}/${newPipelinePostResponse.id}`);
|
|
});
|
|
|
|
it('creates a pipeline with short ref and variables from the query params', async () => {
|
|
createComponent(mockQueryParams);
|
|
|
|
await waitForPromises();
|
|
|
|
findForm().vm.$emit('submit', dummySubmitEvent);
|
|
|
|
await waitForPromises();
|
|
|
|
expect(getFormPostParams()).toEqual(mockPostParams);
|
|
expect(redirectTo).toHaveBeenCalledWith(`${pipelinesPath}/${newPipelinePostResponse.id}`);
|
|
});
|
|
});
|
|
|
|
describe('When the ref has been changed', () => {
|
|
beforeEach(async () => {
|
|
createComponent({}, mount);
|
|
|
|
await waitForPromises();
|
|
});
|
|
it('variables persist between ref changes', async () => {
|
|
selectBranch('main');
|
|
|
|
await waitForPromises();
|
|
|
|
const mainInput = findKeyInputs().at(0);
|
|
mainInput.element.value = 'build_var';
|
|
mainInput.trigger('change');
|
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
selectBranch('branch-1');
|
|
|
|
await waitForPromises();
|
|
|
|
const branchOneInput = findKeyInputs().at(0);
|
|
branchOneInput.element.value = 'deploy_var';
|
|
branchOneInput.trigger('change');
|
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
selectBranch('main');
|
|
|
|
await waitForPromises();
|
|
|
|
expect(findKeyInputs().at(0).element.value).toBe('build_var');
|
|
expect(findVariableRows().length).toBe(2);
|
|
|
|
selectBranch('branch-1');
|
|
|
|
await waitForPromises();
|
|
|
|
expect(findKeyInputs().at(0).element.value).toBe('deploy_var');
|
|
expect(findVariableRows().length).toBe(2);
|
|
});
|
|
});
|
|
|
|
describe('when yml defines a variable', () => {
|
|
const mockYmlKey = 'yml_var';
|
|
const mockYmlValue = 'yml_var_val';
|
|
const mockYmlMultiLineValue = `A value
|
|
with multiple
|
|
lines`;
|
|
const mockYmlDesc = 'A var from yml.';
|
|
|
|
it('loading icon is shown when content is requested and hidden when received', async () => {
|
|
createComponent(mockQueryParams, mount);
|
|
|
|
mock.onGet(configVariablesPath).reply(httpStatusCodes.OK, {
|
|
[mockYmlKey]: {
|
|
value: mockYmlValue,
|
|
description: mockYmlDesc,
|
|
},
|
|
});
|
|
|
|
expect(findLoadingIcon().exists()).toBe(true);
|
|
|
|
await waitForPromises();
|
|
|
|
expect(findLoadingIcon().exists()).toBe(false);
|
|
});
|
|
|
|
it('multi-line strings are added to the value field without removing line breaks', async () => {
|
|
createComponent(mockQueryParams, mount);
|
|
|
|
mock.onGet(configVariablesPath).reply(httpStatusCodes.OK, {
|
|
[mockYmlKey]: {
|
|
value: mockYmlMultiLineValue,
|
|
description: mockYmlDesc,
|
|
},
|
|
});
|
|
|
|
await waitForPromises();
|
|
|
|
expect(findValueInputs().at(0).element.value).toBe(mockYmlMultiLineValue);
|
|
});
|
|
|
|
describe('with description', () => {
|
|
beforeEach(async () => {
|
|
createComponent(mockQueryParams, 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('without description', () => {
|
|
beforeEach(async () => {
|
|
createComponent(mockQueryParams, mount);
|
|
|
|
mock.onGet(configVariablesPath).reply(httpStatusCodes.OK, {
|
|
[mockYmlKey]: {
|
|
value: mockYmlValue,
|
|
description: null,
|
|
},
|
|
});
|
|
|
|
await waitForPromises();
|
|
});
|
|
|
|
it('displays all the variables', async () => {
|
|
expect(findVariableRows()).toHaveLength(3);
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('Form errors and warnings', () => {
|
|
beforeEach(() => {
|
|
createComponent();
|
|
});
|
|
|
|
describe('when the refs cannot be loaded', () => {
|
|
beforeEach(() => {
|
|
mock
|
|
.onGet(projectRefsEndpoint, { params: { search: '' } })
|
|
.reply(httpStatusCodes.INTERNAL_SERVER_ERROR);
|
|
|
|
findRefsDropdown().vm.$emit('loadingError');
|
|
});
|
|
|
|
it('shows both an error alert', () => {
|
|
expect(findErrorAlert().exists()).toBe(true);
|
|
expect(findWarningAlert().exists()).toBe(false);
|
|
});
|
|
});
|
|
|
|
describe('when the error response can be handled', () => {
|
|
beforeEach(async () => {
|
|
mock.onPost(pipelinesPath).reply(httpStatusCodes.BAD_REQUEST, mockError);
|
|
|
|
findForm().vm.$emit('submit', dummySubmitEvent);
|
|
|
|
await waitForPromises();
|
|
});
|
|
|
|
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 warning title', () => {
|
|
const { length } = mockError.warnings;
|
|
|
|
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('does not show the credit card validation required alert', () => {
|
|
expect(findCCAlert().exists()).toBe(false);
|
|
});
|
|
|
|
describe('when the error response is credit card validation required', () => {
|
|
beforeEach(async () => {
|
|
mock
|
|
.onPost(pipelinesPath)
|
|
.reply(httpStatusCodes.BAD_REQUEST, mockCreditCardValidationRequiredError);
|
|
|
|
window.gon = {
|
|
subscriptions_url: TEST_HOST,
|
|
payment_form_url: TEST_HOST,
|
|
};
|
|
|
|
findForm().vm.$emit('submit', dummySubmitEvent);
|
|
|
|
await waitForPromises();
|
|
});
|
|
|
|
it('shows credit card validation required alert', () => {
|
|
expect(findErrorAlert().exists()).toBe(false);
|
|
expect(findCCAlert().exists()).toBe(true);
|
|
});
|
|
|
|
it('clears error and hides the alert on dismiss', async () => {
|
|
expect(findCCAlert().exists()).toBe(true);
|
|
expect(wrapper.vm.$data.error).toBe(mockCreditCardValidationRequiredError.errors[0]);
|
|
|
|
findCCAlert().vm.$emit('dismiss');
|
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
expect(findCCAlert().exists()).toBe(false);
|
|
expect(wrapper.vm.$data.error).toBe(null);
|
|
});
|
|
});
|
|
});
|
|
|
|
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);
|
|
});
|
|
});
|
|
});
|
|
});
|