correctly creates file in currently viewed directory
specs
This commit is contained in:
parent
fd67a20e2c
commit
389c852d12
|
@ -31,6 +31,7 @@
|
|||
type="button"
|
||||
class="btn btn-default dropdown-toggle add-to-tree"
|
||||
data-toggle="dropdown"
|
||||
aria-label="Create new file or directory"
|
||||
>
|
||||
<i
|
||||
class="fa fa-plus"
|
||||
|
|
|
@ -28,6 +28,7 @@ function setInitialStore(data) {
|
|||
Store.service = Service;
|
||||
Store.service.url = data.url;
|
||||
Store.service.refsUrl = data.refsUrl;
|
||||
Store.path = data.currentPath;
|
||||
Store.projectId = data.projectId;
|
||||
Store.projectName = data.projectName;
|
||||
Store.projectUrl = data.projectUrl;
|
||||
|
|
|
@ -38,6 +38,7 @@ const RepoStore = {
|
|||
newMrTemplateUrl: '',
|
||||
branchChanged: false,
|
||||
commitMessage: '',
|
||||
path: '',
|
||||
loading: {
|
||||
tree: false,
|
||||
blob: false,
|
||||
|
|
|
@ -7,4 +7,5 @@
|
|||
blob_url: namespace_project_blob_path(project.namespace, project, '{{branch}}'),
|
||||
new_mr_template_url: namespace_project_new_merge_request_path(project.namespace, project, merge_request: { source_branch: '{{source_branch}}' }),
|
||||
can_commit: (!!can_push_branch?(project, @ref)).to_s,
|
||||
on_top_of_branch: (!!on_top_of_branch?(project, @ref)).to_s } }
|
||||
on_top_of_branch: (!!on_top_of_branch?(project, @ref)).to_s,
|
||||
current_path: @path } }
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
export default (Component, props = {}) => new Component({
|
||||
export default (Component, props = {}, el = null) => new Component({
|
||||
propsData: props,
|
||||
}).$mount();
|
||||
|
||||
}).$mount(el);
|
||||
|
|
|
@ -0,0 +1,63 @@
|
|||
import Vue from 'vue';
|
||||
import newDropdown from '~/repo/components/new_dropdown/index.vue';
|
||||
import createComponent from '../../../helpers/vue_mount_component_helper';
|
||||
|
||||
describe('new dropdown component', () => {
|
||||
let vm;
|
||||
|
||||
beforeEach(() => {
|
||||
const component = Vue.extend(newDropdown);
|
||||
|
||||
vm = createComponent(component);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vm.$destroy();
|
||||
});
|
||||
|
||||
it('renders new file and new directory links', () => {
|
||||
expect(vm.$el.querySelectorAll('a')[0].textContent.trim()).toBe('New file');
|
||||
expect(vm.$el.querySelectorAll('a')[1].textContent.trim()).toBe('New directory');
|
||||
});
|
||||
|
||||
describe('createNewItem', () => {
|
||||
it('sets modalType to blob when new file is clicked', () => {
|
||||
vm.$el.querySelectorAll('a')[0].click();
|
||||
|
||||
expect(vm.modalType).toBe('blob');
|
||||
});
|
||||
|
||||
it('sets modalType to tree when new directory is clicked', () => {
|
||||
vm.$el.querySelectorAll('a')[1].click();
|
||||
|
||||
expect(vm.modalType).toBe('tree');
|
||||
});
|
||||
|
||||
it('opens modal when link is clicked', (done) => {
|
||||
vm.$el.querySelectorAll('a')[0].click();
|
||||
|
||||
Vue.nextTick(() => {
|
||||
expect(vm.$el.querySelector('.modal')).not.toBeNull();
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('toggleModalOpen', () => {
|
||||
it('closes modal after toggling', (done) => {
|
||||
vm.toggleModalOpen();
|
||||
|
||||
Vue.nextTick()
|
||||
.then(() => {
|
||||
expect(vm.$el.querySelector('.modal')).not.toBeNull();
|
||||
})
|
||||
.then(vm.toggleModalOpen)
|
||||
.then(() => {
|
||||
expect(vm.$el.querySelector('.modal')).toBeNull();
|
||||
})
|
||||
.then(done)
|
||||
.catch(done.fail);
|
||||
});
|
||||
});
|
||||
});
|
|
@ -0,0 +1,180 @@
|
|||
import Vue from 'vue';
|
||||
import RepoStore from '~/repo/stores/repo_store';
|
||||
import RepoHelper from '~/repo/helpers/repo_helper';
|
||||
import modal from '~/repo/components/new_dropdown/modal.vue';
|
||||
import createComponent from '../../../helpers/vue_mount_component_helper';
|
||||
|
||||
describe('new file modal component', () => {
|
||||
const Component = Vue.extend(modal);
|
||||
let vm;
|
||||
|
||||
afterEach(() => {
|
||||
vm.$destroy();
|
||||
|
||||
RepoStore.files = [];
|
||||
RepoStore.openedFiles = [];
|
||||
RepoStore.setViewToPreview();
|
||||
});
|
||||
|
||||
['tree', 'blob'].forEach((type) => {
|
||||
describe(type, () => {
|
||||
beforeEach(() => {
|
||||
vm = createComponent(Component, {
|
||||
type,
|
||||
});
|
||||
});
|
||||
|
||||
it(`sets modal title as ${type}`, () => {
|
||||
const title = type === 'tree' ? 'directory' : 'file';
|
||||
|
||||
expect(vm.$el.querySelector('.modal-title').textContent.trim()).toBe(`Create new ${title}`);
|
||||
});
|
||||
|
||||
it(`sets button label as ${type}`, () => {
|
||||
const title = type === 'tree' ? 'directory' : 'file';
|
||||
|
||||
expect(vm.$el.querySelector('.btn-success').textContent.trim()).toBe(`Create ${title}`);
|
||||
});
|
||||
|
||||
it(`sets form label as ${type}`, () => {
|
||||
const title = type === 'tree' ? 'Directory' : 'File';
|
||||
|
||||
expect(vm.$el.querySelector('.label-light').textContent.trim()).toBe(`${title} name`);
|
||||
});
|
||||
|
||||
it('emits toggle event after creating file', () => {
|
||||
spyOn(vm, '$emit');
|
||||
|
||||
vm.entryName = 'testing';
|
||||
vm.$el.querySelector('.btn-success').click();
|
||||
|
||||
expect(vm.$emit).toHaveBeenCalledWith('toggle');
|
||||
});
|
||||
|
||||
it('sets editMode to true', () => {
|
||||
vm.entryName = 'testing';
|
||||
vm.$el.querySelector('.btn-success').click();
|
||||
|
||||
expect(RepoStore.editMode).toBeTruthy();
|
||||
});
|
||||
|
||||
it('toggles blob view', () => {
|
||||
vm.entryName = 'testing';
|
||||
vm.$el.querySelector('.btn-success').click();
|
||||
|
||||
expect(RepoStore.isPreviewView()).toBeFalsy();
|
||||
});
|
||||
|
||||
it('adds file into activeFiles', () => {
|
||||
vm.entryName = 'testing';
|
||||
vm.$el.querySelector('.btn-success').click();
|
||||
|
||||
expect(RepoStore.openedFiles.length).toBe(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('file', () => {
|
||||
beforeEach(() => {
|
||||
vm = createComponent(Component, {
|
||||
type: 'blob',
|
||||
});
|
||||
});
|
||||
|
||||
it('creates new file', () => {
|
||||
vm.entryName = 'testing';
|
||||
vm.$el.querySelector('.btn-success').click();
|
||||
|
||||
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',
|
||||
}));
|
||||
|
||||
vm.entryName = 'testing';
|
||||
vm.$el.querySelector('.btn-success').click();
|
||||
|
||||
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', () => {
|
||||
beforeEach(() => {
|
||||
vm = createComponent(Component, {
|
||||
type: 'tree',
|
||||
});
|
||||
});
|
||||
|
||||
it('creates new tree', () => {
|
||||
vm.entryName = 'testing';
|
||||
vm.$el.querySelector('.btn-success').click();
|
||||
|
||||
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', () => {
|
||||
vm.entryName = 'app/test';
|
||||
vm.$el.querySelector('.btn-success').click();
|
||||
|
||||
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',
|
||||
}));
|
||||
|
||||
vm.entryName = 'app/test';
|
||||
vm.$el.querySelector('.btn-success').click();
|
||||
|
||||
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',
|
||||
}));
|
||||
|
||||
vm.entryName = 'app';
|
||||
vm.$el.querySelector('.btn-success').click();
|
||||
|
||||
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);
|
||||
});
|
||||
});
|
||||
|
||||
it('focuses field on mount', () => {
|
||||
document.body.innerHTML += '<div class="js-test"></div>';
|
||||
|
||||
vm = createComponent(Component, {
|
||||
type: 'tree',
|
||||
}, '.js-test');
|
||||
|
||||
expect(document.activeElement).toBe(vm.$refs.fieldName);
|
||||
|
||||
vm.$el.remove();
|
||||
});
|
||||
});
|
Loading…
Reference in New Issue