diff options
Diffstat (limited to 'spec/frontend/ci/pipeline_new/components/pipeline_new_form_spec.js')
| -rw-r--r-- | spec/frontend/ci/pipeline_new/components/pipeline_new_form_spec.js | 113 |
1 files changed, 63 insertions, 50 deletions
diff --git a/spec/frontend/ci/pipeline_new/components/pipeline_new_form_spec.js b/spec/frontend/ci/pipeline_new/components/pipeline_new_form_spec.js index 6f18899ebac..1d4ae33c667 100644 --- a/spec/frontend/ci/pipeline_new/components/pipeline_new_form_spec.js +++ b/spec/frontend/ci/pipeline_new/components/pipeline_new_form_spec.js @@ -4,7 +4,7 @@ import { GlForm, GlDropdownItem, GlSprintf, GlLoadingIcon } from '@gitlab/ui'; import MockAdapter from 'axios-mock-adapter'; import CreditCardValidationRequiredAlert from 'ee_component/billings/components/cc_validation_required_alert.vue'; import createMockApollo from 'helpers/mock_apollo_helper'; -import { shallowMountExtended, mountExtended } from 'helpers/vue_test_utils_helper'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import { TEST_HOST } from 'helpers/test_constants'; import waitForPromises from 'helpers/wait_for_promises'; import axios from '~/lib/utils/axios_utils'; @@ -13,7 +13,7 @@ import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK, } from '~/lib/utils/http_status'; -import { redirectTo } from '~/lib/utils/url_utility'; +import { redirectTo } from '~/lib/utils/url_utility'; // eslint-disable-line import/no-deprecated import PipelineNewForm, { POLLING_INTERVAL, } from '~/ci/pipeline_new/components/pipeline_new_form.vue'; @@ -30,8 +30,8 @@ import { mockQueryParams, mockPostParams, mockProjectId, - mockRefs, mockYamlVariables, + mockPipelineConfigButtonText, } from '../mock_data'; Vue.use(VueApollo); @@ -40,8 +40,8 @@ jest.mock('~/lib/utils/url_utility', () => ({ redirectTo: jest.fn(), })); -const projectRefsEndpoint = '/root/project/refs'; const pipelinesPath = '/root/project/-/pipelines'; +const pipelinesEditorPath = '/root/project/-/ci/editor'; const projectPath = '/root/project/-/pipelines/config_variables'; const newPipelinePostResponse = { id: 1 }; const defaultBranch = 'main'; @@ -65,6 +65,7 @@ describe('Pipeline New Form', () => { wrapper.findAllByTestId('pipeline-form-ci-variable-value-dropdown'); const findValueDropdownItems = (dropdown) => dropdown.findAllComponents(GlDropdownItem); const findErrorAlert = () => wrapper.findByTestId('run-pipeline-error-alert'); + const findPipelineConfigButton = () => wrapper.findByTestId('ci-cd-pipeline-configuration'); const findWarningAlert = () => wrapper.findByTestId('run-pipeline-warning-alert'); const findWarningAlertSummary = () => findWarningAlert().findComponent(GlSprintf); const findWarnings = () => wrapper.findAllByTestId('run-pipeline-warning'); @@ -88,24 +89,23 @@ describe('Pipeline New Form', () => { const changeKeyInputValue = async (keyInputIndex, value) => { const input = findKeyInputs().at(keyInputIndex); - input.element.value = value; - input.trigger('change'); + input.vm.$emit('input', value); + input.vm.$emit('change'); await nextTick(); }; - const createComponentWithApollo = ({ method = shallowMountExtended, props = {} } = {}) => { + const createComponentWithApollo = ({ props = {} } = {}) => { const handlers = [[ciConfigVariablesQuery, mockCiConfigVariables]]; mockApollo = createMockApollo(handlers, resolvers); - wrapper = method(PipelineNewForm, { + wrapper = shallowMountExtended(PipelineNewForm, { apolloProvider: mockApollo, - provide: { - projectRefsEndpoint, - }, propsData: { projectId: mockProjectId, pipelinesPath, + pipelinesEditorPath, + canViewPipelineEditor: true, projectPath, defaultBranch, refParam: defaultBranch, @@ -119,7 +119,6 @@ describe('Pipeline New Form', () => { beforeEach(() => { mock = new MockAdapter(axios); mockCiConfigVariables = jest.fn(); - mock.onGet(projectRefsEndpoint).reply(HTTP_STATUS_OK, mockRefs); dummySubmitEvent = { preventDefault: jest.fn(), @@ -128,17 +127,16 @@ describe('Pipeline New Form', () => { afterEach(() => { mock.restore(); - wrapper.destroy(); }); describe('Form', () => { beforeEach(async () => { mockCiConfigVariables.mockResolvedValue(mockEmptyCiConfigVariablesResponse); - createComponentWithApollo({ props: mockQueryParams, method: mountExtended }); + createComponentWithApollo({ props: mockQueryParams }); await waitForPromises(); }); - it('displays the correct values for the provided query params', async () => { + it('displays the correct values for the provided query params', () => { expect(findVariableTypes().at(0).props('text')).toBe('Variable'); expect(findVariableTypes().at(1).props('text')).toBe('File'); expect(findRefsDropdown().props('value')).toEqual({ shortName: 'tag-1' }); @@ -146,13 +144,13 @@ describe('Pipeline New Form', () => { }); 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(findKeyInputs().at(0).attributes('value')).toBe('test_var'); + expect(findValueInputs().at(0).attributes('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('displays an empty variable for the user to fill out', () => { + expect(findKeyInputs().at(2).attributes('value')).toBe(''); + expect(findValueInputs().at(2).attributes('value')).toBe(''); expect(findVariableTypes().at(2).props('text')).toBe('Variable'); }); @@ -161,7 +159,7 @@ describe('Pipeline New Form', () => { }); it('removes ci variable row on remove icon button click', async () => { - findRemoveIcons().at(1).trigger('click'); + findRemoveIcons().at(1).vm.$emit('click'); await nextTick(); @@ -170,24 +168,25 @@ describe('Pipeline New Form', () => { it('creates blank variable on input change event', async () => { const input = findKeyInputs().at(2); - input.element.value = 'test_var_2'; - input.trigger('change'); + + input.vm.$emit('input', 'test_var_2'); + input.vm.$emit('change'); await nextTick(); expect(findVariableRows()).toHaveLength(4); - expect(findKeyInputs().at(3).element.value).toBe(''); - expect(findValueInputs().at(3).element.value).toBe(''); + expect(findKeyInputs().at(3).attributes('value')).toBe(''); + expect(findValueInputs().at(3).attributes('value')).toBe(''); }); }); describe('Pipeline creation', () => { - beforeEach(async () => { + beforeEach(() => { mockCiConfigVariables.mockResolvedValue(mockEmptyCiConfigVariablesResponse); mock.onPost(pipelinesPath).reply(HTTP_STATUS_OK, newPipelinePostResponse); }); - it('does not submit the native HTML form', async () => { + it('does not submit the native HTML form', () => { createComponentWithApollo(); findForm().vm.$emit('submit', dummySubmitEvent); @@ -213,7 +212,7 @@ describe('Pipeline New Form', () => { await waitForPromises(); expect(getFormPostParams().ref).toEqual(`refs/heads/${defaultBranch}`); - expect(redirectTo).toHaveBeenCalledWith(`${pipelinesPath}/${newPipelinePostResponse.id}`); + expect(redirectTo).toHaveBeenCalledWith(`${pipelinesPath}/${newPipelinePostResponse.id}`); // eslint-disable-line import/no-deprecated }); it('creates a pipeline with short ref and variables from the query params', async () => { @@ -226,14 +225,14 @@ describe('Pipeline New Form', () => { await waitForPromises(); expect(getFormPostParams()).toEqual(mockPostParams); - expect(redirectTo).toHaveBeenCalledWith(`${pipelinesPath}/${newPipelinePostResponse.id}`); + expect(redirectTo).toHaveBeenCalledWith(`${pipelinesPath}/${newPipelinePostResponse.id}`); // eslint-disable-line import/no-deprecated }); }); describe('When the ref has been changed', () => { beforeEach(async () => { mockCiConfigVariables.mockResolvedValue(mockEmptyCiConfigVariablesResponse); - createComponentWithApollo({ method: mountExtended }); + createComponentWithApollo(); await waitForPromises(); }); @@ -247,12 +246,12 @@ describe('Pipeline New Form', () => { await selectBranch('main'); - expect(findKeyInputs().at(0).element.value).toBe('build_var'); + expect(findKeyInputs().at(0).attributes('value')).toBe('build_var'); expect(findVariableRows().length).toBe(2); await selectBranch('branch-1'); - expect(findKeyInputs().at(0).element.value).toBe('deploy_var'); + expect(findKeyInputs().at(0).attributes('value')).toBe('deploy_var'); expect(findVariableRows().length).toBe(2); }); @@ -276,7 +275,7 @@ describe('Pipeline New Form', () => { describe('When there are no variables in the API cache', () => { beforeEach(async () => { mockCiConfigVariables.mockResolvedValue(mockNoCachedCiConfigVariablesResponse); - createComponentWithApollo({ method: mountExtended }); + createComponentWithApollo(); await waitForPromises(); }); @@ -324,9 +323,9 @@ describe('Pipeline New Form', () => { }); const testBehaviorWhenCacheIsPopulated = (queryResponse) => { - beforeEach(async () => { + beforeEach(() => { mockCiConfigVariables.mockResolvedValue(queryResponse); - createComponentWithApollo({ method: mountExtended }); + createComponentWithApollo(); }); it('does not poll for new values', async () => { @@ -341,6 +340,9 @@ describe('Pipeline New Form', () => { }); it('loading icon is shown when content is requested and hidden when received', async () => { + mockCiConfigVariables.mockResolvedValue(mockEmptyCiConfigVariablesResponse); + createComponentWithApollo({ props: mockQueryParams }); + expect(findLoadingIcon().exists()).toBe(true); await waitForPromises(); @@ -354,11 +356,11 @@ describe('Pipeline New Form', () => { it('displays an empty form', async () => { mockCiConfigVariables.mockResolvedValue(mockEmptyCiConfigVariablesResponse); - createComponentWithApollo({ method: mountExtended }); + createComponentWithApollo(); await waitForPromises(); - expect(findKeyInputs().at(0).element.value).toBe(''); - expect(findValueInputs().at(0).element.value).toBe(''); + expect(findKeyInputs().at(0).attributes('value')).toBe(''); + expect(findValueInputs().at(0).attributes('value')).toBe(''); expect(findVariableTypes().at(0).props('text')).toBe('Variable'); }); }); @@ -369,12 +371,12 @@ describe('Pipeline New Form', () => { describe('with different predefined values', () => { beforeEach(async () => { mockCiConfigVariables.mockResolvedValue(mockCiConfigVariablesResponse); - createComponentWithApollo({ method: mountExtended }); + createComponentWithApollo(); await waitForPromises(); }); it('multi-line strings are added to the value field without removing line breaks', () => { - expect(findValueInputs().at(1).element.value).toBe(mockYamlVariables[1].value); + expect(findValueInputs().at(1).attributes('value')).toBe(mockYamlVariables[1].value); }); it('multiple predefined values are rendered as a dropdown', () => { @@ -398,24 +400,24 @@ describe('Pipeline New Form', () => { describe('with description', () => { beforeEach(async () => { mockCiConfigVariables.mockResolvedValue(mockCiConfigVariablesResponse); - createComponentWithApollo({ props: mockQueryParams, method: mountExtended }); + createComponentWithApollo({ props: mockQueryParams }); await waitForPromises(); }); - it('displays all the variables', async () => { + it('displays all the variables', () => { expect(findVariableRows()).toHaveLength(6); }); it('displays a variable from yml', () => { - expect(findKeyInputs().at(0).element.value).toBe(mockYamlVariables[0].key); - expect(findValueInputs().at(0).element.value).toBe(mockYamlVariables[0].value); + expect(findKeyInputs().at(0).attributes('value')).toBe(mockYamlVariables[0].key); + expect(findValueInputs().at(0).attributes('value')).toBe(mockYamlVariables[0].value); }); it('displays a variable from provided query params', () => { - expect(findKeyInputs().at(3).element.value).toBe( + expect(findKeyInputs().at(3).attributes('value')).toBe( Object.keys(mockQueryParams.variableParams)[0], ); - expect(findValueInputs().at(3).element.value).toBe( + expect(findValueInputs().at(3).attributes('value')).toBe( Object.values(mockQueryParams.fileParams)[0], ); }); @@ -425,7 +427,7 @@ describe('Pipeline New Form', () => { }); it('removes the description when a variable key changes', async () => { - findKeyInputs().at(0).element.value = 'yml_var_modified'; + findKeyInputs().at(0).vm.$emit('input', 'yml_var_modified'); findKeyInputs().at(0).trigger('change'); await nextTick(); @@ -437,11 +439,11 @@ describe('Pipeline New Form', () => { describe('without description', () => { beforeEach(async () => { mockCiConfigVariables.mockResolvedValue(mockCiConfigVariablesResponseWithoutDesc); - createComponentWithApollo({ method: mountExtended }); + createComponentWithApollo(); await waitForPromises(); }); - it('displays variables with description only', async () => { + it('displays variables with description only', () => { expect(findVariableRows()).toHaveLength(2); // extra empty variable is added at the end }); }); @@ -456,7 +458,7 @@ describe('Pipeline New Form', () => { describe('when the refs cannot be loaded', () => { beforeEach(() => { mock - .onGet(projectRefsEndpoint, { params: { search: '' } }) + .onGet('/api/v4/projects/8/repository/branches', { params: { search: '' } }) .reply(HTTP_STATUS_INTERNAL_SERVER_ERROR); findRefsDropdown().vm.$emit('loadingError'); @@ -500,6 +502,17 @@ describe('Pipeline New Form', () => { expect(findSubmitButton().props('disabled')).toBe(false); }); + it('shows pipeline configuration button for user who can view', () => { + expect(findPipelineConfigButton().exists()).toBe(true); + expect(findPipelineConfigButton().text()).toBe(mockPipelineConfigButtonText); + }); + + it('does not show pipeline configuration button for user who can not view', () => { + createComponentWithApollo({ props: { canViewPipelineEditor: false } }); + + expect(findPipelineConfigButton().exists()).toBe(false); + }); + it('does not show the credit card validation required alert', () => { expect(findCCAlert().exists()).toBe(false); }); |