diff options
Diffstat (limited to 'spec/frontend/projects/settings_service_desk/components/service_desk_root_spec.js')
| -rw-r--r-- | spec/frontend/projects/settings_service_desk/components/service_desk_root_spec.js | 236 |
1 files changed, 109 insertions, 127 deletions
diff --git a/spec/frontend/projects/settings_service_desk/components/service_desk_root_spec.js b/spec/frontend/projects/settings_service_desk/components/service_desk_root_spec.js index c83b1852147..f9fbb1b3016 100644 --- a/spec/frontend/projects/settings_service_desk/components/service_desk_root_spec.js +++ b/spec/frontend/projects/settings_service_desk/components/service_desk_root_spec.js @@ -1,20 +1,36 @@ -import { mount } from '@vue/test-utils'; +import { GlAlert } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; import AxiosMockAdapter from 'axios-mock-adapter'; import waitForPromises from 'helpers/wait_for_promises'; -import ServiceDeskRoot from '~/projects/settings_service_desk/components/service_desk_root.vue'; -import ServiceDeskSetting from '~/projects/settings_service_desk/components/service_desk_setting.vue'; import axios from '~/lib/utils/axios_utils'; import httpStatusCodes from '~/lib/utils/http_status'; +import ServiceDeskRoot from '~/projects/settings_service_desk/components/service_desk_root.vue'; +import ServiceDeskSetting from '~/projects/settings_service_desk/components/service_desk_setting.vue'; describe('ServiceDeskRoot', () => { - const endpoint = '/gitlab-org/gitlab-test/service_desk'; - const initialIncomingEmail = 'servicedeskaddress@example.com'; let axiosMock; let wrapper; let spy; + const provideData = { + customEmail: 'custom.email@example.com', + customEmailEnabled: true, + endpoint: '/gitlab-org/gitlab-test/service_desk', + initialIncomingEmail: 'servicedeskaddress@example.com', + initialIsEnabled: true, + outgoingName: 'GitLab Support Bot', + projectKey: 'key', + selectedTemplate: 'Bug', + templates: ['Bug', 'Documentation'], + }; + + const getAlertText = () => wrapper.find(GlAlert).text(); + + const createComponent = () => shallowMount(ServiceDeskRoot, { provide: provideData }); + beforeEach(() => { axiosMock = new AxiosMockAdapter(axios); + spy = jest.spyOn(axios, 'put'); }); afterEach(() => { @@ -25,156 +41,122 @@ describe('ServiceDeskRoot', () => { } }); - it('sends a request to toggle service desk off when the toggle is clicked from the on state', () => { - axiosMock.onPut(endpoint).replyOnce(httpStatusCodes.OK); + describe('ServiceDeskSetting component', () => { + it('is rendered', () => { + wrapper = createComponent(); + + expect(wrapper.find(ServiceDeskSetting).props()).toEqual({ + customEmail: provideData.customEmail, + customEmailEnabled: provideData.customEmailEnabled, + incomingEmail: provideData.initialIncomingEmail, + initialOutgoingName: provideData.outgoingName, + initialProjectKey: provideData.projectKey, + initialSelectedTemplate: provideData.selectedTemplate, + isEnabled: provideData.initialIsEnabled, + isTemplateSaving: false, + templates: provideData.templates, + }); + }); + + describe('toggle event', () => { + describe('when toggling service desk on', () => { + beforeEach(async () => { + wrapper = createComponent(); - spy = jest.spyOn(axios, 'put'); + wrapper.find(ServiceDeskSetting).vm.$emit('toggle', true); - wrapper = mount(ServiceDeskRoot, { - propsData: { - initialIsEnabled: true, - initialIncomingEmail, - endpoint, - }, - }); + await waitForPromises(); + }); + + it('sends a request to turn service desk on', () => { + axiosMock.onPut(provideData.endpoint).replyOnce(httpStatusCodes.OK); - wrapper.find('button.gl-toggle').trigger('click'); + expect(spy).toHaveBeenCalledWith(provideData.endpoint, { service_desk_enabled: true }); + }); - return wrapper.vm - .$nextTick() - .then(waitForPromises) - .then(() => { - expect(spy).toHaveBeenCalledWith(endpoint, { service_desk_enabled: false }); + it('shows a message when there is an error', () => { + axiosMock.onPut(provideData.endpoint).networkError(); + + expect(getAlertText()).toContain('An error occurred while enabling Service Desk.'); + }); }); - }); - it('sends a request to toggle service desk on when the toggle is clicked from the off state', () => { - axiosMock.onPut(endpoint).replyOnce(httpStatusCodes.OK); + describe('when toggling service desk off', () => { + beforeEach(async () => { + wrapper = createComponent(); - spy = jest.spyOn(axios, 'put'); + wrapper.find(ServiceDeskSetting).vm.$emit('toggle', false); - wrapper = mount(ServiceDeskRoot, { - propsData: { - initialIsEnabled: false, - initialIncomingEmail: '', - endpoint, - }, - }); + await waitForPromises(); + }); - wrapper.find('button.gl-toggle').trigger('click'); + it('sends a request to turn service desk off', () => { + axiosMock.onPut(provideData.endpoint).replyOnce(httpStatusCodes.OK); - return wrapper.vm.$nextTick(() => { - expect(spy).toHaveBeenCalledWith(endpoint, { service_desk_enabled: true }); - }); - }); + expect(spy).toHaveBeenCalledWith(provideData.endpoint, { service_desk_enabled: false }); + }); - it('shows an error message when there is an issue toggling service desk on', () => { - axiosMock.onPut(endpoint).networkError(); + it('shows a message when there is an error', () => { + axiosMock.onPut(provideData.endpoint).networkError(); - wrapper = mount(ServiceDeskRoot, { - propsData: { - initialIsEnabled: false, - initialIncomingEmail: '', - endpoint, - }, + expect(getAlertText()).toContain('An error occurred while disabling Service Desk.'); + }); + }); }); - wrapper.find('button.gl-toggle').trigger('click'); + describe('save event', () => { + describe('successful request', () => { + beforeEach(async () => { + axiosMock.onPut(provideData.endpoint).replyOnce(httpStatusCodes.OK); - return wrapper.vm - .$nextTick() - .then(waitForPromises) - .then(() => { - expect(wrapper.html()).toContain('An error occurred while enabling Service Desk.'); - }); - }); + wrapper = createComponent(); - it('sends a request to update template when the "Save template" button is clicked', () => { - axiosMock.onPut(endpoint).replyOnce(httpStatusCodes.OK); + const payload = { + selectedTemplate: 'Bug', + outgoingName: 'GitLab Support Bot', + projectKey: 'key', + }; - spy = jest.spyOn(axios, 'put'); + wrapper.find(ServiceDeskSetting).vm.$emit('save', payload); - wrapper = mount(ServiceDeskRoot, { - propsData: { - initialIsEnabled: true, - endpoint, - initialIncomingEmail, - selectedTemplate: 'Bug', - outgoingName: 'GitLab Support Bot', - templates: ['Bug', 'Documentation'], - projectKey: 'key', - }, - }); + await waitForPromises(); + }); - wrapper.find('button.btn-success').trigger('click'); + it('sends a request to update template', async () => { + expect(spy).toHaveBeenCalledWith(provideData.endpoint, { + issue_template_key: 'Bug', + outgoing_name: 'GitLab Support Bot', + project_key: 'key', + service_desk_enabled: true, + }); + }); - return wrapper.vm.$nextTick(() => { - expect(spy).toHaveBeenCalledWith(endpoint, { - issue_template_key: 'Bug', - outgoing_name: 'GitLab Support Bot', - project_key: 'key', - service_desk_enabled: true, + it('shows success message', () => { + expect(getAlertText()).toContain('Changes saved.'); + }); }); - }); - }); - it('saves the template when the "Save template" button is clicked', () => { - axiosMock.onPut(endpoint).replyOnce(httpStatusCodes.OK); - - wrapper = mount(ServiceDeskRoot, { - propsData: { - initialIsEnabled: true, - endpoint, - initialIncomingEmail, - selectedTemplate: 'Bug', - templates: ['Bug', 'Documentation'], - }, - }); + describe('unsuccessful request', () => { + beforeEach(async () => { + axiosMock.onPut(provideData.endpoint).networkError(); - wrapper.find('button.btn-success').trigger('click'); + wrapper = createComponent(); - return wrapper.vm - .$nextTick() - .then(waitForPromises) - .then(() => { - expect(wrapper.html()).toContain('Changes saved.'); - }); - }); + const payload = { + selectedTemplate: 'Bug', + outgoingName: 'GitLab Support Bot', + projectKey: 'key', + }; - it('shows an error message when there is an issue saving the template', () => { - axiosMock.onPut(endpoint).networkError(); - - wrapper = mount(ServiceDeskRoot, { - propsData: { - initialIsEnabled: true, - endpoint, - initialIncomingEmail, - selectedTemplate: 'Bug', - templates: ['Bug', 'Documentation'], - }, - }); + wrapper.find(ServiceDeskSetting).vm.$emit('save', payload); - wrapper.find('button.btn-success').trigger('click'); + await waitForPromises(); + }); - return wrapper.vm - .$nextTick() - .then(waitForPromises) - .then(() => { - expect(wrapper.html()).toContain('An error occured while saving changes:'); + it('shows an error message', () => { + expect(getAlertText()).toContain('An error occured while saving changes:'); + }); }); - }); - - it('passes customEmail through updatedCustomEmail correctly', () => { - const customEmail = 'foo'; - - wrapper = mount(ServiceDeskRoot, { - propsData: { - initialIsEnabled: true, - endpoint, - customEmail, - }, }); - - expect(wrapper.find(ServiceDeskSetting).props('customEmail')).toEqual(customEmail); }); }); |