Add confirm fork modal jest tests

Adds basic jest tests for the confirm fork modal
component and some minor cleanups

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

@@ -2,6 +2,14 @@
 import { GlModal } from '@gitlab/ui';
 import { __ } from '~/locale';
 
+export const i18n = {
+  btnText: __('Fork project'),
+  title: __('Fork project?'),
+  message: __(
+    'You can’t edit files directly in this project. Fork this project and submit a merge request with your changes.',
+  ),
+};
+
 export default {
   name: 'ConfirmForkModal',
   components: {
@@ -27,7 +35,7 @@ export default {
       return {
         cancel: { text: __('Cancel') },
         primary: {
-          text: __('Fork project'),
+          text: this.$options.i18n.btnText,
           attributes: {
             href: this.forkPath,
             variant: 'confirm',
@@ -43,12 +51,7 @@ export default {
       this.$emit('hide');
     },
   },
-  i18n: {
-    title: __('Fork project?'),
-    message: __(
-      'You can’t edit files directly in this project. Fork this project and submit a merge request with your changes.',
-    ),
-  },
+  i18n,
 };
 </script>
 <template>

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

@@ -265,6 +265,7 @@ export default {
   },
 };
 </script>
+
 <template>
   <div class="gl-sm-ml-3">
     <actions-button

spec/frontend/vue_shared/components/confirm_fork_modal_spec.js

+import { GlModal } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import ConfirmForkModal, { i18n } from '~/vue_shared/components/confirm_fork_modal.vue';
+
+describe('vue_shared/components/confirm_fork_modal', () => {
+  let wrapper = null;
+
+  const forkPath = '/fake/fork/path';
+  const modalId = 'confirm-fork-modal';
+  const defaultProps = { modalId, forkPath };
+
+  const findModal = () => wrapper.findComponent(GlModal);
+  const findModalProp = (prop) => findModal().props(prop);
+  const findModalActionProps = () => findModalProp('actionPrimary');
+
+  const createComponent = (props = {}) =>
+    shallowMountExtended(ConfirmForkModal, {
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
+    });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('isVisible = false', () => {
+    beforeEach(() => {
+      wrapper = createComponent();
+    });
+
+    it('sets the visible prop to `false`', () => {
+      expect(findModalProp('visible')).toBe(false);
+    });
+
+    it('sets the modal title', () => {
+      const title = findModalProp('title');
+      expect(title).toBe(i18n.title);
+    });
+
+    it('sets the modal id', () => {
+      const fakeModalId = findModalProp('modalId');
+      expect(fakeModalId).toBe(modalId);
+    });
+
+    it('has the fork path button', () => {
+      const modalProps = findModalActionProps();
+      expect(modalProps.text).toBe(i18n.btnText);
+      expect(modalProps.attributes.variant).toBe('confirm');
+    });
+
+    it('sets the correct fork path', () => {
+      const modalProps = findModalActionProps();
+      expect(modalProps.attributes.href).toBe(forkPath);
+    });
+
+    it('has the fork message', () => {
+      expect(findModal().text()).toContain(i18n.message);
+    });
+  });
+
+  describe('isVisible = true', () => {
+    beforeEach(() => {
+      wrapper = createComponent({ isVisible: true });
+    });
+
+    it('sets the visible prop to `true`', () => {
+      expect(findModalProp('visible')).toBe(true);
+    });
+
+    it('emits the `hide` event if the modal is hidden', () => {
+      expect(wrapper.emitted('hide')).toBeUndefined();
+
+      findModal().vm.$emit('hide');
+
+      expect(wrapper.emitted('hide')).toHaveLength(1);
+    });
+  });
+});