From 2024198da7052b69a206d53a7accc2f9b1291b2f Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Tue, 15 Aug 2017 19:53:41 +0000 Subject: Many Repo Fixes --- .../repo/components/repo_commit_section_spec.js | 58 +++++++++++----------- .../repo/components/repo_edit_button_spec.js | 16 +++--- .../repo/components/repo_file_buttons_spec.js | 18 ++----- spec/javascripts/repo/components/repo_file_spec.js | 6 +-- .../repo/components/repo_loading_file_spec.js | 2 +- .../repo/components/repo_sidebar_spec.js | 1 + spec/javascripts/repo/components/repo_tabs_spec.js | 8 --- 7 files changed, 47 insertions(+), 62 deletions(-) (limited to 'spec/javascripts/repo') diff --git a/spec/javascripts/repo/components/repo_commit_section_spec.js b/spec/javascripts/repo/components/repo_commit_section_spec.js index db2b7d51626..249a2f36fcd 100644 --- a/spec/javascripts/repo/components/repo_commit_section_spec.js +++ b/spec/javascripts/repo/components/repo_commit_section_spec.js @@ -1,57 +1,57 @@ import Vue from 'vue'; import repoCommitSection from '~/repo/components/repo_commit_section.vue'; import RepoStore from '~/repo/stores/repo_store'; -import RepoHelper from '~/repo/helpers/repo_helper'; import Api from '~/api'; describe('RepoCommitSection', () => { const branch = 'master'; const projectUrl = 'projectUrl'; - const openedFiles = [{ + const changedFiles = [{ id: 0, changed: true, url: `/namespace/${projectUrl}/blob/${branch}/dir/file0.ext`, + path: 'dir/file0.ext', newContent: 'a', }, { id: 1, changed: true, url: `/namespace/${projectUrl}/blob/${branch}/dir/file1.ext`, + path: 'dir/file1.ext', newContent: 'b', - }, { + }]; + const openedFiles = changedFiles.concat([{ id: 2, url: `/namespace/${projectUrl}/blob/${branch}/dir/file2.ext`, + path: 'dir/file2.ext', changed: false, - }]; + }]); RepoStore.projectUrl = projectUrl; - function createComponent() { + function createComponent(el) { const RepoCommitSection = Vue.extend(repoCommitSection); - return new RepoCommitSection().$mount(); + return new RepoCommitSection().$mount(el); } it('renders a commit section', () => { RepoStore.isCommitable = true; + RepoStore.currentBranch = branch; RepoStore.targetBranch = branch; RepoStore.openedFiles = openedFiles; - spyOn(RepoHelper, 'getBranch').and.returnValue(branch); - const vm = createComponent(); - const changedFiles = [...vm.$el.querySelectorAll('.changed-files > li')]; + const changedFileElements = [...vm.$el.querySelectorAll('.changed-files > li')]; const commitMessage = vm.$el.querySelector('#commit-message'); - const submitCommit = vm.$el.querySelector('.submit-commit'); + const submitCommit = vm.$refs.submitCommit; const targetBranch = vm.$el.querySelector('.target-branch'); expect(vm.$el.querySelector(':scope > form')).toBeTruthy(); - expect(vm.$el.querySelector('.staged-files').textContent).toEqual('Staged files (2)'); - expect(changedFiles.length).toEqual(2); + expect(vm.$el.querySelector('.staged-files').textContent.trim()).toEqual('Staged files (2)'); + expect(changedFileElements.length).toEqual(2); - changedFiles.forEach((changedFile, i) => { - const filePath = RepoHelper.getFilePathFromFullPath(openedFiles[i].url, branch); - - expect(changedFile.textContent).toEqual(filePath); + changedFileElements.forEach((changedFile, i) => { + expect(changedFile.textContent.trim()).toEqual(changedFiles[i].path); }); expect(commitMessage.tagName).toEqual('TEXTAREA'); @@ -59,9 +59,9 @@ describe('RepoCommitSection', () => { expect(submitCommit.type).toEqual('submit'); expect(submitCommit.disabled).toBeTruthy(); expect(submitCommit.querySelector('.fa-spinner.fa-spin')).toBeFalsy(); - expect(vm.$el.querySelector('.commit-summary').textContent).toEqual('Commit 2 files'); - expect(targetBranch.querySelector(':scope > label').textContent).toEqual('Target branch'); - expect(targetBranch.querySelector('.help-block').textContent).toEqual(branch); + expect(vm.$el.querySelector('.commit-summary').textContent.trim()).toEqual('Commit 2 files'); + expect(targetBranch.querySelector(':scope > label').textContent.trim()).toEqual('Target branch'); + expect(targetBranch.querySelector('.help-block').textContent.trim()).toEqual(branch); }); it('does not render if not isCommitable', () => { @@ -89,14 +89,20 @@ describe('RepoCommitSection', () => { const projectId = 'projectId'; const commitMessage = 'commitMessage'; RepoStore.isCommitable = true; + RepoStore.currentBranch = branch; + RepoStore.targetBranch = branch; RepoStore.openedFiles = openedFiles; RepoStore.projectId = projectId; - spyOn(RepoHelper, 'getBranch').and.returnValue(branch); + // We need to append to body to get form `submit` events working + // Otherwise we run into, "Form submission canceled because the form is not connected" + // See https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#form-submission-algorithm + const el = document.createElement('div'); + document.body.appendChild(el); - const vm = createComponent(); + const vm = createComponent(el); const commitMessageEl = vm.$el.querySelector('#commit-message'); - const submitCommit = vm.$el.querySelector('.submit-commit'); + const submitCommit = vm.$refs.submitCommit; vm.commitMessage = commitMessage; @@ -124,10 +130,8 @@ describe('RepoCommitSection', () => { expect(actions[1].action).toEqual('update'); expect(actions[0].content).toEqual(openedFiles[0].newContent); expect(actions[1].content).toEqual(openedFiles[1].newContent); - expect(actions[0].file_path) - .toEqual(RepoHelper.getFilePathFromFullPath(openedFiles[0].url, branch)); - expect(actions[1].file_path) - .toEqual(RepoHelper.getFilePathFromFullPath(openedFiles[1].url, branch)); + expect(actions[0].file_path).toEqual(openedFiles[0].path); + expect(actions[1].file_path).toEqual(openedFiles[1].path); done(); }); @@ -140,7 +144,6 @@ describe('RepoCommitSection', () => { const vm = { submitCommitsLoading: true, changedFiles: new Array(10), - openedFiles: new Array(10), commitMessage: 'commitMessage', editMode: true, }; @@ -149,7 +152,6 @@ describe('RepoCommitSection', () => { expect(vm.submitCommitsLoading).toEqual(false); expect(vm.changedFiles).toEqual([]); - expect(vm.openedFiles).toEqual([]); expect(vm.commitMessage).toEqual(''); expect(vm.editMode).toEqual(false); }); diff --git a/spec/javascripts/repo/components/repo_edit_button_spec.js b/spec/javascripts/repo/components/repo_edit_button_spec.js index 2e0406cae34..29dc2d21e4b 100644 --- a/spec/javascripts/repo/components/repo_edit_button_spec.js +++ b/spec/javascripts/repo/components/repo_edit_button_spec.js @@ -12,19 +12,21 @@ describe('RepoEditButton', () => { it('renders an edit button that toggles the view state', (done) => { RepoStore.isCommitable = true; RepoStore.changedFiles = []; + RepoStore.binary = false; + RepoStore.openedFiles = [{}, {}]; const vm = createComponent(); expect(vm.$el.tagName).toEqual('BUTTON'); expect(vm.$el.textContent).toMatch('Edit'); - spyOn(vm, 'editClicked').and.callThrough(); + spyOn(vm, 'editCancelClicked').and.callThrough(); spyOn(vm, 'toggleProjectRefsForm'); vm.$el.click(); Vue.nextTick(() => { - expect(vm.editClicked).toHaveBeenCalled(); + expect(vm.editCancelClicked).toHaveBeenCalled(); expect(vm.toggleProjectRefsForm).toHaveBeenCalled(); expect(vm.$el.textContent).toMatch('Cancel edit'); done(); @@ -40,14 +42,10 @@ describe('RepoEditButton', () => { }); describe('methods', () => { - describe('editClicked', () => { - it('sets dialog to open when there are changedFiles', () => { + describe('editCancelClicked', () => { + it('sets dialog to open when there are changedFiles'); - }); - - it('toggles editMode and calls toggleBlobView', () => { - - }); + it('toggles editMode and calls toggleBlobView'); }); }); }); diff --git a/spec/javascripts/repo/components/repo_file_buttons_spec.js b/spec/javascripts/repo/components/repo_file_buttons_spec.js index d15c3e33459..dfab51710c3 100644 --- a/spec/javascripts/repo/components/repo_file_buttons_spec.js +++ b/spec/javascripts/repo/components/repo_file_buttons_spec.js @@ -32,13 +32,13 @@ describe('RepoFileButtons', () => { expect(vm.$el.id).toEqual('repo-file-buttons'); expect(raw.href).toMatch(`/${activeFile.raw_path}`); - expect(raw.textContent).toEqual('Raw'); + expect(raw.textContent.trim()).toEqual('Raw'); expect(blame.href).toMatch(`/${activeFile.blame_path}`); - expect(blame.textContent).toEqual('Blame'); + expect(blame.textContent.trim()).toEqual('Blame'); expect(history.href).toMatch(`/${activeFile.commits_path}`); - expect(history.textContent).toEqual('History'); - expect(vm.$el.querySelector('.permalink').textContent).toEqual('Permalink'); - expect(vm.$el.querySelector('.preview').textContent).toEqual(activeFileLabel); + expect(history.textContent.trim()).toEqual('History'); + expect(vm.$el.querySelector('.permalink').textContent.trim()).toEqual('Permalink'); + expect(vm.$el.querySelector('.preview').textContent.trim()).toEqual(activeFileLabel); }); it('triggers rawPreviewToggle on preview click', () => { @@ -72,12 +72,4 @@ describe('RepoFileButtons', () => { expect(vm.$el.querySelector('.preview')).toBeFalsy(); }); - - it('does not render if not isMini', () => { - RepoStore.openedFiles = []; - - const vm = createComponent(); - - expect(vm.$el.innerHTML).toBeFalsy(); - }); }); diff --git a/spec/javascripts/repo/components/repo_file_spec.js b/spec/javascripts/repo/components/repo_file_spec.js index 90616ae13ca..518a2d25ecf 100644 --- a/spec/javascripts/repo/components/repo_file_spec.js +++ b/spec/javascripts/repo/components/repo_file_spec.js @@ -39,9 +39,9 @@ describe('RepoFile', () => { expect(vm.$el.querySelector(`.${file.icon}`).style.marginLeft).toEqual('100px'); expect(name.title).toEqual(file.url); expect(name.href).toMatch(`/${file.url}`); - expect(name.textContent).toEqual(file.name); - expect(vm.$el.querySelector('.commit-message').textContent).toBe(file.lastCommitMessage); - expect(vm.$el.querySelector('.commit-update').textContent).toBe(updated); + expect(name.textContent.trim()).toEqual(file.name); + expect(vm.$el.querySelector('.commit-message').textContent.trim()).toBe(file.lastCommitMessage); + expect(vm.$el.querySelector('.commit-update').textContent.trim()).toBe(updated); expect(fileIcon.classList.contains(file.icon)).toBeTruthy(); expect(fileIcon.style.marginLeft).toEqual(`${file.level * 10}px`); }); diff --git a/spec/javascripts/repo/components/repo_loading_file_spec.js b/spec/javascripts/repo/components/repo_loading_file_spec.js index d84f4c5609e..a030314d749 100644 --- a/spec/javascripts/repo/components/repo_loading_file_spec.js +++ b/spec/javascripts/repo/components/repo_loading_file_spec.js @@ -13,7 +13,7 @@ describe('RepoLoadingFile', () => { function assertLines(lines) { lines.forEach((line, n) => { const index = n + 1; - expect(line.classList.contains(`line-of-code-${index}`)).toBeTruthy(); + expect(line.classList.contains(`skeleton-line-${index}`)).toBeTruthy(); }); } diff --git a/spec/javascripts/repo/components/repo_sidebar_spec.js b/spec/javascripts/repo/components/repo_sidebar_spec.js index edd27d3afb8..abcff8e537e 100644 --- a/spec/javascripts/repo/components/repo_sidebar_spec.js +++ b/spec/javascripts/repo/components/repo_sidebar_spec.js @@ -15,6 +15,7 @@ describe('RepoSidebar', () => { RepoStore.files = [{ id: 0, }]; + RepoStore.openedFiles = []; const vm = createComponent(); const thead = vm.$el.querySelector('thead'); const tbody = vm.$el.querySelector('tbody'); diff --git a/spec/javascripts/repo/components/repo_tabs_spec.js b/spec/javascripts/repo/components/repo_tabs_spec.js index 306af735dee..a02b54efafc 100644 --- a/spec/javascripts/repo/components/repo_tabs_spec.js +++ b/spec/javascripts/repo/components/repo_tabs_spec.js @@ -29,14 +29,6 @@ describe('RepoTabs', () => { expect(tabs[2].classList.contains('tabs-divider')).toBeTruthy(); }); - it('does not render a tabs list if not isMini', () => { - RepoStore.openedFiles = []; - - const vm = createComponent(); - - expect(vm.$el.innerHTML).toBeFalsy(); - }); - describe('methods', () => { describe('tabClosed', () => { it('calls removeFromOpenedFiles with file obj', () => { -- cgit v1.2.1