Merge branch 'mrincon-help-popover-rename' into 'master'

Rename HelpPopover when imported by report_section

See merge request gitlab-org/gitlab!83976

app/assets/javascripts/reports/components/report_section.vue

@@ -3,7 +3,7 @@ import { GlButton } from '@gitlab/ui';
 import api from '~/api';
 import { __ } from '~/locale';
 import StatusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon.vue';
-import Popover from '~/vue_shared/components/help_popover.vue';
+import HelpPopover from '~/vue_shared/components/help_popover.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { status, SLOT_SUCCESS, SLOT_LOADING, SLOT_ERROR } from '../constants';
 import IssuesList from './issues_list.vue';
@@ -13,7 +13,7 @@ export default {
   components: {
     GlButton,
     IssuesList,
-    Popover,
+    HelpPopover,
     StatusIcon,
   },
   mixins: [glFeatureFlagsMixin()],
@@ -193,7 +193,7 @@ export default {
           <div class="gl-display-flex gl-align-items-center">
             <p class="gl-line-height-normal gl-m-0">{{ headerText }}</p>
             <slot :name="slotName"></slot>
-            <popover
+            <help-popover
               v-if="hasPopover"
               :options="popoverOptions"
               class="gl-ml-2 gl-display-inline-flex"

spec/frontend/reports/components/report_section_spec.js

@@ -2,6 +2,7 @@ import { mount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import mountComponent, { mountComponentWithSlots } from 'helpers/vue_mount_component_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import HelpPopover from '~/vue_shared/components/help_popover.vue';
 import reportSection from '~/reports/components/report_section.vue';
 
 describe('Report section', () => {
@@ -9,6 +10,7 @@ describe('Report section', () => {
   let wrapper;
   const ReportSection = Vue.extend(reportSection);
   const findCollapseButton = () => wrapper.findByTestId('report-section-expand-button');
+  const findPopover = () => wrapper.findComponent(HelpPopover);
 
   const resolvedIssues = [
     {
@@ -269,4 +271,33 @@ describe('Report section', () => {
       expect(vm.$el.textContent.trim()).not.toContain('This is a success');
     });
   });
+
+  describe('help popover', () => {
+    describe('when popover options are defined', () => {
+      const options = {
+        title: 'foo',
+        content: 'bar',
+      };
+
+      beforeEach(() => {
+        createComponent({
+          popoverOptions: options,
+        });
+      });
+
+      it('popover is shown with options', () => {
+        expect(findPopover().props('options')).toEqual(options);
+      });
+    });
+
+    describe('when popover options are not defined', () => {
+      beforeEach(() => {
+        createComponent({ popoverOptions: {} });
+      });
+
+      it('popover is not shown', () => {
+        expect(findPopover().exists()).toBe(false);
+      });
+    });
+  });
 });