Added confirm danger button tests

Minor refactor some of the existing tests and
adds new tests for the confirm danger button

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

 <script>
 import { GlButton, GlModalDirective } from '@gitlab/ui';
+import { CONFIRM_DANGER_MODAL_ID } from './constants';
 import ConfirmDangerModal from './confirm_danger_modal.vue';
 
 export default {
@@ -26,16 +27,17 @@ export default {
       required: true,
     },
   },
-  modalId: 'confirm-danger-modal',
+  modalId: CONFIRM_DANGER_MODAL_ID,
 };
 </script>
 <template>
   <div>
     <gl-button
       v-gl-modal="$options.modalId"
-      class="gl-button btn btn-danger qa-transfer-button"
+      class="gl-button btn btn-danger"
       variant="danger"
       :disabled="disabled"
+      data-testid="confirm-danger-button"
       >{{ buttonText }}</gl-button
     >
     <confirm-danger-modal

app/assets/javascripts/vue_shared/components/confirm_danger/constants.js

 import { __ } from '~/locale';
 
+export const CONFIRM_DANGER_MODAL_ID = 'confirm-danger-modal';
 export const CONFIRM_DANGER_MODAL_TITLE = __('Confirmation required');
 export const CONFIRM_DANGER_MODAL_BUTTON = __('Confirm');
 export const CONFIRM_DANGER_WARNING = __(

spec/frontend/vue_shared/components/confirm_danger/confirm_danger_modal_spec.js

@@ -2,6 +2,7 @@ import { GlModal, GlSprintf } from '@gitlab/ui';
 import {
   CONFIRM_DANGER_WARNING,
   CONFIRM_DANGER_MODAL_BUTTON,
+  CONFIRM_DANGER_MODAL_ID,
 } from '~/vue_shared/components/confirm_danger/constants';
 import ConfirmDangerModal from '~/vue_shared/components/confirm_danger/confirm_danger_modal.vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
@@ -9,17 +10,17 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 describe('Confirm Danger Modal', () => {
   const confirmDangerMessage = 'This is a dangerous activity';
   const confirmButtonText = 'Confirm button text';
-  const phrase = 'all your bases are belong to us';
-  const modalId = 'confirm-danger-modal';
+  const phrase = 'You must construct additional pylons';
+  const modalId = CONFIRM_DANGER_MODAL_ID;
 
   let wrapper;
 
-  const findGlModal = () => wrapper.findComponent(GlModal);
+  const findModal = () => wrapper.findComponent(GlModal);
   const findConfirmationPhrase = () => wrapper.findByTestId('confirm-danger-phrase');
   const findConfirmationInput = () => wrapper.findByTestId('confirm-danger-input');
   const findDefaultWarning = () => wrapper.findByTestId('confirm-danger-warning');
   const findAdditionalMessage = () => wrapper.findByTestId('confirm-danger-message');
-  const findPrimaryAction = () => findGlModal().props('actionPrimary');
+  const findPrimaryAction = () => findModal().props('actionPrimary');
   const findPrimaryActionAttributes = (attr) => findPrimaryAction().attributes[0][attr];
 
   const createComponent = ({ provide = {} } = {}) =>
@@ -90,7 +91,7 @@ describe('Confirm Danger Modal', () => {
       expect(wrapper.emitted('confirm')).toBeUndefined();
 
       await findConfirmationInput().vm.$emit('input', phrase);
-      await findGlModal().vm.$emit('primary');
+      await findModal().vm.$emit('primary');
 
       expect(wrapper.emitted('confirm')).not.toBeUndefined();
     });

spec/frontend/vue_shared/components/confirm_danger/confirm_danger_spec.js

+import { GlButton } from '@gitlab/ui';
+import ConfirmDanger from '~/vue_shared/components/confirm_danger/confirm_danger.vue';
+import ConfirmDangerModal from '~/vue_shared/components/confirm_danger/confirm_danger_modal.vue';
+import { CONFIRM_DANGER_MODAL_ID } from '~/vue_shared/components/confirm_danger/constants';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+
+describe('Confirm Danger Modal', () => {
+  let wrapper;
+
+  const phrase = 'En Taro Adun';
+  const buttonText = 'Click me!';
+  const modalId = CONFIRM_DANGER_MODAL_ID;
+
+  const findBtn = () => wrapper.findComponent(GlButton);
+  const findModal = () => wrapper.findComponent(ConfirmDangerModal);
+  const findModalProps = () => findModal().props();
+
+  const createComponent = (props = {}) =>
+    shallowMountExtended(ConfirmDanger, {
+      propsData: {
+        buttonText,
+        phrase,
+        ...props,
+      },
+    });
+
+  beforeEach(() => {
+    wrapper = createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders the button', () => {
+    expect(wrapper.html()).toContain(buttonText);
+  });
+
+  it('sets the modal properties', () => {
+    expect(findModalProps()).toMatchObject({
+      modalId,
+      phrase,
+    });
+  });
+
+  it('will disable the button if `disabled=true`', () => {
+    expect(findBtn().attributes('disabled')).toBeUndefined();
+
+    wrapper = createComponent({ disabled: true });
+
+    expect(findBtn().attributes('disabled')).toBe('true');
+  });
+
+  it('will emit `confirm` when the modal confirms', () => {
+    expect(wrapper.emitted('confirm')).toBeUndefined();
+
+    findModal().vm.$emit('confirm');
+
+    expect(wrapper.emitted('confirm')).not.toBeUndefined();
+  });
+});