diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-07-30 03:10:03 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-07-30 03:10:03 +0300 |
commit | 420215876fadcc44935e7937cb56f7ffe5212ecb (patch) | |
tree | a24028043ba417bbdde620521e1940eb4ce727e1 /spec/frontend | |
parent | e4df6a7c53ab6e9dd6d63516ca9e0ad143cfa17a (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend')
-rw-r--r-- | spec/frontend/environments/edit_environment_spec.js | 20 | ||||
-rw-r--r-- | spec/frontend/environments/environment_form_spec.js | 126 | ||||
-rw-r--r-- | spec/frontend/environments/new_environment_spec.js | 20 |
3 files changed, 101 insertions, 65 deletions
diff --git a/spec/frontend/environments/edit_environment_spec.js b/spec/frontend/environments/edit_environment_spec.js index de497b18dd6..3e7f5dd5ff4 100644 --- a/spec/frontend/environments/edit_environment_spec.js +++ b/spec/frontend/environments/edit_environment_spec.js @@ -1,3 +1,4 @@ +import { GlLoadingIcon } from '@gitlab/ui'; import MockAdapter from 'axios-mock-adapter'; import { mountExtended } from 'helpers/vue_test_utils_helper'; import waitForPromises from 'helpers/wait_for_promises'; @@ -43,7 +44,9 @@ describe('~/environments/components/edit.vue', () => { wrapper.destroy(); }); - const fillForm = async (expected, response) => { + const showsLoading = () => wrapper.find(GlLoadingIcon).exists(); + + const submitForm = async (expected, response) => { mock .onPut(DEFAULT_OPTS.provide.updateEnvironmentPath, { name: expected.name, @@ -72,10 +75,20 @@ describe('~/environments/components/edit.vue', () => { expect(input().element.value).toBe(value); }); + it('shows loader after form is submitted', async () => { + const expected = { name: 'test', url: 'https://google.ca' }; + + expect(showsLoading()).toBe(false); + + await submitForm(expected, [200, { path: '/test' }]); + + expect(showsLoading()).toBe(true); + }); + it('submits the updated environment on submit', async () => { const expected = { name: 'test', url: 'https://google.ca' }; - await fillForm(expected, [200, { path: '/test' }]); + await submitForm(expected, [200, { path: '/test' }]); expect(visitUrl).toHaveBeenCalledWith('/test'); }); @@ -83,8 +96,9 @@ describe('~/environments/components/edit.vue', () => { it('shows errors on error', async () => { const expected = { name: 'test', url: 'https://google.ca' }; - await fillForm(expected, [400, { message: ['name taken'] }]); + await submitForm(expected, [400, { message: ['name taken'] }]); expect(createFlash).toHaveBeenCalledWith({ message: 'name taken' }); + expect(showsLoading()).toBe(false); }); }); diff --git a/spec/frontend/environments/environment_form_spec.js b/spec/frontend/environments/environment_form_spec.js index 2d7cdc8a0bd..ed8fda71dab 100644 --- a/spec/frontend/environments/environment_form_spec.js +++ b/spec/frontend/environments/environment_form_spec.js @@ -1,97 +1,105 @@ +import { GlLoadingIcon } from '@gitlab/ui'; import { mountExtended } from 'helpers/vue_test_utils_helper'; import EnvironmentForm from '~/environments/components/environment_form.vue'; jest.mock('~/lib/utils/csrf'); -const DEFAULT_OPTS = { - propsData: { - environment: { name: '', externalUrl: '' }, - title: 'environment', - cancelPath: '/cancel', - }, +const DEFAULT_PROPS = { + environment: { name: '', externalUrl: '' }, + title: 'environment', + cancelPath: '/cancel', }; describe('~/environments/components/form.vue', () => { let wrapper; - const createWrapper = (opts = {}) => + const createWrapper = (propsData = {}) => mountExtended(EnvironmentForm, { - ...DEFAULT_OPTS, - ...opts, + propsData: { + ...DEFAULT_PROPS, + ...propsData, + }, }); - beforeEach(() => { - wrapper = createWrapper(); - }); - afterEach(() => { wrapper.destroy(); }); - it('links to documentation regarding environments', () => { - const link = wrapper.findByRole('link', { name: 'More information' }); - expect(link.attributes('href')).toBe('/help/ci/environments/index.md'); - }); - - it('links the cancel button to the cancel path', () => { - const cancel = wrapper.findByRole('link', { name: 'Cancel' }); + describe('default', () => { + beforeEach(() => { + wrapper = createWrapper(); + }); - expect(cancel.attributes('href')).toBe(DEFAULT_OPTS.propsData.cancelPath); - }); + it('links to documentation regarding environments', () => { + const link = wrapper.findByRole('link', { name: 'More information' }); + expect(link.attributes('href')).toBe('/help/ci/environments/index.md'); + }); - describe('name input', () => { - let name; + it('links the cancel button to the cancel path', () => { + const cancel = wrapper.findByRole('link', { name: 'Cancel' }); - beforeEach(() => { - name = wrapper.findByLabelText('Name'); + expect(cancel.attributes('href')).toBe(DEFAULT_PROPS.cancelPath); }); - it('should emit changes to the name', async () => { - await name.setValue('test'); - await name.trigger('blur'); + describe('name input', () => { + let name; - expect(wrapper.emitted('change')).toEqual([[{ name: 'test', externalUrl: '' }]]); - }); + beforeEach(() => { + name = wrapper.findByLabelText('Name'); + }); - it('should validate that the name is required', async () => { - await name.setValue(''); - await name.trigger('blur'); + it('should emit changes to the name', async () => { + await name.setValue('test'); + await name.trigger('blur'); - expect(wrapper.findByText('This field is required').exists()).toBe(true); - expect(name.attributes('aria-invalid')).toBe('true'); - }); - }); + expect(wrapper.emitted('change')).toEqual([[{ name: 'test', externalUrl: '' }]]); + }); - describe('url input', () => { - let url; + it('should validate that the name is required', async () => { + await name.setValue(''); + await name.trigger('blur'); - beforeEach(() => { - url = wrapper.findByLabelText('External URL'); + expect(wrapper.findByText('This field is required').exists()).toBe(true); + expect(name.attributes('aria-invalid')).toBe('true'); + }); }); - it('should emit changes to the url', async () => { - await url.setValue('https://example.com'); - await url.trigger('blur'); + describe('url input', () => { + let url; + + beforeEach(() => { + url = wrapper.findByLabelText('External URL'); + }); - expect(wrapper.emitted('change')).toEqual([ - [{ name: '', externalUrl: 'https://example.com' }], - ]); + it('should emit changes to the url', async () => { + await url.setValue('https://example.com'); + await url.trigger('blur'); + + expect(wrapper.emitted('change')).toEqual([ + [{ name: '', externalUrl: 'https://example.com' }], + ]); + }); + + it('should validate that the url is required', async () => { + await url.setValue('example.com'); + await url.trigger('blur'); + + expect(wrapper.findByText('The URL should start with http:// or https://').exists()).toBe( + true, + ); + expect(url.attributes('aria-invalid')).toBe('true'); + }); }); - it('should validate that the url is required', async () => { - await url.setValue('example.com'); - await url.trigger('blur'); + it('submits when the form does', async () => { + await wrapper.findByRole('form', { title: 'environment' }).trigger('submit'); - expect(wrapper.findByText('The URL should start with http:// or https://').exists()).toBe( - true, - ); - expect(url.attributes('aria-invalid')).toBe('true'); + expect(wrapper.emitted('submit')).toEqual([[]]); }); }); - it('submits when the form does', async () => { - await wrapper.findByRole('form', { title: 'environment' }).trigger('submit'); - - expect(wrapper.emitted('submit')).toEqual([[]]); + it('shows a loading icon while loading', () => { + wrapper = createWrapper({ loading: true }); + expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true); }); }); diff --git a/spec/frontend/environments/new_environment_spec.js b/spec/frontend/environments/new_environment_spec.js index b92c4a688b7..f6d970e02d8 100644 --- a/spec/frontend/environments/new_environment_spec.js +++ b/spec/frontend/environments/new_environment_spec.js @@ -1,3 +1,4 @@ +import { GlLoadingIcon } from '@gitlab/ui'; import MockAdapter from 'axios-mock-adapter'; import { mountExtended } from 'helpers/vue_test_utils_helper'; import waitForPromises from 'helpers/wait_for_promises'; @@ -39,7 +40,9 @@ describe('~/environments/components/new.vue', () => { wrapper.destroy(); }); - const fillForm = async (expected, response) => { + const showsLoading = () => wrapper.find(GlLoadingIcon).exists(); + + const submitForm = async (expected, response) => { mock .onPost(DEFAULT_OPTS.provide.projectEnvironmentsPath, { name: expected.name, @@ -68,10 +71,20 @@ describe('~/environments/components/new.vue', () => { expect(input().element.value).toBe(value); }); + it('shows loader after form is submitted', async () => { + const expected = { name: 'test', url: 'https://google.ca' }; + + expect(showsLoading()).toBe(false); + + await submitForm(expected, [200, { path: '/test' }]); + + expect(showsLoading()).toBe(true); + }); + it('submits the new environment on submit', async () => { const expected = { name: 'test', url: 'https://google.ca' }; - await fillForm(expected, [200, { path: '/test' }]); + await submitForm(expected, [200, { path: '/test' }]); expect(visitUrl).toHaveBeenCalledWith('/test'); }); @@ -79,8 +92,9 @@ describe('~/environments/components/new.vue', () => { it('shows errors on error', async () => { const expected = { name: 'test', url: 'https://google.ca' }; - await fillForm(expected, [400, { message: ['name taken'] }]); + await submitForm(expected, [400, { message: ['name taken'] }]); expect(createFlash).toHaveBeenCalledWith({ message: 'name taken' }); + expect(showsLoading()).toBe(false); }); }); |