Merge branch '194291-move-related-issues-to-jest' into 'master'

Migrate ee/spec/javascripts/issuable/components to Jest

See merge request gitlab-org/gitlab!26091

ee/spec/javascripts/issuable/related_issues/components/issue_token_spec.js → ee/spec/frontend/issuable/related_issues/components/issue_token_spec.js

@@ -212,7 +212,7 @@ describe('IssueToken', () => {
     });
 
     it('when getting checked', () => {
-      spyOn(vm, '$emit');
+      jest.spyOn(vm, '$emit').mockImplementation(() => {});
       vm.onRemoveRequest();
 
       expect(vm.$emit).toHaveBeenCalledWith('pendingIssuableRemoveRequest', vm.idKey);

ee/spec/javascripts/issuable/related_issues/components/related_issues_block_spec.js → ee/spec/frontend/issuable/related_issues/components/related_issues_block_spec.js

@@ -4,7 +4,7 @@ import {
   issuable1,
   issuable2,
   issuable3,
-} from 'spec/vue_shared/components/issue/related_issuable_mock_data';
+} from 'jest/vue_shared/components/issue/related_issuable_mock_data';
 import {
   linkedIssueTypesMap,
   linkedIssueTypesTextMap,

ee/spec/javascripts/issuable/related_issues/components/related_issues_list_spec.js → ee/spec/frontend/issuable/related_issues/components/related_issues_list_spec.js

@@ -8,7 +8,7 @@ import {
   issuable3,
   issuable4,
   issuable5,
-} from 'spec/vue_shared/components/issue/related_issuable_mock_data';
+} from 'jest/vue_shared/components/issue/related_issuable_mock_data';
 import { PathIdSeparator } from 'ee/related_issues/constants';
 
 describe('RelatedIssuesList', () => {
@@ -180,11 +180,21 @@ describe('RelatedIssuesList', () => {
     });
 
     it('shows weight', () => {
-      expect(wrapper.find(IssueWeight).text()).toBe(issuable1.weight.toString());
+      expect(
+        wrapper
+          .find(IssueWeight)
+          .find('.board-card-info-text')
+          .text(),
+      ).toBe(issuable1.weight.toString());
     });
 
     it('shows due date', () => {
-      expect(wrapper.find(IssueDueDate).text()).toBe('Nov 22, 2010');
+      expect(
+        wrapper
+          .find(IssueDueDate)
+          .find('.board-card-info-text')
+          .text(),
+      ).toBe('Nov 22, 2010');
     });
   });
 });

ee/spec/frontend/issuable/related_issues/components/related_issues_root_spec.js

+import { mount, shallowMount } from '@vue/test-utils';
+import MockAdapter from 'axios-mock-adapter';
+import waitForPromises from 'helpers/wait_for_promises';
+import RelatedIssuesRoot from 'ee/related_issues/components/related_issues_root.vue';
+import relatedIssuesService from 'ee/related_issues/services/related_issues_service';
+import { linkedIssueTypesMap } from 'ee/related_issues/constants';
+import {
+  defaultProps,
+  issuable1,
+  issuable2,
+} from 'jest/vue_shared/components/issue/related_issuable_mock_data';
+import axios from '~/lib/utils/axios_utils';
+import createFlash from '~/flash';
+
+jest.mock('~/flash');
+
+describe('RelatedIssuesRoot', () => {
+  let wrapper;
+  let mock;
+
+  beforeEach(() => {
+    mock = new MockAdapter(axios);
+    mock.onGet(defaultProps.endpoint).reply(200, []);
+  });
+
+  afterEach(() => {
+    mock.restore();
+    if (wrapper) {
+      wrapper.destroy();
+      wrapper = null;
+    }
+  });
+
+  const createComponent = (mountFn = mount) => {
+    wrapper = mountFn(RelatedIssuesRoot, {
+      propsData: defaultProps,
+    });
+
+    // Wait for fetch request `fetchRelatedIssues` to complete before starting to test
+    return waitForPromises();
+  };
+
+  describe('methods', () => {
+    describe('onRelatedIssueRemoveRequest', () => {
+      beforeEach(() => {
+        jest
+          .spyOn(relatedIssuesService.prototype, 'fetchRelatedIssues')
+          .mockReturnValue(Promise.reject());
+
+        return createComponent().then(() => {
+          wrapper.vm.store.setRelatedIssues([issuable1]);
+        });
+      });
+
+      it('remove related issue and succeeds', () => {
+        mock.onDelete(issuable1.referencePath).reply(200, { issues: [] });
+
+        wrapper.vm.onRelatedIssueRemoveRequest(issuable1.id);
+
+        return axios.waitForAll().then(() => {
+          expect(wrapper.vm.state.relatedIssues).toEqual([]);
+        });
+      });
+
+      it('remove related issue, fails, and restores to related issues', () => {
+        mock.onDelete(issuable1.referencePath).reply(422, {});
+
+        wrapper.vm.onRelatedIssueRemoveRequest(issuable1.id);
+
+        return axios.waitForAll().then(() => {
+          expect(wrapper.vm.state.relatedIssues.length).toEqual(1);
+          expect(wrapper.vm.state.relatedIssues[0].id).toEqual(issuable1.id);
+        });
+      });
+    });
+
+    describe('onToggleAddRelatedIssuesForm', () => {
+      beforeEach(() => createComponent(shallowMount));
+
+      it('toggle related issues form to visible', () => {
+        wrapper.vm.onToggleAddRelatedIssuesForm();
+
+        expect(wrapper.vm.isFormVisible).toEqual(true);
+      });
+
+      it('show add related issues form to hidden', () => {
+        wrapper.vm.isFormVisible = true;
+
+        wrapper.vm.onToggleAddRelatedIssuesForm();
+
+        expect(wrapper.vm.isFormVisible).toEqual(false);
+      });
+    });
+
+    describe('onPendingIssueRemoveRequest', () => {
+      beforeEach(() =>
+        createComponent().then(() => {
+          wrapper.vm.store.setPendingReferences([issuable1.reference]);
+        }),
+      );
+
+      it('remove pending related issue', () => {
+        expect(wrapper.vm.state.pendingReferences.length).toEqual(1);
+
+        wrapper.vm.onPendingIssueRemoveRequest(0);
+
+        expect(wrapper.vm.state.pendingReferences.length).toEqual(0);
+      });
+    });
+
+    describe('onPendingFormSubmit', () => {
+      beforeEach(() => {
+        jest
+          .spyOn(relatedIssuesService.prototype, 'fetchRelatedIssues')
+          .mockReturnValue(Promise.reject());
+
+        return createComponent().then(() => {
+          jest.spyOn(wrapper.vm, 'processAllReferences');
+          jest.spyOn(wrapper.vm.service, 'addRelatedIssues');
+          createFlash.mockClear();
+        });
+      });
+
+      it('processes references before submitting', () => {
+        const input = '#123';
+        const linkedIssueType = linkedIssueTypesMap.RELATES_TO;
+        const emitObj = {
+          pendingReferences: input,
+          linkedIssueType,
+        };
+
+        wrapper.vm.onPendingFormSubmit(emitObj);
+
+        expect(wrapper.vm.processAllReferences).toHaveBeenCalledWith(input);
+        expect(wrapper.vm.service.addRelatedIssues).toHaveBeenCalledWith([input], linkedIssueType);
+      });
+
+      it('submit zero pending issue as related issue', () => {
+        wrapper.vm.store.setPendingReferences([]);
+        wrapper.vm.onPendingFormSubmit({});
+
+        return waitForPromises().then(() => {
+          expect(wrapper.vm.state.pendingReferences.length).toEqual(0);
+          expect(wrapper.vm.state.relatedIssues.length).toEqual(0);
+        });
+      });
+
+      it('submit pending issue as related issue', () => {
+        mock.onPost(defaultProps.endpoint).reply(200, {
+          issuables: [issuable1],
+          result: {
+            message: 'something was successfully related',
+            status: 'success',
+          },
+        });
+
+        wrapper.vm.store.setPendingReferences([issuable1.reference]);
+        wrapper.vm.onPendingFormSubmit({});
+
+        return waitForPromises().then(() => {
+          expect(wrapper.vm.state.pendingReferences.length).toEqual(0);
+          expect(wrapper.vm.state.relatedIssues.length).toEqual(1);
+          expect(wrapper.vm.state.relatedIssues[0].id).toEqual(issuable1.id);
+        });
+      });
+
+      it('submit multiple pending issues as related issues', () => {
+        mock.onPost(defaultProps.endpoint).reply(200, {
+          issuables: [issuable1, issuable2],
+          result: {
+            message: 'something was successfully related',
+            status: 'success',
+          },
+        });
+
+        wrapper.vm.store.setPendingReferences([issuable1.reference, issuable2.reference]);
+        wrapper.vm.onPendingFormSubmit({});
+
+        return waitForPromises().then(() => {
+          expect(wrapper.vm.state.pendingReferences.length).toEqual(0);
+          expect(wrapper.vm.state.relatedIssues.length).toEqual(2);
+          expect(wrapper.vm.state.relatedIssues[0].id).toEqual(issuable1.id);
+          expect(wrapper.vm.state.relatedIssues[1].id).toEqual(issuable2.id);
+        });
+      });
+
+      it('displays a message from the backend upon error', () => {
+        const input = '#123';
+        const message = 'error';
+
+        mock.onPost(defaultProps.endpoint).reply(409, { message });
+        wrapper.vm.store.setPendingReferences([issuable1.reference, issuable2.reference]);
+
+        expect(createFlash).not.toHaveBeenCalled();
+        wrapper.vm.onPendingFormSubmit(input);
+
+        return waitForPromises().then(() => {
+          expect(createFlash).toHaveBeenCalledWith(message);
+        });
+      });
+    });
+
+    describe('onPendingFormCancel', () => {
+      beforeEach(() =>
+        createComponent().then(() => {
+          wrapper.vm.isFormVisible = true;
+          wrapper.vm.inputValue = 'foo';
+        }),
+      );
+
+      it('when canceling and hiding add issuable form', () => {
+        wrapper.vm.onPendingFormCancel();
+
+        return wrapper.vm.$nextTick().then(() => {
+          expect(wrapper.vm.isFormVisible).toEqual(false);
+          expect(wrapper.vm.inputValue).toEqual('');
+          expect(wrapper.vm.state.pendingReferences.length).toEqual(0);
+        });
+      });
+    });
+
+    describe('fetchRelatedIssues', () => {
+      beforeEach(() => createComponent());
+
+      it('sets isFetching while fetching', () => {
+        wrapper.vm.fetchRelatedIssues();
+
+        expect(wrapper.vm.isFetching).toEqual(true);
+
+        return waitForPromises().then(() => {
+          expect(wrapper.vm.isFetching).toEqual(false);
+        });
+      });
+
+      it('should fetch related issues', () => {
+        mock.onGet(defaultProps.endpoint).reply(200, [issuable1, issuable2]);
+
+        wrapper.vm.fetchRelatedIssues();
+
+        return waitForPromises().then(() => {
+          expect(wrapper.vm.state.relatedIssues.length).toEqual(2);
+          expect(wrapper.vm.state.relatedIssues[0].id).toEqual(issuable1.id);
+          expect(wrapper.vm.state.relatedIssues[1].id).toEqual(issuable2.id);
+        });
+      });
+    });
+
+    describe('onInput', () => {
+      beforeEach(() => createComponent());
+
+      it('fill in issue number reference and adds to pending related issues', () => {
+        const input = '#123 ';
+        wrapper.vm.onInput({
+          untouchedRawReferences: [input.trim()],
+          touchedReference: input,
+        });
+
+        expect(wrapper.vm.state.pendingReferences.length).toEqual(1);
+        expect(wrapper.vm.state.pendingReferences[0]).toEqual('#123');
+      });
+
+      it('fill in with full reference', () => {
+        const input = 'asdf/qwer#444 ';
+        wrapper.vm.onInput({ untouchedRawReferences: [input.trim()], touchedReference: input });
+
+        expect(wrapper.vm.state.pendingReferences.length).toEqual(1);
+        expect(wrapper.vm.state.pendingReferences[0]).toEqual('asdf/qwer#444');
+      });
+
+      it('fill in with issue link', () => {
+        const link = 'http://localhost:3000/foo/bar/issues/111';
+        const input = `${link} `;
+        wrapper.vm.onInput({ untouchedRawReferences: [input.trim()], touchedReference: input });
+
+        expect(wrapper.vm.state.pendingReferences.length).toEqual(1);
+        expect(wrapper.vm.state.pendingReferences[0]).toEqual(link);
+      });
+
+      it('fill in with multiple references', () => {
+        const input = 'asdf/qwer#444 #12 ';
+        wrapper.vm.onInput({
+          untouchedRawReferences: input.trim().split(/\s/),
+          touchedReference: 2,
+        });
+
+        expect(wrapper.vm.state.pendingReferences.length).toEqual(2);
+        expect(wrapper.vm.state.pendingReferences[0]).toEqual('asdf/qwer#444');
+        expect(wrapper.vm.state.pendingReferences[1]).toEqual('#12');
+      });
+
+      it('fill in with some invalid things', () => {
+        const input = 'something random ';
+        wrapper.vm.onInput({
+          untouchedRawReferences: input.trim().split(/\s/),
+          touchedReference: 2,
+        });
+
+        expect(wrapper.vm.state.pendingReferences.length).toEqual(2);
+        expect(wrapper.vm.state.pendingReferences[0]).toEqual('something');
+        expect(wrapper.vm.state.pendingReferences[1]).toEqual('random');
+      });
+    });
+
+    describe('onBlur', () => {
+      beforeEach(() =>
+        createComponent().then(() => {
+          jest.spyOn(wrapper.vm, 'processAllReferences').mockImplementation(() => {});
+        }),
+      );
+
+      it('add any references to pending when blurring', () => {
+        const input = '#123';
+
+        wrapper.vm.onBlur(input);
+
+        expect(wrapper.vm.processAllReferences).toHaveBeenCalledWith(input);
+      });
+    });
+
+    describe('processAllReferences', () => {
+      beforeEach(() => createComponent());
+
+      it('add valid reference to pending', () => {
+        const input = '#123';
+        wrapper.vm.processAllReferences(input);
+
+        expect(wrapper.vm.state.pendingReferences.length).toEqual(1);
+        expect(wrapper.vm.state.pendingReferences[0]).toEqual('#123');
+      });
+
+      it('add any valid references to pending', () => {
+        const input = 'asdf #123';
+        wrapper.vm.processAllReferences(input);
+
+        expect(wrapper.vm.state.pendingReferences.length).toEqual(2);
+        expect(wrapper.vm.state.pendingReferences[0]).toEqual('asdf');
+        expect(wrapper.vm.state.pendingReferences[1]).toEqual('#123');
+      });
+    });
+  });
+});

ee/spec/javascripts/issuable/related_issues/components/related_issues_root_spec.js

-import Vue from 'vue';
-import MockAdapter from 'axios-mock-adapter';
-import relatedIssuesRoot from 'ee/related_issues/components/related_issues_root.vue';
-import relatedIssuesService from 'ee/related_issues/services/related_issues_service';
-import { linkedIssueTypesMap } from 'ee/related_issues/constants';
-import {
-  defaultProps,
-  issuable1,
-  issuable2,
-} from 'spec/vue_shared/components/issue/related_issuable_mock_data';
-import axios from '~/lib/utils/axios_utils';
-
-describe('RelatedIssuesRoot', () => {
-  let RelatedIssuesRoot;
-  let vm;
-  let mock;
-
-  beforeEach(() => {
-    RelatedIssuesRoot = Vue.extend(relatedIssuesRoot);
-    mock = new MockAdapter(axios);
-  });
-
-  afterEach(() => {
-    if (vm) {
-      vm.$destroy();
-    }
-    mock.restore();
-  });
-
-  describe('methods', () => {
-    describe('onRelatedIssueRemoveRequest', () => {
-      beforeEach(done => {
-        spyOn(relatedIssuesService.prototype, 'fetchRelatedIssues').and.returnValue(
-          Promise.reject(),
-        );
-
-        vm = new RelatedIssuesRoot({
-          propsData: defaultProps,
-        }).$mount();
-
-        setTimeout(() => {
-          vm.store.setRelatedIssues([issuable1]);
-          done();
-        });
-      });
-
-      it('remove related issue and succeeds', done => {
-        mock.onAny().reply(200, { issues: [] });
-
-        vm.onRelatedIssueRemoveRequest(issuable1.id);
-
-        setTimeout(() => {
-          expect(vm.state.relatedIssues).toEqual([]);
-
-          done();
-        });
-      });
-
-      it('remove related issue, fails, and restores to related issues', done => {
-        mock.onAny().reply(422, {});
-
-        vm.onRelatedIssueRemoveRequest(issuable1.id);
-
-        setTimeout(() => {
-          expect(vm.state.relatedIssues.length).toEqual(1);
-          expect(vm.state.relatedIssues[0].id).toEqual(issuable1.id);
-
-          done();
-        });
-      });
-    });
-
-    describe('onToggleAddRelatedIssuesForm', () => {
-      beforeEach(() => {
-        vm = new RelatedIssuesRoot({
-          propsData: defaultProps,
-        }).$mount();
-      });
-
-      it('toggle related issues form to visible', () => {
-        vm.onToggleAddRelatedIssuesForm();
-
-        expect(vm.isFormVisible).toEqual(true);
-      });
-
-      it('show add related issues form to hidden', () => {
-        vm.isFormVisible = true;
-
-        vm.onToggleAddRelatedIssuesForm();
-
-        expect(vm.isFormVisible).toEqual(false);
-      });
-    });
-
-    describe('onPendingIssueRemoveRequest', () => {
-      beforeEach(() => {
-        vm = new RelatedIssuesRoot({
-          propsData: defaultProps,
-        }).$mount();
-        vm.store.setPendingReferences([issuable1.reference]);
-      });
-
-      it('remove pending related issue', () => {
-        expect(vm.state.pendingReferences.length).toEqual(1);
-
-        vm.onPendingIssueRemoveRequest(0);
-
-        expect(vm.state.pendingReferences.length).toEqual(0);
-      });
-    });
-
-    describe('onPendingFormSubmit', () => {
-      beforeEach(() => {
-        spyOn(relatedIssuesService.prototype, 'fetchRelatedIssues').and.returnValue(
-          Promise.reject(),
-        );
-        vm = new RelatedIssuesRoot({
-          propsData: defaultProps,
-        }).$mount();
-
-        spyOn(vm, 'processAllReferences').and.callThrough();
-        spyOn(vm.service, 'addRelatedIssues').and.callThrough();
-      });
-
-      it('processes references before submitting', () => {
-        const input = '#123';
-        const linkedIssueType = linkedIssueTypesMap.RELATES_TO;
-        const emitObj = {
-          pendingReferences: input,
-          linkedIssueType,
-        };
-
-        vm.onPendingFormSubmit(emitObj);
-
-        expect(vm.processAllReferences).toHaveBeenCalledWith(input);
-        expect(vm.service.addRelatedIssues).toHaveBeenCalledWith([input], linkedIssueType);
-      });
-
-      it('submit zero pending issue as related issue', done => {
-        vm.store.setPendingReferences([]);
-        vm.onPendingFormSubmit({});
-
-        setTimeout(() => {
-          expect(vm.state.pendingReferences.length).toEqual(0);
-          expect(vm.state.relatedIssues.length).toEqual(0);
-
-          done();
-        });
-      });
-
-      it('submit pending issue as related issue', done => {
-        mock.onAny().reply(200, {
-          issuables: [issuable1],
-          result: {
-            message: 'something was successfully related',
-            status: 'success',
-          },
-        });
-
-        vm.store.setPendingReferences([issuable1.reference]);
-        vm.onPendingFormSubmit({});
-
-        setTimeout(() => {
-          expect(vm.state.pendingReferences.length).toEqual(0);
-          expect(vm.state.relatedIssues.length).toEqual(1);
-          expect(vm.state.relatedIssues[0].id).toEqual(issuable1.id);
-
-          done();
-        });
-      });
-
-      it('submit multiple pending issues as related issues', done => {
-        mock.onAny().reply(200, {
-          issuables: [issuable1, issuable2],
-          result: {
-            message: 'something was successfully related',
-            status: 'success',
-          },
-        });
-
-        vm.store.setPendingReferences([issuable1.reference, issuable2.reference]);
-        vm.onPendingFormSubmit({});
-
-        setTimeout(() => {
-          expect(vm.state.pendingReferences.length).toEqual(0);
-          expect(vm.state.relatedIssues.length).toEqual(2);
-          expect(vm.state.relatedIssues[0].id).toEqual(issuable1.id);
-          expect(vm.state.relatedIssues[1].id).toEqual(issuable2.id);
-
-          done();
-        });
-      });
-
-      // https://gitlab.com/gitlab-org/gitlab/issues/38410
-      // eslint-disable-next-line jasmine/no-disabled-tests
-      xit('displays a message from the backend upon error', done => {
-        const input = '#123';
-        const message = 'error';
-
-        mock.onAny().reply(409, { message });
-        document.body.innerHTML += '<div class="flash-container"></div>';
-
-        vm.onPendingFormSubmit(input);
-
-        setTimeout(() => {
-          expect(document.querySelector('.flash-text').innerText.trim()).toContain(message);
-          document.querySelector('.flash-container').remove();
-          done();
-        });
-      });
-    });
-
-    describe('onPendingFormCancel', () => {
-      beforeEach(() => {
-        vm = new RelatedIssuesRoot({
-          propsData: defaultProps,
-        }).$mount();
-        vm.isFormVisible = true;
-        vm.inputValue = 'foo';
-      });
-
-      it('when canceling and hiding add issuable form', () => {
-        vm.onPendingFormCancel();
-
-        expect(vm.isFormVisible).toEqual(false);
-        expect(vm.inputValue).toEqual('');
-        expect(vm.state.pendingReferences.length).toEqual(0);
-      });
-    });
-
-    describe('fetchRelatedIssues', () => {
-      beforeEach(done => {
-        vm = new RelatedIssuesRoot({
-          propsData: defaultProps,
-        }).$mount();
-
-        mock.onAny().reply(200, [issuable1, issuable2]);
-
-        // wait for internal call to fetchRelatedIssues to resolve
-        setTimeout(done);
-      });
-
-      // https://gitlab.com/gitlab-org/gitlab/issues/207376
-      // eslint-disable-next-line jasmine/no-disabled-tests
-      xit('sets isFetching while fetching', done => {
-        vm.fetchRelatedIssues();
-
-        expect(vm.isFetching).toEqual(true);
-
-        setTimeout(() => {
-          expect(vm.isFetching).toEqual(false);
-
-          done();
-        });
-      });
-
-      // https://gitlab.com/gitlab-org/gitlab/issues/207376
-      // eslint-disable-next-line jasmine/no-disabled-tests
-      xit('should fetch related issues', done => {
-        Vue.nextTick(() => {
-          expect(vm.state.relatedIssues.length).toEqual(2);
-          expect(vm.state.relatedIssues[0].id).toEqual(issuable1.id);
-          expect(vm.state.relatedIssues[1].id).toEqual(issuable2.id);
-
-          done();
-        });
-      });
-    });
-
-    describe('onInput', () => {
-      beforeEach(() => {
-        vm = new RelatedIssuesRoot({
-          propsData: defaultProps,
-        }).$mount();
-      });
-
-      it('fill in issue number reference and adds to pending related issues', () => {
-        const input = '#123 ';
-        vm.onInput({
-          untouchedRawReferences: [input.trim()],
-          touchedReference: input,
-        });
-
-        expect(vm.state.pendingReferences.length).toEqual(1);
-        expect(vm.state.pendingReferences[0]).toEqual('#123');
-      });
-
-      it('fill in with full reference', () => {
-        const input = 'asdf/qwer#444 ';
-        vm.onInput({ untouchedRawReferences: [input.trim()], touchedReference: input });
-
-        expect(vm.state.pendingReferences.length).toEqual(1);
-        expect(vm.state.pendingReferences[0]).toEqual('asdf/qwer#444');
-      });
-
-      it('fill in with issue link', () => {
-        const link = 'http://localhost:3000/foo/bar/issues/111';
-        const input = `${link} `;
-        vm.onInput({ untouchedRawReferences: [input.trim()], touchedReference: input });
-
-        expect(vm.state.pendingReferences.length).toEqual(1);
-        expect(vm.state.pendingReferences[0]).toEqual(link);
-      });
-
-      it('fill in with multiple references', () => {
-        const input = 'asdf/qwer#444 #12 ';
-        vm.onInput({ untouchedRawReferences: input.trim().split(/\s/), touchedReference: 2 });
-
-        expect(vm.state.pendingReferences.length).toEqual(2);
-        expect(vm.state.pendingReferences[0]).toEqual('asdf/qwer#444');
-        expect(vm.state.pendingReferences[1]).toEqual('#12');
-      });
-
-      it('fill in with some invalid things', () => {
-        const input = 'something random ';
-        vm.onInput({ untouchedRawReferences: input.trim().split(/\s/), touchedReference: 2 });
-
-        expect(vm.state.pendingReferences.length).toEqual(2);
-        expect(vm.state.pendingReferences[0]).toEqual('something');
-        expect(vm.state.pendingReferences[1]).toEqual('random');
-      });
-    });
-
-    describe('onBlur', () => {
-      beforeEach(() => {
-        vm = new RelatedIssuesRoot({
-          propsData: defaultProps,
-        }).$mount();
-
-        spyOn(vm, 'processAllReferences');
-      });
-
-      it('add any references to pending when blurring', () => {
-        const input = '#123';
-
-        vm.onBlur(input);
-
-        expect(vm.processAllReferences).toHaveBeenCalledWith(input);
-      });
-    });
-
-    describe('processAllReferences', () => {
-      beforeEach(() => {
-        vm = new RelatedIssuesRoot({
-          propsData: defaultProps,
-        }).$mount();
-      });
-
-      it('add valid reference to pending', () => {
-        const input = '#123';
-        vm.processAllReferences(input);
-
-        expect(vm.state.pendingReferences.length).toEqual(1);
-        expect(vm.state.pendingReferences[0]).toEqual('#123');
-      });
-
-      it('add any valid references to pending', () => {
-        const input = 'asdf #123';
-        vm.processAllReferences(input);
-
-        expect(vm.state.pendingReferences.length).toEqual(2);
-        expect(vm.state.pendingReferences[0]).toEqual('asdf');
-        expect(vm.state.pendingReferences[1]).toEqual('#123');
-      });
-    });
-  });
-});

spec/frontend/vue_shared/components/issue/related_issuable_mock_data.js

+export const defaultProps = {
+  endpoint: '/foo/bar/issues/1/related_issues',
+  currentNamespacePath: 'foo',
+  currentProjectPath: 'bar',
+};
+
+export const issuable1 = {
+  id: 200,
+  epicIssueId: 1,
+  confidential: false,
+  reference: 'foo/bar#123',
+  displayReference: '#123',
+  title: 'some title',
+  path: '/foo/bar/issues/123',
+  relationPath: '/foo/bar/issues/123/relation',
+  state: 'opened',
+  linkType: 'relates_to',
+  dueDate: '2010-11-22',
+  weight: 5,
+};
+
+export const issuable2 = {
+  id: 201,
+  epicIssueId: 2,
+  confidential: false,
+  reference: 'foo/bar#124',
+  displayReference: '#124',
+  title: 'some other thing',
+  path: '/foo/bar/issues/124',
+  relationPath: '/foo/bar/issues/124/relation',
+  state: 'opened',
+  linkType: 'blocks',
+};
+
+export const issuable3 = {
+  id: 202,
+  epicIssueId: 3,
+  confidential: false,
+  reference: 'foo/bar#125',
+  displayReference: '#125',
+  title: 'some other other thing',
+  path: '/foo/bar/issues/125',
+  relationPath: '/foo/bar/issues/125/relation',
+  state: 'opened',
+  linkType: 'is_blocked_by',
+};
+
+export const issuable4 = {
+  id: 203,
+  epicIssueId: 4,
+  confidential: false,
+  reference: 'foo/bar#126',
+  displayReference: '#126',
+  title: 'some other other other thing',
+  path: '/foo/bar/issues/126',
+  relationPath: '/foo/bar/issues/126/relation',
+  state: 'opened',
+};
+
+export const issuable5 = {
+  id: 204,
+  epicIssueId: 5,
+  confidential: false,
+  reference: 'foo/bar#127',
+  displayReference: '#127',
+  title: 'some other other other thing',
+  path: '/foo/bar/issues/127',
+  relationPath: '/foo/bar/issues/127/relation',
+  state: 'opened',
+};
+
+export const defaultMilestone = {
+  id: 1,
+  state: 'active',
+  title: 'Milestone title',
+  start_date: '2018-01-01',
+  due_date: '2019-12-31',
+};
+
+export const defaultAssignees = [
+  {
+    id: 1,
+    name: 'Administrator',
+    username: 'root',
+    state: 'active',
+    avatar_url: `${gl.TEST_HOST}`,
+    web_url: `${gl.TEST_HOST}/root`,
+    status_tooltip_html: null,
+    path: '/root',
+  },
+  {
+    id: 13,
+    name: 'Brooks Beatty',
+    username: 'brynn_champlin',
+    state: 'active',
+    avatar_url: `${gl.TEST_HOST}`,
+    web_url: `${gl.TEST_HOST}/brynn_champlin`,
+    status_tooltip_html: null,
+    path: '/brynn_champlin',
+  },
+  {
+    id: 6,
+    name: 'Bryce Turcotte',
+    username: 'melynda',
+    state: 'active',
+    avatar_url: `${gl.TEST_HOST}`,
+    web_url: `${gl.TEST_HOST}/melynda`,
+    status_tooltip_html: null,
+    path: '/melynda',
+  },
+  {
+    id: 20,
+    name: 'Conchita Eichmann',
+    username: 'juliana_gulgowski',
+    state: 'active',
+    avatar_url: `${gl.TEST_HOST}`,
+    web_url: `${gl.TEST_HOST}/juliana_gulgowski`,
+    status_tooltip_html: null,
+    path: '/juliana_gulgowski',
+  },
+];

spec/javascripts/vue_shared/components/issue/related_issuable_mock_data.js

-export const defaultProps = {
-  endpoint: '/foo/bar/issues/1/related_issues',
-  currentNamespacePath: 'foo',
-  currentProjectPath: 'bar',
-};
-
-export const issuable1 = {
-  id: 200,
-  epicIssueId: 1,
-  confidential: false,
-  reference: 'foo/bar#123',
-  displayReference: '#123',
-  title: 'some title',
-  path: '/foo/bar/issues/123',
-  state: 'opened',
-  linkType: 'relates_to',
-  dueDate: '2010-11-22',
-  weight: 5,
-};
-
-export const issuable2 = {
-  id: 201,
-  epicIssueId: 2,
-  confidential: false,
-  reference: 'foo/bar#124',
-  displayReference: '#124',
-  title: 'some other thing',
-  path: '/foo/bar/issues/124',
-  state: 'opened',
-  linkType: 'blocks',
-};
-
-export const issuable3 = {
-  id: 202,
-  epicIssueId: 3,
-  confidential: false,
-  reference: 'foo/bar#125',
-  displayReference: '#125',
-  title: 'some other other thing',
-  path: '/foo/bar/issues/125',
-  state: 'opened',
-  linkType: 'is_blocked_by',
-};
-
-export const issuable4 = {
-  id: 203,
-  epicIssueId: 4,
-  confidential: false,
-  reference: 'foo/bar#126',
-  displayReference: '#126',
-  title: 'some other other other thing',
-  path: '/foo/bar/issues/126',
-  state: 'opened',
-};
-
-export const issuable5 = {
-  id: 204,
-  epicIssueId: 5,
-  confidential: false,
-  reference: 'foo/bar#127',
-  displayReference: '#127',
-  title: 'some other other other thing',
-  path: '/foo/bar/issues/127',
-  state: 'opened',
-};
-
-export const defaultMilestone = {
-  id: 1,
-  state: 'active',
-  title: 'Milestone title',
-  start_date: '2018-01-01',
-  due_date: '2019-12-31',
-};
-
-export const defaultAssignees = [
-  {
-    id: 1,
-    name: 'Administrator',
-    username: 'root',
-    state: 'active',
-    avatar_url: `${gl.TEST_HOST}`,
-    web_url: `${gl.TEST_HOST}/root`,
-    status_tooltip_html: null,
-    path: '/root',
-  },
-  {
-    id: 13,
-    name: 'Brooks Beatty',
-    username: 'brynn_champlin',
-    state: 'active',
-    avatar_url: `${gl.TEST_HOST}`,
-    web_url: `${gl.TEST_HOST}/brynn_champlin`,
-    status_tooltip_html: null,
-    path: '/brynn_champlin',
-  },
-  {
-    id: 6,
-    name: 'Bryce Turcotte',
-    username: 'melynda',
-    state: 'active',
-    avatar_url: `${gl.TEST_HOST}`,
-    web_url: `${gl.TEST_HOST}/melynda`,
-    status_tooltip_html: null,
-    path: '/melynda',
-  },
-  {
-    id: 20,
-    name: 'Conchita Eichmann',
-    username: 'juliana_gulgowski',
-    state: 'active',
-    avatar_url: `${gl.TEST_HOST}`,
-    web_url: `${gl.TEST_HOST}/juliana_gulgowski`,
-    status_tooltip_html: null,
-    path: '/juliana_gulgowski',
-  },
-];
+export * from '../../../../frontend/vue_shared/components/issue/related_issuable_mock_data';