diff options
Diffstat (limited to 'spec/frontend/jobs/components/sidebar_detail_row_spec.js')
-rw-r--r-- | spec/frontend/jobs/components/sidebar_detail_row_spec.js | 72 |
1 files changed, 33 insertions, 39 deletions
diff --git a/spec/frontend/jobs/components/sidebar_detail_row_spec.js b/spec/frontend/jobs/components/sidebar_detail_row_spec.js index 42d11266dad..bae4d6cf837 100644 --- a/spec/frontend/jobs/components/sidebar_detail_row_spec.js +++ b/spec/frontend/jobs/components/sidebar_detail_row_spec.js @@ -1,61 +1,55 @@ -import Vue from 'vue'; -import sidebarDetailRow from '~/jobs/components/sidebar_detail_row.vue'; +import { GlLink } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; +import SidebarDetailRow from '~/jobs/components/sidebar_detail_row.vue'; describe('Sidebar detail row', () => { - let SidebarDetailRow; - let vm; + let wrapper; - beforeEach(() => { - SidebarDetailRow = Vue.extend(sidebarDetailRow); - }); + const title = 'this is the title'; + const value = 'this is the value'; + const helpUrl = '/help/ci/runners/README.html'; - afterEach(() => { - vm.$destroy(); - }); + const findHelpLink = () => wrapper.findComponent(GlLink); - it('should render no title', () => { - vm = new SidebarDetailRow({ + const createComponent = (props) => { + wrapper = shallowMount(SidebarDetailRow, { propsData: { - value: 'this is the value', + ...props, }, - }).$mount(); + }); + }; - expect(vm.$el.textContent.replace(/\s+/g, ' ').trim()).toEqual('this is the value'); + afterEach(() => { + wrapper.destroy(); + wrapper = null; }); - beforeEach(() => { - vm = new SidebarDetailRow({ - propsData: { - title: 'this is the title', - value: 'this is the value', - }, - }).$mount(); - }); + describe('with title/value and without helpUrl', () => { + beforeEach(() => { + createComponent({ title, value }); + }); - it('should render provided title and value', () => { - expect(vm.$el.textContent.replace(/\s+/g, ' ').trim()).toEqual( - 'this is the title: this is the value', - ); - }); + it('should render the provided title and value', () => { + expect(wrapper.text()).toBe(`${title}: ${value}`); + }); - describe('when helpUrl not provided', () => { - it('should not render help', () => { - expect(vm.$el.querySelector('.help-button')).toBeNull(); + it('should not render the help link', () => { + expect(findHelpLink().exists()).toBe(false); }); }); describe('when helpUrl provided', () => { beforeEach(() => { - vm = new SidebarDetailRow({ - propsData: { - helpUrl: 'help url', - value: 'foo', - }, - }).$mount(); + createComponent({ + helpUrl, + title, + value, + }); }); - it('should render help', () => { - expect(vm.$el.querySelector('.help-button a').getAttribute('href')).toEqual('help url'); + it('should render the help link', () => { + expect(findHelpLink().exists()).toBe(true); + expect(findHelpLink().attributes('href')).toBe(helpUrl); }); }); }); |