Decouple ide_router from components

- Instead we can simply use `this.$router`

app/assets/javascripts/ide/components/branches/item.vue

@@ -2,7 +2,6 @@
 /* eslint-disable @gitlab/vue-require-i18n-strings */
 import Icon from '~/vue_shared/components/icon.vue';
 import Timeago from '~/vue_shared/components/time_ago_tooltip.vue';
-import router from '../../ide_router';
 
 export default {
   components: {
@@ -26,7 +25,7 @@ export default {
   },
   computed: {
     branchHref() {
-      return router.resolve(`/project/${this.projectId}/edit/${this.item.name}`).href;
+      return this.$router.resolve(`/project/${this.projectId}/edit/${this.item.name}`).href;
     },
   },
 };

app/assets/javascripts/ide/components/merge_requests/item.vue

 <script>
 import Icon from '../../../vue_shared/components/icon.vue';
-import router from '../../ide_router';
 
 export default {
   components: {
@@ -33,7 +32,7 @@ export default {
     mergeRequestHref() {
       const path = `/project/${this.item.projectPathWithNamespace}/merge_requests/${this.item.iid}`;
 
-      return router.resolve(path).href;
+      return this.$router.resolve(path).href;
     },
   },
 };

app/assets/javascripts/ide/components/repo_tabs.vue

 <script>
 import { mapActions } from 'vuex';
 import RepoTab from './repo_tab.vue';
-import router from '../ide_router';
 
 export default {
   components: {
@@ -28,7 +27,7 @@ export default {
 
       if (this.activeFile.pending) {
         return this.removePendingTab(this.activeFile).then(() => {
-          router.push(`/project${this.activeFile.url}`);
+          this.$router.push(`/project${this.activeFile.url}`);
         });
       }
 

spec/frontend/ide/components/branches/item_spec.js

@@ -22,6 +22,7 @@ describe('IDE branch item', () => {
         isActive: false,
         ...props,
       },
+      router,
     });
   }
 

spec/frontend/ide/components/merge_requests/item_spec.js

-import Vue from 'vue';
+import { mount } from '@vue/test-utils';
 import router from '~/ide/ide_router';
 import Item from '~/ide/components/merge_requests/item.vue';
-import mountCompontent from '../../../helpers/vue_mount_component_helper';
+
+const TEST_ITEM = {
+  iid: 1,
+  projectPathWithNamespace: 'gitlab-org/gitlab-ce',
+  title: 'Merge request title',
+};
 
 describe('IDE merge request item', () => {
-  const Component = Vue.extend(Item);
-  let vm;
-
-  beforeEach(() => {
-    vm = mountCompontent(Component, {
-      item: {
-        iid: 1,
-        projectPathWithNamespace: 'gitlab-org/gitlab-ce',
-        title: 'Merge request title',
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = mount(Item, {
+      propsData: {
+        item: {
+          ...TEST_ITEM,
+        },
+        currentId: `${TEST_ITEM.iid}`,
+        currentProjectId: TEST_ITEM.projectPathWithNamespace,
+        ...props,
       },
-      currentId: '1',
-      currentProjectId: 'gitlab-org/gitlab-ce',
+      router,
     });
-  });
+  };
+  const findIcon = () => wrapper.find('.ic-mobile-issue-close');
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
+    wrapper = null;
   });
 
-  it('renders merge requests data', () => {
-    expect(vm.$el.textContent).toContain('Merge request title');
-    expect(vm.$el.textContent).toContain('gitlab-org/gitlab-ce!1');
-  });
+  describe('default', () => {
+    beforeEach(() => {
+      createComponent();
+    });
 
-  it('renders link with href', () => {
-    const expectedHref = router.resolve(
-      `/project/${vm.item.projectPathWithNamespace}/merge_requests/${vm.item.iid}`,
-    ).href;
+    it('renders merge requests data', () => {
+      expect(wrapper.text()).toContain('Merge request title');
+      expect(wrapper.text()).toContain('gitlab-org/gitlab-ce!1');
+    });
 
-    expect(vm.$el.tagName.toLowerCase()).toBe('a');
-    expect(vm.$el).toHaveAttr('href', expectedHref);
-  });
+    it('renders link with href', () => {
+      const expectedHref = router.resolve(
+        `/project/${TEST_ITEM.projectPathWithNamespace}/merge_requests/${TEST_ITEM.iid}`,
+      ).href;
 
-  it('renders icon if ID matches currentId', () => {
-    expect(vm.$el.querySelector('.ic-mobile-issue-close')).not.toBe(null);
-  });
+      expect(wrapper.element.tagName.toLowerCase()).toBe('a');
+      expect(wrapper.attributes('href')).toBe(expectedHref);
+    });
 
-  it('does not render icon if ID does not match currentId', done => {
-    vm.currentId = '2';
+    it('renders icon if ID matches currentId', () => {
+      expect(findIcon().exists()).toBe(true);
+    });
+  });
 
-    vm.$nextTick(() => {
-      expect(vm.$el.querySelector('.ic-mobile-issue-close')).toBe(null);
+  describe('with different currentId', () => {
+    beforeEach(() => {
+      createComponent({ currentId: `${TEST_ITEM.iid + 1}` });
+    });
 
-      done();
+    it('does not render icon', () => {
+      expect(findIcon().exists()).toBe(false);
     });
   });
 
-  it('does not render icon if project ID does not match', done => {
-    vm.currentProjectId = 'test/test';
-
-    vm.$nextTick(() => {
-      expect(vm.$el.querySelector('.ic-mobile-issue-close')).toBe(null);
+  describe('with different project ID', () => {
+    beforeEach(() => {
+      createComponent({ currentProjectId: 'test/test' });
+    });
 
-      done();
+    it('does not render icon', () => {
+      expect(findIcon().exists()).toBe(false);
     });
   });
 });