Specs refactor: use testids, export i18n

* switches from `js-*` hooks to testids
* exports i18n translations

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

@@ -6,7 +6,16 @@ import { BV_SHOW_MODAL } from '~/lib/utils/constants';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { s__ } from '~/locale';
 
+export const i18n = {
+  moreInfo: s__('SecurityReports|More info'),
+  createIssue: s__('SecurityReports|Create issue'),
+  createJiraIssue: s__('SecurityReports|Create Jira issue'),
+  revertDismissVulnerability: s__('SecurityReports|Undo dismiss'),
+  dismissVulnerability: s__('SecurityReports|Dismiss vulnerability'),
+};
+
 export default {
+  i18n,
   name: 'SecurityDashboardActionButtons',
   components: {
     GlButton,
@@ -82,13 +91,6 @@ export default {
       this.$root.$emit(BV_SHOW_MODAL, VULNERABILITY_MODAL_ID);
     },
   },
-  i18n: {
-    moreInfo: s__('SecurityReports|More info'),
-    createIssue: s__('SecurityReports|Create issue'),
-    createJiraIssue: s__('SecurityReports|Create Jira issue'),
-    revertDismissVulnerability: s__('SecurityReports|Undo dismiss'),
-    dismissVulnerability: s__('SecurityReports|Dismiss vulnerability'),
-  },
 };
 </script>
 
@@ -103,6 +105,7 @@ export default {
       variant="info"
       category="secondary"
       icon="information-o"
+      data-testid="more-info"
       @click="openModal({ vulnerability })"
     />
     <gl-button
@@ -131,6 +134,7 @@ export default {
         variant="warning"
         category="secondary"
         icon="redo"
+        data-testid="undo-dismiss"
         @click="handleUndoDismiss"
       />
       <gl-button
@@ -144,6 +148,7 @@ export default {
         variant="warning"
         category="secondary"
         icon="cancel"
+        data-testid="dismiss-vulnerability"
         @click="handleDismissVulnerability"
       />
     </template>

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

 import { createWrapper, mount } from '@vue/test-utils';
-import VulnerabilityActionButtons from 'ee/security_dashboard/components/vulnerability_action_buttons.vue';
+import { GlButton } from '@gitlab/ui';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import VulnerabilityActionButtons, {
+  i18n,
+} from 'ee/security_dashboard/components/vulnerability_action_buttons.vue';
 import createStore from 'ee/security_dashboard/store';
 import { VULNERABILITY_MODAL_ID } from 'ee/vue_shared/security_reports/components/constants';
 import { BV_SHOW_MODAL } from '~/lib/utils/constants';
@@ -10,18 +14,18 @@ describe('Security Dashboard Action Buttons', () => {
   let store;
   let wrapper;
 
-  const createComponent = ({ ...options }) => {
-    return mount(VulnerabilityActionButtons, {
-      ...options,
-      store,
-    });
-  };
-
-  const findAllButtons = () => wrapper.findAll('.btn-group .btn');
-  const findMoreInfoButton = () => wrapper.find('.js-more-info');
-  const findCreateIssueButton = () => wrapper.find('.js-create-issue');
-  const findDismissVulnerabilityButton = () => wrapper.find('.js-dismiss-vulnerability');
-  const findUndoDismissButton = () => wrapper.find('.js-undo-dismiss');
+  const createComponent = ({ ...options }) =>
+    extendedWrapper(
+      mount(VulnerabilityActionButtons, {
+        ...options,
+        store,
+      }),
+    );
+  const findAllButtons = () => wrapper.findAllComponents(GlButton);
+  const findMoreInfoButton = () => wrapper.findByTestId('more-info');
+  const findCreateIssueButton = () => wrapper.findByTestId('create-issue');
+  const findDismissVulnerabilityButton = () => wrapper.findByTestId('dismiss-vulnerability');
+  const findUndoDismissButton = () => wrapper.findByTestId('undo-dismiss');
 
   beforeEach(() => {
     store = createStore();
@@ -71,6 +75,10 @@ describe('Security Dashboard Action Buttons', () => {
         expect(findCreateIssueButton().exists()).toBe(true);
       });
 
+      it('should render the correct tooltip', () => {
+        expect(findCreateIssueButton().attributes('title')).toBe(i18n.createIssue);
+      });
+
       it('should emit an `createIssue` event when clicked', () => {
         findCreateIssueButton().trigger('click');
 
@@ -94,7 +102,7 @@ describe('Security Dashboard Action Buttons', () => {
         });
 
         it('should render the correct tooltip', () => {
-          expect(findCreateIssueButton().attributes('title')).toBe('Create Jira issue');
+          expect(findCreateIssueButton().attributes('title')).toBe(i18n.createJiraIssue);
         });
 
         it('should open a new window when the create-issue button is clicked', () => {
@@ -130,7 +138,7 @@ describe('Security Dashboard Action Buttons', () => {
     });
   });
 
-  describe('with a vulnerbility that has an issue', () => {
+  describe('with a vulnerability that has an issue', () => {
     beforeEach(() => {
       wrapper = createComponent({
         propsData: {