diff options
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 | 42 |
1 files changed, 29 insertions, 13 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 b743a663f06..fb0009ebb8d 100644 --- a/spec/frontend/vue_shared/components/registry/title_area_spec.js +++ b/spec/frontend/vue_shared/components/registry/title_area_spec.js @@ -1,4 +1,4 @@ -import { GlAvatar, GlSprintf, GlLink } from '@gitlab/ui'; +import { GlAvatar, GlSprintf, GlLink, GlSkeletonLoader } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; import component from '~/vue_shared/components/registry/title_area.vue'; @@ -9,12 +9,13 @@ describe('title area', () => { 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 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 findSlotOrderElements = () => wrapper.findAll('[slot-test]'); + const findSkeletonLoader = () => wrapper.find(GlSkeletonLoader); const mountComponent = ({ propsData = { title: 'foo' }, slots } = {}) => { wrapper = shallowMount(component, { @@ -96,10 +97,33 @@ describe('title area', () => { mountComponent({ slots: slotMocks }); await wrapper.vm.$nextTick(); - slotNames.forEach(name => { + 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 } }); + + await wrapper.vm.$nextTick(); + slotNames.forEach((name) => { + expect(findMetadataSlot(name).exists()).toBe(false); + }); + }); + }); + + describe('metadata skeleton loader', () => { + it('is hidden when metadata loading is false', () => { + mountComponent(); + + expect(findSkeletonLoader().exists()).toBe(false); + }); + + it('is shown when metadata loading is true', () => { + mountComponent({ propsData: { metadataLoading: true } }); + + expect(findSkeletonLoader().exists()).toBe(true); + }); }); describe('dynamic slots', () => { @@ -142,16 +166,8 @@ describe('title area', () => { await wrapper.vm.$nextTick(); - expect( - findSlotOrderElements() - .at(0) - .attributes('data-testid'), - ).toBe(DYNAMIC_SLOT); - expect( - findSlotOrderElements() - .at(1) - .attributes('data-testid'), - ).toBe('metadata-foo'); + expect(findSlotOrderElements().at(0).attributes('data-testid')).toBe(DYNAMIC_SLOT); + expect(findSlotOrderElements().at(1).attributes('data-testid')).toBe('metadata-foo'); }); }); |