Commit 9d8aec12 authored by Payton Burdette's avatar Payton Burdette Committed by Tim Zallmann

Port header ci spec

Move the header ci spec
to vue test utils.
parent 7c9add3b
...@@ -105,7 +105,7 @@ export default { ...@@ -105,7 +105,7 @@ export default {
<section class="header-main-content"> <section class="header-main-content">
<ci-icon-badge :status="status" /> <ci-icon-badge :status="status" />
<strong> {{ itemName }} #{{ itemId }} </strong> <strong data-testid="ci-header-item-text"> {{ itemName }} #{{ itemId }} </strong>
<template v-if="shouldRenderTriggeredLabel">{{ __('triggered') }}</template> <template v-if="shouldRenderTriggeredLabel">{{ __('triggered') }}</template>
<template v-else>{{ __('created') }}</template> <template v-else>{{ __('created') }}</template>
...@@ -142,7 +142,7 @@ export default { ...@@ -142,7 +142,7 @@ export default {
</template> </template>
</section> </section>
<section v-if="$slots.default" data-testid="headerButtons" class="gl-display-flex"> <section v-if="$slots.default" data-testid="ci-header-action-buttons" class="gl-display-flex">
<slot></slot> <slot></slot>
</section> </section>
<gl-button <gl-button
......
import Vue from 'vue'; import { GlButton, GlLink } from '@gitlab/ui';
import mountComponent, { mountComponentWithSlots } from 'helpers/vue_mount_component_helper'; import { shallowMount } from '@vue/test-utils';
import headerCi from '~/vue_shared/components/header_ci_component.vue'; 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', () => { describe('Header CI Component', () => {
let HeaderCi; let wrapper;
let vm;
let props; const defaultProps = {
status: {
beforeEach(() => { group: 'failed',
HeaderCi = Vue.extend(headerCi); icon: 'status_failed',
props = { label: 'failed',
status: { text: 'failed',
group: 'failed', details_path: 'path',
icon: 'status_failed', },
label: 'failed', itemName: 'job',
text: 'failed', itemId: 123,
details_path: 'path', time: '2017-05-08T14:57:39.781Z',
}, user: {
itemName: 'job', web_url: 'path',
itemId: 123, name: 'Foo',
time: '2017-05-08T14:57:39.781Z', username: 'foobar',
user: { email: 'foo@bar.com',
web_url: 'path', avatar_url: 'link',
name: 'Foo', },
username: 'foobar', hasSidebarButton: true,
email: 'foo@bar.com', };
avatar_url: 'link',
}, const findIconBadge = () => wrapper.findComponent(CiIconBadge);
hasSidebarButton: true, 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(() => { afterEach(() => {
vm.$destroy(); wrapper.destroy();
wrapper = null;
}); });
const findActionButtons = () => vm.$el.querySelector('[data-testid="headerButtons"]');
describe('render', () => { describe('render', () => {
beforeEach(() => { beforeEach(() => {
vm = mountComponent(HeaderCi, props); createComponent();
}); });
it('should render status badge', () => { it('should render status badge', () => {
expect(vm.$el.querySelector('.ci-failed')).toBeDefined(); expect(findIconBadge().exists()).toBe(true);
expect(vm.$el.querySelector('.ci-status-icon-failed svg')).toBeDefined();
expect(vm.$el.querySelector('.ci-failed').getAttribute('href')).toEqual(
props.status.details_path,
);
}); });
it('should render item name and id', () => { 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', () => { it('should render timeago date', () => {
expect(vm.$el.querySelector('time')).toBeDefined(); expect(findTimeAgo().exists()).toBe(true);
}); });
it('should render user icon and name', () => { 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', () => { 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', () => { it('should not render header action buttons when slot is empty', () => {
expect(findActionButtons()).toBeNull(); expect(findActionButtons().exists()).toBe(false);
}); });
}); });
describe('slot', () => { describe('slot', () => {
it('should render header action buttons', () => { it('should render header action buttons', () => {
vm = mountComponentWithSlots(HeaderCi, { props, slots: { default: 'Test Actions' } }); createComponent({}, { slots: { default: 'Test Actions' } });
const buttons = findActionButtons();
expect(buttons).not.toBeNull(); expect(findActionButtons().exists()).toBe(true);
expect(buttons.textContent).toEqual('Test Actions'); expect(findActionButtons().text()).toBe('Test Actions');
}); });
}); });
describe('shouldRenderTriggeredLabel', () => { describe('shouldRenderTriggeredLabel', () => {
it('should rendered created keyword when the shouldRenderTriggeredLabel is false', () => { it('should render created keyword when the shouldRenderTriggeredLabel is false', () => {
vm = mountComponent(HeaderCi, { ...props, shouldRenderTriggeredLabel: false }); createComponent({ shouldRenderTriggeredLabel: false });
expect(vm.$el.textContent).toContain('created'); expect(wrapper.text()).toContain('created');
expect(vm.$el.textContent).not.toContain('triggered'); expect(wrapper.text()).not.toContain('triggered');
}); });
}); });
}); });
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment