diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-02-18 10:34:06 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-02-18 10:34:06 +0000 |
commit | 859a6fb938bb9ee2a317c46dfa4fcc1af49608f0 (patch) | |
tree | d7f2700abe6b4ffcb2dcfc80631b2d87d0609239 /spec/frontend/vue_shared/components/header_ci_component_spec.js | |
parent | 446d496a6d000c73a304be52587cd9bbc7493136 (diff) | |
download | gitlab-ce-859a6fb938bb9ee2a317c46dfa4fcc1af49608f0.tar.gz |
Add latest changes from gitlab-org/gitlab@13-9-stable-eev13.9.0-rc42
Diffstat (limited to 'spec/frontend/vue_shared/components/header_ci_component_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/header_ci_component_spec.js | 118 |
1 files changed, 64 insertions, 54 deletions
diff --git a/spec/frontend/vue_shared/components/header_ci_component_spec.js b/spec/frontend/vue_shared/components/header_ci_component_spec.js index 5233a64ce5e..b54d120b55b 100644 --- a/spec/frontend/vue_shared/components/header_ci_component_spec.js +++ b/spec/frontend/vue_shared/components/header_ci_component_spec.js @@ -1,93 +1,103 @@ -import Vue from 'vue'; -import mountComponent, { mountComponentWithSlots } from 'helpers/vue_mount_component_helper'; -import headerCi from '~/vue_shared/components/header_ci_component.vue'; +import { GlButton, GlLink } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; +import { extendedWrapper } from 'helpers/vue_test_utils_helper'; +import CiIconBadge from '~/vue_shared/components/ci_badge_link.vue'; +import HeaderCi from '~/vue_shared/components/header_ci_component.vue'; +import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; describe('Header CI Component', () => { - let HeaderCi; - let vm; - let props; - - beforeEach(() => { - HeaderCi = Vue.extend(headerCi); - props = { - status: { - group: 'failed', - icon: 'status_failed', - label: 'failed', - text: 'failed', - details_path: 'path', - }, - itemName: 'job', - itemId: 123, - time: '2017-05-08T14:57:39.781Z', - user: { - web_url: 'path', - name: 'Foo', - username: 'foobar', - email: 'foo@bar.com', - avatar_url: 'link', - }, - hasSidebarButton: true, - }; - }); + let wrapper; + + const defaultProps = { + status: { + group: 'failed', + icon: 'status_failed', + label: 'failed', + text: 'failed', + details_path: 'path', + }, + itemName: 'job', + itemId: 123, + time: '2017-05-08T14:57:39.781Z', + user: { + web_url: 'path', + name: 'Foo', + username: 'foobar', + email: 'foo@bar.com', + avatar_url: 'link', + }, + hasSidebarButton: true, + }; + + const findIconBadge = () => wrapper.findComponent(CiIconBadge); + const findTimeAgo = () => wrapper.findComponent(TimeagoTooltip); + const findUserLink = () => wrapper.findComponent(GlLink); + const findSidebarToggleBtn = () => wrapper.findComponent(GlButton); + const findActionButtons = () => wrapper.findByTestId('ci-header-action-buttons'); + const findHeaderItemText = () => wrapper.findByTestId('ci-header-item-text'); + + const createComponent = (props, slots) => { + wrapper = extendedWrapper( + shallowMount(HeaderCi, { + propsData: { + ...defaultProps, + ...props, + }, + ...slots, + }), + ); + }; afterEach(() => { - vm.$destroy(); + wrapper.destroy(); + wrapper = null; }); - const findActionButtons = () => vm.$el.querySelector('[data-testid="headerButtons"]'); - describe('render', () => { beforeEach(() => { - vm = mountComponent(HeaderCi, props); + createComponent(); }); it('should render status badge', () => { - expect(vm.$el.querySelector('.ci-failed')).toBeDefined(); - expect(vm.$el.querySelector('.ci-status-icon-failed svg')).toBeDefined(); - expect(vm.$el.querySelector('.ci-failed').getAttribute('href')).toEqual( - props.status.details_path, - ); + expect(findIconBadge().exists()).toBe(true); }); it('should render item name and id', () => { - expect(vm.$el.querySelector('strong').textContent.trim()).toEqual('job #123'); + expect(findHeaderItemText().text()).toBe('job #123'); }); it('should render timeago date', () => { - expect(vm.$el.querySelector('time')).toBeDefined(); + expect(findTimeAgo().exists()).toBe(true); }); it('should render user icon and name', () => { - expect(vm.$el.querySelector('.js-user-link').innerText.trim()).toContain(props.user.name); + expect(findUserLink().text()).toContain(defaultProps.user.name); }); it('should render sidebar toggle button', () => { - expect(vm.$el.querySelector('.js-sidebar-build-toggle')).not.toBeNull(); + expect(findSidebarToggleBtn().exists()).toBe(true); }); - it('should not render header action buttons when empty', () => { - expect(findActionButtons()).toBeNull(); + it('should not render header action buttons when slot is empty', () => { + expect(findActionButtons().exists()).toBe(false); }); }); describe('slot', () => { it('should render header action buttons', () => { - vm = mountComponentWithSlots(HeaderCi, { props, slots: { default: 'Test Actions' } }); - - const buttons = findActionButtons(); + createComponent({}, { slots: { default: 'Test Actions' } }); - expect(buttons).not.toBeNull(); - expect(buttons.textContent).toEqual('Test Actions'); + expect(findActionButtons().exists()).toBe(true); + expect(findActionButtons().text()).toBe('Test Actions'); }); }); describe('shouldRenderTriggeredLabel', () => { - it('should rendered created keyword when the shouldRenderTriggeredLabel is false', () => { - vm = mountComponent(HeaderCi, { ...props, shouldRenderTriggeredLabel: false }); + it('should render created keyword when the shouldRenderTriggeredLabel is false', () => { + createComponent({ shouldRenderTriggeredLabel: false }); - expect(vm.$el.textContent).toContain('created'); - expect(vm.$el.textContent).not.toContain('triggered'); + expect(wrapper.text()).toContain('created'); + expect(wrapper.text()).not.toContain('triggered'); }); }); }); |