Merge branch 'ide-fix-back-btn' into 'master'

Repo Editor : Fixes Back Button for files + line number jumping for preview and editor

See merge request gitlab-org/gitlab-ce!14508

3 files changed, 62 insertions, 15 deletions

diff --git a/spec/javascripts/repo/components/repo_file_spec.js b/spec/javascripts/repo/components/repo_file_spec.js
index f15633bd8b9..620b604f404 100644
--- a/spec/javascripts/repo/components/repo_file_spec.js
+++ b/spec/javascripts/repo/components/repo_file_spec.js
@@ -29,15 +29,17 @@ describe('RepoFile', () => {
     }).$mount();
   }
 
-  beforeEach(() => {
-    spyOn(repoFile.mixins[0].methods, 'timeFormated').and.returnValue(updated);
-  });
-
   it('renders link, icon, name and last commit details', () => {
-    const vm = createComponent({
-      file,
-      activeFile,
+    const RepoFile = Vue.extend(repoFile);
+    const vm = new RepoFile({
+      propsData: {
+        file,
+        activeFile,
+      },
     });
+    spyOn(vm, 'timeFormated').and.returnValue(updated);
+    vm.$mount();
+
     const name = vm.$el.querySelector('.repo-file-name');
     const fileIcon = vm.$el.querySelector('.file-icon');
 
diff --git a/spec/javascripts/repo/components/repo_sidebar_spec.js b/spec/javascripts/repo/components/repo_sidebar_spec.js
index 23c10ea022e..35d2b37ac2a 100644
--- a/spec/javascripts/repo/components/repo_sidebar_spec.js
+++ b/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();
   });
@@ -72,7 +80,7 @@ describe('RepoSidebar', () => {
         };
         RepoStore.files = [file1];
         RepoStore.isRoot = true;
-        const vm = createComponent();
+        vm = createComponent();
 
         vm.fileClicked(file1);
 
@@ -87,7 +95,7 @@ describe('RepoSidebar', () => {
 
         spyOn(Helper, 'getFileFromPath').and.returnValue(file);
         spyOn(RepoStore, 'setActiveFiles');
-        const vm = createComponent();
+        vm = createComponent();
         vm.fileClicked(file);
 
         expect(RepoStore.setActiveFiles).toHaveBeenCalledWith(file);
@@ -103,7 +111,7 @@ describe('RepoSidebar', () => {
         };
         RepoStore.files = [file1];
         RepoStore.isRoot = true;
-        const vm = createComponent();
+        vm = createComponent();
 
         vm.fileClicked(file1);
 
@@ -114,12 +122,48 @@ 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);
 
         expect(RepoService.url).toEqual(prevUrl);
       });
     });
+
+    describe('back button', () => {
+      const file1 = {
+        id: 1,
+        url: 'file1',
+      };
+      const file2 = {
+        id: 2,
+        url: 'file2',
+      };
+      RepoStore.files = [file1, file2];
+      RepoStore.openedFiles = [file1, file2];
+      RepoStore.isRoot = true;
+
+      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(),
+        }, '', file1.url);
+        const popEvent = document.createEvent('Event');
+        popEvent.initEvent('popstate', true, true);
+        window.dispatchEvent(popEvent);
+
+        expect(Helper.getContent.calls.mostRecent().args[0].url).toContain(file1.url);
+
+        window.history.pushState({}, null, '/');
+      });
+    });
   });
 });
diff --git a/spec/javascripts/vue_mr_widget/services/mr_widget_service_spec.js b/spec/javascripts/vue_mr_widget/services/mr_widget_service_spec.js
index b63633c03b8..e667b4b3677 100644
--- a/spec/javascripts/vue_mr_widget/services/mr_widget_service_spec.js
+++ b/spec/javascripts/vue_mr_widget/services/mr_widget_service_spec.js
@@ -31,6 +31,7 @@ describe('MRWidgetService', () => {
   });
 
   it('should have methods defined', () => {
+    window.history.pushState({}, null, '/');
     const service = new MRWidgetService(mr);
 
     expect(service.merge()).toBeDefined();