diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-09-19 04:45:44 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-09-19 04:45:44 +0300 |
commit | 85dc423f7090da0a52c73eb66faf22ddb20efff9 (patch) | |
tree | 9160f299afd8c80c038f08e1545be119f5e3f1e1 /spec/frontend/sidebar/components/severity | |
parent | 15c2c8c66dbe422588e5411eee7e68f1fa440bb8 (diff) |
Add latest changes from gitlab-org/gitlab@13-4-stable-ee
Diffstat (limited to 'spec/frontend/sidebar/components/severity')
-rw-r--r-- | spec/frontend/sidebar/components/severity/severity_spec.js | 57 | ||||
-rw-r--r-- | spec/frontend/sidebar/components/severity/sidebar_severity_spec.js | 166 |
2 files changed, 223 insertions, 0 deletions
diff --git a/spec/frontend/sidebar/components/severity/severity_spec.js b/spec/frontend/sidebar/components/severity/severity_spec.js new file mode 100644 index 00000000000..b6690f11d6b --- /dev/null +++ b/spec/frontend/sidebar/components/severity/severity_spec.js @@ -0,0 +1,57 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlIcon } from '@gitlab/ui'; +import SeverityToken from '~/sidebar/components/severity/severity.vue'; +import { INCIDENT_SEVERITY } from '~/sidebar/components/severity/constants'; + +describe('SeverityToken', () => { + let wrapper; + + function createComponent(props) { + wrapper = shallowMount(SeverityToken, { + propsData: { + ...props, + }, + }); + } + + afterEach(() => { + if (wrapper) { + wrapper.destroy(); + wrapper = null; + } + }); + + const findIcon = () => wrapper.find(GlIcon); + + it('renders severity token for each severity type', () => { + Object.values(INCIDENT_SEVERITY).forEach(severity => { + createComponent({ severity }); + expect(findIcon().classes()).toContain(`icon-${severity.icon}`); + expect(findIcon().attributes('name')).toBe(`severity-${severity.icon}`); + expect(wrapper.text()).toBe(severity.label); + }); + }); + + it('renders only icon when `iconOnly` prop is set to `true`', () => { + const severity = INCIDENT_SEVERITY.CRITICAL; + createComponent({ severity, iconOnly: true }); + expect(findIcon().classes()).toContain(`icon-${severity.icon}`); + expect(findIcon().attributes('name')).toBe(`severity-${severity.icon}`); + expect(wrapper.text()).toBe(''); + }); + + describe('icon size', () => { + it('renders the icon in default size when other is not specified', () => { + const severity = INCIDENT_SEVERITY.HIGH; + createComponent({ severity }); + expect(findIcon().attributes('size')).toBe('12'); + }); + + it('renders the icon in provided size', () => { + const severity = INCIDENT_SEVERITY.HIGH; + const iconSize = 14; + createComponent({ severity, iconSize }); + expect(findIcon().attributes('size')).toBe(`${iconSize}`); + }); + }); +}); 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); + }); + }); + }); +}); |