import { shallowMount } from '@vue/test-utils'; import { GlIcon, GlAvatarLabeled } from '@gitlab/ui'; import IssuableHeader from '~/issuable_show/components/issuable_header.vue'; import { mockIssuableShowProps, mockIssuable } from '../mock_data'; const issuableHeaderProps = { ...mockIssuable, ...mockIssuableShowProps, }; const createComponent = (propsData = issuableHeaderProps) => shallowMount(IssuableHeader, { propsData, slots: { 'status-badge': 'Open', 'header-actions': ` New issuable `, }, }); describe('IssuableHeader', () => { let wrapper; const findByTestId = testId => wrapper.find(`[data-testid="${testId}"]`); beforeEach(() => { wrapper = createComponent(); }); afterEach(() => { wrapper.destroy(); }); describe('computed', () => { describe('authorId', () => { it('returns numeric ID from GraphQL ID of `author` prop', () => { expect(wrapper.vm.authorId).toBe(1); }); }); }); describe('handleRightSidebarToggleClick', () => { beforeEach(() => { setFixtures(''); }); it('dispatches `click` event on sidebar toggle button', () => { wrapper.vm.toggleSidebarButtonEl = document.querySelector('.js-toggle-right-sidebar-button'); jest.spyOn(wrapper.vm.toggleSidebarButtonEl, 'dispatchEvent').mockImplementation(jest.fn); wrapper.vm.handleRightSidebarToggleClick(); expect(wrapper.vm.toggleSidebarButtonEl.dispatchEvent).toHaveBeenCalledWith( expect.objectContaining({ type: 'click', }), ); }); }); describe('template', () => { it('renders issuable status icon and text', () => { const statusBoxEl = findByTestId('status'); expect(statusBoxEl.exists()).toBe(true); expect(statusBoxEl.find(GlIcon).props('name')).toBe(mockIssuableShowProps.statusIcon); expect(statusBoxEl.text()).toContain('Open'); }); it('renders blocked icon when issuable is blocked', async () => { wrapper.setProps({ blocked: true, }); await wrapper.vm.$nextTick(); const blockedEl = findByTestId('blocked'); expect(blockedEl.exists()).toBe(true); expect(blockedEl.find(GlIcon).props('name')).toBe('lock'); }); it('renders confidential icon when issuable is confidential', async () => { wrapper.setProps({ confidential: true, }); await wrapper.vm.$nextTick(); const confidentialEl = findByTestId('confidential'); expect(confidentialEl.exists()).toBe(true); expect(confidentialEl.find(GlIcon).props('name')).toBe('eye-slash'); }); it('renders issuable author avatar', () => { const { username, name, webUrl, avatarUrl } = mockIssuable.author; const avatarElAttrs = { 'data-user-id': '1', 'data-username': username, 'data-name': name, href: webUrl, target: '_blank', }; const avatarEl = findByTestId('avatar'); expect(avatarEl.exists()).toBe(true); expect(avatarEl.attributes()).toMatchObject(avatarElAttrs); expect(avatarEl.find(GlAvatarLabeled).attributes()).toMatchObject({ size: '24', src: avatarUrl, label: name, }); }); it('renders sidebar toggle button', () => { const toggleButtonEl = findByTestId('sidebar-toggle'); expect(toggleButtonEl.exists()).toBe(true); expect(toggleButtonEl.props('icon')).toBe('chevron-double-lg-left'); }); it('renders header actions', () => { const actionsEl = findByTestId('header-actions'); expect(actionsEl.find('button.js-close').exists()).toBe(true); expect(actionsEl.find('a.js-new').exists()).toBe(true); }); }); });