diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-11-18 16:16:36 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-11-18 16:16:36 +0300 |
commit | 311b0269b4eb9839fa63f80c8d7a58f32b8138a0 (patch) | |
tree | 07e7870bca8aed6d61fdcc810731c50d2c40af47 /spec/frontend/vue_shared/components/registry/title_area_spec.js | |
parent | 27909cef6c4170ed9205afa7426b8d3de47cbb0c (diff) |
Add latest changes from gitlab-org/gitlab@14-5-stable-eev14.5.0-rc42
Diffstat (limited to 'spec/frontend/vue_shared/components/registry/title_area_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/registry/title_area_spec.js | 59 |
1 files changed, 35 insertions, 24 deletions
diff --git a/spec/frontend/vue_shared/components/registry/title_area_spec.js b/spec/frontend/vue_shared/components/registry/title_area_spec.js index 75aa3bc7096..b62676b35be 100644 --- a/spec/frontend/vue_shared/components/registry/title_area_spec.js +++ b/spec/frontend/vue_shared/components/registry/title_area_spec.js @@ -1,5 +1,6 @@ import { GlAvatar, GlSprintf, GlLink, GlSkeletonLoader } from '@gitlab/ui'; -import { shallowMount } from '@vue/test-utils'; +import { nextTick } from 'vue'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import component from '~/vue_shared/components/registry/title_area.vue'; describe('title area', () => { @@ -7,18 +8,18 @@ describe('title area', () => { const DYNAMIC_SLOT = 'metadata-dynamic-slot'; - const findSubHeaderSlot = () => wrapper.find('[data-testid="sub-header"]'); - const findRightActionsSlot = () => wrapper.find('[data-testid="right-actions"]'); - const findMetadataSlot = (name) => wrapper.find(`[data-testid="${name}"]`); - const findTitle = () => wrapper.find('[data-testid="title"]'); - const findAvatar = () => wrapper.find(GlAvatar); - const findInfoMessages = () => wrapper.findAll('[data-testid="info-message"]'); - const findDynamicSlot = () => wrapper.find(`[data-testid="${DYNAMIC_SLOT}`); + const findSubHeaderSlot = () => wrapper.findByTestId('sub-header'); + const findRightActionsSlot = () => wrapper.findByTestId('right-actions'); + const findMetadataSlot = (name) => wrapper.findByTestId(name); + const findTitle = () => wrapper.findByTestId('title'); + const findAvatar = () => wrapper.findComponent(GlAvatar); + const findInfoMessages = () => wrapper.findAllByTestId('info-message'); + const findDynamicSlot = () => wrapper.findByTestId(DYNAMIC_SLOT); const findSlotOrderElements = () => wrapper.findAll('[slot-test]'); - const findSkeletonLoader = () => wrapper.find(GlSkeletonLoader); + const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader); const mountComponent = ({ propsData = { title: 'foo' }, slots } = {}) => { - wrapper = shallowMount(component, { + wrapper = shallowMountExtended(component, { propsData, stubs: { GlSprintf }, slots: { @@ -29,6 +30,12 @@ describe('title area', () => { }); }; + const generateSlotMocks = (names) => + names.reduce((acc, current) => { + acc[current] = `<div data-testid="${current}" />`; + return acc; + }, {}); + afterEach(() => { wrapper.destroy(); wrapper = null; @@ -40,6 +47,7 @@ describe('title area', () => { expect(findTitle().text()).toBe('foo'); }); + it('if slot is present uses slot', () => { mountComponent({ slots: { @@ -88,24 +96,21 @@ describe('title area', () => { ${['metadata-foo', 'metadata-bar']} ${['metadata-foo', 'metadata-bar', 'metadata-baz']} `('$slotNames metadata slots', ({ slotNames }) => { - const slotMocks = slotNames.reduce((acc, current) => { - acc[current] = `<div data-testid="${current}" />`; - return acc; - }, {}); + const slots = generateSlotMocks(slotNames); it('exist when the slot is present', async () => { - mountComponent({ slots: slotMocks }); + mountComponent({ slots }); - await wrapper.vm.$nextTick(); + await nextTick(); slotNames.forEach((name) => { expect(findMetadataSlot(name).exists()).toBe(true); }); }); it('is/are hidden when metadata-loading is true', async () => { - mountComponent({ slots: slotMocks, propsData: { title: 'foo', metadataLoading: true } }); + mountComponent({ slots, propsData: { title: 'foo', metadataLoading: true } }); - await wrapper.vm.$nextTick(); + await nextTick(); slotNames.forEach((name) => { expect(findMetadataSlot(name).exists()).toBe(false); }); @@ -113,14 +118,20 @@ describe('title area', () => { }); describe('metadata skeleton loader', () => { - it('is hidden when metadata loading is false', () => { - mountComponent(); + const slots = generateSlotMocks(['metadata-foo']); + + it('is hidden when metadata loading is false', async () => { + mountComponent({ slots }); + + await nextTick(); expect(findSkeletonLoader().exists()).toBe(false); }); - it('is shown when metadata loading is true', () => { - mountComponent({ propsData: { metadataLoading: true } }); + it('is shown when metadata loading is true', async () => { + mountComponent({ propsData: { metadataLoading: true }, slots }); + + await nextTick(); expect(findSkeletonLoader().exists()).toBe(true); }); @@ -143,7 +154,7 @@ describe('title area', () => { // updating the slots like we do on line 141 does not cause the updated lifecycle-hook to be triggered wrapper.vm.$forceUpdate(); - await wrapper.vm.$nextTick(); + await nextTick(); expect(findDynamicSlot().exists()).toBe(true); }); @@ -163,7 +174,7 @@ describe('title area', () => { // updating the slots like we do on line 159 does not cause the updated lifecycle-hook to be triggered wrapper.vm.$forceUpdate(); - await wrapper.vm.$nextTick(); + await nextTick(); expect(findSlotOrderElements().at(0).attributes('data-testid')).toBe(DYNAMIC_SLOT); expect(findSlotOrderElements().at(1).attributes('data-testid')).toBe('metadata-foo'); |