2021-12-11 22:18:48 +05:30
|
|
|
import { GlButton, GlAvatarLink } from '@gitlab/ui';
|
2021-03-11 19:13:27 +05:30
|
|
|
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';
|
2017-09-10 17:25:29 +05:30
|
|
|
|
|
|
|
describe('Header CI Component', () => {
|
2021-03-11 19:13:27 +05:30
|
|
|
let wrapper;
|
|
|
|
|
|
|
|
const defaultProps = {
|
|
|
|
status: {
|
|
|
|
group: 'failed',
|
|
|
|
icon: 'status_failed',
|
|
|
|
label: 'failed',
|
|
|
|
text: 'failed',
|
|
|
|
details_path: 'path',
|
|
|
|
},
|
|
|
|
time: '2017-05-08T14:57:39.781Z',
|
|
|
|
user: {
|
2021-12-11 22:18:48 +05:30
|
|
|
id: 1234,
|
2021-03-11 19:13:27 +05:30
|
|
|
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);
|
2021-12-11 22:18:48 +05:30
|
|
|
const findUserLink = () => wrapper.findComponent(GlAvatarLink);
|
2021-03-11 19:13:27 +05:30
|
|
|
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,
|
|
|
|
}),
|
|
|
|
);
|
|
|
|
};
|
2017-09-10 17:25:29 +05:30
|
|
|
|
|
|
|
afterEach(() => {
|
2021-03-11 19:13:27 +05:30
|
|
|
wrapper.destroy();
|
|
|
|
wrapper = null;
|
2017-09-10 17:25:29 +05:30
|
|
|
});
|
|
|
|
|
2018-03-17 18:26:18 +05:30
|
|
|
describe('render', () => {
|
|
|
|
beforeEach(() => {
|
2021-11-11 11:23:49 +05:30
|
|
|
createComponent({ itemName: 'Pipeline' });
|
2018-03-17 18:26:18 +05:30
|
|
|
});
|
2017-09-10 17:25:29 +05:30
|
|
|
|
2018-03-17 18:26:18 +05:30
|
|
|
it('should render status badge', () => {
|
2021-03-11 19:13:27 +05:30
|
|
|
expect(findIconBadge().exists()).toBe(true);
|
2018-03-17 18:26:18 +05:30
|
|
|
});
|
2017-09-10 17:25:29 +05:30
|
|
|
|
2018-03-17 18:26:18 +05:30
|
|
|
it('should render timeago date', () => {
|
2021-03-11 19:13:27 +05:30
|
|
|
expect(findTimeAgo().exists()).toBe(true);
|
2018-03-17 18:26:18 +05:30
|
|
|
});
|
2017-09-10 17:25:29 +05:30
|
|
|
|
2020-03-13 15:44:24 +05:30
|
|
|
it('should render sidebar toggle button', () => {
|
2021-03-11 19:13:27 +05:30
|
|
|
expect(findSidebarToggleBtn().exists()).toBe(true);
|
2018-03-17 18:26:18 +05:30
|
|
|
});
|
2017-09-10 17:25:29 +05:30
|
|
|
|
2021-03-11 19:13:27 +05:30
|
|
|
it('should not render header action buttons when slot is empty', () => {
|
|
|
|
expect(findActionButtons().exists()).toBe(false);
|
2018-03-17 18:26:18 +05:30
|
|
|
});
|
2020-03-13 15:44:24 +05:30
|
|
|
});
|
2018-03-17 18:26:18 +05:30
|
|
|
|
2021-12-11 22:18:48 +05:30
|
|
|
describe('user avatar', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
createComponent({ itemName: 'Pipeline' });
|
|
|
|
});
|
|
|
|
|
|
|
|
it('contains the username', () => {
|
|
|
|
expect(findUserLink().text()).toContain(defaultProps.user.username);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('has the correct data attributes', () => {
|
|
|
|
expect(findUserLink().attributes()).toMatchObject({
|
|
|
|
'data-user-id': defaultProps.user.id.toString(),
|
|
|
|
'data-username': defaultProps.user.username,
|
|
|
|
'data-name': defaultProps.user.name,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('with data from GraphQL', () => {
|
|
|
|
const userId = 1;
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
createComponent({
|
|
|
|
itemName: 'Pipeline',
|
|
|
|
user: { ...defaultProps.user, id: `gid://gitlab/User/${1}` },
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('has the correct user id', () => {
|
|
|
|
expect(findUserLink().attributes('data-user-id')).toBe(userId.toString());
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('with data from REST', () => {
|
|
|
|
it('has the correct user id', () => {
|
|
|
|
expect(findUserLink().attributes('data-user-id')).toBe(defaultProps.user.id.toString());
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2021-11-11 11:23:49 +05:30
|
|
|
describe('with item id', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
createComponent({ itemName: 'Pipeline', itemId: '123' });
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should render item name and id', () => {
|
|
|
|
expect(findHeaderItemText().text()).toBe('Pipeline #123');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('without item id', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
createComponent({ itemName: 'Job build_job' });
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should render item name', () => {
|
|
|
|
expect(findHeaderItemText().text()).toBe('Job build_job');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2020-03-13 15:44:24 +05:30
|
|
|
describe('slot', () => {
|
|
|
|
it('should render header action buttons', () => {
|
2021-11-11 11:23:49 +05:30
|
|
|
createComponent({ itemName: 'Job build_job' }, { slots: { default: 'Test Actions' } });
|
2020-03-13 15:44:24 +05:30
|
|
|
|
2021-03-11 19:13:27 +05:30
|
|
|
expect(findActionButtons().exists()).toBe(true);
|
|
|
|
expect(findActionButtons().text()).toBe('Test Actions');
|
2017-09-10 17:25:29 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2018-03-17 18:26:18 +05:30
|
|
|
describe('shouldRenderTriggeredLabel', () => {
|
2021-03-11 19:13:27 +05:30
|
|
|
it('should render created keyword when the shouldRenderTriggeredLabel is false', () => {
|
2021-11-11 11:23:49 +05:30
|
|
|
createComponent({ shouldRenderTriggeredLabel: false, itemName: 'Job build_job' });
|
2018-03-17 18:26:18 +05:30
|
|
|
|
2021-03-11 19:13:27 +05:30
|
|
|
expect(wrapper.text()).toContain('created');
|
|
|
|
expect(wrapper.text()).not.toContain('triggered');
|
2018-03-17 18:26:18 +05:30
|
|
|
});
|
2017-09-10 17:25:29 +05:30
|
|
|
});
|
|
|
|
});
|