diff options
Diffstat (limited to 'spec/frontend/vue_shared/issuable/show/components/issuable_header_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/issuable/show/components/issuable_header_spec.js | 77 |
1 files changed, 38 insertions, 39 deletions
diff --git a/spec/frontend/vue_shared/issuable/show/components/issuable_header_spec.js b/spec/frontend/vue_shared/issuable/show/components/issuable_header_spec.js index 1cdd709159f..544db891a13 100644 --- a/spec/frontend/vue_shared/issuable/show/components/issuable_header_spec.js +++ b/spec/frontend/vue_shared/issuable/show/components/issuable_header_spec.js @@ -1,8 +1,6 @@ import { GlIcon, GlAvatarLabeled } from '@gitlab/ui'; -import { shallowMount } from '@vue/test-utils'; -import { nextTick } from 'vue'; -import { extendedWrapper } from 'helpers/vue_test_utils_helper'; - +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import IssuableHeader from '~/vue_shared/issuable/show/components/issuable_header.vue'; import { mockIssuableShowProps, mockIssuable } from '../mock_data'; @@ -12,10 +10,17 @@ const issuableHeaderProps = { ...mockIssuableShowProps, }; -const createComponent = (propsData = issuableHeaderProps, { stubs } = {}) => - extendedWrapper( - shallowMount(IssuableHeader, { - propsData, +describe('IssuableHeader', () => { + let wrapper; + + const findTaskStatusEl = () => wrapper.findByTestId('task-status'); + + const createComponent = (props = {}, { stubs } = {}) => { + wrapper = shallowMountExtended(IssuableHeader, { + propsData: { + ...issuableHeaderProps, + ...props, + }, slots: { 'status-badge': 'Open', 'header-actions': ` @@ -24,23 +29,18 @@ const createComponent = (propsData = issuableHeaderProps, { stubs } = {}) => `, }, stubs, - }), - ); - -describe('IssuableHeader', () => { - let wrapper; - - beforeEach(() => { - wrapper = createComponent(); - }); + }); + }; afterEach(() => { wrapper.destroy(); + resetHTMLFixture(); }); describe('computed', () => { describe('authorId', () => { it('returns numeric ID from GraphQL ID of `author` prop', () => { + createComponent(); expect(wrapper.vm.authorId).toBe(1); }); }); @@ -48,10 +48,11 @@ describe('IssuableHeader', () => { describe('handleRightSidebarToggleClick', () => { beforeEach(() => { - setFixtures('<button class="js-toggle-right-sidebar-button">Collapse sidebar</button>'); + setHTMLFixture('<button class="js-toggle-right-sidebar-button">Collapse sidebar</button>'); }); it('dispatches `click` event on sidebar toggle button', () => { + createComponent(); wrapper.vm.toggleSidebarButtonEl = document.querySelector('.js-toggle-right-sidebar-button'); jest.spyOn(wrapper.vm.toggleSidebarButtonEl, 'dispatchEvent').mockImplementation(jest.fn); @@ -67,20 +68,21 @@ describe('IssuableHeader', () => { describe('template', () => { it('renders issuable status icon and text', () => { + createComponent(); const statusBoxEl = wrapper.findByTestId('status'); + const statusIconEl = statusBoxEl.findComponent(GlIcon); expect(statusBoxEl.exists()).toBe(true); - expect(statusBoxEl.find(GlIcon).props('name')).toBe(mockIssuableShowProps.statusIcon); + expect(statusIconEl.props('name')).toBe(mockIssuableShowProps.statusIcon); + expect(statusIconEl.attributes('class')).toBe(mockIssuableShowProps.statusIconClass); expect(statusBoxEl.text()).toContain('Open'); }); it('renders blocked icon when issuable is blocked', async () => { - wrapper.setProps({ + createComponent({ blocked: true, }); - await nextTick(); - const blockedEl = wrapper.findByTestId('blocked'); expect(blockedEl.exists()).toBe(true); @@ -88,12 +90,10 @@ describe('IssuableHeader', () => { }); it('renders confidential icon when issuable is confidential', async () => { - wrapper.setProps({ + createComponent({ confidential: true, }); - await nextTick(); - const confidentialEl = wrapper.findByTestId('confidential'); expect(confidentialEl.exists()).toBe(true); @@ -101,6 +101,7 @@ describe('IssuableHeader', () => { }); it('renders issuable author avatar', () => { + createComponent(); const { username, name, webUrl, avatarUrl } = mockIssuable.author; const avatarElAttrs = { 'data-user-id': '1', @@ -120,28 +121,26 @@ describe('IssuableHeader', () => { expect(avatarEl.find(GlAvatarLabeled).find(GlIcon).exists()).toBe(false); }); - it('renders tast status text when `taskCompletionStatus` prop is defined', () => { - let taskStatusEl = wrapper.findByTestId('task-status'); + it('renders task status text when `taskCompletionStatus` prop is defined', () => { + createComponent(); - expect(taskStatusEl.exists()).toBe(true); - expect(taskStatusEl.text()).toContain('0 of 5 tasks completed'); + expect(findTaskStatusEl().exists()).toBe(true); + expect(findTaskStatusEl().text()).toContain('0 of 5 tasks completed'); + }); - const wrapperSingleTask = createComponent({ - ...issuableHeaderProps, + it('does not render task status text when tasks count is 0', () => { + createComponent({ taskCompletionStatus: { + count: 0, completedCount: 0, - count: 1, }, }); - taskStatusEl = wrapperSingleTask.findByTestId('task-status'); - - expect(taskStatusEl.text()).toContain('0 of 1 task completed'); - - wrapperSingleTask.destroy(); + expect(findTaskStatusEl().exists()).toBe(false); }); it('renders sidebar toggle button', () => { + createComponent(); const toggleButtonEl = wrapper.findByTestId('sidebar-toggle'); expect(toggleButtonEl.exists()).toBe(true); @@ -149,6 +148,7 @@ describe('IssuableHeader', () => { }); it('renders header actions', () => { + createComponent(); const actionsEl = wrapper.findByTestId('header-actions'); expect(actionsEl.find('button.js-close').exists()).toBe(true); @@ -157,9 +157,8 @@ describe('IssuableHeader', () => { describe('when author exists outside of GitLab', () => { it("renders 'external-link' icon in avatar label", () => { - wrapper = createComponent( + createComponent( { - ...issuableHeaderProps, author: { ...issuableHeaderProps.author, webUrl: 'https://jira.com/test-user/author.jpg', |