Implement code review suggestions

- Use toHaveLength
- Use toBe instead of toContain
- Move translation into a computed prop

ee/app/assets/javascripts/security_dashboard/components/issues_badge.vue

 <script>
 import { GlIcon, GlPopover, GlBadge } from '@gitlab/ui';
 import IssueLink from 'ee/vulnerabilities/components/issue_link.vue';
+import { n__ } from '~/locale';
 
 export default {
   components: {
@@ -19,6 +20,9 @@ export default {
     numberOfIssues() {
       return this.issues.length;
     },
+    popoverTitle() {
+      return n__('1 Issue', '%d Issues', this.numberOfIssues);
+    },
   },
 };
 </script>
@@ -31,7 +35,7 @@ export default {
     </gl-badge>
     <gl-popover ref="popover" :target="() => $refs.issueBadge.$el" triggers="hover" placement="top">
       <template #title>
-        {{ n__('1 Issue', '%d Issues', numberOfIssues) }}
+        {{ popoverTitle }}
       </template>
       <div v-for="{ issue } in issues" :key="issue.iid">
         <issue-link :issue="issue" />

ee/spec/frontend/security_dashboard/components/issues_badge_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlIcon, GlPopover } from '@gitlab/ui';
+import { GlIcon, GlPopover, GlBadge } from '@gitlab/ui';
 import IssuesBadge from 'ee/security_dashboard/components/issues_badge.vue';
 import IssueLink from 'ee/vulnerabilities/components/issue_link.vue';
 
@@ -8,11 +8,12 @@ describe('Remediated badge component', () => {
   let wrapper;
 
   const findIcon = () => wrapper.find(GlIcon);
+  const findBadge = () => wrapper.find(GlBadge);
   const findIssueLink = () => wrapper.findAll(IssueLink);
   const findPopover = () => wrapper.find(GlPopover);
 
   const createWrapper = ({ propsData }) => {
-    return shallowMount(IssuesBadge, { propsData, stubs: { GlPopover } });
+    return shallowMount(IssuesBadge, { propsData, stubs: { GlPopover, GlBadge } });
   };
 
   afterEach(() => {
@@ -35,15 +36,15 @@ describe('Remediated badge component', () => {
     });
 
     it('displays the issues', () => {
-      expect(findIssueLink().length).toBe(issues.length);
+      expect(findIssueLink()).toHaveLength(issues.length);
     });
 
     it('displays the correct number of issues in the badge', () => {
-      expect(wrapper.text()).toContain('2');
+      expect(findBadge().text()).toBe('2');
     });
 
     it('displays the correct number of issues in the popover title', () => {
-      expect(findPopover().text()).toContain('2 Issues');
+      expect(findPopover().text()).toBe('2 Issues');
     });
   });
 
@@ -53,11 +54,11 @@ describe('Remediated badge component', () => {
     });
 
     it('displays the correct number of issues in the badge', () => {
-      expect(wrapper.text()).toContain('0');
+      expect(findBadge().text()).toBe('0');
     });
 
     it('displays the correct number of issues in the popover title', () => {
-      expect(findPopover().text()).toContain('0 Issues');
+      expect(findPopover().text()).toBe('0 Issues');
     });
   });
 });