diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-06-27 06:08:49 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-06-27 06:08:49 +0300 |
commit | f33d28f789f690bfc01c8b81d95259a9f1c68b79 (patch) | |
tree | 9187328d55a3621801353946d6dc2a1cd8af8cbf /spec/frontend | |
parent | 661be4dd35d8258dee746c26e919e6f552afbec9 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend')
-rw-r--r-- | spec/frontend/environments/edit_environment_spec.js | 152 | ||||
-rw-r--r-- | spec/frontend/environments/environment_form_spec.js | 15 | ||||
-rw-r--r-- | spec/frontend/environments/new_environment_spec.js | 108 |
3 files changed, 64 insertions, 211 deletions
diff --git a/spec/frontend/environments/edit_environment_spec.js b/spec/frontend/environments/edit_environment_spec.js index f436c96f4a5..6f850f6e779 100644 --- a/spec/frontend/environments/edit_environment_spec.js +++ b/spec/frontend/environments/edit_environment_spec.js @@ -1,13 +1,10 @@ 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 EditEnvironment from '~/environments/components/edit_environment.vue'; 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 getEnvironment from '~/environments/graphql/queries/environment.query.graphql'; import updateEnvironment from '~/environments/graphql/mutations/update_environment.mutation.graphql'; @@ -17,7 +14,6 @@ import createMockApollo from '../__helpers__/mock_apollo_helper'; jest.mock('~/lib/utils/url_utility'); jest.mock('~/alert'); -const newExternalUrl = 'https://google.ca'; const environment = { id: '1', name: 'foo', @@ -25,7 +21,7 @@ const environment = { clusterAgent: null, }; const resolvedEnvironment = { project: { id: '1', environment } }; -const environmentUpdate = { +const environmentUpdateSuccess = { environment: { id: '1', path: 'path/to/environment', clusterAgentId: null }, errors: [], }; @@ -36,46 +32,38 @@ const environmentUpdateError = { const provide = { projectEnvironmentsPath: '/projects/environments', - updateEnvironmentPath: '/projects/environments/1', protectedEnvironmentSettingsPath: '/projects/1/settings/ci_cd', projectPath: '/path/to/project', + environmentName: 'foo', }; describe('~/environments/components/edit.vue', () => { let wrapper; - let mock; - const createMockApolloProvider = (mutationResult) => { + const getEnvironmentQuery = jest.fn().mockResolvedValue({ data: resolvedEnvironment }); + const updateEnvironmentSuccess = jest + .fn() + .mockResolvedValue({ data: { environmentUpdate: environmentUpdateSuccess } }); + const updateEnvironmentFail = jest + .fn() + .mockResolvedValue({ data: { environmentUpdate: environmentUpdateError } }); + + const createMockApolloProvider = (mutationHandler) => { Vue.use(VueApollo); const mocks = [ - [getEnvironment, jest.fn().mockResolvedValue({ data: resolvedEnvironment })], - [ - updateEnvironment, - jest.fn().mockResolvedValue({ data: { environmentUpdate: mutationResult } }), - ], + [getEnvironment, getEnvironmentQuery], + [updateEnvironment, mutationHandler], ]; return createMockApollo(mocks); }; - const createWrapper = () => { - wrapper = mountExtended(EditEnvironment, { - propsData: { environment: { id: '1', name: 'foo', external_url: 'https://foo.example.com' } }, - provide, - }); - }; - - const createWrapperWithApollo = async ({ mutationResult = environmentUpdate } = {}) => { + const createWrapperWithApollo = async ({ mutationHandler = updateEnvironmentSuccess } = {}) => { wrapper = mountExtended(EditEnvironment, { propsData: { environment: {} }, - provide: { - ...provide, - glFeatures: { - environmentSettingsToGraphql: true, - }, - }, - apolloProvider: createMockApolloProvider(mutationResult), + provide, + apolloProvider: createMockApolloProvider(mutationHandler), }); await waitForPromises(); @@ -87,43 +75,46 @@ describe('~/environments/components/edit.vue', () => { const showsLoading = () => wrapper.findComponent(GlLoadingIcon).exists(); - const submitForm = async () => { - await findExternalUrlInput().setValue(newExternalUrl); - await findForm().trigger('submit'); - }; - describe('default', () => { - beforeEach(async () => { - await createWrapper(); + it('performs the environment apollo query', () => { + createWrapperWithApollo(); + expect(getEnvironmentQuery).toHaveBeenCalled(); + }); + + it('renders loading icon when environment query is loading', () => { + createWrapperWithApollo(); + expect(showsLoading()).toBe(true); }); - it('sets the title to Edit environment', () => { + it('sets the title to Edit environment', async () => { + await createWrapperWithApollo(); + const header = wrapper.findByRole('heading', { name: __('Edit environment') }); expect(header.exists()).toBe(true); }); - it('renders a disabled "Name" field', () => { - const nameInput = findNameInput(); + it('renders a disabled "Name" field', async () => { + await createWrapperWithApollo(); + const nameInput = findNameInput(); expect(nameInput.attributes().disabled).toBe('disabled'); expect(nameInput.element.value).toBe(environment.name); }); - it('renders an "External URL" field', () => { - const urlInput = findExternalUrlInput(); + it('renders an "External URL" field', async () => { + await createWrapperWithApollo(); + const urlInput = findExternalUrlInput(); expect(urlInput.element.value).toBe(environment.externalUrl); }); }); - describe('when environmentSettingsToGraphql feature is enabled', () => { - describe('when mounted', () => { - beforeEach(() => { - createWrapperWithApollo(); - }); - it('renders loading icon when environment query is loading', () => { - expect(showsLoading()).toBe(true); - }); + describe('on submit', () => { + it('performs the updateEnvironment apollo mutation', async () => { + await createWrapperWithApollo(); + await findForm().trigger('submit'); + + expect(updateEnvironmentSuccess).toHaveBeenCalled(); }); describe('when mutation successful', () => { @@ -134,28 +125,28 @@ describe('~/environments/components/edit.vue', () => { it('shows loader after form is submitted', async () => { expect(showsLoading()).toBe(false); - await submitForm(); + await findForm().trigger('submit'); expect(showsLoading()).toBe(true); }); it('submits the updated environment on submit', async () => { - await submitForm(); + await findForm().trigger('submit'); await waitForPromises(); - expect(visitUrl).toHaveBeenCalledWith(environmentUpdate.environment.path); + expect(visitUrl).toHaveBeenCalledWith(environmentUpdateSuccess.environment.path); }); }); describe('when mutation failed', () => { beforeEach(async () => { await createWrapperWithApollo({ - mutationResult: environmentUpdateError, + mutationHandler: updateEnvironmentFail, }); }); it('shows errors on error', async () => { - await submitForm(); + await findForm().trigger('submit'); await waitForPromises(); expect(createAlert).toHaveBeenCalledWith({ message: 'uh oh!' }); @@ -163,59 +154,4 @@ describe('~/environments/components/edit.vue', () => { }); }); }); - - describe('when environmentSettingsToGraphql feature is disabled', () => { - beforeEach(() => { - mock = new MockAdapter(axios); - createWrapper(); - }); - - afterEach(() => { - mock.restore(); - }); - - it('shows loader after form is submitted', async () => { - expect(showsLoading()).toBe(false); - - mock - .onPut(provide.updateEnvironmentPath, { - external_url: newExternalUrl, - id: environment.id, - }) - .reply(...[HTTP_STATUS_OK, { path: '/test' }]); - - await submitForm(); - - expect(showsLoading()).toBe(true); - }); - - it('submits the updated environment on submit', async () => { - mock - .onPut(provide.updateEnvironmentPath, { - external_url: newExternalUrl, - id: environment.id, - }) - .reply(...[HTTP_STATUS_OK, { path: '/test' }]); - - await submitForm(); - await waitForPromises(); - - expect(visitUrl).toHaveBeenCalledWith('/test'); - }); - - it('shows errors on error', async () => { - mock - .onPut(provide.updateEnvironmentPath, { - external_url: newExternalUrl, - id: environment.id, - }) - .reply(...[HTTP_STATUS_BAD_REQUEST, { message: ['uh oh!'] }]); - - await submitForm(); - await waitForPromises(); - - expect(createAlert).toHaveBeenCalledWith({ message: 'uh oh!' }); - expect(showsLoading()).toBe(false); - }); - }); }); diff --git a/spec/frontend/environments/environment_form_spec.js b/spec/frontend/environments/environment_form_spec.js index db81c490747..1b603963599 100644 --- a/spec/frontend/environments/environment_form_spec.js +++ b/spec/frontend/environments/environment_form_spec.js @@ -40,9 +40,6 @@ describe('~/environments/components/form.vue', () => { return mountExtended(EnvironmentForm, { provide: { ...PROVIDE, - glFeatures: { - environmentSettingsToGraphql: true, - }, }, propsData: { ...DEFAULT_PROPS, @@ -207,12 +204,6 @@ describe('~/environments/components/form.vue', () => { expect(urlInput.element.value).toBe('https://example.com'); }); - }); - - describe('when `environmentSettingsToGraphql feature flag is enabled', () => { - beforeEach(() => { - wrapper = createWrapperWithApollo(); - }); it('renders an agent selector listbox', () => { expect(findAgentSelector().props()).toMatchObject({ @@ -224,6 +215,12 @@ describe('~/environments/components/form.vue', () => { items: [], }); }); + }); + + describe('agent selector', () => { + beforeEach(() => { + wrapper = createWrapperWithApollo(); + }); it('sets the items prop of the agent selector after fetching the list', async () => { findAgentSelector().vm.$emit('shown'); diff --git a/spec/frontend/environments/new_environment_spec.js b/spec/frontend/environments/new_environment_spec.js index 749e4e5caa4..30cd9265d0d 100644 --- a/spec/frontend/environments/new_environment_spec.js +++ b/spec/frontend/environments/new_environment_spec.js @@ -1,5 +1,4 @@ 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'; @@ -7,8 +6,6 @@ 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'; @@ -16,9 +13,6 @@ import createMockApollo from '../__helpers__/mock_apollo_helper'; jest.mock('~/lib/utils/url_utility'); jest.mock('~/alert'); -const newName = 'test'; -const newExternalUrl = 'https://google.ca'; - const provide = { projectEnvironmentsPath: '/projects/environments', projectPath: '/path/to/project', @@ -32,7 +26,6 @@ const environmentCreateError = { describe('~/environments/components/new.vue', () => { let wrapper; - let mock; const createMockApolloProvider = (mutationResult) => { Vue.use(VueApollo); @@ -47,29 +40,13 @@ describe('~/environments/components/new.vue', () => { const createWrapperWithApollo = async (mutationResult = environmentCreate) => { wrapper = mountExtended(NewEnvironment, { - provide: { - ...provide, - glFeatures: { - environmentSettingsToGraphql: true, - }, - }, + provide, apolloProvider: createMockApolloProvider(mutationResult), }); await waitForPromises(); }; - 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') }); @@ -84,7 +61,7 @@ describe('~/environments/components/new.vue', () => { describe('default', () => { beforeEach(() => { - createWrapperWithAxios(); + createWrapperWithApollo(); }); it('sets the title to New environment', () => { @@ -103,93 +80,36 @@ describe('~/environments/components/new.vue', () => { }); }); - describe('when environmentSettingsToGraphql feature is enabled', () => { - describe('when mutation successful', () => { - beforeEach(() => { - createWrapperWithApollo(); - }); - - it('shows loader after form is submitted', async () => { - expect(showsLoading()).toBe(false); - - await submitForm(); - - expect(showsLoading()).toBe(true); - }); - - it('submits the new environment on submit', async () => { - submitForm(); - await waitForPromises(); - - expect(visitUrl).toHaveBeenCalledWith('path/to/environment'); - }); - }); - - 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); - }); - }); - }); - - describe('when environmentSettingsToGraphql feature is disabled', () => { + describe('when mutation successful', () => { beforeEach(() => { - mock = new MockAdapter(axios); - createWrapperWithAxios(); - }); - - afterEach(() => { - mock.restore(); + createWrapperWithApollo(); }); 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(); 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(); + submitForm(); await waitForPromises(); - expect(visitUrl).toHaveBeenCalledWith('/test'); + expect(visitUrl).toHaveBeenCalledWith('path/to/environment'); }); + }); - 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(); + describe('when failed', () => { + beforeEach(async () => { + createWrapperWithApollo(environmentCreateError); + submitForm(); await waitForPromises(); + }); - expect(createAlert).toHaveBeenCalledWith({ message: 'name taken' }); + it('display errors', () => { + expect(createAlert).toHaveBeenCalledWith({ message: 'uh oh!' }); expect(showsLoading()).toBe(false); }); }); |