diff options
Diffstat (limited to 'spec/frontend/vue_shared/issuable')
6 files changed, 53 insertions, 47 deletions
diff --git a/spec/frontend/vue_shared/issuable/list/components/issuable_bulk_edit_sidebar_spec.js b/spec/frontend/vue_shared/issuable/list/components/issuable_bulk_edit_sidebar_spec.js index 7dfeced571a..a25f92c9cf2 100644 --- a/spec/frontend/vue_shared/issuable/list/components/issuable_bulk_edit_sidebar_spec.js +++ b/spec/frontend/vue_shared/issuable/list/components/issuable_bulk_edit_sidebar_spec.js @@ -1,6 +1,7 @@ import { shallowMount } from '@vue/test-utils'; import { nextTick } from 'vue'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import IssuableBulkEditSidebar from '~/vue_shared/issuable/list/components/issuable_bulk_edit_sidebar.vue'; const createComponent = ({ expanded = true } = {}) => @@ -22,12 +23,13 @@ describe('IssuableBulkEditSidebar', () => { let wrapper; beforeEach(() => { - setFixtures('<div class="layout-page right-sidebar-collapsed"></div>'); + setHTMLFixture('<div class="layout-page right-sidebar-collapsed"></div>'); wrapper = createComponent(); }); afterEach(() => { wrapper.destroy(); + resetHTMLFixture(); }); describe('watch', () => { diff --git a/spec/frontend/vue_shared/issuable/show/components/issuable_edit_form_spec.js b/spec/frontend/vue_shared/issuable/show/components/issuable_edit_form_spec.js index b79dc0bf976..d3e484cf913 100644 --- a/spec/frontend/vue_shared/issuable/show/components/issuable_edit_form_spec.js +++ b/spec/frontend/vue_shared/issuable/show/components/issuable_edit_form_spec.js @@ -36,7 +36,6 @@ describe('IssuableEditForm', () => { beforeEach(() => { wrapper = createComponent(); - gon.features = { markdownContinueLists: true }; }); afterEach(() => { 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', diff --git a/spec/frontend/vue_shared/issuable/show/components/issuable_show_root_spec.js b/spec/frontend/vue_shared/issuable/show/components/issuable_show_root_spec.js index d1eb1366225..8b027f990a2 100644 --- a/spec/frontend/vue_shared/issuable/show/components/issuable_show_root_spec.js +++ b/spec/frontend/vue_shared/issuable/show/components/issuable_show_root_spec.js @@ -49,6 +49,7 @@ describe('IssuableShowRoot', () => { const { statusBadgeClass, statusIcon, + statusIconClass, enableEdit, enableAutocomplete, editFormVisible, @@ -56,7 +57,7 @@ describe('IssuableShowRoot', () => { descriptionHelpPath, taskCompletionStatus, } = mockIssuableShowProps; - const { blocked, confidential, createdAt, author } = mockIssuable; + const { state, blocked, confidential, createdAt, author } = mockIssuable; it('renders component container element with class `issuable-show-container`', () => { expect(wrapper.classes()).toContain('issuable-show-container'); @@ -67,15 +68,17 @@ describe('IssuableShowRoot', () => { expect(issuableHeader.exists()).toBe(true); expect(issuableHeader.props()).toMatchObject({ + issuableState: state, statusBadgeClass, statusIcon, + statusIconClass, blocked, confidential, createdAt, author, taskCompletionStatus, }); - expect(issuableHeader.find('.issuable-status-box').text()).toContain('Open'); + expect(issuableHeader.find('.issuable-status-badge').text()).toContain('Open'); expect(issuableHeader.find('.detail-page-header-actions button.js-close').exists()).toBe( true, ); diff --git a/spec/frontend/vue_shared/issuable/show/mock_data.js b/spec/frontend/vue_shared/issuable/show/mock_data.js index f5f3ed58655..32bb9edfe08 100644 --- a/spec/frontend/vue_shared/issuable/show/mock_data.js +++ b/spec/frontend/vue_shared/issuable/show/mock_data.js @@ -36,8 +36,9 @@ export const mockIssuableShowProps = { enableTaskList: true, enableEdit: true, showFieldTitle: false, - statusBadgeClass: 'status-box-open', - statusIcon: 'issue-open-m', + statusBadgeClass: 'issuable-status-badge-open', + statusIcon: 'issues', + statusIconClass: 'gl-sm-display-none', taskCompletionStatus: { completedCount: 0, count: 5, diff --git a/spec/frontend/vue_shared/issuable/sidebar/components/issuable_sidebar_root_spec.js b/spec/frontend/vue_shared/issuable/sidebar/components/issuable_sidebar_root_spec.js index 47bf3c8ed83..6c9e5f85fa0 100644 --- a/spec/frontend/vue_shared/issuable/sidebar/components/issuable_sidebar_root_spec.js +++ b/spec/frontend/vue_shared/issuable/sidebar/components/issuable_sidebar_root_spec.js @@ -1,6 +1,7 @@ import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils'; -import Cookies from 'js-cookie'; import { nextTick } from 'vue'; +import Cookies from '~/lib/utils/cookies'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import IssuableSidebarRoot from '~/vue_shared/issuable/sidebar/components/issuable_sidebar_root.vue'; @@ -9,7 +10,7 @@ import { USER_COLLAPSED_GUTTER_COOKIE } from '~/vue_shared/issuable/sidebar/cons const MOCK_LAYOUT_PAGE_CLASS = 'layout-page'; const createComponent = () => { - setFixtures(`<div class="${MOCK_LAYOUT_PAGE_CLASS}"></div>`); + setHTMLFixture(`<div class="${MOCK_LAYOUT_PAGE_CLASS}"></div>`); return shallowMountExtended(IssuableSidebarRoot, { slots: { @@ -38,6 +39,7 @@ describe('IssuableSidebarRoot', () => { afterEach(() => { wrapper.destroy(); + resetHTMLFixture(); }); describe('when sidebar is expanded', () => { |