diff --git a/spec/frontend/vue_shared/components/ci_badge_link_spec.js b/spec/frontend/vue_shared/components/ci_badge_link_spec.js index a633ef65aa46e3dca226b3f77c59775b01a62fb9..a943d931f6757a8851f5a694d625980e311bc377 100644 --- a/spec/frontend/vue_shared/components/ci_badge_link_spec.js +++ b/spec/frontend/vue_shared/components/ci_badge_link_spec.js @@ -1,10 +1,9 @@ -import Vue from 'vue'; -import mountComponent from 'helpers/vue_mount_component_helper'; -import ciBadge from '~/vue_shared/components/ci_badge_link.vue'; +import { shallowMount } from '@vue/test-utils'; +import CiBadge from '~/vue_shared/components/ci_badge_link.vue'; +import CiIcon from '~/vue_shared/components/ci_icon.vue'; describe('CI Badge Link Component', () => { - let CIBadge; - let vm; + let wrapper; const statuses = { canceled: { @@ -72,29 +71,30 @@ describe('CI Badge Link Component', () => { }, }; - beforeEach(() => { - CIBadge = Vue.extend(ciBadge); - }); + const findIcon = () => wrapper.findComponent(CiIcon); + + const createComponent = (propsData) => { + wrapper = shallowMount(CiBadge, { propsData }); + }; afterEach(() => { - vm.$destroy(); + wrapper.destroy(); + wrapper = null; }); - it('should render each status badge', () => { - Object.keys(statuses).map((status) => { - vm = mountComponent(CIBadge, { status: statuses[status] }); + it.each(Object.keys(statuses))('should render badge for status: %s', (status) => { + createComponent({ status: statuses[status] }); - expect(vm.$el.getAttribute('href')).toEqual(statuses[status].details_path); - expect(vm.$el.textContent.trim()).toEqual(statuses[status].text); - expect(vm.$el.getAttribute('class')).toContain(`ci-status ci-${statuses[status].group}`); - expect(vm.$el.querySelector('svg')).toBeDefined(); - return vm; - }); + expect(wrapper.attributes('href')).toBe(statuses[status].details_path); + expect(wrapper.text()).toBe(statuses[status].text); + expect(wrapper.classes()).toContain('ci-status'); + expect(wrapper.classes()).toContain(`ci-${statuses[status].group}`); + expect(findIcon().exists()).toBe(true); }); it('should not render label', () => { - vm = mountComponent(CIBadge, { status: statuses.canceled, showText: false }); + createComponent({ status: statuses.canceled, showText: false }); - expect(vm.$el.textContent.trim()).toEqual(''); + expect(wrapper.text()).toBe(''); }); });