Merge branch 'mrincon-add-slots-to-help-popover' into 'master'

Pass custom slots from HelpPopover to GlPopover

See merge request gitlab-org/gitlab!79319

app/assets/javascripts/vue_shared/components/help_popover.vue

@@ -33,6 +33,9 @@ export default {
       <template #default>
         <div v-safe-html="options.content"></div>
       </template>
+      <template v-for="slot in Object.keys($slots)" #[slot]>
+        <slot :name="slot"></slot>
+      </template>
     </gl-popover>
   </span>
 </template>

spec/frontend/vue_shared/components/help_popover_spec.js

@@ -9,26 +9,29 @@ describe('HelpPopover', () => {
 
   const findQuestionButton = () => wrapper.find(GlButton);
   const findPopover = () => wrapper.find(GlPopover);
-  const buildWrapper = (options = {}) => {
+
+  const createComponent = ({ props, ...opts } = {}) => {
     wrapper = mount(HelpPopover, {
       propsData: {
         options: {
           title,
           content,
-          ...options,
         },
+        ...props,
       },
+      ...opts,
     });
   };
 
-  beforeEach(() => {
-    buildWrapper();
-  });
-
   afterEach(() => {
     wrapper.destroy();
   });
 
+  describe('with title and content', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
     it('renders a link button with an icon question', () => {
       expect(findQuestionButton().props()).toMatchObject({
         icon: 'question',
@@ -40,6 +43,11 @@ describe('HelpPopover', () => {
       expect(findPopover().props().target()).toBe(findQuestionButton().vm.$el);
     });
 
+    it('shows title and content', () => {
+      expect(findPopover().html()).toContain(title);
+      expect(findPopover().html()).toContain(content);
+    });
+
     it('allows rendering title with HTML tags', () => {
       expect(findPopover().find('strong').exists()).toBe(true);
     });
@@ -47,21 +55,71 @@ describe('HelpPopover', () => {
     it('allows rendering content with HTML tags', () => {
       expect(findPopover().find('b').exists()).toBe(true);
     });
+  });
 
   describe('without title', () => {
-    it('does not render title', () => {
-      buildWrapper({ title: null });
+    beforeEach(() => {
+      createComponent({
+        props: {
+          options: {
+            title: null,
+            content,
+          },
+        },
+      });
+    });
 
-      expect(findPopover().find('span').exists()).toBe(false);
+    it('does not show title', () => {
+      expect(findPopover().html()).not.toContain(title);
+    });
+
+    it('shows content', () => {
+      expect(findPopover().html()).toContain(content);
     });
   });
 
-  it('binds other popover options to the popover instance', () => {
+  describe('with other options', () => {
     const placement = 'bottom';
 
-    wrapper.destroy();
-    buildWrapper({ placement });
+    beforeEach(() => {
+      createComponent({
+        props: {
+          options: {
+            placement,
+          },
+        },
+      });
+    });
 
+    it('options bind to the popover', () => {
       expect(findPopover().props().placement).toBe(placement);
     });
+  });
+
+  describe('with custom slots', () => {
+    const titleSlot = '<h1>title</h1>';
+    const defaultSlot = '<strong>content</strong>';
+
+    beforeEach(() => {
+      createComponent({
+        slots: {
+          title: titleSlot,
+          default: defaultSlot,
+        },
+      });
+    });
+
+    it('shows title slot', () => {
+      expect(findPopover().html()).toContain(titleSlot);
+    });
+
+    it('shows default content slot', () => {
+      expect(findPopover().html()).toContain(defaultSlot);
+    });
+
+    it('overrides title and content from options', () => {
+      expect(findPopover().html()).not.toContain(title);
+      expect(findPopover().html()).toContain(content);
+    });
+  });
 });