From 85dc423f7090da0a52c73eb66faf22ddb20efff9 Mon Sep 17 00:00:00 2001 From: GitLab Bot Date: Sat, 19 Sep 2020 01:45:44 +0000 Subject: Add latest changes from gitlab-org/gitlab@13-4-stable-ee --- .../components/severity/sidebar_severity_spec.js | 166 +++++++++++++++++++++ 1 file changed, 166 insertions(+) create mode 100644 spec/frontend/sidebar/components/severity/sidebar_severity_spec.js (limited to 'spec/frontend/sidebar/components/severity/sidebar_severity_spec.js') diff --git a/spec/frontend/sidebar/components/severity/sidebar_severity_spec.js b/spec/frontend/sidebar/components/severity/sidebar_severity_spec.js new file mode 100644 index 00000000000..638d3706d12 --- /dev/null +++ b/spec/frontend/sidebar/components/severity/sidebar_severity_spec.js @@ -0,0 +1,166 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlDropdown, GlDropdownItem, GlLoadingIcon, GlTooltip, GlSprintf } from '@gitlab/ui'; +import waitForPromises from 'helpers/wait_for_promises'; +import createFlash from '~/flash'; +import SidebarSeverity from '~/sidebar/components/severity/sidebar_severity.vue'; +import SeverityToken from '~/sidebar/components/severity/severity.vue'; +import updateIssuableSeverity from '~/sidebar/components/severity/graphql/mutations/update_issuable_severity.mutation.graphql'; +import { INCIDENT_SEVERITY, ISSUABLE_TYPES } from '~/sidebar/components/severity/constants'; + +jest.mock('~/flash'); + +describe('SidebarSeverity', () => { + let wrapper; + let mutate; + const projectPath = 'gitlab-org/gitlab-test'; + const iid = '1'; + const severity = 'CRITICAL'; + + function createComponent(props = {}) { + const propsData = { + projectPath, + iid, + issuableType: ISSUABLE_TYPES.INCIDENT, + initialSeverity: severity, + ...props, + }; + mutate = jest.fn(); + wrapper = shallowMount(SidebarSeverity, { + propsData, + mocks: { + $apollo: { + mutate, + }, + }, + stubs: { + GlSprintf, + }, + }); + } + + beforeEach(() => { + createComponent(); + }); + + afterEach(() => { + if (wrapper) { + wrapper.destroy(); + wrapper = null; + } + }); + + const findSeverityToken = () => wrapper.findAll(SeverityToken); + const findEditBtn = () => wrapper.find('[data-testid="editButton"]'); + const findDropdown = () => wrapper.find(GlDropdown); + const findCriticalSeverityDropdownItem = () => wrapper.find(GlDropdownItem); + const findLoadingIcon = () => wrapper.find(GlLoadingIcon); + const findTooltip = () => wrapper.find(GlTooltip); + const findCollapsedSeverity = () => wrapper.find({ ref: 'severity' }); + + it('renders severity widget', () => { + expect(findEditBtn().exists()).toBe(true); + expect(findSeverityToken().exists()).toBe(true); + expect(findDropdown().exists()).toBe(true); + }); + + describe('Update severity', () => { + it('calls `$apollo.mutate` with `updateIssuableSeverity`', () => { + jest + .spyOn(wrapper.vm.$apollo, 'mutate') + .mockResolvedValueOnce({ data: { issueSetSeverity: { issue: { severity } } } }); + + findCriticalSeverityDropdownItem().vm.$emit('click'); + expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({ + mutation: updateIssuableSeverity, + variables: { + iid, + projectPath, + severity, + }, + }); + }); + + it('shows error alert when severity update fails ', () => { + const errorMsg = 'Something went wrong'; + jest.spyOn(wrapper.vm.$apollo, 'mutate').mockRejectedValueOnce(errorMsg); + findCriticalSeverityDropdownItem().vm.$emit('click'); + + setImmediate(() => { + expect(createFlash).toHaveBeenCalled(); + }); + }); + + it('shows loading icon while updating', async () => { + let resolvePromise; + wrapper.vm.$apollo.mutate = jest.fn( + () => + new Promise(resolve => { + resolvePromise = resolve; + }), + ); + findCriticalSeverityDropdownItem().vm.$emit('click'); + + await wrapper.vm.$nextTick(); + expect(findLoadingIcon().exists()).toBe(true); + + resolvePromise(); + await waitForPromises(); + expect(findLoadingIcon().exists()).toBe(false); + }); + }); + + describe('Switch between collapsed/expanded view of the sidebar', () => { + const HIDDDEN_CLASS = 'gl-display-none'; + const SHOWN_CLASS = 'show'; + + describe('collapsed', () => { + it('should have collapsed icon class', () => { + expect(findCollapsedSeverity().classes('sidebar-collapsed-icon')).toBe(true); + }); + + it('should display only icon with a tooltip', () => { + expect( + findSeverityToken() + .at(0) + .attributes('icononly'), + ).toBe('true'); + expect( + findSeverityToken() + .at(0) + .attributes('iconsize'), + ).toBe('14'); + expect( + findTooltip() + .text() + .replace(/\s+/g, ' '), + ).toContain(`Severity: ${INCIDENT_SEVERITY[severity].label}`); + }); + + it('should expand the dropdown on collapsed icon click', async () => { + wrapper.vm.isDropdownShowing = false; + await wrapper.vm.$nextTick(); + expect(findDropdown().classes(HIDDDEN_CLASS)).toBe(true); + + findCollapsedSeverity().trigger('click'); + await wrapper.vm.$nextTick(); + expect(findDropdown().classes(SHOWN_CLASS)).toBe(true); + }); + }); + + describe('expanded', () => { + it('toggles dropdown with edit button', async () => { + wrapper.vm.isDropdownShowing = false; + await wrapper.vm.$nextTick(); + expect(findDropdown().classes(HIDDDEN_CLASS)).toBe(true); + + findEditBtn().vm.$emit('click'); + await wrapper.vm.$nextTick(); + expect(findDropdown().classes(SHOWN_CLASS)).toBe(true); + + findEditBtn().vm.$emit('click'); + await wrapper.vm.$nextTick(); + expect(findDropdown().classes(HIDDDEN_CLASS)).toBe(true); + }); + }); + }); +}); -- cgit v1.2.3