diff options
Diffstat (limited to 'spec/frontend/projects/settings_service_desk')
3 files changed, 589 insertions, 0 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 new file mode 100644 index 00000000000..4c873bdfd60 --- /dev/null +++ b/spec/frontend/projects/settings_service_desk/components/service_desk_root_spec.js @@ -0,0 +1,226 @@ +import { shallowMount, mount } 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 axios from '~/lib/utils/axios_utils'; +import httpStatusCodes from '~/lib/utils/http_status'; + +describe('ServiceDeskRoot', () => { + const endpoint = '/gitlab-org/gitlab-test/service_desk'; + const initialIncomingEmail = 'servicedeskaddress@example.com'; + let axiosMock; + let wrapper; + let spy; + + beforeEach(() => { + axiosMock = new AxiosMockAdapter(axios); + }); + + afterEach(() => { + axiosMock.restore(); + wrapper.destroy(); + if (spy) { + spy.mockRestore(); + } + }); + + it('fetches incoming email when there is no incoming email provided', () => { + axiosMock.onGet(endpoint).replyOnce(httpStatusCodes.OK); + + wrapper = shallowMount(ServiceDeskRoot, { + propsData: { + initialIsEnabled: true, + initialIncomingEmail: '', + endpoint, + }, + }); + + return wrapper.vm + .$nextTick() + .then(waitForPromises) + .then(() => { + expect(axiosMock.history.get).toHaveLength(1); + }); + }); + + it('does not fetch incoming email when there is an incoming email provided', () => { + axiosMock.onGet(endpoint).replyOnce(httpStatusCodes.OK); + + wrapper = shallowMount(ServiceDeskRoot, { + propsData: { + initialIsEnabled: true, + initialIncomingEmail, + endpoint, + }, + }); + + return wrapper.vm + .$nextTick() + .then(waitForPromises) + .then(() => { + expect(axiosMock.history.get).toHaveLength(0); + }); + }); + + it('shows an error message when incoming email is not fetched correctly', () => { + axiosMock.onGet(endpoint).networkError(); + + wrapper = shallowMount(ServiceDeskRoot, { + propsData: { + initialIsEnabled: true, + initialIncomingEmail: '', + endpoint, + }, + }); + + return wrapper.vm + .$nextTick() + .then(waitForPromises) + .then(() => { + expect(wrapper.html()).toContain( + 'An error occurred while fetching the Service Desk address.', + ); + }); + }); + + it('sends a request to toggle service desk off when the toggle is clicked from the on state', () => { + axiosMock.onPut(endpoint).replyOnce(httpStatusCodes.OK); + + spy = jest.spyOn(axios, 'put'); + + wrapper = mount(ServiceDeskRoot, { + propsData: { + initialIsEnabled: true, + initialIncomingEmail, + endpoint, + }, + }); + + wrapper.find('button.gl-toggle').trigger('click'); + + return wrapper.vm + .$nextTick() + .then(waitForPromises) + .then(() => { + expect(spy).toHaveBeenCalledWith(endpoint, { service_desk_enabled: false }); + }); + }); + + it('sends a request to toggle service desk on when the toggle is clicked from the off state', () => { + axiosMock.onPut(endpoint).replyOnce(httpStatusCodes.OK); + + spy = jest.spyOn(axios, 'put'); + + wrapper = mount(ServiceDeskRoot, { + propsData: { + initialIsEnabled: false, + initialIncomingEmail: '', + endpoint, + }, + }); + + wrapper.find('button.gl-toggle').trigger('click'); + + return wrapper.vm.$nextTick(() => { + expect(spy).toHaveBeenCalledWith(endpoint, { service_desk_enabled: true }); + }); + }); + + it('shows an error message when there is an issue toggling service desk on', () => { + axiosMock.onPut(endpoint).networkError(); + + wrapper = mount(ServiceDeskRoot, { + propsData: { + initialIsEnabled: false, + initialIncomingEmail: '', + endpoint, + }, + }); + + wrapper.find('button.gl-toggle').trigger('click'); + + return wrapper.vm + .$nextTick() + .then(waitForPromises) + .then(() => { + expect(wrapper.html()).toContain('An error occurred while enabling Service Desk.'); + }); + }); + + it('sends a request to update template when the "Save template" button is clicked', () => { + axiosMock.onPut(endpoint).replyOnce(httpStatusCodes.OK); + + spy = jest.spyOn(axios, 'put'); + + wrapper = mount(ServiceDeskRoot, { + propsData: { + initialIsEnabled: true, + endpoint, + initialIncomingEmail, + selectedTemplate: 'Bug', + outgoingName: 'GitLab Support Bot', + templates: ['Bug', 'Documentation'], + projectKey: 'key', + }, + }); + + wrapper.find('button.btn-success').trigger('click'); + + 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('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'], + }, + }); + + wrapper.find('button.btn-success').trigger('click'); + + return wrapper.vm + .$nextTick() + .then(waitForPromises) + .then(() => { + expect(wrapper.html()).toContain('Template was successfully saved.'); + }); + }); + + 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('button.btn-success').trigger('click'); + + return wrapper.vm + .$nextTick() + .then(waitForPromises) + .then(() => { + expect(wrapper.html()).toContain( + 'An error occurred while saving the template. Please check if the template exists.', + ); + }); + }); +}); diff --git a/spec/frontend/projects/settings_service_desk/components/service_desk_setting_spec.js b/spec/frontend/projects/settings_service_desk/components/service_desk_setting_spec.js new file mode 100644 index 00000000000..7fe310aa400 --- /dev/null +++ b/spec/frontend/projects/settings_service_desk/components/service_desk_setting_spec.js @@ -0,0 +1,234 @@ +import { shallowMount, mount } from '@vue/test-utils'; +import { GlLoadingIcon } from '@gitlab/ui'; +import eventHub from '~/projects/settings_service_desk/event_hub'; +import ServiceDeskSetting from '~/projects/settings_service_desk/components/service_desk_setting.vue'; + +describe('ServiceDeskSetting', () => { + let wrapper; + + afterEach(() => { + if (wrapper) { + wrapper.destroy(); + } + }); + + const findTemplateDropdown = () => wrapper.find('#service-desk-template-select'); + + describe('when isEnabled=true', () => { + describe('only isEnabled', () => { + describe('as project admin', () => { + beforeEach(() => { + wrapper = shallowMount(ServiceDeskSetting, { + propsData: { + isEnabled: true, + }, + }); + }); + + it('should see activation checkbox', () => { + expect(wrapper.contains('#service-desk-checkbox')).toBe(true); + }); + + it('should see main panel with the email info', () => { + expect(wrapper.contains('#incoming-email-describer')).toBe(true); + }); + + it('should see loading spinner and not the incoming email', () => { + expect(wrapper.find(GlLoadingIcon).exists()).toBe(true); + expect(wrapper.contains('.incoming-email')).toBe(false); + }); + }); + }); + + describe('service desk toggle', () => { + it('emits an event to turn on Service Desk when clicked', () => { + const eventSpy = jest.fn(); + eventHub.$on('serviceDeskEnabledCheckboxToggled', eventSpy); + + wrapper = mount(ServiceDeskSetting, { + propsData: { + isEnabled: false, + }, + }); + + wrapper.find('#service-desk-checkbox').trigger('click'); + + expect(eventSpy).toHaveBeenCalledWith(true); + + eventHub.$off('serviceDeskEnabledCheckboxToggled', eventSpy); + eventSpy.mockRestore(); + }); + }); + + describe('with incomingEmail', () => { + const incomingEmail = 'foo@bar.com'; + + beforeEach(() => { + wrapper = mount(ServiceDeskSetting, { + propsData: { + isEnabled: true, + incomingEmail, + }, + }); + }); + + it('should see email and not the loading spinner', () => { + expect(wrapper.find('.incoming-email').element.value).toEqual(incomingEmail); + expect(wrapper.find(GlLoadingIcon).exists()).toBe(false); + }); + + it('renders a copy to clipboard button', () => { + expect(wrapper.contains('.qa-clipboard-button')).toBe(true); + expect(wrapper.find('.qa-clipboard-button').element.dataset.clipboardText).toBe( + incomingEmail, + ); + }); + }); + + describe('templates dropdown', () => { + it('renders a dropdown to choose a template', () => { + wrapper = shallowMount(ServiceDeskSetting, { + propsData: { + isEnabled: true, + }, + }); + + expect(wrapper.contains('#service-desk-template-select')).toBe(true); + }); + + it('renders a dropdown with a default value of ""', () => { + wrapper = mount(ServiceDeskSetting, { + propsData: { + isEnabled: true, + }, + }); + + expect(findTemplateDropdown().element.value).toEqual(''); + }); + + it('renders a dropdown with a value of "Bug" when it is the initial value', () => { + const templates = ['Bug', 'Documentation', 'Security release']; + + wrapper = mount(ServiceDeskSetting, { + propsData: { + isEnabled: true, + initialSelectedTemplate: 'Bug', + templates, + }, + }); + + expect(findTemplateDropdown().element.value).toEqual('Bug'); + }); + + it('renders a dropdown with no options when the project has no templates', () => { + wrapper = mount(ServiceDeskSetting, { + propsData: { + isEnabled: true, + templates: [], + }, + }); + + // The dropdown by default has one empty option + expect(findTemplateDropdown().element.children).toHaveLength(1); + }); + + it('renders a dropdown with options when the project has templates', () => { + const templates = ['Bug', 'Documentation', 'Security release']; + wrapper = mount(ServiceDeskSetting, { + propsData: { + isEnabled: true, + templates, + }, + }); + + // An empty-named template is prepended so the user can select no template + const expectedTemplates = [''].concat(templates); + + const dropdown = findTemplateDropdown(); + const dropdownList = Array.from(dropdown.element.children).map(option => option.innerText); + + expect(dropdown.element.children).toHaveLength(expectedTemplates.length); + expect(dropdownList.includes('Bug')).toEqual(true); + expect(dropdownList.includes('Documentation')).toEqual(true); + expect(dropdownList.includes('Security release')).toEqual(true); + }); + }); + }); + + describe('save button', () => { + it('renders a save button to save a template', () => { + wrapper = mount(ServiceDeskSetting, { + propsData: { + isEnabled: true, + }, + }); + + expect(wrapper.find('button.btn-success').text()).toContain('Save template'); + }); + + it('emits a save event with the chosen template when the save button is clicked', () => { + const eventSpy = jest.fn(); + eventHub.$on('serviceDeskTemplateSave', eventSpy); + + wrapper = mount(ServiceDeskSetting, { + propsData: { + isEnabled: true, + initialSelectedTemplate: 'Bug', + initialOutgoingName: 'GitLab Support Bot', + initialProjectKey: 'key', + }, + }); + + wrapper.find('button.btn-success').trigger('click'); + + expect(eventSpy).toHaveBeenCalledWith({ + selectedTemplate: 'Bug', + outgoingName: 'GitLab Support Bot', + projectKey: 'key', + }); + + eventHub.$off('serviceDeskTemplateSave', eventSpy); + eventSpy.mockRestore(); + }); + }); + + describe('when isEnabled=false', () => { + beforeEach(() => { + wrapper = shallowMount(ServiceDeskSetting, { + propsData: { + isEnabled: false, + }, + }); + }); + + it('does not render email panel', () => { + expect(wrapper.contains('#incoming-email-describer')).toBe(false); + }); + + it('does not render template dropdown', () => { + expect(wrapper.contains('#service-desk-template-select')).toBe(false); + }); + + it('does not render template save button', () => { + expect(wrapper.contains('button.btn-success')).toBe(false); + }); + + it('emits an event to turn on Service Desk when the toggle is clicked', () => { + const eventSpy = jest.fn(); + eventHub.$on('serviceDeskEnabledCheckboxToggled', eventSpy); + + wrapper = mount(ServiceDeskSetting, { + propsData: { + isEnabled: true, + }, + }); + + wrapper.find('#service-desk-checkbox').trigger('click'); + + expect(eventSpy).toHaveBeenCalledWith(false); + + eventHub.$off('serviceDeskEnabledCheckboxToggled', eventSpy); + eventSpy.mockRestore(); + }); + }); +}); diff --git a/spec/frontend/projects/settings_service_desk/services/service_desk_service_spec.js b/spec/frontend/projects/settings_service_desk/services/service_desk_service_spec.js new file mode 100644 index 00000000000..f9e4d55245a --- /dev/null +++ b/spec/frontend/projects/settings_service_desk/services/service_desk_service_spec.js @@ -0,0 +1,129 @@ +import AxiosMockAdapter from 'axios-mock-adapter'; +import ServiceDeskService from '~/projects/settings_service_desk/services/service_desk_service'; +import axios from '~/lib/utils/axios_utils'; +import httpStatusCodes from '~/lib/utils/http_status'; + +describe('ServiceDeskService', () => { + const endpoint = `/gitlab-org/gitlab-test/service_desk`; + const dummyResponse = { message: 'Dummy response' }; + const errorMessage = 'Network Error'; + let axiosMock; + let service; + + beforeEach(() => { + axiosMock = new AxiosMockAdapter(axios); + service = new ServiceDeskService(endpoint); + }); + + afterEach(() => { + axiosMock.restore(); + }); + + describe('fetchIncomingEmail', () => { + it('makes a request to fetch incoming email', () => { + axiosMock.onGet(endpoint).replyOnce(httpStatusCodes.OK, dummyResponse); + + return service.fetchIncomingEmail().then(response => { + expect(response.data).toEqual(dummyResponse); + }); + }); + + it('fails on error response', () => { + axiosMock.onGet(endpoint).networkError(); + + return service.fetchIncomingEmail().catch(error => { + expect(error.message).toBe(errorMessage); + }); + }); + }); + + describe('toggleServiceDesk', () => { + it('makes a request to set service desk', () => { + axiosMock.onPut(endpoint).replyOnce(httpStatusCodes.OK, dummyResponse); + + return service.toggleServiceDesk(true).then(response => { + expect(response.data).toEqual(dummyResponse); + }); + }); + + it('fails on error response', () => { + axiosMock.onPut(endpoint).networkError(); + + return service.toggleServiceDesk(true).catch(error => { + expect(error.message).toBe(errorMessage); + }); + }); + + it('makes a request with the expected body', () => { + axiosMock.onPut(endpoint).replyOnce(httpStatusCodes.OK, dummyResponse); + + const spy = jest.spyOn(axios, 'put'); + + service.toggleServiceDesk(true); + + expect(spy).toHaveBeenCalledWith(endpoint, { + service_desk_enabled: true, + }); + + spy.mockRestore(); + }); + }); + + describe('updateTemplate', () => { + it('makes a request to update template', () => { + axiosMock.onPut(endpoint).replyOnce(httpStatusCodes.OK, dummyResponse); + + return service + .updateTemplate( + { + selectedTemplate: 'Bug', + outgoingName: 'GitLab Support Bot', + }, + true, + ) + .then(response => { + expect(response.data).toEqual(dummyResponse); + }); + }); + + it('fails on error response', () => { + axiosMock.onPut(endpoint).networkError(); + + return service + .updateTemplate( + { + selectedTemplate: 'Bug', + outgoingName: 'GitLab Support Bot', + }, + true, + ) + .catch(error => { + expect(error.message).toBe(errorMessage); + }); + }); + + it('makes a request with the expected body', () => { + axiosMock.onPut(endpoint).replyOnce(httpStatusCodes.OK, dummyResponse); + + const spy = jest.spyOn(axios, 'put'); + + service.updateTemplate( + { + selectedTemplate: 'Bug', + outgoingName: 'GitLab Support Bot', + projectKey: 'key', + }, + true, + ); + + expect(spy).toHaveBeenCalledWith(endpoint, { + issue_template_key: 'Bug', + outgoing_name: 'GitLab Support Bot', + project_key: 'key', + service_desk_enabled: true, + }); + + spy.mockRestore(); + }); + }); +}); |