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' }] } });