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'; import EditEnvironment from '~/environments/components/edit_environment.vue'; import createFlash from '~/flash'; import axios from '~/lib/utils/axios_utils'; import { visitUrl } from '~/lib/utils/url_utility'; jest.mock('~/lib/utils/url_utility'); jest.mock('~/flash'); const DEFAULT_OPTS = { provide: { projectEnvironmentsPath: '/projects/environments', updateEnvironmentPath: '/proejcts/environments/1', }, propsData: { environment: { name: 'foo', externalUrl: 'https://foo.example.com' } }, }; describe('~/environments/components/edit.vue', () => { let wrapper; let mock; let name; let url; let form; const createWrapper = (opts = {}) => mountExtended(EditEnvironment, { ...DEFAULT_OPTS, ...opts, }); beforeEach(() => { mock = new MockAdapter(axios); wrapper = createWrapper(); name = wrapper.findByLabelText('Name'); url = wrapper.findByLabelText('External URL'); form = wrapper.findByRole('form', { name: 'Edit environment' }); }); afterEach(() => { mock.restore(); wrapper.destroy(); }); const showsLoading = () => wrapper.find(GlLoadingIcon).exists(); const submitForm = async (expected, response) => { mock .onPut(DEFAULT_OPTS.provide.updateEnvironmentPath, { 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(); }; it('sets the title to Edit environment', () => { const header = wrapper.findByRole('heading', { name: 'Edit environment' }); expect(header.exists()).toBe(true); }); it.each` input | value ${() => name} | ${'test'} ${() => url} | ${'https://example.org'} `('it changes the value of the input to $value', async ({ input, value }) => { await input().setValue(value); 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 submitForm(expected, [200, { path: '/test' }]); expect(visitUrl).toHaveBeenCalledWith('/test'); }); it('shows errors on error', async () => { const expected = { name: 'test', url: 'https://google.ca' }; await submitForm(expected, [400, { message: ['name taken'] }]); expect(createFlash).toHaveBeenCalledWith({ message: 'name taken' }); expect(showsLoading()).toBe(false); }); });