Skip to content

G
gitlab-ce
Commit 47c906eb authored by Phil Hughes's avatar Phil Hughes
Browse files
Options

updated karma specs

parent 3811fbff
Hide whitespace changes
Inline Side-by-side
Showing with 612 additions and 1016 deletions
app/assets/javascripts/repo/components/repo_editor.vue
View file @ 47c906eb
......@@ -74,7 +74,7 @@ export default {
},
watch: {
activeFile(oldVal, newVal) {
if (!newVal.active) {
if (newVal && !newVal.active) {
this.initMonaco();
}
},
......
app/assets/javascripts/repo/stores/actions.js
View file @ 47c906eb
......@@ -2,9 +2,8 @@ import Vue from 'vue';
import flash from '../../flash';
import service from '../services';
import * as types from './mutation_types';
import { visitUrl } from '../../lib/utils/url_utility';
export const redirectToUrl = url => visitUrl(url);
export const redirectToUrl = url => gl.utils.visitUrl(url);
export const setInitialData = ({ commit }, data) => commit(types.SET_INITIAL_DATA, data);
......@@ -26,7 +25,7 @@ export const closeAllFiles = ({ state, dispatch }) => {
state.openFiles.forEach(file => dispatch('closeFile', { file }));
};
export const toggleEditMode = ({ commit, getters, dispatch }, force = false) => {
export const toggleEditMode = ({ state, commit, getters, dispatch }, force = false) => {
const changedFiles = getters.changedFiles;
if (changedFiles.length && !force) {
......@@ -35,7 +34,10 @@ export const toggleEditMode = ({ commit, getters, dispatch }, force = false) =>
commit(types.TOGGLE_EDIT_MODE);
commit(types.TOGGLE_DISCARD_POPUP, false);
dispatch('toggleBlobView');
dispatch('discardAllChanges');
if (!state.editMode) {
dispatch('discardAllChanges');
}
}
};
......@@ -111,9 +113,12 @@ export const popHistoryState = ({ state, dispatch, getters }) => {
export const scrollToTab = () => {
Vue.nextTick(() => {
const tabs = document.getElementById('tabs');
const tabEl = tabs.querySelector('.active');
tabs.scrollLeft = tabEl.offsetLeft;
if (tabs) {
const tabEl = tabs.querySelector('.active');
tabs.scrollLeft = tabEl.offsetLeft;
}
});
};
......
app/assets/javascripts/repo/stores/actions/file.js
View file @ 47c906eb
......@@ -3,6 +3,7 @@ import flash from '../../../flash';
import service from '../../services';
import * as types from '../mutation_types';
import {
findEntry,
pushState,
setPageTitle,
createTemp,
......@@ -88,11 +89,16 @@ export const createTempFile = ({ state, commit, dispatch }, { tree, name }) => {
changed: true,
});
if (findEntry(tree, 'blob', file.name)) return;
commit(types.CREATE_TMP_FILE, {
parent: tree,
file,
});
commit(types.TOGGLE_FILE_OPEN, file);
dispatch('setFileActive', file);
dispatch('toggleEditMode', true);
if (!state.editMode) {
dispatch('toggleEditMode', true);
}
};
app/assets/javascripts/repo/stores/actions/tree.js
View file @ 47c906eb
......@@ -76,7 +76,7 @@ export const clickedTreeRow = ({ commit, dispatch }, row) => {
export const createTempTree = ({ state, commit, dispatch }, name) => {
let tree = state;
const dirNames = name.replace(`${state.path}/`, '').split('/');
const dirNames = name.replace(new RegExp(`^${state.path}/`), '').split('/');
dirNames.forEach((dirName) => {
const foundEntry = findEntry(tree, 'tree', dirName);
......@@ -101,8 +101,10 @@ export const createTempTree = ({ state, commit, dispatch }, name) => {
}
});
dispatch('createTempFile', {
tree,
name: '.gitkeep',
});
if (tree.tempFile) {
dispatch('createTempFile', {
tree,
name: '.gitkeep',
});
}
};
app/assets/javascripts/repo/stores/getters.js
View file @ 47c906eb
......@@ -15,11 +15,7 @@ export const changedFiles = (state) => {
return files.filter(file => file.changed);
};
export const activeFile = (state) => {
const openedFiles = state.openFiles;
return openedFiles.find(file => file.active);
};
export const activeFile = state => state.openFiles.find(file => file.active);
export const activeFileExtension = (state) => {
const file = activeFile(state);
......
app/assets/javascripts/repo/stores/index.js
View file @ 47c906eb
......@@ -8,7 +8,7 @@ import mutations from './mutations';
Vue.use(Vuex);
export default new Vuex.Store({
state,
state: state(),
actions,
mutations,
getters,
......
app/assets/javascripts/repo/stores/state.js
View file @ 47c906eb
export default {
export default () => ({
project: {
id: 0,
name: '',
......@@ -20,4 +20,4 @@ export default {
openFiles: [],
parentTreeUrl: '',
previousUrl: '',
};
});
app/assets/javascripts/repo/stores/utils.js
View file @ 47c906eb
......@@ -36,8 +36,8 @@ export const decorateData = (entity, projectUrl = '') => {
last_commit,
tree_url,
path,
tempFile,
renderError,
tempFile = false,
active = false,
opened = false,
changed = false,
......
spec/javascripts/helpers/vue_mount_component_helper.js
View file @ 47c906eb
export const createComponentWithStore = (Component, store, propsData = {}) => new Component({
store,
propsData,
});
export default (Component, props = {}, el = null) => new Component({
propsData: props,
}).$mount(el);
spec/javascripts/repo/components/new_branch_form_spec.js
View file @ 47c906eb
import Vue from 'vue';
import store from '~/repo/stores';
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';
import { createComponentWithStore } from '../../helpers/vue_mount_component_helper';
import { resetStore } from '../helpers';
describe('Multi-file editor new branch form', () => {
let vm;
......@@ -10,17 +10,17 @@ describe('Multi-file editor new branch form', () => {
beforeEach(() => {
const Component = Vue.extend(newBranchForm);
RepoStore.currentBranch = 'master';
vm = createComponentWithStore(Component, store);
vm = createComponent(Component, {
currentBranch: RepoStore.currentBranch,
});
vm.$store.state.currentBranch = 'master';
vm.$mount();
});
afterEach(() => {
vm.$destroy();
RepoStore.currentBranch = '';
resetStore(vm.$store);
});
describe('template', () => {
......@@ -48,6 +48,10 @@ describe('Multi-file editor new branch form', () => {
});
describe('submitNewBranch', () => {
beforeEach(() => {
spyOn(vm, 'createNewBranch').and.returnValue(Promise.resolve());
});
it('sets to loading', () => {
vm.submitNewBranch();
......@@ -66,57 +70,45 @@ describe('Multi-file editor new branch form', () => {
});
});
it('emits an event with branchName', () => {
spyOn(eventHub, '$emit');
it('calls createdNewBranch with branchName', () => {
vm.branchName = 'testing';
vm.submitNewBranch();
expect(eventHub.$emit).toHaveBeenCalledWith('createNewBranch', 'testing');
expect(vm.createNewBranch).toHaveBeenCalledWith('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('submitNewBranch with error', () => {
beforeEach(() => {
spyOn(vm, 'createNewBranch').and.returnValue(Promise.reject({
json: () => Promise.resolve({
message: 'error message',
}),
}));
});
});
describe('createdNewBranch', () => {
it('set loading to false', () => {
it('sets loading to false', (done) => {
vm.loading = true;
vm.createdNewBranch();
expect(vm.loading).toBeFalsy();
});
it('resets branch name', () => {
vm.branchName = 'testing';
vm.submitNewBranch();
vm.createdNewBranch();
setTimeout(() => {
expect(vm.loading).toBeFalsy();
expect(vm.branchName).toBe('');
done();
});
});
it('sets the dropdown toggle text', () => {
vm.dropdownText = document.createElement('span');
it('creates flash element', (done) => {
vm.submitNewBranch();
vm.createdNewBranch('branch name');
setTimeout(() => {
expect(vm.$el.querySelector('.flash-alert')).not.toBeNull();
expect(vm.$el.querySelector('.flash-alert').textContent.trim()).toBe('error message');
expect(vm.dropdownText.textContent).toBe('branch name');
done();
});
});
});
});
spec/javascripts/repo/components/new_dropdown/index_spec.js
View file @ 47c906eb
import Vue from 'vue';
import store from '~/repo/stores';
import newDropdown from '~/repo/components/new_dropdown/index.vue';
import RepoStore from '~/repo/stores/repo_store';
import RepoHelper from '~/repo/helpers/repo_helper';
import eventHub from '~/repo/event_hub';
import createComponent from '../../../helpers/vue_mount_component_helper';
import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper';
import { resetStore } from '../../helpers';
describe('new dropdown component', () => {
let vm;
......@@ -11,15 +10,13 @@ describe('new dropdown component', () => {
beforeEach(() => {
const component = Vue.extend(newDropdown);
vm = createComponent(component);
vm = createComponentWithStore(component, store).$mount();
});
afterEach(() => {
vm.$destroy();
RepoStore.files = [];
RepoStore.openedFiles = [];
RepoStore.setViewToPreview();
resetStore(vm.$store);
});
it('renders new file and new directory links', () => {
......@@ -67,125 +64,4 @@ describe('new dropdown component', () => {
.catch(done.fail);
});
});
describe('createEntryInStore', () => {
['tree', 'blob'].forEach((type) => {
describe(type, () => {
it('closes modal after creating file', () => {
vm.openModal = true;
eventHub.$emit('createNewEntry', 'testing', type);
expect(vm.openModal).toBeFalsy();
});
it('sets editMode to true', () => {
eventHub.$emit('createNewEntry', 'testing', type);
expect(RepoStore.editMode).toBeTruthy();
});
it('toggles blob view', () => {
eventHub.$emit('createNewEntry', 'testing', type);
expect(RepoStore.isPreviewView()).toBeFalsy();
});
it('adds file into activeFiles', () => {
eventHub.$emit('createNewEntry', 'testing', type);
expect(RepoStore.openedFiles.length).toBe(1);
});
it(`creates ${type} in the current stores path`, () => {
RepoStore.path = 'testing';
eventHub.$emit('createNewEntry', 'testing/app', type);
expect(RepoStore.files[0].path).toBe('testing/app');
expect(RepoStore.files[0].name).toBe('app');
if (type === 'tree') {
expect(RepoStore.files[0].files.length).toBe(1);
}
RepoStore.path = '';
});
});
});
describe('file', () => {
it('creates new file', () => {
eventHub.$emit('createNewEntry', 'testing', 'blob');
expect(RepoStore.files.length).toBe(1);
expect(RepoStore.files[0].name).toBe('testing');
expect(RepoStore.files[0].type).toBe('blob');
expect(RepoStore.files[0].tempFile).toBeTruthy();
});
it('does not create temp file when file already exists', () => {
RepoStore.files.push(RepoHelper.serializeRepoEntity('blob', {
name: 'testing',
}));
eventHub.$emit('createNewEntry', 'testing', 'blob');
expect(RepoStore.files.length).toBe(1);
expect(RepoStore.files[0].name).toBe('testing');
expect(RepoStore.files[0].type).toBe('blob');
expect(RepoStore.files[0].tempFile).toBeUndefined();
});
});
describe('tree', () => {
it('creates new tree', () => {
eventHub.$emit('createNewEntry', 'testing', 'tree');
expect(RepoStore.files.length).toBe(1);
expect(RepoStore.files[0].name).toBe('testing');
expect(RepoStore.files[0].type).toBe('tree');
expect(RepoStore.files[0].tempFile).toBeTruthy();
expect(RepoStore.files[0].files.length).toBe(1);
expect(RepoStore.files[0].files[0].name).toBe('.gitkeep');
});
it('creates multiple trees when entryName has slashes', () => {
eventHub.$emit('createNewEntry', 'app/test', 'tree');
expect(RepoStore.files.length).toBe(1);
expect(RepoStore.files[0].name).toBe('app');
expect(RepoStore.files[0].files[0].name).toBe('test');
expect(RepoStore.files[0].files[0].files[0].name).toBe('.gitkeep');
});
it('creates tree in existing tree', () => {
RepoStore.files.push(RepoHelper.serializeRepoEntity('tree', {
name: 'app',
}));
eventHub.$emit('createNewEntry', 'app/test', 'tree');
expect(RepoStore.files.length).toBe(1);
expect(RepoStore.files[0].name).toBe('app');
expect(RepoStore.files[0].tempFile).toBeUndefined();
expect(RepoStore.files[0].files[0].tempFile).toBeTruthy();
expect(RepoStore.files[0].files[0].name).toBe('test');
expect(RepoStore.files[0].files[0].files[0].name).toBe('.gitkeep');
});
it('does not create new tree when already exists', () => {
RepoStore.files.push(RepoHelper.serializeRepoEntity('tree', {
name: 'app',
}));
eventHub.$emit('createNewEntry', 'app', 'tree');
expect(RepoStore.files.length).toBe(1);
expect(RepoStore.files[0].name).toBe('app');
expect(RepoStore.files[0].tempFile).toBeUndefined();
expect(RepoStore.files[0].files.length).toBe(0);
});
});
});
});
spec/javascripts/repo/components/new_dropdown/modal_spec.js
View file @ 47c906eb
import Vue from 'vue';
import RepoStore from '~/repo/stores/repo_store';
import store from '~/repo/stores';
import modal from '~/repo/components/new_dropdown/modal.vue';
import eventHub from '~/repo/event_hub';
import createComponent from '../../../helpers/vue_mount_component_helper';
import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper';
import { file, resetStore } from '../../helpers';
describe('new file modal component', () => {
const Component = Vue.extend(modal);
......@@ -11,18 +11,17 @@ describe('new file modal component', () => {
afterEach(() => {
vm.$destroy();
RepoStore.files = [];
RepoStore.openedFiles = [];
RepoStore.setViewToPreview();
resetStore(vm.$store);
});
['tree', 'blob'].forEach((type) => {
describe(type, () => {
beforeEach(() => {
vm = createComponent(Component, {
vm = createComponentWithStore(Component, store, {
type,
currentPath: RepoStore.path,
});
}).$mount();
vm.entryName = 'testing';
});
it(`sets modal title as ${type}`, () => {
......@@ -42,35 +41,156 @@ describe('new file modal component', () => {
expect(vm.$el.querySelector('.label-light').textContent.trim()).toBe(`${title} name`);
});
describe('createEntryInStore', () => {
it('calls createTempEntry', () => {
spyOn(vm, 'createTempEntry');
vm.createEntryInStore();
expect(vm.createTempEntry).toHaveBeenCalledWith({
name: 'testing',
type,
});
});
it('sets editMode to true', (done) => {
vm.createEntryInStore();
setTimeout(() => {
expect(vm.$store.state.editMode).toBeTruthy();
done();
});
});
it('toggles blob view', (done) => {
vm.createEntryInStore();
setTimeout(() => {
expect(vm.$store.state.currentBlobView).toBe('repo-editor');
done();
});
});
it('opens newly created file', (done) => {
vm.createEntryInStore();
setTimeout(() => {
expect(vm.$store.state.openFiles.length).toBe(1);
expect(vm.$store.state.openFiles[0].name).toBe(type === 'blob' ? 'testing' : '.gitkeep');
done();
});
});
it(`creates ${type} in the current stores path`, (done) => {
vm.$store.state.path = 'app';
vm.createEntryInStore();
setTimeout(() => {
expect(vm.$store.state.tree[0].path).toBe('app/testing');
expect(vm.$store.state.tree[0].name).toBe('testing');
if (type === 'tree') {
expect(vm.$store.state.tree[0].tree.length).toBe(1);
}
done();
});
});
if (type === 'blob') {
it('creates new file', (done) => {
vm.createEntryInStore();
setTimeout(() => {
expect(vm.$store.state.tree.length).toBe(1);
expect(vm.$store.state.tree[0].name).toBe('testing');
expect(vm.$store.state.tree[0].type).toBe('blob');
expect(vm.$store.state.tree[0].tempFile).toBeTruthy();
done();
});
});
it('does not create temp file when file already exists', (done) => {
vm.$store.state.tree.push(file('testing', '1', type));
vm.createEntryInStore();
setTimeout(() => {
expect(vm.$store.state.tree.length).toBe(1);
expect(vm.$store.state.tree[0].name).toBe('testing');
expect(vm.$store.state.tree[0].type).toBe('blob');
expect(vm.$store.state.tree[0].tempFile).toBeFalsy();
done();
});
});
} else {
it('creates new tree', () => {
vm.createEntryInStore();
expect(vm.$store.state.tree.length).toBe(1);
expect(vm.$store.state.tree[0].name).toBe('testing');
expect(vm.$store.state.tree[0].type).toBe('tree');
expect(vm.$store.state.tree[0].tempFile).toBeTruthy();
expect(vm.$store.state.tree[0].tree.length).toBe(1);
expect(vm.$store.state.tree[0].tree[0].name).toBe('.gitkeep');
});
it('creates multiple trees when entryName has slashes', () => {
vm.entryName = 'app/test';
vm.createEntryInStore();
expect(vm.$store.state.tree.length).toBe(1);
expect(vm.$store.state.tree[0].name).toBe('app');
expect(vm.$store.state.tree[0].tree[0].name).toBe('test');
expect(vm.$store.state.tree[0].tree[0].tree[0].name).toBe('.gitkeep');
});
it('creates tree in existing tree', () => {
vm.$store.state.tree.push(file('app', '1', 'tree'));
vm.entryName = 'app/test';
vm.createEntryInStore();
expect(vm.$store.state.tree.length).toBe(1);
expect(vm.$store.state.tree[0].name).toBe('app');
expect(vm.$store.state.tree[0].tempFile).toBeFalsy();
expect(vm.$store.state.tree[0].tree[0].tempFile).toBeTruthy();
expect(vm.$store.state.tree[0].tree[0].name).toBe('test');
expect(vm.$store.state.tree[0].tree[0].tree[0].name).toBe('.gitkeep');
});
it('does not create new tree when already exists', () => {
vm.$store.state.tree.push(file('app', '1', 'tree'));
vm.entryName = 'app';
vm.createEntryInStore();
expect(vm.$store.state.tree.length).toBe(1);
expect(vm.$store.state.tree[0].name).toBe('app');
expect(vm.$store.state.tree[0].tempFile).toBeFalsy();
expect(vm.$store.state.tree[0].tree.length).toBe(0);
});
}
});
});
});
it('focuses field on mount', () => {
document.body.innerHTML += '<div class="js-test"></div>';
vm = createComponent(Component, {
vm = createComponentWithStore(Component, store, {
type: 'tree',
currentPath: RepoStore.path,
}, '.js-test');
}).$mount('.js-test');
expect(document.activeElement).toBe(vm.$refs.fieldName);
vm.$el.remove();
});
describe('createEntryInStore', () => {
it('emits createNewEntry event', () => {
spyOn(eventHub, '$emit');
vm = createComponent(Component, {
type: 'tree',
currentPath: RepoStore.path,
});
vm.entryName = 'testing';
vm.createEntryInStore();
expect(eventHub.$emit).toHaveBeenCalledWith('createNewEntry', 'testing', 'tree');
});
});
});
spec/javascripts/repo/components/repo_commit_section_spec.js
View file @ 47c906eb
import Vue from 'vue';
import store from '~/repo/stores';
import service from '~/repo/services';
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';
import { file, resetStore } from '../helpers';
describe('RepoCommitSection', () => {
const branch = 'master';
const projectUrl = 'projectUrl';
let changedFiles;
let openedFiles;
let vm;
RepoStore.projectUrl = projectUrl;
function createComponent(el) {
function createComponent() {
const RepoCommitSection = Vue.extend(repoCommitSection);
return new RepoCommitSection().$mount(el);
const comp = new RepoCommitSection({
store,
}).$mount();
comp.$store.state.currentBranch = 'master';
comp.$store.state.openFiles = [file(), file()];
comp.$store.state.openFiles.forEach(f => Object.assign(f, {
changed: true,
content: 'testing',
}));
return comp.$mount();
}
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,
}]);
vm = createComponent();
});
it('renders a commit section', () => {
RepoStore.isCommitable = true;
RepoStore.currentBranch = branch;
RepoStore.targetBranch = branch;
RepoStore.openedFiles = openedFiles;
afterEach(() => {
vm.$destroy();
resetStore(vm.$store);
});
const vm = createComponent();
it('renders a commit section', () => {
const changedFileElements = [...vm.$el.querySelectorAll('.changed-files > li')];
const commitMessage = vm.$el.querySelector('#commit-message');
const submitCommit = vm.$refs.submitCommit;
const submitCommit = vm.$el.querySelector('.btn');
const targetBranch = vm.$el.querySelector('.target-branch');
expect(vm.$el.querySelector(':scope > form')).toBeTruthy();
......@@ -58,160 +45,70 @@ describe('RepoCommitSection', () => {
expect(changedFileElements.length).toEqual(2);
changedFileElements.forEach((changedFile, i) => {
expect(changedFile.textContent.trim()).toEqual(changedFiles[i].path);
expect(changedFile.textContent.trim()).toEqual(vm.$store.getters.changedFiles[i].path);
});
expect(commitMessage.tagName).toEqual('TEXTAREA');
expect(commitMessage.name).toEqual('commit-message');
expect(submitCommit.type).toEqual('submit');
expect(submitCommit.disabled).toBeTruthy();
expect(submitCommit.querySelector('.fa-spinner.fa-spin')).toBeFalsy();
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', () => {
RepoStore.isCommitable = false;
RepoStore.openedFiles = [{
id: 0,
changed: true,
}];
const vm = createComponent();
expect(vm.$el.innerHTML).toBeFalsy();
});
it('does not render if no changedFiles', () => {
RepoStore.isCommitable = true;
RepoStore.openedFiles = [];
const vm = createComponent();
expect(vm.$el.innerHTML).toBeFalsy();
expect(targetBranch.querySelector('.help-block').textContent.trim()).toEqual('master');
});
describe('when submitting', () => {
let el;
let vm;
const projectId = 'projectId';
const commitMessage = 'commitMessage';
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();
});
});
let changedFiles;
afterEach(() => {
vm.$destroy();
el.remove();
RepoStore.openedFiles = [];
});
beforeEach(() => {
vm.commitMessage = 'testing';
changedFiles = JSON.parse(JSON.stringify(vm.$store.getters.changedFiles));
it('shows commit message', () => {
const commitMessageEl = vm.$el.querySelector('#commit-message');
expect(commitMessageEl.value).toBe(commitMessage);
spyOn(service, 'commit').and.returnValue(Promise.resolve({
short_id: '1',
stats: {},
}));
});
it('allows you to submit', () => {
const submitCommit = vm.$refs.submitCommit;
expect(submitCommit.disabled).toBeFalsy();
expect(vm.$el.querySelector('.btn').disabled).toBeTruthy();
});
it('shows commit submit and summary if commitMessage and spinner if submitCommitsLoading', (done) => {
const submitCommit = vm.$refs.submitCommit;
submitCommit.click();
it('submits commit', (done) => {
vm.makeCommit();
// 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];
const args = service.commit.calls.allArgs()[0];
const { commit_message, actions, branch: payloadBranch } = args[1];
expect(commit_message).toBe(commitMessage);
expect(commit_message).toBe('testing');
expect(actions.length).toEqual(2);
expect(payloadBranch).toEqual(branch);
expect(payloadBranch).toEqual('master');
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);
expect(actions[0].content).toEqual(changedFiles[0].content);
expect(actions[1].content).toEqual(changedFiles[1].content);
expect(actions[0].file_path).toEqual(changedFiles[0].path);
expect(actions[1].file_path).toEqual(changedFiles[1].path);
})
.then(done)
.catch(done.fail);
});
it('redirects to MR creation page if start new MR checkbox checked', (done) => {
spyOn(gl.utils, 'visitUrl');
vm.startNewMR = true;
Vue.nextTick()
.then(() => {
const submitCommit = vm.$refs.submitCommit;
submitCommit.click();
})
// Wait for the branch check to finish
.then(() => getSetTimeoutPromise())
vm.makeCommit();
getSetTimeoutPromise()
.then(() => Vue.nextTick())
.then(() => {
expect(vm.redirectToNewMr).toHaveBeenCalled();
expect(gl.utils.visitUrl).toHaveBeenCalled();
})
.then(done)
.catch(done.fail);
});
});
describe('methods', () => {
describe('resetCommitState', () => {
it('should reset store vars and scroll to top', () => {
const vm = {
submitCommitsLoading: true,
changedFiles: new Array(10),
openedFiles: new Array(3),
commitMessage: 'commitMessage',
editMode: true,
};
repoCommitSection.methods.resetCommitState.call(vm);
expect(vm.submitCommitsLoading).toEqual(false);
expect(vm.changedFiles).toEqual([]);
expect(vm.commitMessage).toEqual('');
expect(vm.editMode).toEqual(false);
});
});
});
});
spec/javascripts/repo/components/repo_edit_button_spec.js
View file @ 47c906eb
import Vue from 'vue';
import store from '~/repo/stores';
import repoEditButton from '~/repo/components/repo_edit_button.vue';
import RepoStore from '~/repo/stores/repo_store';
import { file, resetStore } from '../helpers';
describe('RepoEditButton', () => {
function createComponent() {
let vm;
beforeEach(() => {
const f = file();
const RepoEditButton = Vue.extend(repoEditButton);
return new RepoEditButton().$mount();
}
vm = new RepoEditButton({
store,
});
f.active = true;
f.changed = true;
vm.$store.dispatch('setInitialData', {
canCommit: true,
onTopOfBranch: true,
});
vm.$store.state.openFiles.push(f);
});
afterEach(() => {
RepoStore.openedFiles = [];
vm.$destroy();
resetStore(vm.$store);
});
it('renders an edit button that toggles the view state', (done) => {
RepoStore.isCommitable = true;
RepoStore.changedFiles = [];
RepoStore.binary = false;
RepoStore.openedFiles = [{}, {}];
it('renders an edit button', () => {
vm.$mount();
const vm = createComponent();
expect(vm.$el.querySelector('.btn')).not.toBeNull();
expect(vm.$el.querySelector('.btn').textContent.trim()).toBe('Edit');
});
expect(vm.$el.tagName).toEqual('BUTTON');
expect(vm.$el.textContent).toMatch('Edit');
it('renders edit button with cancel text', () => {
vm.$store.state.editMode = true;
spyOn(vm, 'editCancelClicked').and.callThrough();
vm.$mount();
vm.$el.click();
expect(vm.$el.querySelector('.btn')).not.toBeNull();
expect(vm.$el.querySelector('.btn').textContent.trim()).toBe('Cancel edit');
});
Vue.nextTick(() => {
expect(vm.editCancelClicked).toHaveBeenCalled();
expect(vm.$el.textContent).toMatch('Cancel edit');
done();
});
it('toggles edit mode on click', () => {
vm.$mount();
vm.$el.querySelector('.btn').click();
expect(vm.$el.querySelector('.btn').textContent.trim()).toBe('Cancel edit');
});
it('does not render if not isCommitable', () => {
RepoStore.isCommitable = false;
describe('discardPopupOpen', () => {
beforeEach(() => {
vm.$store.state.discardPopupOpen = true;
vm.$mount();
});
it('renders popup', () => {
expect(vm.$el.querySelector('.modal')).not.toBeNull();
});
it('removes all changed files', (done) => {
vm.$el.querySelector('.btn-warning').click();
const vm = createComponent();
vm.$nextTick(() => {
expect(vm.$store.getters.changedFiles.length).toBe(0);
expect(vm.$el.querySelector('.modal')).toBeNull();
expect(vm.$el.innerHTML).toBeUndefined();
done();
});
});
});
});
spec/javascripts/repo/components/repo_editor_spec.js
View file @ 47c906eb
import Vue from 'vue';
import RepoStore from '~/repo/stores/repo_store';
import store from '~/repo/stores';
import repoEditor from '~/repo/components/repo_editor.vue';
import { file, resetStore } from '../helpers';
describe('RepoEditor', () => {
let vm;
beforeEach(() => {
const f = file();
const RepoEditor = Vue.extend(repoEditor);
this.vm = new RepoEditor().$mount();
vm = new RepoEditor({
store,
});
f.active = true;
f.tempFile = true;
vm.$store.state.openFiles.push(f);
vm.monaco = true;
vm.$mount();
});
afterEach(() => {
RepoStore.openedFiles = [];
vm.$destroy();
resetStore(vm.$store);
});
it('renders an ide container', (done) => {
this.vm.openedFiles = ['idiidid'];
this.vm.binary = false;
Vue.nextTick(() => {
expect(this.vm.shouldHideEditor).toBe(false);
expect(this.vm.$el.id).toEqual('ide');
expect(this.vm.$el.tagName).toBe('DIV');
expect(vm.shouldHideEditor).toBeFalsy();
done();
});
});
describe('when there are no open files', () => {
it('does not render the ide', (done) => {
this.vm.openedFiles = [];
Vue.nextTick(() => {
expect(this.vm.shouldHideEditor).toBe(true);
expect(this.vm.$el.tagName).not.toBeDefined();
done();
});
});
});
describe('when open file is binary and not raw', () => {
it('does not render the IDE', (done) => {
this.vm.binary = true;
this.vm.activeFile = {
raw: false,
};
vm.$store.getters.activeFile.binary = true;
Vue.nextTick(() => {
expect(this.vm.shouldHideEditor).toBe(true);
expect(this.vm.$el.tagName).not.toBeDefined();
expect(vm.shouldHideEditor).toBeTruthy();
done();
});
});
......
spec/javascripts/repo/components/repo_file_buttons_spec.js
View file @ 47c906eb
import Vue from 'vue';
import store from '~/repo/stores';
import repoFileButtons from '~/repo/components/repo_file_buttons.vue';
import RepoStore from '~/repo/stores/repo_store';
import { file, resetStore } from '../helpers';
describe('RepoFileButtons', () => {
const activeFile = {
extension: 'md',
url: 'url',
raw_path: 'raw_path',
blame_path: 'blame_path',
commits_path: 'commits_path',
permalink: 'permalink',
};
const activeFile = file();
let vm;
function createComponent() {
const RepoFileButtons = Vue.extend(repoFileButtons);
return new RepoFileButtons().$mount();
activeFile.rawPath = 'test';
activeFile.blamePath = 'test';
activeFile.commitsPath = 'test';
activeFile.active = true;
store.state.openFiles.push(activeFile);
return new RepoFileButtons({
store,
}).$mount();
}
afterEach(() => {
RepoStore.openedFiles = [];
});
it('renders Raw, Blame, History, Permalink and Preview toggle', () => {
const activeFileLabel = 'activeFileLabel';
RepoStore.openedFiles = new Array(1);
RepoStore.activeFile = activeFile;
RepoStore.activeFileLabel = activeFileLabel;
RepoStore.editMode = true;
RepoStore.binary = false;
vm.$destroy();
const vm = createComponent();
const raw = vm.$el.querySelector('.raw');
const blame = vm.$el.querySelector('.blame');
const history = vm.$el.querySelector('.history');
expect(raw.href).toMatch(`/${activeFile.raw_path}`);
expect(raw.textContent.trim()).toEqual('Raw');
expect(blame.href).toMatch(`/${activeFile.blame_path}`);
expect(blame.textContent.trim()).toEqual('Blame');
expect(history.href).toMatch(`/${activeFile.commits_path}`);
expect(history.textContent.trim()).toEqual('History');
expect(vm.$el.querySelector('.permalink').textContent.trim()).toEqual('Permalink');
expect(vm.$el.querySelector('.preview').textContent.trim()).toEqual(activeFileLabel);
resetStore(vm.$store);
});
it('triggers rawPreviewToggle on preview click', () => {
RepoStore.openedFiles = new Array(1);
RepoStore.activeFile = activeFile;
RepoStore.editMode = true;
const vm = createComponent();
const preview = vm.$el.querySelector('.preview');
spyOn(vm, 'rawPreviewToggle');
preview.click();
expect(vm.rawPreviewToggle).toHaveBeenCalled();
});
it('renders Raw, Blame, History, Permalink and Preview toggle', (done) => {
vm = createComponent();
it('does not render preview toggle if not canPreview', () => {
activeFile.extension = 'js';
RepoStore.openedFiles = new Array(1);
RepoStore.activeFile = activeFile;
vm.$nextTick(() => {
const raw = vm.$el.querySelector('.raw');
const blame = vm.$el.querySelector('.blame');
const history = vm.$el.querySelector('.history');
const vm = createComponent();
expect(raw.href).toMatch(`/${activeFile.rawPath}`);
expect(raw.textContent.trim()).toEqual('Raw');
expect(blame.href).toMatch(`/${activeFile.blamePath}`);
expect(blame.textContent.trim()).toEqual('Blame');
expect(history.href).toMatch(`/${activeFile.commitsPath}`);
expect(history.textContent.trim()).toEqual('History');
expect(vm.$el.querySelector('.permalink').textContent.trim()).toEqual('Permalink');
expect(vm.$el.querySelector('.preview')).toBeFalsy();
done();
});
});
});
spec/javascripts/repo/components/repo_file_spec.js
View file @ 47c906eb
import Vue from 'vue';
import store from '~/repo/stores';
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';
import { file, resetStore } from '../helpers';
describe('RepoFile', () => {
const updated = 'updated';
const otherFile = {
id: 'test',
html: '<p class="file-content">html</p>',
pageTitle: 'otherpageTitle',
};
function createComponent(propsData) {
const RepoFile = Vue.extend(repoFile);
return new RepoFile({
store,
propsData,
}).$mount();
}
beforeEach(() => {
RepoStore.openedFiles = [];
afterEach(() => {
resetStore(vm.$store);
});
it('renders link, icon, name and last commit details', () => {
const RepoFile = Vue.extend(repoFile);
const vm = new RepoFile({
store,
propsData: {
file: file(),
},
......@@ -54,12 +50,6 @@ describe('RepoFile', () => {
expect(vm.$el.querySelector('.fa-spin.fa-spinner')).toBeFalsy();
});
it('sets the document title correctly', () => {
RepoStore.setActiveFiles(otherFile);
expect(document.title.trim()).toEqual(otherFile.pageTitle);
});
it('renders a spinner if the file is loading', () => {
const f = file();
f.loading = true;
......@@ -71,27 +61,30 @@ describe('RepoFile', () => {
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());
it('does not render commit message and datetime if mini', (done) => {
const vm = createComponent({
file: file(),
});
vm.$store.state.openFiles.push(vm.file);
expect(vm.$el.querySelector('.commit-message')).toBeFalsy();
expect(vm.$el.querySelector('.commit-update')).toBeFalsy();
vm.$nextTick(() => {
expect(vm.$el.querySelector('.commit-message')).toBeFalsy();
expect(vm.$el.querySelector('.commit-update')).toBeFalsy();
done();
});
});
it('fires linkClicked when the link is clicked', () => {
it('fires clickedTreeRow when the link is clicked', () => {
const vm = createComponent({
file: file(),
});
spyOn(vm, 'linkClicked');
spyOn(vm, 'clickedTreeRow');
vm.$el.click();
expect(vm.linkClicked).toHaveBeenCalledWith(vm.file);
expect(vm.clickedTreeRow).toHaveBeenCalledWith(vm.file);
});
describe('submodule', () => {
......@@ -119,20 +112,4 @@ describe('RepoFile', () => {
expect(vm.$el.querySelector('td').textContent.replace(/\s+/g, ' ')).toContain('submodule name @ 12345678');
});
});
describe('methods', () => {
describe('linkClicked', () => {
it('$emits fileNameClicked with file obj', () => {
spyOn(eventHub, '$emit');
const vm = createComponent({
file: file(),
});
vm.linkClicked(vm.file);
expect(eventHub.$emit).toHaveBeenCalledWith('fileNameClicked', vm.file);
});
});
});
});
spec/javascripts/repo/components/repo_loading_file_spec.js
View file @ 47c906eb
import Vue from 'vue';
import RepoStore from '~/repo/stores/repo_store';
import store from '~/repo/stores';
import repoLoadingFile from '~/repo/components/repo_loading_file.vue';
import { resetStore } from '../helpers';
describe('RepoLoadingFile', () => {
function createComponent(propsData) {
let vm;
function createComponent() {
const RepoLoadingFile = Vue.extend(repoLoadingFile);
return new RepoLoadingFile({
propsData,
store,
}).$mount();
}
......@@ -30,33 +33,30 @@ describe('RepoLoadingFile', () => {
}
afterEach(() => {
RepoStore.openedFiles = [];
vm.$destroy();
resetStore(vm.$store);
});
it('renders 3 columns of animated LoC', () => {
const vm = createComponent({
loading: {
tree: true,
},
hasFiles: false,
});
vm = createComponent();
const columns = [...vm.$el.querySelectorAll('td')];
expect(columns.length).toEqual(3);
assertColumns(columns);
});
it('renders 1 column of animated LoC if isMini', () => {
RepoStore.openedFiles = new Array(1);
const vm = createComponent({
loading: {
tree: true,
},
hasFiles: false,
});
const columns = [...vm.$el.querySelectorAll('td')];
it('renders 1 column of animated LoC if isMini', (done) => {
vm = createComponent();
vm.$store.state.openFiles.push('test');
expect(columns.length).toEqual(1);
assertColumns(columns);
vm.$nextTick(() => {
const columns = [...vm.$el.querySelectorAll('td')];
expect(columns.length).toEqual(1);
assertColumns(columns);
done();
});
});
});
spec/javascripts/repo/components/repo_prev_directory_spec.js
View file @ 47c906eb
import Vue from 'vue';
import store from '~/repo/stores';
import repoPrevDirectory from '~/repo/components/repo_prev_directory.vue';
import eventHub from '~/repo/event_hub';
import { resetStore } from '../helpers';
describe('RepoPrevDirectory', () => {
function createComponent(propsData) {
let vm;
const parentLink = 'parent';
function createComponent() {
const RepoPrevDirectory = Vue.extend(repoPrevDirectory);
return new RepoPrevDirectory({
propsData,
}).$mount();
}
it('renders a prev dir link', () => {
const prevUrl = 'prevUrl';
const vm = createComponent({
prevUrl,
const comp = new RepoPrevDirectory({
store,
});
const link = vm.$el.querySelector('a');
spyOn(vm, 'linkClicked');
comp.$store.state.parentTreeUrl = parentLink;
expect(link.href).toMatch(`/${prevUrl}`);
expect(link.textContent).toEqual('...');
return comp.$mount();
}
beforeEach(() => {
vm = createComponent();
});
link.click();
afterEach(() => {
vm.$destroy();
expect(vm.linkClicked).toHaveBeenCalledWith(prevUrl);
resetStore(vm.$store);
});
describe('methods', () => {
describe('linkClicked', () => {
it('$emits linkclicked with prevUrl', () => {
const prevUrl = 'prevUrl';
const vm = createComponent({
prevUrl,
});
it('renders a prev dir link', () => {
const link = vm.$el.querySelector('a');
spyOn(eventHub, '$emit');
expect(link.href).toMatch(`/${parentLink}`);
expect(link.textContent).toEqual('...');
});
vm.linkClicked(prevUrl);
it('clicking row triggers getTreeData', () => {
spyOn(vm, 'getTreeData');
expect(eventHub.$emit).toHaveBeenCalledWith('goToPreviousDirectoryClicked', prevUrl);
});
});
vm.$el.querySelector('td').click();
expect(vm.getTreeData).toHaveBeenCalledWith({ endpoint: parentLink });
});
});
spec/javascripts/repo/components/repo_preview_spec.js
View file @ 47c906eb
import Vue from 'vue';
import store from '~/repo/stores';
import repoPreview from '~/repo/components/repo_preview.vue';
import RepoStore from '~/repo/stores/repo_store';
import { file, resetStore } from '../helpers';
describe('RepoPreview', () => {
let vm;
function createComponent() {
const f = file();
const RepoPreview = Vue.extend(repoPreview);
return new RepoPreview().$mount();
const comp = new RepoPreview({
store,
});
f.active = true;
f.html = 'test';
comp.$store.state.openFiles.push(f);
return comp.$mount();
}
it('renders a div with the activeFile html', () => {
const activeFile = {
html: '<p class="file-content">html</p>',
};
RepoStore.activeFile = activeFile;
afterEach(() => {
vm.$destroy();
resetStore(vm.$store);
});
const vm = createComponent();
it('renders a div with the activeFile html', () => {
vm = createComponent();
expect(vm.$el.tagName).toEqual('DIV');
expect(vm.$el.innerHTML).toContain(activeFile.html);
expect(vm.$el.innerHTML).toContain('test');
});
});
spec/javascripts/repo/components/repo_sidebar_spec.js
View file @ 47c906eb
import Vue from 'vue';
import Helper from '~/repo/helpers/repo_helper';
import RepoService from '~/repo/services/repo_service';
import RepoStore from '~/repo/stores/repo_store';
import store from '~/repo/stores';
import repoSidebar from '~/repo/components/repo_sidebar.vue';
import { file } from '../mock_data';
import { file, resetStore } from '../helpers';
describe('RepoSidebar', () => {
let vm;
function createComponent() {
beforeEach(() => {
const RepoSidebar = Vue.extend(repoSidebar);
return new RepoSidebar().$mount();
}
vm = new RepoSidebar({
store,
});
vm.$store.state.isRoot = true;
vm.$store.state.tree.push(file());
vm.$mount();
});
afterEach(() => {
vm.$destroy();
RepoStore.files = [];
RepoStore.openedFiles = [];
resetStore(vm.$store);
});
it('renders a sidebar', () => {
RepoStore.files = [file()];
RepoStore.openedFiles = [];
RepoStore.isRoot = true;
vm = createComponent();
const thead = vm.$el.querySelector('thead');
const tbody = vm.$el.querySelector('tbody');
......@@ -41,139 +40,36 @@ describe('RepoSidebar', () => {
expect(tbody.querySelector('.file')).toBeTruthy();
});
it('does not render a thead, renders repo-file-options and sets sidebar-mini class if isMini', () => {
RepoStore.openedFiles = [{
id: 0,
}];
vm = createComponent();
expect(vm.$el.classList.contains('sidebar-mini')).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.files = [];
vm = createComponent();
it('does not render a thead, renders repo-file-options and sets sidebar-mini class if isMini', (done) => {
vm.$store.state.openFiles.push(vm.$store.state.tree[0]);
expect(vm.$el.querySelectorAll('tbody .loading-file').length).toEqual(5);
});
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();
});
Vue.nextTick(() => {
expect(vm.$el.classList.contains('sidebar-mini')).toBeTruthy();
expect(vm.$el.querySelector('thead')).toBeTruthy();
expect(vm.$el.querySelector('thead .repo-file-options')).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');
done();
});
});
describe('methods', () => {
describe('fileClicked', () => {
it('should fetch data for new file', () => {
spyOn(Helper, 'getContent').and.callThrough();
RepoStore.files = [file()];
RepoStore.isRoot = true;
vm = createComponent();
vm.fileClicked(RepoStore.files[0]);
expect(Helper.getContent).toHaveBeenCalledWith(RepoStore.files[0]);
});
it('should not fetch data for already opened files', () => {
const f = file();
spyOn(Helper, 'getFileFromPath').and.returnValue(f);
spyOn(RepoStore, 'setActiveFiles');
vm = createComponent();
vm.fileClicked(f);
it('renders 5 loading files if tree is loading', (done) => {
vm.$store.state.tree = [];
vm.$store.state.loading = true;
expect(RepoStore.setActiveFiles).toHaveBeenCalledWith(f);
});
Vue.nextTick(() => {
expect(vm.$el.querySelectorAll('tbody .loading-file').length).toEqual(5);
it('should hide files in directory if already open', () => {
spyOn(Helper, 'setDirectoryToClosed').and.callThrough();
const f = file();
f.opened = true;
f.type = 'tree';
RepoStore.files = [f];
vm = createComponent();
vm.fileClicked(RepoStore.files[0]);
expect(Helper.setDirectoryToClosed).toHaveBeenCalledWith(RepoStore.files[0]);
});
describe('submodule', () => {
it('opens submodule project URL', () => {
spyOn(gl.utils, 'visitUrl');
const f = file();
f.type = 'submodule';
vm = createComponent();
vm.fileClicked(f);
expect(gl.utils.visitUrl).toHaveBeenCalledWith('url');
});
});
});
describe('goToPreviousDirectoryClicked', () => {
it('should hide files in directory if already open', () => {
const prevUrl = 'foo/bar';
vm = createComponent();
vm.goToPreviousDirectoryClicked(prevUrl);
expect(RepoService.url).toEqual(prevUrl);
});
done();
});
});
describe('back button', () => {
beforeEach(() => {
const f = file();
const file2 = Object.assign({}, file());
file2.url = 'test';
RepoStore.files = [f, file2];
RepoStore.openedFiles = [];
RepoStore.isRoot = true;
vm = createComponent();
});
it('render previous file when using back button', () => {
spyOn(Helper, 'getContent').and.callThrough();
vm.fileClicked(RepoStore.files[1]);
expect(Helper.getContent).toHaveBeenCalledWith(RepoStore.files[1]);
history.pushState({
key: Math.random(),
}, '', RepoStore.files[1].url);
const popEvent = document.createEvent('Event');
popEvent.initEvent('popstate', true, true);
window.dispatchEvent(popEvent);
it('renders a prev directory if is not root', (done) => {
vm.$store.state.isRoot = false;
expect(Helper.getContent.calls.mostRecent().args[0].url).toContain(RepoStore.files[1].url);
Vue.nextTick(() => {
expect(vm.$el.querySelector('tbody .prev-directory')).toBeTruthy();
window.history.pushState({}, null, '/');
});
done();
});
});
});
spec/javascripts/repo/components/repo_spec.js
View file @ 47c906eb
import Vue from 'vue';
import store from '~/repo/stores';
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';
import { createComponentWithStore } from '../../helpers/vue_mount_component_helper';
import { file, resetStore } from '../helpers';
describe('repo component', () => {
let vm;
......@@ -11,86 +10,26 @@ describe('repo component', () => {
beforeEach(() => {
const Component = Vue.extend(repo);
RepoStore.currentBranch = 'master';
vm = createComponent(Component);
vm = createComponentWithStore(Component, store).$mount();
});
afterEach(() => {
vm.$destroy();
RepoStore.currentBranch = '';
resetStore(vm.$store);
});
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();
it('does not render panel right when no files open', () => {
expect(vm.$el.querySelector('.panel-right')).toBeNull();
});
eventHub.$emit('createNewBranch', 'test');
it('renders panel right when files are open', (done) => {
vm.$store.state.tree.push(file());
setTimeout(() => {
expect(eventHub.$emit).toHaveBeenCalledWith('createNewBranchError', 'test');
Vue.nextTick(() => {
expect(vm.$el.querySelector('.panel-right')).toBeNull();
done();
});
});
done();
});
});
});
spec/javascripts/repo/components/repo_tab_spec.js
View file @ 47c906eb
import Vue from 'vue';
import store from '~/repo/stores';
import repoTab from '~/repo/components/repo_tab.vue';
import RepoStore from '~/repo/stores/repo_store';
import { file, resetStore } from '../helpers';
describe('RepoTab', () => {
function createComponent(propsData) {
const RepoTab = Vue.extend(repoTab);
return new RepoTab({
store,
propsData,
}).$mount();
}
afterEach(() => {
resetStore(vm.$store);
});
it('renders a close link and a name link', () => {
const tab = {
url: 'url',
name: 'name',
};
const vm = createComponent({
tab,
tab: file(),
});
vm.$store.state.openFiles.push(vm.tab);
const close = vm.$el.querySelector('.close-btn');
const name = vm.$el.querySelector(`a[title="${tab.url}"]`);
spyOn(vm, 'closeTab');
spyOn(vm, 'tabClicked');
const name = vm.$el.querySelector(`a[title="${vm.tab.url}"]`);
expect(close.querySelector('.fa-times')).toBeTruthy();
expect(name.textContent.trim()).toEqual(tab.name);
expect(name.textContent.trim()).toEqual(vm.tab.name);
});
it('calls setFileActive when clicking tab', () => {
const vm = createComponent({
tab: file(),
});
spyOn(vm, 'setFileActive');
vm.$el.click();
expect(vm.setFileActive).toHaveBeenCalledWith(vm.tab);
});
it('calls closeFile when clicking close button', () => {
const vm = createComponent({
tab: file(),
});
spyOn(vm, 'closeFile');
close.click();
name.click();
vm.$el.querySelector('.close-btn').click();
expect(vm.closeTab).toHaveBeenCalledWith(tab);
expect(vm.tabClicked).toHaveBeenCalledWith(tab);
expect(vm.closeFile).toHaveBeenCalledWith({ file: vm.tab });
});
it('renders an fa-circle icon if tab is changed', () => {
const tab = {
url: 'url',
name: 'name',
changed: true,
};
const tab = file();
tab.changed = true;
const vm = createComponent({
tab,
});
......@@ -50,38 +65,41 @@ describe('RepoTab', () => {
describe('methods', () => {
describe('closeTab', () => {
it('returns undefined and does not $emit if file is changed', () => {
const tab = {
url: 'url',
name: 'name',
changed: true,
};
it('does not close tab if is changed', (done) => {
const tab = file();
tab.changed = true;
tab.opened = true;
const vm = createComponent({
tab,
});
spyOn(RepoStore, 'removeFromOpenedFiles');
vm.$store.state.openFiles.push(tab);
vm.$store.dispatch('setFileActive', tab);
vm.$el.querySelector('.close-btn').click();
expect(RepoStore.removeFromOpenedFiles).not.toHaveBeenCalled();
vm.$nextTick(() => {
expect(tab.opened).toBeTruthy();
done();
});
});
it('$emits tabclosed event with file obj', () => {
const tab = {
url: 'url',
name: 'name',
changed: false,
};
it('closes tab when clicking close btn', (done) => {
const tab = file('lose');
tab.opened = true;
const vm = createComponent({
tab,
});
spyOn(RepoStore, 'removeFromOpenedFiles');
vm.$store.state.openFiles.push(tab);
vm.$store.dispatch('setFileActive', tab);
vm.$el.querySelector('.close-btn').click();
expect(RepoStore.removeFromOpenedFiles).toHaveBeenCalledWith(tab);
vm.$nextTick(() => {
expect(tab.opened).toBeFalsy();
done();
});
});
});
});
......
spec/javascripts/repo/components/repo_tabs_spec.js
View file @ 47c906eb
import Vue from 'vue';
import RepoStore from '~/repo/stores/repo_store';
import store from '~/repo/stores';
import repoTabs from '~/repo/components/repo_tabs.vue';
import { file, resetStore } from '../helpers';
describe('RepoTabs', () => {
const openedFiles = [{
id: 0,
active: true,
}, {
id: 1,
}];
const openedFiles = [file(), file()];
function createComponent() {
const RepoTabs = Vue.extend(repoTabs);
return new RepoTabs().$mount();
return new RepoTabs({
store,
}).$mount();
}
afterEach(() => {
RepoStore.openedFiles = [];
resetStore(vm.$store);
});
it('renders a list of tabs', () => {
RepoStore.openedFiles = openedFiles;
it('renders a list of tabs', (done) => {
const vm = createComponent();
const tabs = [...vm.$el.querySelectorAll(':scope > li')];
openedFiles[0].active = true;
vm.$store.state.openFiles = openedFiles;
vm.$nextTick(() => {
const tabs = [...vm.$el.querySelectorAll(':scope > li')];
expect(tabs.length).toEqual(3);
expect(tabs[0].classList.contains('active')).toBeTruthy();
expect(tabs[1].classList.contains('active')).toBeFalsy();
expect(tabs[2].classList.contains('tabs-divider')).toBeTruthy();
expect(vm.$el.id).toEqual('tabs');
expect(tabs.length).toEqual(3);
expect(tabs[0].classList.contains('active')).toBeTruthy();
expect(tabs[1].classList.contains('active')).toBeFalsy();
expect(tabs[2].classList.contains('tabs-divider')).toBeTruthy();
done();
});
});
});
spec/javascripts/repo/mock_data.js → spec/javascripts/repo/helpers.js
View file @ 47c906eb
import RepoHelper from '~/repo/helpers/repo_helper';
import { decorateData } from '~/repo/stores/utils';
import state from '~/repo/stores/state';
// eslint-disable-next-line import/prefer-default-export
export const file = (name = 'name', id = name) => RepoHelper.serializeRepoEntity('blob', {
export const resetStore = (store) => {
store.replaceState(state());
};
export const file = (name = 'name', id = name, type = '') => decorateData({
id,
type,
icon: 'icon',
url: 'url',
name,
path: name,
last_commit: {
id: '123',
message: 'test',
......
spec/javascripts/repo/services/repo_service_spec.js deleted 100644 → 0
View file @ 3811fbff
import axios from 'axios';
import RepoService from '~/repo/services/repo_service';
import RepoStore from '~/repo/stores/repo_store';
import Api from '~/api';
describe('RepoService', () => {
it('has default json format param', () => {
expect(RepoService.options.params.format).toBe('json');
});
describe('buildParams', () => {
let newParams;
const url = 'url';
beforeEach(() => {
newParams = {};
spyOn(Object, 'assign').and.returnValue(newParams);
});
it('clones params', () => {
const params = RepoService.buildParams(url);
expect(Object.assign).toHaveBeenCalledWith({}, RepoService.options.params);
expect(params).toBe(newParams);
});
it('sets and returns viewer params to richif urlIsRichBlob is true', () => {
spyOn(RepoService, 'urlIsRichBlob').and.returnValue(true);
const params = RepoService.buildParams(url);
expect(params.viewer).toEqual('rich');
});
it('returns params urlIsRichBlob is false', () => {
spyOn(RepoService, 'urlIsRichBlob').and.returnValue(false);
const params = RepoService.buildParams(url);
expect(params.viewer).toBeUndefined();
});
it('calls urlIsRichBlob with the objects url prop if no url arg is provided', () => {
spyOn(RepoService, 'urlIsRichBlob');
RepoService.url = url;
RepoService.buildParams();
expect(RepoService.urlIsRichBlob).toHaveBeenCalledWith(url);
});
});
describe('urlIsRichBlob', () => {
it('returns true for md extension', () => {
const isRichBlob = RepoService.urlIsRichBlob('url.md');
expect(isRichBlob).toBeTruthy();
});
it('returns false for js extension', () => {
const isRichBlob = RepoService.urlIsRichBlob('url.js');
expect(isRichBlob).toBeFalsy();
});
});
describe('getContent', () => {
const params = {};
const url = 'url';
const requestPromise = Promise.resolve();
beforeEach(() => {
spyOn(RepoService, 'buildParams').and.returnValue(params);
spyOn(axios, 'get').and.returnValue(requestPromise);
});
it('calls buildParams and axios.get', () => {
const request = RepoService.getContent(url);
expect(RepoService.buildParams).toHaveBeenCalledWith(url);
expect(axios.get).toHaveBeenCalledWith(url, {
params,
});
expect(request).toBe(requestPromise);
});
it('uses object url prop if no url arg is provided', () => {
RepoService.url = url;
RepoService.getContent();
expect(axios.get).toHaveBeenCalledWith(url, {
params,
});
});
});
describe('getBase64Content', () => {
const url = 'url';
const response = { data: 'data' };
beforeEach(() => {
spyOn(RepoService, 'bufferToBase64');
spyOn(axios, 'get').and.returnValue(Promise.resolve(response));
});
it('calls axios.get and bufferToBase64 on completion', (done) => {
const request = RepoService.getBase64Content(url);
expect(axios.get).toHaveBeenCalledWith(url, {
responseType: 'arraybuffer',
});
expect(request).toEqual(jasmine.any(Promise));
request.then(() => {
expect(RepoService.bufferToBase64).toHaveBeenCalledWith(response.data);
done();
}).catch(done.fail);
});
});
describe('commitFiles', () => {
it('calls commitMultiple and .then commitFlash', (done) => {
const projectId = 'projectId';
const payload = {};
RepoStore.projectId = projectId;
spyOn(Api, 'commitMultiple').and.returnValue(Promise.resolve());
spyOn(RepoService, 'commitFlash');
const apiPromise = RepoService.commitFiles(payload);
expect(Api.commitMultiple).toHaveBeenCalledWith(projectId, payload);
apiPromise.then(() => {
expect(RepoService.commitFlash).toHaveBeenCalled();
done();
}).catch(done.fail);
});
});
describe('commitFlash', () => {
it('calls Flash with data.message', () => {
const data = {
message: 'message',
};
spyOn(window, 'Flash');
RepoService.commitFlash(data);
expect(window.Flash).toHaveBeenCalledWith(data.message);
});
it('calls Flash with success string if short_id and stats', () => {
const data = {
short_id: 'short_id',
stats: {
additions: '4',
deletions: '5',
},
};
spyOn(window, 'Flash');
RepoService.commitFlash(data);
expect(window.Flash).toHaveBeenCalledWith(`Your changes have been committed. Commit ${data.short_id} with ${data.stats.additions} additions, ${data.stats.deletions} deletions.`, 'notice');
});
});
});
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7