diff options
Diffstat (limited to 'spec/frontend/ci/job_details/components/job_header_spec.js')
-rw-r--r-- | spec/frontend/ci/job_details/components/job_header_spec.js | 154 |
1 files changed, 154 insertions, 0 deletions
diff --git a/spec/frontend/ci/job_details/components/job_header_spec.js b/spec/frontend/ci/job_details/components/job_header_spec.js new file mode 100644 index 00000000000..6fc55732353 --- /dev/null +++ b/spec/frontend/ci/job_details/components/job_header_spec.js @@ -0,0 +1,154 @@ +import { GlButton, GlAvatarLink, GlTooltip } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; +import { extendedWrapper } from 'helpers/vue_test_utils_helper'; +import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue'; +import JobHeader from '~/ci/job_details/components/job_header.vue'; +import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; + +describe('Header CI Component', () => { + let wrapper; + + const defaultProps = { + status: { + group: 'failed', + icon: 'status_failed', + label: 'failed', + text: 'failed', + details_path: 'path', + }, + name: 'Job build_job', + time: '2017-05-08T14:57:39.781Z', + user: { + id: 1234, + web_url: 'path', + name: 'Foo', + username: 'foobar', + email: 'foo@bar.com', + avatar_url: 'link', + }, + shouldRenderTriggeredLabel: true, + }; + + const findCiBadgeLink = () => wrapper.findComponent(CiBadgeLink); + const findTimeAgo = () => wrapper.findComponent(TimeagoTooltip); + const findUserLink = () => wrapper.findComponent(GlAvatarLink); + const findSidebarToggleBtn = () => wrapper.findComponent(GlButton); + const findStatusTooltip = () => wrapper.findComponent(GlTooltip); + const findActionButtons = () => wrapper.findByTestId('job-header-action-buttons'); + const findJobName = () => wrapper.findByTestId('job-name'); + + const createComponent = (props, slots) => { + wrapper = extendedWrapper( + shallowMount(JobHeader, { + propsData: { + ...defaultProps, + ...props, + }, + ...slots, + }), + ); + }; + + describe('render', () => { + beforeEach(() => { + createComponent(); + }); + + it('should render status badge', () => { + expect(findCiBadgeLink().exists()).toBe(true); + }); + + it('should render timeago date', () => { + expect(findTimeAgo().exists()).toBe(true); + }); + + it('should render sidebar toggle button', () => { + expect(findSidebarToggleBtn().exists()).toBe(true); + }); + + it('should not render header action buttons when slot is empty', () => { + expect(findActionButtons().exists()).toBe(false); + }); + }); + + describe('user avatar', () => { + beforeEach(() => { + createComponent(); + }); + + it('contains the username', () => { + expect(findUserLink().text()).toContain(defaultProps.user.username); + }); + + it('has the correct HTML attributes', () => { + expect(findUserLink().attributes()).toMatchObject({ + 'data-user-id': defaultProps.user.id.toString(), + 'data-username': defaultProps.user.username, + 'data-name': defaultProps.user.name, + href: defaultProps.user.web_url, + }); + }); + + describe('when the user has a status', () => { + const STATUS_MESSAGE = 'Working on exciting features...'; + + beforeEach(() => { + createComponent({ + user: { ...defaultProps.user, status: { message: STATUS_MESSAGE } }, + }); + }); + + it('renders a tooltip', () => { + expect(findStatusTooltip().text()).toBe(STATUS_MESSAGE); + }); + }); + + describe('with data from GraphQL', () => { + const userId = 1; + + beforeEach(() => { + createComponent({ + 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()); + }); + }); + }); + + describe('job name', () => { + beforeEach(() => { + createComponent(); + }); + + it('should render the job name', () => { + expect(findJobName().text()).toBe('Job build_job'); + }); + }); + + describe('slot', () => { + it('should render header action buttons', () => { + createComponent({}, { slots: { default: 'Test Actions' } }); + + expect(findActionButtons().exists()).toBe(true); + expect(findActionButtons().text()).toBe('Test Actions'); + }); + }); + + describe('shouldRenderTriggeredLabel', () => { + it('should render created keyword when the shouldRenderTriggeredLabel is false', () => { + createComponent({ shouldRenderTriggeredLabel: false }); + + expect(wrapper.text()).toContain('created'); + expect(wrapper.text()).not.toContain('started'); + }); + }); +}); |