Skip to content
Snippets Groups Projects
Commit 99936ee8 authored by Lee Tickett's avatar Lee Tickett
Browse files

Submit rename/new modal in web IDE on enter

Changelog: added
parent d7222a05
No related branches found
No related tags found
1 merge request!91462Submit rename/new modal in web IDE on enter
......@@ -68,6 +68,10 @@ export default {
},
methods: {
...mapActions(['createTempEntry', 'renameEntry']),
submitAndClose() {
this.submitForm();
this.close();
},
submitForm() {
this.entryName = trimPathComponents(this.entryName);
......@@ -161,15 +165,17 @@ export default {
<div class="form-group row">
<label class="label-bold col-form-label col-sm-2"> {{ __('Name') }} </label>
<div class="col-sm-10">
<input
ref="fieldName"
v-model.trim="entryName"
type="text"
class="form-control"
data-testid="file-name-field"
data-qa-selector="file_name_field"
:placeholder="placeholder"
/>
<form data-testid="file-name-form" @submit.prevent="submitAndClose">
<input
ref="fieldName"
v-model.trim="entryName"
type="text"
class="form-control"
data-testid="file-name-field"
data-qa-selector="file_name_field"
:placeholder="placeholder"
/>
</form>
<ul v-if="isCreatingNewFile" class="file-templates gl-mt-3 list-inline qa-template-list">
<li v-for="(template, index) in templateTypes" :key="index" class="list-inline-item">
<gl-button
......
......@@ -18,6 +18,7 @@ describe('new file modal component', () => {
let store;
let wrapper;
const findForm = () => wrapper.findByTestId('file-name-form');
const findGlModal = () => wrapper.findComponent(GlModal);
const findInput = () => wrapper.findByTestId('file-name-field');
const findTemplateButtons = () => wrapper.findAllComponents(GlButton);
......@@ -33,7 +34,10 @@ describe('new file modal component', () => {
// We have to interact with the open() method?
wrapper.vm.open(type, path);
};
const triggerSubmit = () => {
const triggerSubmitForm = () => {
findForm().trigger('submit');
};
const triggerSubmitModal = () => {
findGlModal().vm.$emit('primary');
};
const triggerCancel = () => {
......@@ -211,20 +215,41 @@ describe('new file modal component', () => {
${'tree'} | ${'foo/dir'} | ${'foo/dir'}
${'tree'} | ${'foo /dir'} | ${'foo/dir'}
`('when submitting as $modalType with "$name"', ({ modalType, name, expectedName }) => {
beforeEach(async () => {
mountComponent();
describe('when using the modal primary button', () => {
beforeEach(async () => {
mountComponent();
open(modalType, '');
await nextTick();
open(modalType, '');
await nextTick();
findInput().setValue(name);
triggerSubmit();
findInput().setValue(name);
triggerSubmitModal();
});
it('triggers createTempEntry action', () => {
expect(store.dispatch).toHaveBeenCalledWith('createTempEntry', {
name: expectedName,
type: modalType,
});
});
});
it('triggers createTempEntry action', () => {
expect(store.dispatch).toHaveBeenCalledWith('createTempEntry', {
name: expectedName,
type: modalType,
describe('when triggering form submit (pressing enter)', () => {
beforeEach(async () => {
mountComponent();
open(modalType, '');
await nextTick();
findInput().setValue(name);
triggerSubmitForm();
});
it('triggers createTempEntry action', () => {
expect(store.dispatch).toHaveBeenCalledWith('createTempEntry', {
name: expectedName,
type: modalType,
});
});
});
});
......@@ -301,21 +326,42 @@ describe('new file modal component', () => {
});
describe('when renames is submitted successfully', () => {
beforeEach(() => {
findInput().setValue(NEW_NAME);
triggerSubmit();
});
describe('when using the modal primary button', () => {
beforeEach(() => {
findInput().setValue(NEW_NAME);
triggerSubmitModal();
});
it('dispatches renameEntry event', () => {
expect(store.dispatch).toHaveBeenCalledWith('renameEntry', {
path: origPath,
parentPath: '',
name: NEW_NAME,
it('dispatches renameEntry event', () => {
expect(store.dispatch).toHaveBeenCalledWith('renameEntry', {
path: origPath,
parentPath: '',
name: NEW_NAME,
});
});
it('does not trigger flash', () => {
expect(createFlash).not.toHaveBeenCalled();
});
});
it('does not trigger flash', () => {
expect(createFlash).not.toHaveBeenCalled();
describe('when triggering form submit (pressing enter)', () => {
beforeEach(() => {
findInput().setValue(NEW_NAME);
triggerSubmitForm();
});
it('dispatches renameEntry event', () => {
expect(store.dispatch).toHaveBeenCalledWith('renameEntry', {
path: origPath,
parentPath: '',
name: NEW_NAME,
});
});
it('does not trigger flash', () => {
expect(createFlash).not.toHaveBeenCalled();
});
});
});
});
......@@ -330,7 +376,7 @@ describe('new file modal component', () => {
// Set to something that already exists!
findInput().setValue('src');
triggerSubmit();
triggerSubmitModal();
});
it('creates flash', () => {
......@@ -355,7 +401,7 @@ describe('new file modal component', () => {
await nextTick();
findInput().setValue('src/deleted.js');
triggerSubmit();
triggerSubmitModal();
});
it('does not create flash', () => {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment