diff options
-rw-r--r-- | app/assets/javascripts/repo/components/repo_sidebar.vue | 59 | ||||
-rw-r--r-- | spec/javascripts/repo/components/repo_sidebar_spec.js | 26 |
2 files changed, 48 insertions, 37 deletions
diff --git a/app/assets/javascripts/repo/components/repo_sidebar.vue b/app/assets/javascripts/repo/components/repo_sidebar.vue index f741a8d46bc..9d3e20a195b 100644 --- a/app/assets/javascripts/repo/components/repo_sidebar.vue +++ b/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) { diff --git a/spec/javascripts/repo/components/repo_sidebar_spec.js b/spec/javascripts/repo/components/repo_sidebar_spec.js index 9959d23a07d..07ad995479a 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(); }); @@ -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); }); }); }); |