diff options
Diffstat (limited to 'spec/frontend/jobs/components/commit_block_spec.js')
-rw-r--r-- | spec/frontend/jobs/components/commit_block_spec.js | 105 |
1 files changed, 43 insertions, 62 deletions
diff --git a/spec/frontend/jobs/components/commit_block_spec.js b/spec/frontend/jobs/components/commit_block_spec.js index 13261317b48..8a6d48cecb8 100644 --- a/spec/frontend/jobs/components/commit_block_spec.js +++ b/spec/frontend/jobs/components/commit_block_spec.js @@ -1,89 +1,70 @@ -import Vue from 'vue'; -import mountComponent from 'helpers/vue_mount_component_helper'; -import component from '~/jobs/components/commit_block.vue'; +import { shallowMount } from '@vue/test-utils'; +import { extendedWrapper } from 'helpers/vue_test_utils_helper'; +import CommitBlock from '~/jobs/components/commit_block.vue'; +import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; describe('Commit block', () => { - const Component = Vue.extend(component); - let vm; + let wrapper; - const props = { - commit: { - short_id: '1f0fb84f', - id: '1f0fb84fb6770d74d97eee58118fd3909cd4f48c', - commit_path: 'commit/1f0fb84fb6770d74d97eee58118fd3909cd4f48c', - title: 'Update README.md', - }, - mergeRequest: { - iid: '!21244', - path: 'merge_requests/21244', - }, - isLastBlock: true, + const commit = { + short_id: '1f0fb84f', + id: '1f0fb84fb6770d74d97eee58118fd3909cd4f48c', + commit_path: 'commit/1f0fb84fb6770d74d97eee58118fd3909cd4f48c', + title: 'Update README.md', + }; + + const mergeRequest = { + iid: '!21244', + path: 'merge_requests/21244', + }; + + const findCommitSha = () => wrapper.findByTestId('commit-sha'); + const findLinkSha = () => wrapper.findByTestId('link-commit'); + + const mountComponent = (props) => { + wrapper = extendedWrapper( + shallowMount(CommitBlock, { + propsData: { + commit, + ...props, + }, + }), + ); }; afterEach(() => { - vm.$destroy(); + wrapper.destroy(); }); - describe('pipeline short sha', () => { + describe('without merge request', () => { beforeEach(() => { - vm = mountComponent(Component, { - ...props, - }); + mountComponent(); }); it('renders pipeline short sha link', () => { - expect(vm.$el.querySelector('.js-commit-sha').getAttribute('href')).toEqual( - props.commit.commit_path, - ); - - expect(vm.$el.querySelector('.js-commit-sha').textContent.trim()).toEqual( - props.commit.short_id, - ); + expect(findCommitSha().attributes('href')).toBe(commit.commit_path); + expect(findCommitSha().text()).toBe(commit.short_id); }); it('renders clipboard button', () => { - expect(vm.$el.querySelector('button').getAttribute('data-clipboard-text')).toEqual( - props.commit.id, - ); + expect(wrapper.findComponent(ClipboardButton).attributes('text')).toBe(commit.id); }); - }); - - describe('with merge request', () => { - it('renders merge request link and reference', () => { - vm = mountComponent(Component, { - ...props, - }); - - expect(vm.$el.querySelector('.js-link-commit').getAttribute('href')).toEqual( - props.mergeRequest.path, - ); - expect(vm.$el.querySelector('.js-link-commit').textContent.trim()).toEqual( - `!${props.mergeRequest.iid}`, - ); + it('renders git commit title', () => { + expect(wrapper.text()).toContain(commit.title); }); - }); - describe('without merge request', () => { it('does not render merge request', () => { - const copyProps = { ...props }; - delete copyProps.mergeRequest; - - vm = mountComponent(Component, { - ...copyProps, - }); - - expect(vm.$el.querySelector('.js-link-commit')).toBeNull(); + expect(findLinkSha().exists()).toBe(false); }); }); - describe('git commit title', () => { - it('renders git commit title', () => { - vm = mountComponent(Component, { - ...props, - }); + describe('with merge request', () => { + it('renders merge request link and reference', () => { + mountComponent({ mergeRequest }); - expect(vm.$el.textContent).toContain(props.commit.title); + expect(findLinkSha().attributes('href')).toBe(mergeRequest.path); + expect(findLinkSha().text()).toBe(`!${mergeRequest.iid}`); }); }); }); |