Abstract out id creation

- update tests

ee/app/assets/javascripts/approvals/components/approval_check_popover.vue

@@ -29,20 +29,25 @@ export default {
       default: '',
     },
   },
+  computed: {
+    iconId() {
+      return `reportInfo-${this.title}`;
+    },
+  },
 };
 </script>
 
 <template>
   <span class="vertical-align-middle text-muted js-help ml-2">
     <gl-icon
-      :id="'reportInfo' + title"
+      :id="iconId"
       name="question"
       class="author-link suggestion-help-hover"
       :aria-label="__('help')"
       :size="14"
       data-testid="icon2"
     />
-    <gl-popover :target="'reportInfo' + title" placement="top" :title="title">
+    <gl-popover :target="iconId" placement="top" :title="title">
       <div class="mb-2">{{ text }}</div>
       <gl-link v-if="documentationLink" target="_blank" :href="documentationLink">
         <span class="vertical-align-middle">{{ documentationText }}</span>

ee/spec/frontend/approvals/components/approval_check_popover_spec.js

@@ -7,11 +7,11 @@ import { TEST_HOST } from 'helpers/test_constants';
 describe('Approval Check Popover', () => {
   let wrapper;
 
+  const title = 'Title';
+
   beforeEach(() => {
     wrapper = shallowMount(component, {
-      propsData: {
-        title: 'Title',
-      },
+      propsData: { title },
     });
   });
 
@@ -43,8 +43,8 @@ describe('Approval Check Popover', () => {
 
   it('should render gl-popover with correct props', () => {
     expect(wrapper.find(GlPopover).props()).toMatchObject({
-      title: 'Title',
-      target: 'reportInfo',
+      title,
+      target: `reportInfo-${title}`,
       placement: 'top',
     });
   });