Pass custom slots from HelpPopover to GlPopover

This change extends the `<help-popover>` component by allowing it to
take slots as a `<gl-popover>` would.

Changelog: added
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/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,59 +9,117 @@ 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();
   });
 
-  it('renders a link button with an icon question', () => {
-    expect(findQuestionButton().props()).toMatchObject({
-      icon: 'question',
-      variant: 'link',
+  describe('with title and content', () => {
+    beforeEach(() => {
+      createComponent();
     });
-  });
 
-  it('renders popover that uses the question button as target', () => {
-    expect(findPopover().props().target()).toBe(findQuestionButton().vm.$el);
-  });
+    it('renders a link button with an icon question', () => {
+      expect(findQuestionButton().props()).toMatchObject({
+        icon: 'question',
+        variant: 'link',
+      });
+    });
 
-  it('allows rendering title with HTML tags', () => {
-    expect(findPopover().find('strong').exists()).toBe(true);
-  });
+    it('renders popover that uses the question button as target', () => {
+      expect(findPopover().props().target()).toBe(findQuestionButton().vm.$el);
+    });
 
-  it('allows rendering content with HTML tags', () => {
-    expect(findPopover().find('b').exists()).toBe(true);
+    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);
+    });
+
+    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,
+          },
+        },
+      });
+    });
+
+    it('does not show title', () => {
+      expect(findPopover().html()).not.toContain(title);
+    });
 
-      expect(findPopover().find('span').exists()).toBe(false);
+    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>';
 
-    expect(findPopover().props().placement).toBe(placement);
+    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);
+    });
   });
 });