diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-10-21 07:08:36 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-10-21 07:08:36 +0000 |
commit | 48aff82709769b098321c738f3444b9bdaa694c6 (patch) | |
tree | e00c7c43e2d9b603a5a6af576b1685e400410dee /spec/frontend/pipeline_new | |
parent | 879f5329ee916a948223f8f43d77fba4da6cd028 (diff) | |
download | gitlab-ce-48aff82709769b098321c738f3444b9bdaa694c6.tar.gz |
Add latest changes from gitlab-org/gitlab@13-5-stable-eev13.5.0-rc42
Diffstat (limited to 'spec/frontend/pipeline_new')
-rw-r--r-- | spec/frontend/pipeline_new/components/pipeline_new_form_spec.js | 165 | ||||
-rw-r--r-- | spec/frontend/pipeline_new/mock_data.js | 6 |
2 files changed, 158 insertions, 13 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); diff --git a/spec/frontend/pipeline_new/mock_data.js b/spec/frontend/pipeline_new/mock_data.js index 55286e0ec7e..cdbd6d4437e 100644 --- a/spec/frontend/pipeline_new/mock_data.js +++ b/spec/frontend/pipeline_new/mock_data.js @@ -14,9 +14,9 @@ export const mockProjectId = '21'; export const mockPostParams = { ref: 'tag-1', - variables: [ - { key: 'test_var', value: 'test_var_val', variable_type: 'env_var' }, - { key: 'test_file', value: 'test_file_val', variable_type: 'file' }, + variables_attributes: [ + { key: 'test_var', secret_value: 'test_var_val', variable_type: 'env_var' }, + { key: 'test_file', secret_value: 'test_file_val', variable_type: 'file' }, ], }; |