Fixed Repo Sidebar Tests

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

@@ -18,45 +18,46 @@ export default {
   },
 
   created() {
-    this.addPopEventListener();
+    window.addEventListener('popstate', this.checkHistory);
+  },
+  destroyed() {
+    window.removeEventListener('popstate', this.checkHistory);
   },
 
   data: () => Store,
 
   methods: {
-    addPopEventListener() {
-      window.addEventListener('popstate', () => {
-        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
-          selectedFile = Store.openedFiles.find(file => location.pathname.indexOf(file.url) > -1);
+    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
+        selectedFile = Store.openedFiles.find(file => location.pathname.indexOf(file.url) > -1);
+      }
+      if (selectedFile) {
+        if (selectedFile.url !== this.activeFile.url) {
+          this.fileClicked(selectedFile);
         }
-        if (selectedFile) {
-          if (selectedFile.url !== this.activeFile.url) {
-            this.fileClicked(selectedFile);
-          }
 
-          if (location.hash.indexOf('#L') > -1) {
-            const lineNumber = Number(location.hash.substr(2));
-            if (!isNaN(lineNumber)) {
-              Store.setActiveLine(lineNumber);
-              if (Store.isPreviewView()) {
-                document.getElementById(`L${lineNumber}`).scrollIntoView();
-              } else {
-                Helper.monacoInstance.setPosition({
-                  lineNumber: this.activeLine,
-                  column: 1,
-                });
-              }
+        if (location.hash.indexOf('#L') > -1) {
+          const lineNumber = Number(location.hash.substr(2));
+          if (!isNaN(lineNumber)) {
+            Store.setActiveLine(lineNumber);
+            if (Store.isPreviewView()) {
+              document.getElementById(`L${lineNumber}`).scrollIntoView();
+            } else {
+              Helper.monacoInstance.setPosition({
+                lineNumber: this.activeLine,
+                column: 1,
+              });
             }
           }
-        } else {
-          // Not opened at all lets open new tab
-          this.fileClicked({
-            url: location.href,
-          });
         }
-      });
+      } else {
+        // Not opened at all lets open new tab
+        this.fileClicked({
+          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);
       });
     });
   });