diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2019-11-23 03:06:06 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2019-11-23 03:06:06 +0300 |
commit | 5cb94fc486b25f14d160a7a584dd9a9f23d1ccc9 (patch) | |
tree | 1e786999c5965d0e7a4f37b75ce1d91fe6363b4d /spec | |
parent | 69a23cbee136eda0ab37874399421e6865cfc76b (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec')
-rw-r--r-- | spec/frontend/jobs/components/erased_block_spec.js | 35 | ||||
-rw-r--r-- | spec/frontend/vue_shared/components/user_popover/user_popover_spec.js | 37 |
2 files changed, 40 insertions, 32 deletions
diff --git a/spec/frontend/jobs/components/erased_block_spec.js b/spec/frontend/jobs/components/erased_block_spec.js index 8e0433d3fb7..5e6570f72e0 100644 --- a/spec/frontend/jobs/components/erased_block_spec.js +++ b/spec/frontend/jobs/components/erased_block_spec.js @@ -1,23 +1,30 @@ -import Vue from 'vue'; +import { mount } from '@vue/test-utils'; +import { GlLink } from '@gitlab/ui'; import { getTimeago } from '~/lib/utils/datetime_utility'; -import component from '~/jobs/components/erased_block.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import ErasedBlock from '~/jobs/components/erased_block.vue'; describe('Erased block', () => { - const Component = Vue.extend(component); - let vm; + let wrapper; const erasedAt = '2016-11-07T11:11:16.525Z'; const timeago = getTimeago(); const formatedDate = timeago.format(erasedAt); + const createComponent = props => { + wrapper = mount(ErasedBlock, { + propsData: props, + sync: false, + attachToDocument: true, + }); + }; + afterEach(() => { - vm.$destroy(); + wrapper.destroy(); }); describe('with job erased by user', () => { beforeEach(() => { - vm = mountComponent(Component, { + createComponent({ user: { username: 'root', web_url: 'gitlab.com/root', @@ -27,30 +34,30 @@ describe('Erased block', () => { }); it('renders username and link', () => { - expect(vm.$el.querySelector('a').getAttribute('href')).toEqual('gitlab.com/root'); + expect(wrapper.find(GlLink).attributes('href')).toEqual('gitlab.com/root'); - expect(vm.$el.textContent).toContain('Job has been erased by'); - expect(vm.$el.textContent).toContain('root'); + expect(wrapper.text().trim()).toContain('Job has been erased by'); + expect(wrapper.text().trim()).toContain('root'); }); it('renders erasedAt', () => { - expect(vm.$el.textContent).toContain(formatedDate); + expect(wrapper.text().trim()).toContain(formatedDate); }); }); describe('with erased job', () => { beforeEach(() => { - vm = mountComponent(Component, { + createComponent({ erasedAt, }); }); it('renders username and link', () => { - expect(vm.$el.textContent).toContain('Job has been erased'); + expect(wrapper.text().trim()).toContain('Job has been erased'); }); it('renders erasedAt', () => { - expect(vm.$el.textContent).toContain(formatedDate); + expect(wrapper.text().trim()).toContain(formatedDate); }); }); }); diff --git a/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js b/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js index fc2eb6329b0..2750b54521a 100644 --- a/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js +++ b/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js @@ -1,5 +1,7 @@ import UserPopover from '~/vue_shared/components/user_popover/user_popover.vue'; -import { mount } from '@vue/test-utils'; +import { GlSkeletonLoading } from '@gitlab/ui'; +import Icon from '~/vue_shared/components/icon.vue'; +import { shallowMount } from '@vue/test-utils'; const DEFAULT_PROPS = { loaded: true, @@ -29,7 +31,7 @@ describe('User Popover Component', () => { describe('Empty', () => { beforeEach(() => { - wrapper = mount(UserPopover, { + wrapper = shallowMount(UserPopover, { propsData: { target: document.querySelector('.js-user-link'), user: { @@ -41,18 +43,19 @@ describe('User Popover Component', () => { status: null, }, }, + attachToDocument: true, sync: false, }); }); it('should return skeleton loaders', () => { - expect(wrapper.findAll('.animation-container').length).toBe(4); + expect(wrapper.find(GlSkeletonLoading).exists()).toBe(true); }); }); describe('basic data', () => { it('should show basic fields', () => { - wrapper = mount(UserPopover, { + wrapper = shallowMount(UserPopover, { propsData: { ...DEFAULT_PROPS, target: document.querySelector('.js-user-link'), @@ -66,9 +69,9 @@ describe('User Popover Component', () => { }); it('shows icon for location', () => { - const iconEl = wrapper.find('.js-location svg'); + const iconEl = wrapper.find(Icon); - expect(iconEl.find('use').element.getAttribute('xlink:href')).toContain('location'); + expect(iconEl.props('name')).toEqual('location'); }); }); @@ -77,7 +80,7 @@ describe('User Popover Component', () => { const testProps = Object.assign({}, DEFAULT_PROPS); testProps.user.bio = 'Engineer'; - wrapper = mount(UserPopover, { + wrapper = shallowMount(UserPopover, { propsData: { ...testProps, target: document.querySelector('.js-user-link'), @@ -92,7 +95,7 @@ describe('User Popover Component', () => { const testProps = Object.assign({}, DEFAULT_PROPS); testProps.user.organization = 'GitLab'; - wrapper = mount(UserPopover, { + wrapper = shallowMount(UserPopover, { propsData: { ...testProps, target: document.querySelector('.js-user-link'), @@ -108,7 +111,7 @@ describe('User Popover Component', () => { testProps.user.bio = 'Engineer'; testProps.user.organization = 'GitLab'; - wrapper = mount(UserPopover, { + wrapper = shallowMount(UserPopover, { propsData: { ...DEFAULT_PROPS, target: document.querySelector('.js-user-link'), @@ -125,7 +128,7 @@ describe('User Popover Component', () => { testProps.user.bio = 'Manager & Team Lead'; testProps.user.organization = 'Me & my <funky> Company'; - wrapper = mount(UserPopover, { + wrapper = shallowMount(UserPopover, { propsData: { ...DEFAULT_PROPS, target: document.querySelector('.js-user-link'), @@ -138,15 +141,13 @@ describe('User Popover Component', () => { }); it('shows icon for bio', () => { - const iconEl = wrapper.find('.js-bio svg'); - - expect(iconEl.find('use').element.getAttribute('xlink:href')).toContain('profile'); + expect(wrapper.findAll(Icon).filter(icon => icon.props('name') === 'profile').length).toEqual( + 1, + ); }); it('shows icon for organization', () => { - const iconEl = wrapper.find('.js-organization svg'); - - expect(iconEl.find('use').element.getAttribute('xlink:href')).toContain('work'); + expect(wrapper.findAll(Icon).filter(icon => icon.props('name') === 'work').length).toEqual(1); }); }); @@ -155,7 +156,7 @@ describe('User Popover Component', () => { const testProps = Object.assign({}, DEFAULT_PROPS); testProps.user.status = { message_html: 'Hello World' }; - wrapper = mount(UserPopover, { + wrapper = shallowMount(UserPopover, { propsData: { ...DEFAULT_PROPS, target: document.querySelector('.js-user-link'), @@ -170,7 +171,7 @@ describe('User Popover Component', () => { const testProps = Object.assign({}, DEFAULT_PROPS); testProps.user.status = { emoji: 'basketball_player', message_html: 'Hello World' }; - wrapper = mount(UserPopover, { + wrapper = shallowMount(UserPopover, { propsData: { ...DEFAULT_PROPS, target: document.querySelector('.js-user-link'), |