Commit 5f80d042 authored by Phil Hughes's avatar Phil Hughes

Spec updates

Updated as best as possible, a lot of tests still change the store
and never reset the state back which can cause some issues with other
tests.
parent b1b91aa0
......@@ -58,7 +58,7 @@
</td>
<template v-if="!isMini">
<td class="hidden-sm hidden-xs">
<td class="commit-message hidden-sm hidden-xs">
<a
@click.stop
:href="file.lastCommit.url"
......@@ -67,7 +67,7 @@
</a>
</td>
<td class="hidden-xs text-right">
<td class="commit-update hidden-xs text-right">
<span :title="tooltipTitle(file.lastCommit.updatedAt)">
{{ timeFormated(file.lastCommit.updatedAt) }}
</span>
......
......@@ -26,9 +26,8 @@
</div>
</div>
</td>
<template v-if="!isMini">
<td
v-if="!isMini"
class="hidden-sm hidden-xs">
<div class="animation-container">
<div
......@@ -40,7 +39,6 @@
</td>
<td
v-if="!isMini"
class="hidden-xs">
<div class="animation-container animation-container-small animation-container-right">
<div
......@@ -50,5 +48,6 @@
</div>
</div>
</td>
</template>
</tr>
</template>
<script>
import _ from 'underscore';
import Service from '../services/repo_service';
import Helper from '../helpers/repo_helper';
import Store from '../stores/repo_store';
......@@ -31,7 +32,7 @@ export default {
computed: {
flattendFiles() {
const map = (arr) => {
if (arr && arr.tree.length === 0) {
if (arr && arr.tree && arr.tree.length === 0) {
return [];
}
......@@ -79,13 +80,12 @@ export default {
Store.setActiveLine(lineNumber);
} else {
const openFile = Helper.getFileFromPath(file.url);
file.loading = true;
if (openFile) {
file.loading = false;
Store.setActiveFiles(openFile);
Store.setActiveLine(lineNumber);
} else {
file.loading = true;
Service.url = file.url;
Helper.getContent(file)
.then(() => {
......
......@@ -134,6 +134,7 @@ describe('RepoCommitSection', () => {
afterEach(() => {
vm.$destroy();
el.remove();
RepoStore.openedFiles = [];
});
it('shows commit message', () => {
......
......@@ -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');
});
});
});
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;
......
......@@ -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',
......
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,51 @@ describe('RepoFile', () => {
});
it('renders a spinner if the file is loading', () => {
file.loading = true;
const vm = createComponent({
file,
activeFile,
loading: {
tree: true,
},
hasFiles: true,
});
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 f = file();
f.loading = true;
const vm = createComponent({
file,
activeFile,
loading: {
tree: true,
},
file: f,
});
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', () => {
const vm = createComponent({
file,
activeFile: {},
});
expect(vm.$el.classList.contains('active')).toBeFalsy();
});
it('fires linkClicked when the link is clicked', () => {
const vm = createComponent({
file,
activeFile,
file: file(),
});
spyOn(vm, 'linkClicked');
vm.$el.querySelector('.repo-file-name').click();
vm.$el.click();
expect(vm.linkClicked).toHaveBeenCalledWith(file);
expect(vm.linkClicked).toHaveBeenCalledWith(vm.file);
});
describe('methods', () => {
describe('linkClicked', () => {
const vm = jasmine.createSpyObj('vm', ['$emit']);
it('$emits linkclicked with file obj', () => {
const theFile = {};
spyOn(eventHub, '$emit');
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('linkclicked', vm.file);
});
});
});
......
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();
});
});
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);
});
});
});
......
......@@ -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,25 +48,21 @@ 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;
vm = createComponent();
expect(vm.$el.querySelector('tbody .prev-directory')).toBeTruthy();
......@@ -74,48 +72,36 @@ describe('RepoSidebar', () => {
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(RepoStore.removeChildFilesOfTree).toHaveBeenCalledWith(file1);
expect(Helper.setDirectoryToClosed).toHaveBeenCalledWith(RepoStore.files[0]);
});
});
......@@ -131,36 +117,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];
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);
});
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, '/');
});
......
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');
expect(returnVal).toBeUndefined();
expect(vm.$emit).not.toHaveBeenCalled();
vm.$el.querySelector('.close-btn').click();
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);
});
});
});
......
......@@ -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);
});
});
});
});
import RepoHelper from '~/repo/helpers/repo_helper';
export const file = () => RepoHelper.serializeBlob({
icon: 'icon',
url: 'url',
name: 'name',
last_commit: {
id: '123',
message: 'test',
committed_date: '',
},
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment