fixed up the component specs

ee/app/assets/javascripts/ide/components/repo_editor.vue

@@ -123,7 +123,7 @@ export default {
   >
     <div
       v-if="shouldHideEditor"
-      v-html="activeFile.html"
+      v-html="file.html"
     >
     </div>
     <div

ee/app/assets/javascripts/ide/components/repo_file.vue

 <script>
   import { mapActions } from 'vuex';
-  import timeAgoMixin from '~/vue_shared/mixins/timeago';
   import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
   import fileIcon from '~/vue_shared/components/file_icon.vue';
+  import router from '../ide_router';
   import newDropdown from './new_dropdown/index.vue';
   import fileStatusIcon from './repo_file_status_icon.vue';
   import changedFileIcon from './changed_file_icon.vue';
@@ -16,9 +16,6 @@
       fileIcon,
       changedFileIcon,
     },
-    mixins: [
-      timeAgoMixin,
-    ],
     props: {
       file: {
         type: Object,
@@ -63,7 +60,7 @@
         if (this.isTree && this.$router.currentRoute.path === `/project${this.file.url}`) {
           this.toggleTreeOpen(this.file.path);
         }
-        this.$router.push(`/project${this.file.url}`);
+        router.push(`/project${this.file.url}`);
       },
     },
   };

spec/javascripts/ide/components/ide_context_bar_spec.js

@@ -33,42 +33,5 @@ describe('Multi-file editor right context bar', () => {
     it('adds collapsed class', () => {
       expect(vm.$el.querySelector('.is-collapsed')).not.toBeNull();
     });
-
-    it('shows correct icon', () => {
-      expect(vm.currentIcon).toBe('angle-double-left');
-    });
-
-    it('clicking sidebar collapses the bar', () => {
-      spyOn(vm, 'setPanelCollapsedStatus').and.returnValue(Promise.resolve());
-
-      vm.$el.querySelector('.multi-file-commit-panel-section').click();
-
-      expect(vm.setPanelCollapsedStatus).toHaveBeenCalledWith({
-        side: 'right',
-        collapsed: false,
-      });
-    });
-  });
-
-  it('clicking toggle collapse button collapses the bar', () => {
-    spyOn(vm, 'setPanelCollapsedStatus').and.returnValue(Promise.resolve());
-
-    vm.$el.querySelector('.multi-file-commit-panel-collapse-btn').click();
-
-    expect(vm.setPanelCollapsedStatus).toHaveBeenCalledWith({
-      side: 'right',
-      collapsed: true,
-    });
-  });
-
-  it('when expanded clicking the main sidebar is not collapsing the bar', () => {
-    spyOn(vm, 'setPanelCollapsedStatus').and.returnValue(Promise.resolve());
-
-    vm.$el.querySelector('.multi-file-commit-panel-section').click();
-
-    expect(vm.setPanelCollapsedStatus).not.toHaveBeenCalledWith({
-      side: 'right',
-      collapsed: false,
-    });
   });
 });

spec/javascripts/ide/components/ide_repo_tree_spec.js

 import Vue from 'vue';
-import store from 'ee/ide/stores';
 import ideRepoTree from 'ee/ide/components/ide_repo_tree.vue';
-import { file, resetStore } from '../helpers';
+import createComponent from '../../helpers/vue_mount_component_helper';
+import { file } from '../helpers';
 
 describe('IdeRepoTree', () => {
   let vm;
+  let tree;
 
   beforeEach(() => {
     const IdeRepoTree = Vue.extend(ideRepoTree);
 
-    vm = new IdeRepoTree({
-      store,
-      propsData: {
-        treeId: 'abcproject/mybranch',
-      },
-    });
-
-    vm.$store.state.currentBranch = 'master';
-    vm.$store.state.trees['abcproject/mybranch'] = {
+    tree = {
       tree: [file()],
+      loading: false,
     };
 
-    vm.$mount();
+    vm = createComponent(IdeRepoTree, {
+      tree,
+    });
   });
 
   afterEach(() => {
     vm.$destroy();
-
-    resetStore(vm.$store);
   });
 
   it('renders a sidebar', () => {
-    expect(vm.$el.classList.contains('sidebar-mini')).toBeFalsy();
-    expect(vm.$el.querySelector('.repo-file-options')).toBeFalsy();
-    expect(vm.$el.querySelector('.loading-file')).toBeFalsy();
-    expect(vm.$el.querySelector('.file')).toBeTruthy();
+    expect(vm.$el.querySelector('.loading-file')).toBeNull();
+    expect(vm.$el.querySelector('.file')).not.toBeNull();
   });
 
   it('renders 3 loading files if tree is loading', (done) => {
-    vm.$store.state.trees['123'] = {
-      tree: [],
-      loading: true,
-    };
-    vm.treeId = '123';
+    tree.loading = true;
 
-    Vue.nextTick(() => {
+    vm.$nextTick(() => {
       expect(vm.$el.querySelectorAll('.multi-file-loading-container').length).toEqual(3);
 
       done();

spec/javascripts/ide/components/ide_side_bar_spec.js

@@ -11,8 +11,6 @@ describe('IdeSidebar', () => {
     const Component = Vue.extend(ideSidebar);
 
     vm = createComponentWithStore(Component, store).$mount();
-
-    vm.$store.state.leftPanelCollapsed = false;
   });
 
   afterEach(() => {
@@ -25,19 +23,14 @@ describe('IdeSidebar', () => {
     expect(vm.$el.querySelector('.multi-file-commit-panel-inner')).not.toBeNull();
   });
 
-  describe('collapsed', () => {
-    beforeEach((done) => {
-      vm.$store.state.leftPanelCollapsed = true;
-
-      Vue.nextTick(done);
-    });
+  it('renders loading icon component', (done) => {
+    vm.$store.state.loading = true;
 
-    it('adds collapsed class', () => {
-      expect(vm.$el.classList).toContain('is-collapsed');
-    });
+    vm.$nextTick(() => {
+      expect(vm.$el.querySelector('.multi-file-loading-container')).not.toBeNull();
+      expect(vm.$el.querySelectorAll('.multi-file-loading-container').length).toBe(3);
 
-    it('shows correct icon', () => {
-      expect(vm.currentIcon).toBe('angle-double-right');
+      done();
     });
   });
 });

spec/javascripts/ide/components/new_dropdown/index_spec.js

@@ -2,7 +2,7 @@ import Vue from 'vue';
 import store from 'ee/ide/stores';
 import newDropdown from 'ee/ide/components/new_dropdown/index.vue';
 import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import { resetStore } from '../../helpers';
+import { file, resetStore } from '../../helpers';
 
 describe('new dropdown component', () => {
   let vm;
@@ -17,6 +17,9 @@ describe('new dropdown component', () => {
 
     vm.$store.state.currentProjectId = 'abcproject';
     vm.$store.state.path = '';
+    vm.$store.state.trees['abcproject/mybranch'] = {
+      tree: [],
+    };
 
     vm.$mount();
   });
@@ -74,4 +77,123 @@ describe('new dropdown component', () => {
         .catch(done.fail);
     });
   });
+
+  // TODO: move all this to the action spec
+  describe('createTempEntry', () => {
+    ['tree', 'blob'].forEach((type) => {
+      if (type === 'blob') {
+        it('creates new file', (done) => {
+          vm.createTempEntry({
+            branchId: 'mybranch',
+            name: 'testing',
+            type,
+          }).then(() => {
+            const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree;
+            expect(baseTree.length).toBe(1);
+            expect(baseTree[0].name).toBe('testing');
+            expect(baseTree[0].type).toBe('blob');
+            expect(baseTree[0].tempFile).toBeTruthy();
+
+            done();
+          })
+          .catch(done.fail);
+        });
+
+        it('does not create temp file when file already exists', (done) => {
+          const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree;
+          baseTree.push(file('testing', '1', type));
+
+          vm.createTempEntry({
+            branchId: 'mybranch',
+            name: 'testing',
+            type,
+          })
+            .then(() => {
+              expect(baseTree.length).toBe(1);
+              expect(baseTree[0].name).toBe('testing');
+              expect(baseTree[0].type).toBe('blob');
+              expect(baseTree[0].tempFile).toBeFalsy();
+
+              done();
+            })
+            .catch(done.fail);
+        });
+      } else {
+        it('creates new tree', (done) => {
+          vm.createTempEntry({
+            branchId: 'mybranch',
+            name: 'testing',
+            type,
+          })
+            .then(() => {
+              const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree;
+              expect(baseTree.length).toBe(1);
+              expect(baseTree[0].name).toBe('testing');
+              expect(baseTree[0].type).toBe('tree');
+              expect(baseTree[0].tempFile).toBeTruthy();
+
+              done();
+            })
+            .catch(done.fail);
+        });
+
+        it('creates multiple trees when entryName has slashes', (done) => {
+          vm.createTempEntry({
+            branchId: 'mybranch',
+            name: 'app/test',
+            type,
+          })
+            .then(() => {
+              const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree;
+              expect(baseTree.length).toBe(1);
+              expect(baseTree[0].name).toBe('app');
+
+              done();
+            })
+            .catch(done.fail);
+        });
+
+        it('creates tree in existing tree', (done) => {
+          const f = file('app', '1', 'tree');
+          const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree;
+          baseTree.push(f);
+          vm.$store.state.entries[f.path] = f;
+
+          vm.entryName = 'app/test';
+          vm.createTempEntry({
+            branchId: 'mybranch',
+            name: 'app/test',
+            type,
+          }).then(() => {
+            expect(baseTree.length).toBe(1);
+            // console.log(baseTree[0].tree);
+            expect(baseTree[0].name).toBe('app');
+            expect(baseTree[0].tempFile).toBeFalsy();
+            expect(baseTree[0].tree[0].tempFile).toBeTruthy();
+            expect(baseTree[0].tree[0].name).toBe('test');
+
+            done();
+          }).catch(done.fail);
+        });
+
+        it('does not create new tree when already exists', (done) => {
+          const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree;
+          baseTree.push(file('app', '1', 'tree'));
+
+          vm.createTempEntry({
+            branchId: 'mybranch',
+            name: 'app',
+            type,
+          }).then(() => {
+            expect(baseTree.length).toBe(1);
+            expect(baseTree[0].name).toBe('app');
+            expect(baseTree[0].tempFile).toBeFalsy();
+            expect(baseTree[0].tree.length).toBe(0);
+
+            done();
+          }).catch(done.fail);
+        });
+      }
+    });
+  });
 });

spec/javascripts/ide/components/new_dropdown/modal_spec.js

 import Vue from 'vue';
-import store from 'ee/ide/stores';
-import service from 'ee/ide/services';
 import modal from 'ee/ide/components/new_dropdown/modal.vue';
-import router from 'ee/ide/ide_router';
-import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import { file, resetStore } from '../../helpers';
+import createComponent from 'spec/helpers/vue_mount_component_helper';
 
 describe('new file modal component', () => {
   const Component = Vue.extend(modal);
   let vm;
-  let projectTree;
-
-  beforeEach(() => {
-    spyOn(service, 'getProjectData').and.returnValue(Promise.resolve({
-      data: {
-        id: '123',
-      },
-    }));
-
-    spyOn(service, 'getBranchData').and.returnValue(Promise.resolve({
-      data: {
-        commit: {
-          id: '123branch',
-        },
-      },
-    }));
-
-    spyOn(service, 'getTreeData').and.returnValue(Promise.resolve({
-      headers: {
-        'page-title': 'test',
-      },
-      json: () => Promise.resolve({
-        last_commit_path: 'last_commit_path',
-        parent_tree_url: 'parent_tree_url',
-        path: '/',
-        trees: [{ name: 'tree' }],
-        blobs: [{ name: 'blob' }],
-        submodules: [{ name: 'submodule' }],
-      }),
-    }));
-
-    spyOn(router, 'push');
-  });
 
   afterEach(() => {
     vm.$destroy();
-
-    resetStore(vm.$store);
   });
 
   ['tree', 'blob'].forEach((type) => {
     describe(type, () => {
       beforeEach(() => {
-        store.state.projects.abcproject = {
-          web_url: '',
-        };
-        store.state.trees = [];
-        store.state.trees['abcproject/mybranch'] = {
-          tree: [],
-        };
-        projectTree = store.state.trees['abcproject/mybranch'];
-        store.state.currentProjectId = 'abcproject';
-
-        vm = createComponentWithStore(Component, store, {
+        vm = createComponent(Component, {
           type,
           branchId: 'master',
           path: '',
-          parent: projectTree,
         });
 
         vm.entryName = 'testing';
-
-        vm.$mount();
       });
 
       it(`sets modal title as ${type}`, () => {
@@ -93,122 +41,17 @@ describe('new file modal component', () => {
       });
 
       describe('createEntryInStore', () => {
-        it('calls createTempEntry', () => {
-          spyOn(vm, 'createTempEntry');
+        it('$emits create', () => {
+          spyOn(vm, '$emit');
 
           vm.createEntryInStore();
 
-          expect(vm.createTempEntry).toHaveBeenCalledWith({
-            projectId: 'abcproject',
+          expect(vm.$emit).toHaveBeenCalledWith('create', {
             branchId: 'master',
-            parent: projectTree,
             name: 'testing',
             type,
           });
         });
-
-        it('sets editMode to true', (done) => {
-          vm.createEntryInStore();
-
-          setTimeout(() => {
-            expect(vm.$store.state.editMode).toBeTruthy();
-
-            done();
-          });
-        });
-
-        it('opens newly created file', (done) => {
-          if (type === 'blob') {
-            vm.createEntryInStore();
-
-            setTimeout(() => {
-              expect(vm.$store.state.openFiles.length).toBe(1);
-              expect(vm.$store.state.openFiles[0].name).toBe(type === 'blob' ? 'testing' : '.gitkeep');
-
-              done();
-            });
-          } else {
-            done();
-          }
-        });
-
-        if (type === 'blob') {
-          it('creates new file', (done) => {
-            vm.createEntryInStore();
-
-            setTimeout(() => {
-              const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree;
-              expect(baseTree.length).toBe(1);
-              expect(baseTree[0].name).toBe('testing');
-              expect(baseTree[0].type).toBe('blob');
-              expect(baseTree[0].tempFile).toBeTruthy();
-
-              done();
-            });
-          });
-
-          it('does not create temp file when file already exists', (done) => {
-            const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree;
-            baseTree.push(file('testing', '1', type));
-
-            vm.createEntryInStore();
-
-            setTimeout(() => {
-              expect(baseTree.length).toBe(1);
-              expect(baseTree[0].name).toBe('testing');
-              expect(baseTree[0].type).toBe('blob');
-              expect(baseTree[0].tempFile).toBeFalsy();
-
-              done();
-            });
-          });
-        } else {
-          it('creates new tree', () => {
-            vm.createEntryInStore();
-
-            const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree;
-            expect(baseTree.length).toBe(1);
-            expect(baseTree[0].name).toBe('testing');
-            expect(baseTree[0].type).toBe('tree');
-            expect(baseTree[0].tempFile).toBeTruthy();
-          });
-
-          it('creates multiple trees when entryName has slashes', () => {
-            vm.entryName = 'app/test';
-            vm.createEntryInStore();
-
-            const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree;
-            expect(baseTree.length).toBe(1);
-            expect(baseTree[0].name).toBe('app');
-          });
-
-          it('creates tree in existing tree', () => {
-            const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree;
-            baseTree.push(file('app', '1', 'tree'));
-
-            vm.entryName = 'app/test';
-            vm.createEntryInStore();
-
-            expect(baseTree.length).toBe(1);
-            expect(baseTree[0].name).toBe('app');
-            expect(baseTree[0].tempFile).toBeFalsy();
-            expect(baseTree[0].tree[0].tempFile).toBeTruthy();
-            expect(baseTree[0].tree[0].name).toBe('test');
-          });
-
-          it('does not create new tree when already exists', () => {
-            const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree;
-            baseTree.push(file('app', '1', 'tree'));
-
-            vm.entryName = 'app';
-            vm.createEntryInStore();
-
-            expect(baseTree.length).toBe(1);
-            expect(baseTree[0].name).toBe('app');
-            expect(baseTree[0].tempFile).toBeFalsy();
-            expect(baseTree[0].tree.length).toBe(0);
-          });
-        }
       });
     });
   });
@@ -216,12 +59,11 @@ describe('new file modal component', () => {
   it('focuses field on mount', () => {
     document.body.innerHTML += '<div class="js-test"></div>';
 
-    vm = createComponentWithStore(Component, store, {
+    vm = createComponent(Component, {
       type: 'tree',
-      projectId: 'abcproject',
       branchId: 'master',
       path: '',
-    }).$mount('.js-test');
+    }, '.js-test');
 
     expect(document.activeElement).toBe(vm.$refs.fieldName);
 

spec/javascripts/ide/components/new_dropdown/upload_spec.js

 import Vue from 'vue';
 import upload from 'ee/ide/components/new_dropdown/upload.vue';
-import store from 'ee/ide/stores';
-import service from 'ee/ide/services';
-import router from 'ee/ide/ide_router';
-import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import { resetStore } from '../../helpers';
+import createComponent from 'spec/helpers/vue_mount_component_helper';
 
 describe('new dropdown upload', () => {
   let vm;
-  let projectTree;
 
   beforeEach(() => {
-    spyOn(service, 'getProjectData').and.returnValue(Promise.resolve({
-      data: {
-        id: '123',
-      },
-    }));
-
-    spyOn(service, 'getBranchData').and.returnValue(Promise.resolve({
-      data: {
-        commit: {
-          id: '123branch',
-        },
-      },
-    }));
-
-    spyOn(service, 'getTreeData').and.returnValue(Promise.resolve({
-      headers: {
-        'page-title': 'test',
-      },
-      json: () => Promise.resolve({
-        last_commit_path: 'last_commit_path',
-        parent_tree_url: 'parent_tree_url',
-        path: '/',
-        trees: [{ name: 'tree' }],
-        blobs: [{ name: 'blob' }],
-        submodules: [{ name: 'submodule' }],
-      }),
-    }));
-
-    spyOn(router, 'push');
-
     const Component = Vue.extend(upload);
 
-    store.state.projects.abcproject = {
-      web_url: '',
-    };
-    store.state.currentProjectId = 'abcproject';
-    store.state.trees = [];
-    store.state.trees['abcproject/mybranch'] = {
-      tree: [],
-    };
-    projectTree = store.state.trees['abcproject/mybranch'];
-
-    vm = createComponentWithStore(Component, store, {
+    vm = createComponent(Component, {
       branchId: 'master',
       path: '',
-      parent: projectTree,
     });
 
     vm.entryName = 'testing';
 
-    vm.$mount();
+    spyOn(vm, '$emit');
   });
 
   afterEach(() => {
     vm.$destroy();
-
-    resetStore(vm.$store);
   });
 
   describe('readFile', () => {
@@ -108,53 +60,27 @@ describe('new dropdown upload', () => {
       name: 'file',
     };
 
-    it('creates new file', (done) => {
+    it('creates new file', () => {
       vm.createFile(target, file, true);
 
-      vm.$nextTick(() => {
-        const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree;
-        expect(baseTree.length).toBe(1);
-        expect(baseTree[0].name).toBe(file.name);
-        expect(baseTree[0].content).toBe(target.result);
-
-        done();
+      expect(vm.$emit).toHaveBeenCalledWith('create', {
+        name: file.name,
+        branchId: 'master',
+        type: 'blob',
+        content: target.result,
+        base64: false,
       });
     });
 
-    it('creates new file in path', (done) => {
-      const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree;
-      const tree = {
-        type: 'tree',
-        name: 'testing',
-        path: 'testing',
-        tree: [],
-      };
-      baseTree.push(tree);
-
-      vm.parent = tree;
-      vm.createFile(target, file, true);
-
-      vm.$nextTick(() => {
-        expect(baseTree.length).toBe(1);
-        expect(baseTree[0].tree[0].name).toBe(file.name);
-        expect(baseTree[0].tree[0].content).toBe(target.result);
-        expect(baseTree[0].tree[0].path).toBe(`testing/${file.name}`);
-
-        done();
-      });
-    });
-
-    it('splits content on base64 if binary', (done) => {
+    it('splits content on base64 if binary', () => {
       vm.createFile(binaryTarget, file, false);
 
-      vm.$nextTick(() => {
-        const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree;
-        expect(baseTree.length).toBe(1);
-        expect(baseTree[0].name).toBe(file.name);
-        expect(baseTree[0].content).toBe(binaryTarget.result.split('base64,')[1]);
-        expect(baseTree[0].base64).toBe(true);
-
-        done();
+      expect(vm.$emit).toHaveBeenCalledWith('create', {
+        name: file.name,
+        branchId: 'master',
+        type: 'blob',
+        content: binaryTarget.result.split('base64,')[1],
+        base64: true,
       });
     });
   });

spec/javascripts/ide/components/repo_editor_spec.js

@@ -3,6 +3,7 @@ import store from 'ee/ide/stores';
 import repoEditor from 'ee/ide/components/repo_editor.vue';
 import monacoLoader from 'ee/ide/monaco_loader';
 import Editor from 'ee/ide/lib/editor';
+import { createComponentWithStore } from '../../helpers/vue_mount_component_helper';
 import { file, resetStore } from '../helpers';
 
 describe('RepoEditor', () => {
@@ -12,14 +13,15 @@ describe('RepoEditor', () => {
     const f = file();
     const RepoEditor = Vue.extend(repoEditor);
 
-    vm = new RepoEditor({
-      store,
+    vm = createComponentWithStore(RepoEditor, store, {
+      file: f,
     });
 
     f.active = true;
     f.tempFile = true;
+    f.html = 'testing';
     vm.$store.state.openFiles.push(f);
-    vm.$store.getters.activeFile.html = 'testing';
+    vm.$store.state.entries[f.path] = f;
     vm.monaco = true;
 
     vm.$mount();
@@ -47,9 +49,9 @@ describe('RepoEditor', () => {
 
   describe('when open file is binary and not raw', () => {
     beforeEach((done) => {
-      vm.$store.getters.activeFile.binary = true;
+      vm.file.binary = true;
 
-      Vue.nextTick(done);
+      vm.$nextTick(done);
     });
 
     it('does not render the IDE', () => {
@@ -69,7 +71,7 @@ describe('RepoEditor', () => {
 
       vm.setupEditor();
 
-      expect(vm.editor.createModel).toHaveBeenCalledWith(vm.$store.getters.activeFile);
+      expect(vm.editor.createModel).toHaveBeenCalledWith(vm.file);
       expect(vm.model).not.toBeNull();
     });
 
@@ -98,7 +100,7 @@ describe('RepoEditor', () => {
       vm.model.setValue('testing 123');
 
       setTimeout(() => {
-        expect(vm.$store.getters.activeFile.content).toBe('testing 123');
+        expect(vm.file.content).toBe('testing 123');
 
         done();
       });

spec/javascripts/ide/components/repo_file_buttons_spec.js

 import Vue from 'vue';
-import store from 'ee/ide/stores';
 import repoFileButtons from 'ee/ide/components/repo_file_buttons.vue';
-import { file, resetStore } from '../helpers';
+import createVueComponent from '../../helpers/vue_mount_component_helper';
+import { file } from '../helpers';
 
 describe('RepoFileButtons', () => {
   const activeFile = file();
@@ -13,18 +13,14 @@ describe('RepoFileButtons', () => {
     activeFile.rawPath = 'test';
     activeFile.blamePath = 'test';
     activeFile.commitsPath = 'test';
-    activeFile.active = true;
-    store.state.openFiles.push(activeFile);
 
-    return new RepoFileButtons({
-      store,
-    }).$mount();
+    return createVueComponent(RepoFileButtons, {
+      file: activeFile,
+    });
   }
 
   afterEach(() => {
     vm.$destroy();
-
-    resetStore(vm.$store);
   });
 
   it('renders Raw, Blame, History, Permalink and Preview toggle', (done) => {

spec/javascripts/ide/components/repo_file_spec.js

 import Vue from 'vue';
 import store from 'ee/ide/stores';
 import repoFile from 'ee/ide/components/repo_file.vue';
-import { file, resetStore } from '../helpers';
+import router from 'ee/ide/ide_router';
+import { createComponentWithStore } from '../../helpers/vue_mount_component_helper';
+import { file } from '../helpers';
 
 describe('RepoFile', () => {
-  const updated = 'updated';
   let vm;
 
   function createComponent(propsData) {
     const RepoFile = Vue.extend(repoFile);
 
-    return new RepoFile({
-      store,
-      propsData,
-    }).$mount();
+    vm = createComponentWithStore(RepoFile, store, propsData);
+
+    vm.$mount();
   }
 
   afterEach(() => {
-    resetStore(vm.$store);
+    vm.$destroy();
   });
 
   it('renders link, icon and name', () => {
-    const RepoFile = Vue.extend(repoFile);
-    vm = new RepoFile({
-      store,
-      propsData: {
-        file: file('t4'),
-      },
+    createComponent({
+      file: file('t4'),
+      level: 0,
     });
-    spyOn(vm, 'timeFormated').and.returnValue(updated);
-    vm.$mount();
 
     const name = vm.$el.querySelector('.ide-file-name');
 
@@ -37,59 +32,16 @@ describe('RepoFile', () => {
     expect(name.textContent.trim()).toEqual(vm.file.name);
   });
 
-  it('does render if hasFiles is true and is loading tree', () => {
-    vm = createComponent({
-      file: file('t1'),
-    });
-
-    expect(vm.$el.querySelector('.fa-spin.fa-spinner')).toBeFalsy();
-  });
-
-  it('does not render commit message and datetime if mini', (done) => {
-    vm = createComponent({
-      file: file('t2'),
-    });
-    vm.$store.state.openFiles.push(vm.file);
-
-    vm.$nextTick(() => {
-      expect(vm.$el.querySelector('.commit-message')).toBeFalsy();
-      expect(vm.$el.querySelector('.commit-update')).toBeFalsy();
-
-      done();
-    });
-  });
-
   it('fires clickFile when the link is clicked', () => {
-    vm = createComponent({
+    spyOn(router, 'push');
+    createComponent({
       file: file('t3'),
+      level: 0,
     });
 
-    spyOn(vm, 'clickFile');
-
     vm.$el.querySelector('.file-name').click();
 
-    expect(vm.clickFile).toHaveBeenCalledWith(vm.file);
-  });
-
-  describe('submodule', () => {
-    let f;
-
-    beforeEach(() => {
-      f = file('submodule name', '123456789');
-      f.type = 'submodule';
-
-      vm = createComponent({
-        file: f,
-      });
-    });
-
-    afterEach(() => {
-      vm.$destroy();
-    });
-
-    it('renders submodule short ID', () => {
-      expect(vm.$el.querySelector('.commit-sha').textContent.trim()).toBe('12345678');
-    });
+    expect(router.push).toHaveBeenCalledWith(`/project${vm.file.url}`);
   });
 
   describe('locked file', () => {
@@ -104,15 +56,12 @@ describe('RepoFile', () => {
         },
       };
 
-      vm = createComponent({
+      createComponent({
         file: f,
+        level: 0,
       });
     });
 
-    afterEach(() => {
-      vm.$destroy();
-    });
-
     it('renders lock icon', () => {
       expect(vm.$el.querySelector('.file-status-icon')).not.toBeNull();
     });

spec/javascripts/ide/components/repo_tab_spec.js

@@ -21,6 +21,8 @@ describe('RepoTab', () => {
   });
 
   afterEach(() => {
+    vm.$destroy();
+
     resetStore(vm.$store);
   });
 
@@ -57,7 +59,7 @@ describe('RepoTab', () => {
 
     vm.$el.querySelector('.multi-file-tab-close').click();
 
-    expect(vm.closeFile).toHaveBeenCalledWith(vm.tab);
+    expect(vm.closeFile).toHaveBeenCalledWith(vm.tab.path);
   });
 
   it('changes icon on hover', (done) => {
@@ -125,7 +127,8 @@ describe('RepoTab', () => {
         });
         vm.$store.state.openFiles.push(tab);
         vm.$store.state.changedFiles.push(tab);
-        vm.$store.dispatch('setFileActive', tab);
+        vm.$store.state.entries[tab.path] = tab;
+        vm.$store.dispatch('setFileActive', tab.path);
 
         vm.$el.querySelector('.multi-file-tab-close').click();
 
@@ -144,7 +147,8 @@ describe('RepoTab', () => {
           tab,
         });
         vm.$store.state.openFiles.push(tab);
-        vm.$store.dispatch('setFileActive', tab);
+        vm.$store.state.entries[tab.path] = tab;
+        vm.$store.dispatch('setFileActive', tab.path);
 
         vm.$el.querySelector('.multi-file-tab-close').click();
 

spec/javascripts/ide/components/repo_tabs_spec.js

 import Vue from 'vue';
-import store from 'ee/ide/stores';
 import repoTabs from 'ee/ide/components/repo_tabs.vue';
-import { file, resetStore } from '../helpers';
+import createComponent from '../../helpers/vue_mount_component_helper';
+import { file } from '../helpers';
 
 describe('RepoTabs', () => {
   const openedFiles = [file('open1'), file('open2')];
+  const RepoTabs = Vue.extend(repoTabs);
   let vm;
 
-  function createComponent() {
-    const RepoTabs = Vue.extend(repoTabs);
-
-    return new RepoTabs({
-      store,
-    }).$mount();
-  }
-
   afterEach(() => {
-    resetStore(vm.$store);
+    vm.$destroy();
   });
 
   it('renders a list of tabs', (done) => {
-    vm = createComponent();
+    vm = createComponent(RepoTabs, {
+      files: openedFiles,
+    });
     openedFiles[0].active = true;
-    vm.$store.state.openFiles = openedFiles;
 
     vm.$nextTick(() => {
       const tabs = [...vm.$el.querySelectorAll('.multi-file-tab')];
 
       expect(tabs.length).toEqual(2);
-      expect(tabs[0].classList.contains('active')).toBeTruthy();
-      expect(tabs[1].classList.contains('active')).toBeFalsy();
+      expect(tabs[0].classList.contains('active')).toEqual(true);
+      expect(tabs[1].classList.contains('active')).toEqual(false);
 
       done();
     });