Merge branch '227256-migrate-popover-in-help-popover' into 'master'

Replaced bootstrap popover with GlPopover

See merge request gitlab-org/gitlab!49722

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

 <script>
-import $ from 'jquery';
-import { GlButton } from '@gitlab/ui';
-import { inserted } from '~/feature_highlight/feature_highlight_helper';
-import { mouseenter, debouncedMouseleave, togglePopover } from '~/shared/popover';
+import { GlButton, GlPopover } from '@gitlab/ui';
 
 /**
  * Render a button with a question mark icon
@@ -12,6 +9,7 @@ export default {
   name: 'HelpPopover',
   components: {
     GlButton,
+    GlPopover,
   },
   props: {
     options: {
@@ -20,28 +18,20 @@ export default {
       default: () => ({}),
     },
   },
-  mounted() {
-    const $el = $(this.$el);
-
-    $el
-      .popover({
-        html: true,
-        trigger: 'focus',
-        container: 'body',
-        placement: 'top',
-        template:
-          '<div class="popover" role="tooltip"><div class="arrow"></div><p class="popover-header"></p><div class="popover-body"></div></div>',
-        ...this.options,
-      })
-      .on('mouseenter', mouseenter)
-      .on('mouseleave', debouncedMouseleave(300))
-      .on('inserted.bs.popover', inserted)
-      .on('show.bs.popover', () => {
-        window.addEventListener('scroll', togglePopover.bind($el, false), { once: true });
-      });
-  },
 };
 </script>
 <template>
-  <gl-button variant="link" icon="question" tabindex="0" />
+  <span>
+    <gl-button ref="popoverTrigger" variant="link" icon="question" tabindex="0" />
+    <gl-popover triggers="hover focus" :target="() => $refs.popoverTrigger.$el" v-bind="options">
+      <template #title>
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <span v-html="options.title"></span>
+      </template>
+      <template #default>
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <div v-html="options.content"></div>
+      </template>
+    </gl-popover>
+  </span>
 </template>

ee/spec/frontend/vue_mr_widget/ee_mr_widget_options_spec.js

@@ -35,6 +35,8 @@ import _GroupedSecurityReportsApp from 'ee/vue_shared/security_reports/grouped_s
 // eslint-disable-next-line no-unused-vars
 import _Deployment from '~/vue_merge_request_widget/components/deployment/deployment.vue';
 
+jest.mock('~/vue_shared/components/help_popover.vue');
+
 Vue.use(VueApollo);
 
 const SAST_SELECTOR = '.js-sast-widget';

spec/frontend/reports/codequality_report/grouped_codequality_reports_app_spec.js

@@ -135,7 +135,7 @@ describe('Grouped code quality reports app', () => {
     });
 
     it('renders error text', () => {
-      expect(findWidget().text()).toEqual('Failed to load codeclimate report');
+      expect(findWidget().text()).toContain('Failed to load codeclimate report');
     });
 
     it('renders a help icon with more information', () => {

spec/frontend/reports/components/summary_row_spec.js

@@ -32,7 +32,7 @@ describe('Summary row', () => {
 
   it('renders provided summary', () => {
     createComponent();
-    expect(findSummary().text()).toEqual(props.summary);
+    expect(findSummary().text()).toContain(props.summary);
   });
 
   it('renders provided icon', () => {
@@ -48,7 +48,7 @@ describe('Summary row', () => {
       createComponent({ slots: { summary: summarySlotContent } });
 
       expect(wrapper.text()).not.toContain(props.summary);
-      expect(findSummary().text()).toEqual(summarySlotContent);
+      expect(findSummary().text()).toContain(summarySlotContent);
     });
   });
 });

spec/frontend/vue_shared/components/help_popover_spec.js

+import { mount } from '@vue/test-utils';
+import { GlButton, GlPopover } from '@gitlab/ui';
+import HelpPopover from '~/vue_shared/components/help_popover.vue';
+
+describe('HelpPopover', () => {
+  let wrapper;
+  const title = 'popover <strong>title</strong>';
+  const content = 'popover <b>content</b>';
+
+  const findQuestionButton = () => wrapper.find(GlButton);
+  const findPopover = () => wrapper.find(GlPopover);
+  const buildWrapper = (options = {}) => {
+    wrapper = mount(HelpPopover, {
+      propsData: {
+        options: {
+          title,
+          content,
+          ...options,
+        },
+      },
+    });
+  };
+
+  beforeEach(() => {
+    buildWrapper();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('renders a link button with an icon question', () => {
+    expect(findQuestionButton().props()).toMatchObject({
+      icon: 'question',
+      variant: 'link',
+    });
+    expect(findQuestionButton().attributes().tabindex).toBe('0');
+  });
+
+  it('renders popover that uses the question button as target', () => {
+    expect(findPopover().props().target()).toBe(findQuestionButton().vm.$el);
+  });
+
+  it('triggers popover on hover and focus', () => {
+    expect(findPopover().props().triggers).toBe('hover focus');
+  });
+
+  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);
+  });
+
+  it('binds other popover options to the popover instance', () => {
+    const placement = 'bottom';
+
+    wrapper.destroy();
+    buildWrapper({ placement });
+
+    expect(findPopover().props().placement).toBe(placement);
+  });
+});