diff options
Diffstat (limited to 'spec/javascripts/repo/components')
13 files changed, 522 insertions, 282 deletions
diff --git a/spec/javascripts/repo/components/new_branch_form_spec.js b/spec/javascripts/repo/components/new_branch_form_spec.js new file mode 100644 index 00000000000..c9c5ce096fc --- /dev/null +++ b/spec/javascripts/repo/components/new_branch_form_spec.js @@ -0,0 +1,122 @@ +import Vue from 'vue'; +import newBranchForm from '~/repo/components/new_branch_form.vue'; +import eventHub from '~/repo/event_hub'; +import RepoStore from '~/repo/stores/repo_store'; +import createComponent from '../../helpers/vue_mount_component_helper'; + +describe('Multi-file editor new branch form', () => { + let vm; + + beforeEach(() => { + const Component = Vue.extend(newBranchForm); + + RepoStore.currentBranch = 'master'; + + vm = createComponent(Component, { + currentBranch: RepoStore.currentBranch, + }); + }); + + afterEach(() => { + vm.$destroy(); + + RepoStore.currentBranch = ''; + }); + + describe('template', () => { + it('renders submit as disabled', () => { + expect(vm.$el.querySelector('.btn').getAttribute('disabled')).toBe('disabled'); + }); + + it('enables the submit button when branch is not empty', (done) => { + vm.branchName = 'testing'; + + Vue.nextTick(() => { + expect(vm.$el.querySelector('.btn').getAttribute('disabled')).toBeNull(); + + done(); + }); + }); + + it('displays current branch creating from', (done) => { + Vue.nextTick(() => { + expect(vm.$el.querySelector('p').textContent.replace(/\s+/g, ' ').trim()).toBe('Create from: master'); + + done(); + }); + }); + }); + + describe('submitNewBranch', () => { + it('sets to loading', () => { + vm.submitNewBranch(); + + expect(vm.loading).toBeTruthy(); + }); + + it('hides current flash element', (done) => { + vm.$refs.flashContainer.innerHTML = '<div class="flash-alert"></div>'; + + vm.submitNewBranch(); + + Vue.nextTick(() => { + expect(vm.$el.querySelector('.flash-alert')).toBeNull(); + + done(); + }); + }); + + it('emits an event with branchName', () => { + spyOn(eventHub, '$emit'); + + vm.branchName = 'testing'; + + vm.submitNewBranch(); + + expect(eventHub.$emit).toHaveBeenCalledWith('createNewBranch', 'testing'); + }); + }); + + describe('showErrorMessage', () => { + it('sets loading to false', () => { + vm.loading = true; + + vm.showErrorMessage(); + + expect(vm.loading).toBeFalsy(); + }); + + it('creates flash element', () => { + vm.showErrorMessage('error message'); + + expect(vm.$el.querySelector('.flash-alert')).not.toBeNull(); + expect(vm.$el.querySelector('.flash-alert').textContent.trim()).toBe('error message'); + }); + }); + + describe('createdNewBranch', () => { + it('set loading to false', () => { + vm.loading = true; + + vm.createdNewBranch(); + + expect(vm.loading).toBeFalsy(); + }); + + it('resets branch name', () => { + vm.branchName = 'testing'; + + vm.createdNewBranch(); + + expect(vm.branchName).toBe(''); + }); + + it('sets the dropdown toggle text', () => { + vm.dropdownText = document.createElement('span'); + + vm.createdNewBranch('branch name'); + + expect(vm.dropdownText.textContent).toBe('branch name'); + }); + }); +}); diff --git a/spec/javascripts/repo/components/repo_commit_section_spec.js b/spec/javascripts/repo/components/repo_commit_section_spec.js index e604dcc152d..e09d593f04c 100644 --- a/spec/javascripts/repo/components/repo_commit_section_spec.js +++ b/spec/javascripts/repo/components/repo_commit_section_spec.js @@ -2,29 +2,13 @@ import Vue from 'vue'; import repoCommitSection from '~/repo/components/repo_commit_section.vue'; import RepoStore from '~/repo/stores/repo_store'; import RepoService from '~/repo/services/repo_service'; +import getSetTimeoutPromise from '../../helpers/set_timeout_promise_helper'; describe('RepoCommitSection', () => { const branch = 'master'; const projectUrl = 'projectUrl'; - 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, - }]); + let changedFiles; + let openedFiles; RepoStore.projectUrl = projectUrl; @@ -34,6 +18,29 @@ describe('RepoCommitSection', () => { return new RepoCommitSection().$mount(el); } + beforeEach(() => { + // Create a copy for each test because these can get modified directly + 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', + }]; + openedFiles = changedFiles.concat([{ + id: 2, + url: `/namespace/${projectUrl}/blob/${branch}/dir/file2.ext`, + path: 'dir/file2.ext', + changed: false, + }]); + }); + it('renders a commit section', () => { RepoStore.isCommitable = true; RepoStore.currentBranch = branch; @@ -85,55 +92,105 @@ describe('RepoCommitSection', () => { expect(vm.$el.innerHTML).toBeFalsy(); }); - it('shows commit submit and summary if commitMessage and spinner if submitCommitsLoading', (done) => { + describe('when submitting', () => { + let el; + let vm; const projectId = 'projectId'; const commitMessage = 'commitMessage'; - RepoStore.isCommitable = true; - RepoStore.currentBranch = branch; - RepoStore.targetBranch = branch; - RepoStore.openedFiles = openedFiles; - RepoStore.projectId = projectId; - // 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(el); - const commitMessageEl = vm.$el.querySelector('#commit-message'); - const submitCommit = vm.$refs.submitCommit; + beforeEach((done) => { + RepoStore.isCommitable = true; + RepoStore.currentBranch = branch; + RepoStore.targetBranch = branch; + RepoStore.openedFiles = openedFiles; + RepoStore.projectId = projectId; + + // 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 + el = document.createElement('div'); + document.body.appendChild(el); + + vm = createComponent(el); + vm.commitMessage = commitMessage; + + spyOn(vm, 'tryCommit').and.callThrough(); + spyOn(vm, 'redirectToNewMr').and.stub(); + spyOn(vm, 'redirectToBranch').and.stub(); + spyOn(RepoService, 'commitFiles').and.returnValue(Promise.resolve()); + spyOn(RepoService, 'getBranch').and.returnValue(Promise.resolve({ + commit: { + id: 1, + short_id: 1, + }, + })); + + // Wait for the vm data to be in place + Vue.nextTick(() => { + done(); + }); + }); - vm.commitMessage = commitMessage; + afterEach(() => { + vm.$destroy(); + el.remove(); + RepoStore.openedFiles = []; + }); - Vue.nextTick(() => { + it('shows commit message', () => { + const commitMessageEl = vm.$el.querySelector('#commit-message'); expect(commitMessageEl.value).toBe(commitMessage); - expect(submitCommit.disabled).toBeFalsy(); + }); - spyOn(vm, 'makeCommit').and.callThrough(); - spyOn(RepoService, 'commitFiles').and.callFake(() => Promise.resolve()); + it('allows you to submit', () => { + const submitCommit = vm.$refs.submitCommit; + expect(submitCommit.disabled).toBeFalsy(); + }); + it('shows commit submit and summary if commitMessage and spinner if submitCommitsLoading', (done) => { + const submitCommit = vm.$refs.submitCommit; submitCommit.click(); - Vue.nextTick(() => { - expect(vm.makeCommit).toHaveBeenCalled(); - expect(submitCommit.querySelector('.fa-spinner.fa-spin')).toBeTruthy(); - - const args = RepoService.commitFiles.calls.allArgs()[0]; - const { commit_message, actions, branch: payloadBranch } = args[0]; - - expect(commit_message).toBe(commitMessage); - expect(actions.length).toEqual(2); - expect(payloadBranch).toEqual(branch); - expect(actions[0].action).toEqual('update'); - 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(openedFiles[0].path); - expect(actions[1].file_path).toEqual(openedFiles[1].path); + // Wait for the branch check to finish + getSetTimeoutPromise() + .then(() => Vue.nextTick()) + .then(() => { + expect(vm.tryCommit).toHaveBeenCalled(); + expect(submitCommit.querySelector('.js-commit-loading-icon')).toBeTruthy(); + expect(vm.redirectToBranch).toHaveBeenCalled(); + + const args = RepoService.commitFiles.calls.allArgs()[0]; + const { commit_message, actions, branch: payloadBranch } = args[0]; + + expect(commit_message).toBe(commitMessage); + expect(actions.length).toEqual(2); + expect(payloadBranch).toEqual(branch); + expect(actions[0].action).toEqual('update'); + 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(openedFiles[0].path); + expect(actions[1].file_path).toEqual(openedFiles[1].path); + }) + .then(done) + .catch(done.fail); + }); - done(); - }); + it('redirects to MR creation page if start new MR checkbox checked', (done) => { + vm.startNewMR = true; + + Vue.nextTick() + .then(() => { + const submitCommit = vm.$refs.submitCommit; + submitCommit.click(); + }) + // Wait for the branch check to finish + .then(() => getSetTimeoutPromise()) + .then(() => { + expect(vm.redirectToNewMr).toHaveBeenCalled(); + }) + .then(done) + .catch(done.fail); }); }); @@ -143,6 +200,7 @@ describe('RepoCommitSection', () => { const vm = { submitCommitsLoading: true, changedFiles: new Array(10), + openedFiles: new Array(3), commitMessage: 'commitMessage', editMode: true, }; diff --git a/spec/javascripts/repo/components/repo_edit_button_spec.js b/spec/javascripts/repo/components/repo_edit_button_spec.js index 411514009dc..dff2fac191d 100644 --- a/spec/javascripts/repo/components/repo_edit_button_spec.js +++ b/spec/javascripts/repo/components/repo_edit_button_spec.js @@ -9,6 +9,10 @@ describe('RepoEditButton', () => { return new RepoEditButton().$mount(); } + afterEach(() => { + RepoStore.openedFiles = []; + }); + it('renders an edit button that toggles the view state', (done) => { RepoStore.isCommitable = true; RepoStore.changedFiles = []; @@ -38,12 +42,4 @@ describe('RepoEditButton', () => { expect(vm.$el.innerHTML).toBeUndefined(); }); - - describe('methods', () => { - describe('editCancelClicked', () => { - it('sets dialog to open when there are changedFiles'); - - it('toggles editMode and calls toggleBlobView'); - }); - }); }); diff --git a/spec/javascripts/repo/components/repo_editor_spec.js b/spec/javascripts/repo/components/repo_editor_spec.js index 85d55d171f9..a25a600b3be 100644 --- a/spec/javascripts/repo/components/repo_editor_spec.js +++ b/spec/javascripts/repo/components/repo_editor_spec.js @@ -1,4 +1,5 @@ import Vue from 'vue'; +import RepoStore from '~/repo/stores/repo_store'; import repoEditor from '~/repo/components/repo_editor.vue'; describe('RepoEditor', () => { @@ -8,6 +9,10 @@ describe('RepoEditor', () => { this.vm = new RepoEditor().$mount(); }); + afterEach(() => { + RepoStore.openedFiles = []; + }); + it('renders an ide container', (done) => { this.vm.openedFiles = ['idiidid']; this.vm.binary = false; diff --git a/spec/javascripts/repo/components/repo_file_buttons_spec.js b/spec/javascripts/repo/components/repo_file_buttons_spec.js index dfab51710c3..701c260224f 100644 --- a/spec/javascripts/repo/components/repo_file_buttons_spec.js +++ b/spec/javascripts/repo/components/repo_file_buttons_spec.js @@ -9,6 +9,10 @@ describe('RepoFileButtons', () => { return new RepoFileButtons().$mount(); } + afterEach(() => { + RepoStore.openedFiles = []; + }); + it('renders Raw, Blame, History, Permalink and Preview toggle', () => { const activeFile = { extension: 'md', diff --git a/spec/javascripts/repo/components/repo_file_options_spec.js b/spec/javascripts/repo/components/repo_file_options_spec.js deleted file mode 100644 index 9759b4bf12d..00000000000 --- a/spec/javascripts/repo/components/repo_file_options_spec.js +++ /dev/null @@ -1,33 +0,0 @@ -import Vue from 'vue'; -import repoFileOptions from '~/repo/components/repo_file_options.vue'; - -describe('RepoFileOptions', () => { - const projectName = 'projectName'; - - function createComponent(propsData) { - const RepoFileOptions = Vue.extend(repoFileOptions); - - return new RepoFileOptions({ - propsData, - }).$mount(); - } - - it('renders the title and new file/folder buttons if isMini is true', () => { - const vm = createComponent({ - isMini: true, - projectName, - }); - - expect(vm.$el.classList.contains('repo-file-options')).toBeTruthy(); - expect(vm.$el.querySelector('.title').textContent).toEqual(projectName); - }); - - it('does not render if isMini is false', () => { - const vm = createComponent({ - isMini: false, - projectName, - }); - - 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 620b604f404..107f6797f8a 100644 --- a/spec/javascripts/repo/components/repo_file_spec.js +++ b/spec/javascripts/repo/components/repo_file_spec.js @@ -1,21 +1,11 @@ import Vue from 'vue'; import repoFile from '~/repo/components/repo_file.vue'; import RepoStore from '~/repo/stores/repo_store'; +import eventHub from '~/repo/event_hub'; +import { file } from '../mock_data'; describe('RepoFile', () => { const updated = 'updated'; - const file = { - icon: 'icon', - url: 'url', - name: 'name', - lastCommitMessage: 'message', - lastCommitUpdate: Date.now(), - level: 10, - }; - const activeFile = { - pageTitle: 'pageTitle', - url: 'url', - }; const otherFile = { html: '<p class="file-content">html</p>', pageTitle: 'otherpageTitle', @@ -29,12 +19,15 @@ describe('RepoFile', () => { }).$mount(); } + beforeEach(() => { + RepoStore.openedFiles = []; + }); + it('renders link, icon, name and last commit details', () => { const RepoFile = Vue.extend(repoFile); const vm = new RepoFile({ propsData: { - file, - activeFile, + file: file(), }, }); spyOn(vm, 'timeFormated').and.returnValue(updated); @@ -43,28 +36,20 @@ describe('RepoFile', () => { const name = vm.$el.querySelector('.repo-file-name'); const fileIcon = vm.$el.querySelector('.file-icon'); - expect(vm.$el.classList.contains('active')).toBeTruthy(); - 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.trim()).toEqual(file.name); - expect(vm.$el.querySelector('.commit-message').textContent.trim()).toBe(file.lastCommitMessage); + expect(vm.$el.querySelector(`.${vm.file.icon}`).style.marginLeft).toEqual('0px'); + expect(name.href).toMatch(`/${vm.file.url}`); + expect(name.textContent.trim()).toEqual(vm.file.name); + expect(vm.$el.querySelector('.commit-message').textContent.trim()).toBe(vm.file.lastCommit.message); 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`); + expect(fileIcon.classList.contains(vm.file.icon)).toBeTruthy(); + expect(fileIcon.style.marginLeft).toEqual(`${vm.file.level * 10}px`); }); it('does render if hasFiles is true and is loading tree', () => { const vm = createComponent({ - file, - activeFile, - loading: { - tree: true, - }, - hasFiles: true, + file: file(), }); - expect(vm.$el.innerHTML).toBeTruthy(); expect(vm.$el.querySelector('.fa-spin.fa-spinner')).toBeFalsy(); }); @@ -75,75 +60,77 @@ describe('RepoFile', () => { }); it('renders a spinner if the file is loading', () => { - file.loading = true; + const f = file(); + f.loading = true; const vm = createComponent({ - file, - activeFile, - loading: { - tree: true, - }, - hasFiles: true, + file: f, }); - expect(vm.$el.innerHTML).toBeTruthy(); - expect(vm.$el.querySelector('.fa-spin.fa-spinner').style.marginLeft).toEqual(`${file.level * 10}px`); - }); - - it('does not render if loading tree', () => { - const vm = createComponent({ - file, - activeFile, - loading: { - tree: true, - }, - }); - - expect(vm.$el.innerHTML).toBeFalsy(); + expect(vm.$el.querySelector('.fa-spin.fa-spinner')).not.toBeNull(); + expect(vm.$el.querySelector('.fa-spin.fa-spinner').style.marginLeft).toEqual(`${vm.file.level * 16}px`); }); it('does not render commit message and datetime if mini', () => { + RepoStore.openedFiles.push(file()); + const vm = createComponent({ - file, - activeFile, - isMini: true, + file: file(), }); expect(vm.$el.querySelector('.commit-message')).toBeFalsy(); expect(vm.$el.querySelector('.commit-update')).toBeFalsy(); }); - it('does not set active class if file is active file', () => { + it('fires linkClicked when the link is clicked', () => { const vm = createComponent({ - file, - activeFile: {}, + file: file(), }); - expect(vm.$el.classList.contains('active')).toBeFalsy(); + spyOn(vm, 'linkClicked'); + + vm.$el.click(); + + expect(vm.linkClicked).toHaveBeenCalledWith(vm.file); }); - it('fires linkClicked when the link is clicked', () => { - const vm = createComponent({ - file, - activeFile, + describe('submodule', () => { + let f; + let vm; + + beforeEach(() => { + f = file('submodule name', '123456789'); + f.type = 'submodule'; + + vm = createComponent({ + file: f, + }); }); - spyOn(vm, 'linkClicked'); + afterEach(() => { + vm.$destroy(); + }); - vm.$el.querySelector('.repo-file-name').click(); + it('renders submodule short ID', () => { + expect(vm.$el.querySelector('.commit-sha').textContent.trim()).toBe('12345678'); + }); - expect(vm.linkClicked).toHaveBeenCalledWith(file); + it('renders ID next to submodule name', () => { + expect(vm.$el.querySelector('td').textContent.replace(/\s+/g, ' ')).toContain('submodule name @ 12345678'); + }); }); describe('methods', () => { describe('linkClicked', () => { - const vm = jasmine.createSpyObj('vm', ['$emit']); + it('$emits fileNameClicked with file obj', () => { + spyOn(eventHub, '$emit'); - it('$emits linkclicked with file obj', () => { - const theFile = {}; + const vm = createComponent({ + file: file(), + }); - repoFile.methods.linkClicked.call(vm, theFile); + vm.linkClicked(vm.file); - expect(vm.$emit).toHaveBeenCalledWith('linkclicked', theFile); + expect(eventHub.$emit).toHaveBeenCalledWith('fileNameClicked', vm.file); }); }); }); diff --git a/spec/javascripts/repo/components/repo_loading_file_spec.js b/spec/javascripts/repo/components/repo_loading_file_spec.js index a030314d749..e9f95a02028 100644 --- a/spec/javascripts/repo/components/repo_loading_file_spec.js +++ b/spec/javascripts/repo/components/repo_loading_file_spec.js @@ -1,4 +1,5 @@ import Vue from 'vue'; +import RepoStore from '~/repo/stores/repo_store'; import repoLoadingFile from '~/repo/components/repo_loading_file.vue'; describe('RepoLoadingFile', () => { @@ -28,6 +29,10 @@ describe('RepoLoadingFile', () => { }); } + afterEach(() => { + RepoStore.openedFiles = []; + }); + it('renders 3 columns of animated LoC', () => { const vm = createComponent({ loading: { @@ -42,38 +47,16 @@ describe('RepoLoadingFile', () => { }); it('renders 1 column of animated LoC if isMini', () => { + RepoStore.openedFiles = new Array(1); const vm = createComponent({ loading: { tree: true, }, hasFiles: false, - isMini: true, }); const columns = [...vm.$el.querySelectorAll('td')]; expect(columns.length).toEqual(1); assertColumns(columns); }); - - it('does not render if tree is not loading', () => { - const vm = createComponent({ - loading: { - tree: false, - }, - hasFiles: false, - }); - - expect(vm.$el.innerHTML).toBeFalsy(); - }); - - it('does not render if hasFiles is true', () => { - const vm = createComponent({ - loading: { - tree: true, - }, - hasFiles: true, - }); - - expect(vm.$el.innerHTML).toBeFalsy(); - }); }); diff --git a/spec/javascripts/repo/components/repo_prev_directory_spec.js b/spec/javascripts/repo/components/repo_prev_directory_spec.js index 34dde545e6a..4c064f21084 100644 --- a/spec/javascripts/repo/components/repo_prev_directory_spec.js +++ b/spec/javascripts/repo/components/repo_prev_directory_spec.js @@ -1,5 +1,6 @@ import Vue from 'vue'; import repoPrevDirectory from '~/repo/components/repo_prev_directory.vue'; +import eventHub from '~/repo/event_hub'; describe('RepoPrevDirectory', () => { function createComponent(propsData) { @@ -20,7 +21,7 @@ describe('RepoPrevDirectory', () => { spyOn(vm, 'linkClicked'); expect(link.href).toMatch(`/${prevUrl}`); - expect(link.textContent).toEqual('..'); + expect(link.textContent).toEqual('...'); link.click(); @@ -29,14 +30,17 @@ describe('RepoPrevDirectory', () => { describe('methods', () => { describe('linkClicked', () => { - const vm = jasmine.createSpyObj('vm', ['$emit']); + it('$emits linkclicked with prevUrl', () => { + const prevUrl = 'prevUrl'; + const vm = createComponent({ + prevUrl, + }); - it('$emits linkclicked with file obj', () => { - const file = {}; + spyOn(eventHub, '$emit'); - repoPrevDirectory.methods.linkClicked.call(vm, file); + vm.linkClicked(prevUrl); - expect(vm.$emit).toHaveBeenCalledWith('linkclicked', file); + expect(eventHub.$emit).toHaveBeenCalledWith('goToPreviousDirectoryClicked', prevUrl); }); }); }); diff --git a/spec/javascripts/repo/components/repo_sidebar_spec.js b/spec/javascripts/repo/components/repo_sidebar_spec.js index 35d2b37ac2a..148f275e03d 100644 --- a/spec/javascripts/repo/components/repo_sidebar_spec.js +++ b/spec/javascripts/repo/components/repo_sidebar_spec.js @@ -3,6 +3,7 @@ import Helper from '~/repo/helpers/repo_helper'; import RepoService from '~/repo/services/repo_service'; import RepoStore from '~/repo/stores/repo_store'; import repoSidebar from '~/repo/components/repo_sidebar.vue'; +import { file } from '../mock_data'; describe('RepoSidebar', () => { let vm; @@ -15,14 +16,15 @@ describe('RepoSidebar', () => { afterEach(() => { vm.$destroy(); + + RepoStore.files = []; + RepoStore.openedFiles = []; }); it('renders a sidebar', () => { - RepoStore.files = [{ - id: 0, - }]; + RepoStore.files = [file()]; RepoStore.openedFiles = []; - RepoStore.isRoot = false; + RepoStore.isRoot = true; vm = createComponent(); const thead = vm.$el.querySelector('thead'); @@ -30,9 +32,9 @@ describe('RepoSidebar', () => { expect(vm.$el.id).toEqual('sidebar'); expect(vm.$el.classList.contains('sidebar-mini')).toBeFalsy(); - expect(thead.querySelector('.name').textContent).toEqual('Name'); - expect(thead.querySelector('.last-commit').textContent).toEqual('Last commit'); - expect(thead.querySelector('.last-update').textContent).toEqual('Last update'); + expect(thead.querySelector('.name').textContent.trim()).toEqual('Name'); + expect(thead.querySelector('.last-commit').textContent.trim()).toEqual('Last commit'); + expect(thead.querySelector('.last-update').textContent.trim()).toEqual('Last update'); expect(tbody.querySelector('.repo-file-options')).toBeFalsy(); expect(tbody.querySelector('.prev-directory')).toBeFalsy(); expect(tbody.querySelector('.loading-file')).toBeFalsy(); @@ -46,76 +48,89 @@ describe('RepoSidebar', () => { vm = createComponent(); expect(vm.$el.classList.contains('sidebar-mini')).toBeTruthy(); - expect(vm.$el.querySelector('thead')).toBeFalsy(); - expect(vm.$el.querySelector('tbody .repo-file-options')).toBeTruthy(); + expect(vm.$el.querySelector('thead')).toBeTruthy(); + expect(vm.$el.querySelector('thead .repo-file-options')).toBeTruthy(); }); it('renders 5 loading files if tree is loading and not hasFiles', () => { - RepoStore.loading = { - tree: true, - }; + RepoStore.loading.tree = true; RepoStore.files = []; vm = createComponent(); expect(vm.$el.querySelectorAll('tbody .loading-file').length).toEqual(5); }); - it('renders a prev directory if isRoot', () => { - RepoStore.files = [{ - id: 0, - }]; - RepoStore.isRoot = true; + it('renders a prev directory if is not root', () => { + RepoStore.files = [file()]; + RepoStore.isRoot = false; + RepoStore.loading.tree = false; vm = createComponent(); expect(vm.$el.querySelector('tbody .prev-directory')).toBeTruthy(); }); + describe('flattendFiles', () => { + it('returns a flattend array of files', () => { + const f = file(); + f.files.push(file('testing 123')); + const files = [f, file()]; + vm = createComponent(); + vm.files = files; + + expect(vm.flattendFiles.length).toBe(3); + expect(vm.flattendFiles[1].name).toBe('testing 123'); + }); + }); + describe('methods', () => { describe('fileClicked', () => { it('should fetch data for new file', () => { spyOn(Helper, 'getContent').and.callThrough(); - const file1 = { - id: 0, - url: '', - }; - RepoStore.files = [file1]; + RepoStore.files = [file()]; RepoStore.isRoot = true; vm = createComponent(); - vm.fileClicked(file1); + vm.fileClicked(RepoStore.files[0]); - expect(Helper.getContent).toHaveBeenCalledWith(file1); + expect(Helper.getContent).toHaveBeenCalledWith(RepoStore.files[0]); }); it('should not fetch data for already opened files', () => { - const file = { - id: 42, - url: 'foo', - }; - - spyOn(Helper, 'getFileFromPath').and.returnValue(file); + const f = file(); + spyOn(Helper, 'getFileFromPath').and.returnValue(f); spyOn(RepoStore, 'setActiveFiles'); vm = createComponent(); - vm.fileClicked(file); + vm.fileClicked(f); - expect(RepoStore.setActiveFiles).toHaveBeenCalledWith(file); + expect(RepoStore.setActiveFiles).toHaveBeenCalledWith(f); }); it('should hide files in directory if already open', () => { - spyOn(RepoStore, 'removeChildFilesOfTree').and.callThrough(); - const file1 = { - id: 0, - type: 'tree', - url: '', - opened: true, - }; - RepoStore.files = [file1]; - RepoStore.isRoot = true; + spyOn(Helper, 'setDirectoryToClosed').and.callThrough(); + const f = file(); + f.opened = true; + f.type = 'tree'; + RepoStore.files = [f]; vm = createComponent(); - vm.fileClicked(file1); + vm.fileClicked(RepoStore.files[0]); + + expect(Helper.setDirectoryToClosed).toHaveBeenCalledWith(RepoStore.files[0]); + }); + + describe('submodule', () => { + it('opens submodule project URL', () => { + spyOn(gl.utils, 'visitUrl'); - expect(RepoStore.removeChildFilesOfTree).toHaveBeenCalledWith(file1); + const f = file(); + f.type = 'submodule'; + + vm = createComponent(); + + vm.fileClicked(f); + + expect(gl.utils.visitUrl).toHaveBeenCalledWith('url'); + }); }); }); @@ -131,36 +146,31 @@ describe('RepoSidebar', () => { }); 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; + beforeEach(() => { + const f = file(); + const file2 = Object.assign({}, file()); + file2.url = 'test'; + RepoStore.files = [f, file2]; + RepoStore.openedFiles = []; + RepoStore.isRoot = true; - vm = createComponent(); - vm.fileClicked(file1); + vm = createComponent(); + }); 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(); + vm.fileClicked(RepoStore.files[1]); + expect(Helper.getContent).toHaveBeenCalledWith(RepoStore.files[1]); history.pushState({ key: Math.random(), - }, '', file1.url); + }, '', RepoStore.files[1].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); + expect(Helper.getContent.calls.mostRecent().args[0].url).toContain(RepoStore.files[1].url); window.history.pushState({}, null, '/'); }); diff --git a/spec/javascripts/repo/components/repo_spec.js b/spec/javascripts/repo/components/repo_spec.js new file mode 100644 index 00000000000..3558a155728 --- /dev/null +++ b/spec/javascripts/repo/components/repo_spec.js @@ -0,0 +1,96 @@ +import Vue from 'vue'; +import repo from '~/repo/components/repo.vue'; +import RepoStore from '~/repo/stores/repo_store'; +import Service from '~/repo/services/repo_service'; +import eventHub from '~/repo/event_hub'; +import createComponent from '../../helpers/vue_mount_component_helper'; + +describe('repo component', () => { + let vm; + + beforeEach(() => { + const Component = Vue.extend(repo); + + RepoStore.currentBranch = 'master'; + + vm = createComponent(Component); + }); + + afterEach(() => { + vm.$destroy(); + + RepoStore.currentBranch = ''; + }); + + describe('createNewBranch', () => { + beforeEach(() => { + spyOn(history, 'pushState'); + }); + + describe('success', () => { + beforeEach(() => { + spyOn(Service, 'createBranch').and.returnValue(Promise.resolve({ + data: { + name: 'test', + }, + })); + }); + + it('calls createBranch with branchName', () => { + eventHub.$emit('createNewBranch', 'test'); + + expect(Service.createBranch).toHaveBeenCalledWith({ + branch: 'test', + ref: RepoStore.currentBranch, + }); + }); + + it('pushes new history state', (done) => { + RepoStore.currentBranch = 'master'; + + spyOn(vm, 'getCurrentLocation').and.returnValue('http://test.com/master'); + + eventHub.$emit('createNewBranch', 'test'); + + setTimeout(() => { + expect(history.pushState).toHaveBeenCalledWith(jasmine.anything(), '', 'http://test.com/test'); + done(); + }); + }); + + it('updates stores currentBranch', (done) => { + eventHub.$emit('createNewBranch', 'test'); + + setTimeout(() => { + expect(RepoStore.currentBranch).toBe('test'); + + done(); + }); + }); + }); + + describe('failure', () => { + beforeEach(() => { + spyOn(Service, 'createBranch').and.returnValue(Promise.reject({ + response: { + data: { + message: 'test', + }, + }, + })); + }); + + it('emits createNewBranchError event', (done) => { + spyOn(eventHub, '$emit').and.callThrough(); + + eventHub.$emit('createNewBranch', 'test'); + + setTimeout(() => { + expect(eventHub.$emit).toHaveBeenCalledWith('createNewBranchError', 'test'); + + done(); + }); + }); + }); + }); +}); diff --git a/spec/javascripts/repo/components/repo_tab_spec.js b/spec/javascripts/repo/components/repo_tab_spec.js index d2a790ad73a..37e297437f0 100644 --- a/spec/javascripts/repo/components/repo_tab_spec.js +++ b/spec/javascripts/repo/components/repo_tab_spec.js @@ -1,5 +1,6 @@ import Vue from 'vue'; import repoTab from '~/repo/components/repo_tab.vue'; +import RepoStore from '~/repo/stores/repo_store'; describe('RepoTab', () => { function createComponent(propsData) { @@ -18,7 +19,7 @@ describe('RepoTab', () => { const vm = createComponent({ tab, }); - const close = vm.$el.querySelector('.close'); + const close = vm.$el.querySelector('.close-btn'); const name = vm.$el.querySelector(`a[title="${tab.url}"]`); spyOn(vm, 'closeTab'); @@ -44,26 +45,43 @@ describe('RepoTab', () => { tab, }); - expect(vm.$el.querySelector('.close .fa-circle')).toBeTruthy(); + expect(vm.$el.querySelector('.close-btn .fa-circle')).toBeTruthy(); }); describe('methods', () => { describe('closeTab', () => { - const vm = jasmine.createSpyObj('vm', ['$emit']); - it('returns undefined and does not $emit if file is changed', () => { - const file = { changed: true }; - const returnVal = repoTab.methods.closeTab.call(vm, file); + const tab = { + url: 'url', + name: 'name', + changed: true, + }; + const vm = createComponent({ + tab, + }); + + spyOn(RepoStore, 'removeFromOpenedFiles'); + + vm.$el.querySelector('.close-btn').click(); - expect(returnVal).toBeUndefined(); - expect(vm.$emit).not.toHaveBeenCalled(); + expect(RepoStore.removeFromOpenedFiles).not.toHaveBeenCalled(); }); it('$emits tabclosed event with file obj', () => { - const file = { changed: false }; - repoTab.methods.closeTab.call(vm, file); + const tab = { + url: 'url', + name: 'name', + changed: false, + }; + const vm = createComponent({ + tab, + }); + + spyOn(RepoStore, 'removeFromOpenedFiles'); + + vm.$el.querySelector('.close-btn').click(); - expect(vm.$emit).toHaveBeenCalledWith('tabclosed', file); + expect(RepoStore.removeFromOpenedFiles).toHaveBeenCalledWith(tab); }); }); }); diff --git a/spec/javascripts/repo/components/repo_tabs_spec.js b/spec/javascripts/repo/components/repo_tabs_spec.js index a02b54efafc..431129bc866 100644 --- a/spec/javascripts/repo/components/repo_tabs_spec.js +++ b/spec/javascripts/repo/components/repo_tabs_spec.js @@ -16,6 +16,10 @@ describe('RepoTabs', () => { return new RepoTabs().$mount(); } + afterEach(() => { + RepoStore.openedFiles = []; + }); + it('renders a list of tabs', () => { RepoStore.openedFiles = openedFiles; @@ -28,18 +32,4 @@ describe('RepoTabs', () => { expect(tabs[1].classList.contains('active')).toBeFalsy(); expect(tabs[2].classList.contains('tabs-divider')).toBeTruthy(); }); - - describe('methods', () => { - describe('tabClosed', () => { - it('calls removeFromOpenedFiles with file obj', () => { - const file = {}; - - spyOn(RepoStore, 'removeFromOpenedFiles'); - - repoTabs.methods.tabClosed(file); - - expect(RepoStore.removeFromOpenedFiles).toHaveBeenCalledWith(file); - }); - }); - }); }); |