1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
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();
});
});
});
});
});
});
|
