diff options
Diffstat (limited to 'spec/frontend/vue_shared/components/registry')
-rw-r--r-- | spec/frontend/vue_shared/components/registry/title_area_spec.js | 57 |
1 files changed, 57 insertions, 0 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 5cb606b58d9..b743a663f06 100644 --- a/spec/frontend/vue_shared/components/registry/title_area_spec.js +++ b/spec/frontend/vue_shared/components/registry/title_area_spec.js @@ -5,12 +5,16 @@ import component from '~/vue_shared/components/registry/title_area.vue'; describe('title area', () => { let wrapper; + 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 findSlotOrderElements = () => wrapper.findAll('[slot-test]'); const mountComponent = ({ propsData = { title: 'foo' }, slots } = {}) => { wrapper = shallowMount(component, { @@ -98,6 +102,59 @@ describe('title area', () => { }); }); + describe('dynamic slots', () => { + const createDynamicSlot = () => { + return wrapper.vm.$createElement('div', { + attrs: { + 'data-testid': DYNAMIC_SLOT, + 'slot-test': true, + }, + }); + }; + it('shows dynamic slots', async () => { + mountComponent(); + // we manually add a new slot to simulate dynamic slots being evaluated after the initial mount + wrapper.vm.$slots[DYNAMIC_SLOT] = createDynamicSlot(); + + await wrapper.vm.$nextTick(); + expect(findDynamicSlot().exists()).toBe(false); + + await wrapper.vm.$nextTick(); + expect(findDynamicSlot().exists()).toBe(true); + }); + + it('preserve the order of the slots', async () => { + mountComponent({ + slots: { + 'metadata-foo': '<div slot-test data-testid="metadata-foo"></div>', + }, + }); + + // rewrite slot putting dynamic slot as first + wrapper.vm.$slots = { + 'metadata-dynamic-slot': createDynamicSlot(), + 'metadata-foo': wrapper.vm.$slots['metadata-foo'], + }; + + await wrapper.vm.$nextTick(); + expect(findDynamicSlot().exists()).toBe(false); + expect(findMetadataSlot('metadata-foo').exists()).toBe(true); + + await wrapper.vm.$nextTick(); + + expect( + findSlotOrderElements() + .at(0) + .attributes('data-testid'), + ).toBe(DYNAMIC_SLOT); + expect( + findSlotOrderElements() + .at(1) + .attributes('data-testid'), + ).toBe('metadata-foo'); + }); + }); + describe('info-messages', () => { it('shows a message when the props contains one', () => { mountComponent({ propsData: { infoMessages: [{ text: 'foo foo bar bar' }] } }); |