Fixed Repo Sidebar Tests

app/assets/javascripts/repo/components/repo_sidebar.vue

@@ -18,14 +18,16 @@ export default {
   },
 
   created() {
-    this.addPopEventListener();
+    window.addEventListener('popstate', this.checkHistory);
+  },
+  destroyed() {
+    window.removeEventListener('popstate', this.checkHistory);
   },
 
   data: () => Store,
 
   methods: {
-    addPopEventListener() {
-      window.addEventListener('popstate', () => {
+    checkHistory() {
       let selectedFile = this.files.find(file => location.pathname.indexOf(file.url) > -1);
       if (!selectedFile) {
         // Maybe it is not in the current tree but in the opened tabs
@@ -56,7 +58,6 @@ export default {
           url: location.href,
         });
       }
-      });
     },
 
     fileClicked(clickedFile) {

spec/javascripts/repo/components/repo_sidebar_spec.js

@@ -5,18 +5,26 @@ import RepoStore from '~/repo/stores/repo_store';
 import repoSidebar from '~/repo/components/repo_sidebar.vue';
 
 describe('RepoSidebar', () => {
+  let vm;
+
   function createComponent() {
     const RepoSidebar = Vue.extend(repoSidebar);
 
     return new RepoSidebar().$mount();
   }
 
+  afterEach(() => {
+    vm.$destroy();
+  });
+
   it('renders a sidebar', () => {
     RepoStore.files = [{
       id: 0,
     }];
     RepoStore.openedFiles = [];
-    const vm = createComponent();
+    RepoStore.isRoot = false;
+
+    vm = createComponent();
     const thead = vm.$el.querySelector('thead');
     const tbody = vm.$el.querySelector('tbody');
 
@@ -35,7 +43,7 @@ describe('RepoSidebar', () => {
     RepoStore.openedFiles = [{
       id: 0,
     }];
-    const vm = createComponent();
+    vm = createComponent();
 
     expect(vm.$el.classList.contains('sidebar-mini')).toBeTruthy();
     expect(vm.$el.querySelector('thead')).toBeFalsy();
@@ -47,7 +55,7 @@ describe('RepoSidebar', () => {
       tree: true,
     };
     RepoStore.files = [];
-    const vm = createComponent();
+    vm = createComponent();
 
     expect(vm.$el.querySelectorAll('tbody .loading-file').length).toEqual(5);
   });
@@ -57,7 +65,7 @@ describe('RepoSidebar', () => {
       id: 0,
     }];
     RepoStore.isRoot = true;
-    const vm = createComponent();
+    vm = createComponent();
 
     expect(vm.$el.querySelector('tbody .prev-directory')).toBeTruthy();
   });
@@ -103,7 +111,7 @@ describe('RepoSidebar', () => {
         };
         RepoStore.files = [file1];
         RepoStore.isRoot = true;
-        const vm = createComponent();
+        vm = createComponent();
 
         vm.fileClicked(file1);
 
@@ -114,7 +122,7 @@ describe('RepoSidebar', () => {
     describe('goToPreviousDirectoryClicked', () => {
       it('should hide files in directory if already open', () => {
         const prevUrl = 'foo/bar';
-        const vm = createComponent();
+        vm = createComponent();
 
         vm.goToPreviousDirectoryClicked(prevUrl);
 
@@ -135,13 +143,15 @@ describe('RepoSidebar', () => {
       RepoStore.openedFiles = [file1, file2];
       RepoStore.isRoot = true;
 
-      const vm = createComponent();
+      vm = createComponent();
       vm.fileClicked(file1);
 
       it('render previous file when using back button', () => {
         spyOn(Helper, 'getContent').and.callThrough();
+
         vm.fileClicked(file2);
         expect(Helper.getContent).toHaveBeenCalledWith(file2);
+        Helper.getContent.calls.reset();
 
         history.pushState({
           key: Math.random(),
@@ -150,7 +160,7 @@ describe('RepoSidebar', () => {
         popEvent.initEvent('popstate', true, true);
         window.dispatchEvent(popEvent);
 
-        expect(Helper.getContent).toHaveBeenCalledWith(file1);
+        expect(Helper.getContent.calls.mostRecent().args[0].url).toContain(file1.url);
       });
     });
   });