diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-05-26 21:07:33 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-05-26 21:07:33 +0300 |
commit | b8915a9ca99371b33e3d0f337d10df860201769f (patch) | |
tree | 83b005b91ac624a2fbf7381072999ac743dd5f28 /spec/frontend/environments | |
parent | a8c410f8a115b82a614b81cfd1036498838a5a5b (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/environments')
-rw-r--r-- | spec/frontend/environments/new_environment_spec.js | 215 |
1 files changed, 154 insertions, 61 deletions
diff --git a/spec/frontend/environments/new_environment_spec.js b/spec/frontend/environments/new_environment_spec.js index 743f4ad6786..749e4e5caa4 100644 --- a/spec/frontend/environments/new_environment_spec.js +++ b/spec/frontend/environments/new_environment_spec.js @@ -1,103 +1,196 @@ import { GlLoadingIcon } from '@gitlab/ui'; import MockAdapter from 'axios-mock-adapter'; +import Vue from 'vue'; +import VueApollo from 'vue-apollo'; import { mountExtended } from 'helpers/vue_test_utils_helper'; import waitForPromises from 'helpers/wait_for_promises'; import NewEnvironment from '~/environments/components/new_environment.vue'; +import createEnvironment from '~/environments/graphql/mutations/create_environment.mutation.graphql'; import { createAlert } from '~/alert'; import axios from '~/lib/utils/axios_utils'; import { HTTP_STATUS_BAD_REQUEST, HTTP_STATUS_OK } from '~/lib/utils/http_status'; import { visitUrl } from '~/lib/utils/url_utility'; +import { __ } from '~/locale'; +import createMockApollo from '../__helpers__/mock_apollo_helper'; jest.mock('~/lib/utils/url_utility'); jest.mock('~/alert'); -const DEFAULT_OPTS = { - provide: { - projectEnvironmentsPath: '/projects/environments', - protectedEnvironmentSettingsPath: '/projects/not_real/settings/ci_cd', - }, +const newName = 'test'; +const newExternalUrl = 'https://google.ca'; + +const provide = { + projectEnvironmentsPath: '/projects/environments', + projectPath: '/path/to/project', +}; + +const environmentCreate = { environment: { id: '1', path: 'path/to/environment' }, errors: [] }; +const environmentCreateError = { + environment: null, + errors: [{ message: 'uh oh!' }], }; describe('~/environments/components/new.vue', () => { let wrapper; let mock; - let name; - let url; - let form; - - const createWrapper = (opts = {}) => - mountExtended(NewEnvironment, { - ...DEFAULT_OPTS, - ...opts, + + const createMockApolloProvider = (mutationResult) => { + Vue.use(VueApollo); + + return createMockApollo([ + [ + createEnvironment, + jest.fn().mockResolvedValue({ data: { environmentCreate: mutationResult } }), + ], + ]); + }; + + const createWrapperWithApollo = async (mutationResult = environmentCreate) => { + wrapper = mountExtended(NewEnvironment, { + provide: { + ...provide, + glFeatures: { + environmentSettingsToGraphql: true, + }, + }, + apolloProvider: createMockApolloProvider(mutationResult), }); - beforeEach(() => { - mock = new MockAdapter(axios); - wrapper = createWrapper(); - name = wrapper.findByLabelText('Name'); - url = wrapper.findByLabelText('External URL'); - form = wrapper.findByRole('form', { name: 'New environment' }); - }); + await waitForPromises(); + }; - afterEach(() => { - mock.restore(); - }); + const createWrapperWithAxios = () => { + wrapper = mountExtended(NewEnvironment, { + provide: { + ...provide, + glFeatures: { + environmentSettingsToGraphql: false, + }, + }, + }); + }; + const findNameInput = () => wrapper.findByLabelText(__('Name')); + const findExternalUrlInput = () => wrapper.findByLabelText(__('External URL')); + const findForm = () => wrapper.findByRole('form', { name: __('New environment') }); const showsLoading = () => wrapper.findComponent(GlLoadingIcon).exists(); - const submitForm = async (expected, response) => { - mock - .onPost(DEFAULT_OPTS.provide.projectEnvironmentsPath, { - name: expected.name, - external_url: expected.url, - }) - .reply(...response); - await name.setValue(expected.name); - await url.setValue(expected.url); - - await form.trigger('submit'); - await waitForPromises(); + const submitForm = async () => { + await findNameInput().setValue('test'); + await findExternalUrlInput().setValue('https://google.ca'); + + await findForm().trigger('submit'); }; - it('sets the title to New environment', () => { - const header = wrapper.findByRole('heading', { name: 'New environment' }); - expect(header.exists()).toBe(true); - }); + describe('default', () => { + beforeEach(() => { + createWrapperWithAxios(); + }); + + it('sets the title to New environment', () => { + const header = wrapper.findByRole('heading', { name: 'New environment' }); + expect(header.exists()).toBe(true); + }); - it.each` - input | value - ${() => name} | ${'test'} - ${() => url} | ${'https://example.org'} - `('changes the value of the input to $value', async ({ input, value }) => { - await input().setValue(value); + it.each` + input | value + ${() => findNameInput()} | ${'test'} + ${() => findExternalUrlInput()} | ${'https://example.org'} + `('changes the value of the input to $value', ({ input, value }) => { + input().setValue(value); - expect(input().element.value).toBe(value); + expect(input().element.value).toBe(value); + }); }); - it('shows loader after form is submitted', async () => { - const expected = { name: 'test', url: 'https://google.ca' }; + describe('when environmentSettingsToGraphql feature is enabled', () => { + describe('when mutation successful', () => { + beforeEach(() => { + createWrapperWithApollo(); + }); - expect(showsLoading()).toBe(false); + it('shows loader after form is submitted', async () => { + expect(showsLoading()).toBe(false); - await submitForm(expected, [HTTP_STATUS_OK, { path: '/test' }]); + await submitForm(); - expect(showsLoading()).toBe(true); - }); + expect(showsLoading()).toBe(true); + }); - it('submits the new environment on submit', async () => { - const expected = { name: 'test', url: 'https://google.ca' }; + it('submits the new environment on submit', async () => { + submitForm(); + await waitForPromises(); - await submitForm(expected, [HTTP_STATUS_OK, { path: '/test' }]); + expect(visitUrl).toHaveBeenCalledWith('path/to/environment'); + }); + }); - expect(visitUrl).toHaveBeenCalledWith('/test'); + describe('when failed', () => { + beforeEach(async () => { + createWrapperWithApollo(environmentCreateError); + submitForm(); + await waitForPromises(); + }); + + it('shows errors on error', () => { + expect(createAlert).toHaveBeenCalledWith({ message: 'uh oh!' }); + expect(showsLoading()).toBe(false); + }); + }); }); - it('shows errors on error', async () => { - const expected = { name: 'test', url: 'https://google.ca' }; + describe('when environmentSettingsToGraphql feature is disabled', () => { + beforeEach(() => { + mock = new MockAdapter(axios); + createWrapperWithAxios(); + }); + + afterEach(() => { + mock.restore(); + }); + + it('shows loader after form is submitted', async () => { + expect(showsLoading()).toBe(false); + + mock + .onPost(provide.projectEnvironmentsPath, { + name: newName, + external_url: newExternalUrl, + }) + .reply(HTTP_STATUS_OK, { path: '/test' }); - await submitForm(expected, [HTTP_STATUS_BAD_REQUEST, { message: ['name taken'] }]); + await submitForm(); - expect(createAlert).toHaveBeenCalledWith({ message: 'name taken' }); - expect(showsLoading()).toBe(false); + expect(showsLoading()).toBe(true); + }); + + it('submits the new environment on submit', async () => { + mock + .onPost(provide.projectEnvironmentsPath, { + name: newName, + external_url: newExternalUrl, + }) + .reply(HTTP_STATUS_OK, { path: '/test' }); + + await submitForm(); + await waitForPromises(); + + expect(visitUrl).toHaveBeenCalledWith('/test'); + }); + + it('shows errors on error', async () => { + mock + .onPost(provide.projectEnvironmentsPath, { + name: newName, + external_url: newExternalUrl, + }) + .reply(HTTP_STATUS_BAD_REQUEST, { message: ['name taken'] }); + + await submitForm(); + await waitForPromises(); + + expect(createAlert).toHaveBeenCalledWith({ message: 'name taken' }); + expect(showsLoading()).toBe(false); + }); }); }); |