119 lines
3.6 KiB
JavaScript
119 lines
3.6 KiB
JavaScript
import Vue from 'vue';
|
|
import store from '~/notes/stores';
|
|
import issueNoteForm from '~/notes/components/note_form.vue';
|
|
import { noteableDataMock, notesDataMock } from '../mock_data';
|
|
import { keyboardDownEvent } from '../../issue_show/helpers';
|
|
|
|
describe('issue_note_form component', () => {
|
|
let vm;
|
|
let props;
|
|
|
|
beforeEach(() => {
|
|
const Component = Vue.extend(issueNoteForm);
|
|
|
|
store.dispatch('setNoteableData', noteableDataMock);
|
|
store.dispatch('setNotesData', notesDataMock);
|
|
|
|
props = {
|
|
isEditing: false,
|
|
noteBody: 'Magni suscipit eius consectetur enim et ex et commodi.',
|
|
noteId: 545,
|
|
};
|
|
|
|
vm = new Component({
|
|
store,
|
|
propsData: props,
|
|
}).$mount();
|
|
});
|
|
|
|
afterEach(() => {
|
|
vm.$destroy();
|
|
});
|
|
|
|
describe('conflicts editing', () => {
|
|
it('should show conflict message if note changes outside the component', (done) => {
|
|
vm.isEditing = true;
|
|
vm.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();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('form', () => {
|
|
it('should render text area with placeholder', () => {
|
|
expect(
|
|
vm.$el.querySelector('textarea').getAttribute('placeholder'),
|
|
).toEqual('Write a comment or drag your files here...');
|
|
});
|
|
|
|
it('should link to markdown docs', () => {
|
|
const { markdownDocsPath } = notesDataMock;
|
|
expect(vm.$el.querySelector(`a[href="${markdownDocsPath}"]`).textContent.trim()).toEqual('Markdown');
|
|
});
|
|
|
|
describe('keyboard events', () => {
|
|
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));
|
|
|
|
expect(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));
|
|
|
|
expect(vm.handleUpdate).toHaveBeenCalled();
|
|
});
|
|
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));
|
|
|
|
expect(vm.handleUpdate).toHaveBeenCalled();
|
|
});
|
|
});
|
|
});
|
|
|
|
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();
|
|
});
|
|
});
|
|
});
|
|
|
|
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();
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|