Merge branch 'winh-note_form_spec-vue-test-utils' into 'master'
Refactor note_form_spec.js to use Vue test utils See merge request gitlab-org/gitlab-ce!25571
This commit is contained in:
commit
1b85760467
|
@ -1,17 +1,15 @@
|
|||
import Vue from 'vue';
|
||||
import { shallowMount, createLocalVue } from '@vue/test-utils';
|
||||
import createStore from '~/notes/stores';
|
||||
import issueNoteForm from '~/notes/components/note_form.vue';
|
||||
import NoteForm from '~/notes/components/note_form.vue';
|
||||
import MarkdownField from '~/vue_shared/components/markdown/field.vue';
|
||||
import { noteableDataMock, notesDataMock } from '../mock_data';
|
||||
import { keyboardDownEvent } from '../../issue_show/helpers';
|
||||
|
||||
describe('issue_note_form component', () => {
|
||||
let store;
|
||||
let vm;
|
||||
let wrapper;
|
||||
let props;
|
||||
|
||||
beforeEach(() => {
|
||||
const Component = Vue.extend(issueNoteForm);
|
||||
|
||||
store = createStore();
|
||||
store.dispatch('setNoteableData', noteableDataMock);
|
||||
store.dispatch('setNotesData', notesDataMock);
|
||||
|
@ -22,26 +20,35 @@ describe('issue_note_form component', () => {
|
|||
noteId: '545',
|
||||
};
|
||||
|
||||
vm = new Component({
|
||||
const localVue = createLocalVue();
|
||||
wrapper = shallowMount(NoteForm, {
|
||||
store,
|
||||
propsData: props,
|
||||
}).$mount();
|
||||
// see https://gitlab.com/gitlab-org/gitlab-ce/issues/56317 for the following
|
||||
localVue,
|
||||
sync: false,
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vm.$destroy();
|
||||
wrapper.destroy();
|
||||
});
|
||||
|
||||
describe('noteHash', () => {
|
||||
it('returns note hash string based on `noteId`', () => {
|
||||
expect(vm.noteHash).toBe(`#note_${props.noteId}`);
|
||||
expect(wrapper.vm.noteHash).toBe(`#note_${props.noteId}`);
|
||||
});
|
||||
|
||||
it('return note hash as `#` when `noteId` is empty', done => {
|
||||
vm.noteId = '';
|
||||
Vue.nextTick()
|
||||
wrapper.setProps({
|
||||
...props,
|
||||
noteId: '',
|
||||
});
|
||||
|
||||
wrapper.vm
|
||||
.$nextTick()
|
||||
.then(() => {
|
||||
expect(vm.noteHash).toBe('#');
|
||||
expect(wrapper.vm.noteHash).toBe('#');
|
||||
})
|
||||
.then(done)
|
||||
.catch(done.fail);
|
||||
|
@ -50,95 +57,127 @@ describe('issue_note_form component', () => {
|
|||
|
||||
describe('conflicts editing', () => {
|
||||
it('should show conflict message if note changes outside the component', done => {
|
||||
vm.isEditing = true;
|
||||
vm.noteBody = 'Foo';
|
||||
wrapper.setProps({
|
||||
...props,
|
||||
isEditing: true,
|
||||
noteBody: 'Foo',
|
||||
});
|
||||
|
||||
const message =
|
||||
'This comment has changed since you started editing, please review the updated comment to ensure information is not lost.';
|
||||
|
||||
Vue.nextTick(() => {
|
||||
expect(
|
||||
vm.$el
|
||||
.querySelector('.js-conflict-edit-warning')
|
||||
.textContent.replace(/\s+/g, ' ')
|
||||
.trim(),
|
||||
).toEqual(message);
|
||||
done();
|
||||
});
|
||||
wrapper.vm
|
||||
.$nextTick()
|
||||
.then(() => {
|
||||
const conflictWarning = wrapper.find('.js-conflict-edit-warning');
|
||||
|
||||
expect(conflictWarning.exists()).toBe(true);
|
||||
expect(
|
||||
conflictWarning
|
||||
.text()
|
||||
.replace(/\s+/g, ' ')
|
||||
.trim(),
|
||||
).toBe(message);
|
||||
})
|
||||
.then(done)
|
||||
.catch(done.fail);
|
||||
});
|
||||
});
|
||||
|
||||
describe('form', () => {
|
||||
it('should render text area with placeholder', () => {
|
||||
expect(vm.$el.querySelector('textarea').getAttribute('placeholder')).toEqual(
|
||||
const textarea = wrapper.find('textarea');
|
||||
|
||||
expect(textarea.attributes('placeholder')).toEqual(
|
||||
'Write a comment or drag your files here…',
|
||||
);
|
||||
});
|
||||
|
||||
it('should link to markdown docs', () => {
|
||||
const { markdownDocsPath } = notesDataMock;
|
||||
const markdownField = wrapper.find(MarkdownField);
|
||||
const markdownFieldProps = markdownField.props();
|
||||
|
||||
expect(vm.$el.querySelector(`a[href="${markdownDocsPath}"]`).textContent.trim()).toEqual(
|
||||
'Markdown',
|
||||
);
|
||||
expect(markdownFieldProps.markdownDocsPath).toBe(markdownDocsPath);
|
||||
});
|
||||
|
||||
describe('keyboard events', () => {
|
||||
let textarea;
|
||||
|
||||
beforeEach(() => {
|
||||
textarea = wrapper.find('textarea');
|
||||
textarea.setValue('Foo');
|
||||
});
|
||||
|
||||
describe('up', () => {
|
||||
it('should ender edit mode', () => {
|
||||
spyOn(vm, 'editMyLastNote').and.callThrough();
|
||||
vm.$el.querySelector('textarea').value = 'Foo';
|
||||
vm.$el.querySelector('textarea').dispatchEvent(keyboardDownEvent(38, true));
|
||||
// TODO: do not spy on vm
|
||||
spyOn(wrapper.vm, 'editMyLastNote').and.callThrough();
|
||||
|
||||
expect(vm.editMyLastNote).toHaveBeenCalled();
|
||||
textarea.trigger('keydown.up');
|
||||
|
||||
expect(wrapper.vm.editMyLastNote).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('enter', () => {
|
||||
it('should save note when cmd+enter is pressed', () => {
|
||||
spyOn(vm, 'handleUpdate').and.callThrough();
|
||||
vm.$el.querySelector('textarea').value = 'Foo';
|
||||
vm.$el.querySelector('textarea').dispatchEvent(keyboardDownEvent(13, true));
|
||||
textarea.trigger('keydown.enter', { metaKey: true });
|
||||
|
||||
expect(vm.handleUpdate).toHaveBeenCalled();
|
||||
const { handleFormUpdate } = wrapper.emitted();
|
||||
|
||||
expect(handleFormUpdate.length).toBe(1);
|
||||
});
|
||||
|
||||
it('should save note when ctrl+enter is pressed', () => {
|
||||
spyOn(vm, 'handleUpdate').and.callThrough();
|
||||
vm.$el.querySelector('textarea').value = 'Foo';
|
||||
vm.$el.querySelector('textarea').dispatchEvent(keyboardDownEvent(13, false, true));
|
||||
textarea.trigger('keydown.enter', { ctrlKey: true });
|
||||
|
||||
expect(vm.handleUpdate).toHaveBeenCalled();
|
||||
const { handleFormUpdate } = wrapper.emitted();
|
||||
|
||||
expect(handleFormUpdate.length).toBe(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('actions', () => {
|
||||
it('should be possible to cancel', done => {
|
||||
spyOn(vm, 'cancelHandler').and.callThrough();
|
||||
vm.isEditing = true;
|
||||
|
||||
Vue.nextTick(() => {
|
||||
vm.$el.querySelector('.note-edit-cancel').click();
|
||||
|
||||
Vue.nextTick(() => {
|
||||
expect(vm.cancelHandler).toHaveBeenCalled();
|
||||
done();
|
||||
});
|
||||
// TODO: do not spy on vm
|
||||
spyOn(wrapper.vm, 'cancelHandler').and.callThrough();
|
||||
wrapper.setProps({
|
||||
...props,
|
||||
isEditing: true,
|
||||
});
|
||||
|
||||
wrapper.vm
|
||||
.$nextTick()
|
||||
.then(() => {
|
||||
const cancelButton = wrapper.find('.note-edit-cancel');
|
||||
cancelButton.trigger('click');
|
||||
|
||||
expect(wrapper.vm.cancelHandler).toHaveBeenCalled();
|
||||
})
|
||||
.then(done)
|
||||
.catch(done.fail);
|
||||
});
|
||||
|
||||
it('should be possible to update the note', done => {
|
||||
vm.isEditing = true;
|
||||
|
||||
Vue.nextTick(() => {
|
||||
vm.$el.querySelector('textarea').value = 'Foo';
|
||||
vm.$el.querySelector('.js-vue-issue-save').click();
|
||||
|
||||
Vue.nextTick(() => {
|
||||
expect(vm.isSubmitting).toEqual(true);
|
||||
done();
|
||||
});
|
||||
wrapper.setProps({
|
||||
...props,
|
||||
isEditing: true,
|
||||
});
|
||||
|
||||
wrapper.vm
|
||||
.$nextTick()
|
||||
.then(() => {
|
||||
const textarea = wrapper.find('textarea');
|
||||
textarea.setValue('Foo');
|
||||
const saveButton = wrapper.find('.js-vue-issue-save');
|
||||
saveButton.trigger('click');
|
||||
|
||||
expect(wrapper.vm.isSubmitting).toEqual(true);
|
||||
})
|
||||
.then(done)
|
||||
.catch(done.fail);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue