gitlab-org--gitlab-foss/spec/javascripts/notes/components/note_app_spec.js

261 lines
7.4 KiB
JavaScript
Raw Normal View History

2017-12-19 05:12:32 -05:00
import _ from 'underscore';
2017-08-07 13:23:56 -04:00
import Vue from 'vue';
2017-12-08 15:24:52 -05:00
import notesApp from '~/notes/components/notes_app.vue';
2017-11-30 17:44:41 -05:00
import service from '~/notes/services/notes_service';
import '~/render_gfm';
2017-08-07 13:23:56 -04:00
import * as mockData from '../mock_data';
const vueMatchers = {
toIncludeElement() {
return {
compare(vm, selector) {
const result = {
pass: vm.$el.querySelector(selector) !== null,
};
return result;
},
};
},
};
2017-08-04 11:51:35 -04:00
2017-12-08 15:24:52 -05:00
describe('note_app', () => {
2017-08-07 13:23:56 -04:00
let mountComponent;
2017-08-08 19:24:49 -04:00
let vm;
2017-08-07 13:23:56 -04:00
beforeEach(() => {
jasmine.addMatchers(vueMatchers);
$('body').attr('data-page', 'projects:merge_requests:show');
2017-12-08 15:24:52 -05:00
const IssueNotesApp = Vue.extend(notesApp);
2017-08-07 13:23:56 -04:00
2017-08-08 19:24:49 -04:00
mountComponent = (data) => {
const props = data || {
2017-11-30 17:44:41 -05:00
noteableData: mockData.noteableDataMock,
2017-08-08 19:24:49 -04:00
notesData: mockData.notesDataMock,
userData: mockData.userDataMock,
};
return new IssueNotesApp({
propsData: props,
}).$mount();
};
2017-08-04 11:51:35 -04:00
});
2017-08-08 19:24:49 -04:00
afterEach(() => {
vm.$destroy();
});
2017-08-07 13:23:56 -04:00
2017-08-08 19:24:49 -04:00
describe('set data', () => {
2017-08-07 13:23:56 -04:00
const responseInterceptor = (request, next) => {
next(request.respondWith(JSON.stringify([]), {
status: 200,
}));
};
beforeEach(() => {
Vue.http.interceptors.push(responseInterceptor);
2017-08-08 19:24:49 -04:00
vm = mountComponent();
2017-08-07 13:23:56 -04:00
});
afterEach(() => {
Vue.http.interceptors = _.without(Vue.http.interceptors, responseInterceptor);
});
it('should set notes data', () => {
expect(vm.$store.state.notesData).toEqual(mockData.notesDataMock);
});
it('should set issue data', () => {
2017-11-30 17:44:41 -05:00
expect(vm.$store.state.noteableData).toEqual(mockData.noteableDataMock);
2017-08-07 13:23:56 -04:00
});
it('should set user data', () => {
expect(vm.$store.state.userData).toEqual(mockData.userDataMock);
});
2017-08-04 11:51:35 -04:00
2017-08-07 13:23:56 -04:00
it('should fetch notes', () => {
expect(vm.$store.state.notes).toEqual([]);
});
2017-08-04 11:51:35 -04:00
});
describe('render', () => {
2017-08-07 13:23:56 -04:00
beforeEach(() => {
2017-12-11 16:39:30 -05:00
Vue.http.interceptors.push(mockData.individualNoteInterceptor);
2017-08-08 19:24:49 -04:00
vm = mountComponent();
2017-08-07 13:23:56 -04:00
});
afterEach(() => {
2017-12-11 16:39:30 -05:00
Vue.http.interceptors = _.without(Vue.http.interceptors, mockData.individualNoteInterceptor);
2017-08-07 13:23:56 -04:00
});
it('should render list of notes', (done) => {
2017-12-11 16:39:30 -05:00
const note = mockData.INDIVIDUAL_NOTE_RESPONSE_MAP.GET['/gitlab-org/gitlab-ce/issues/26/discussions.json'][0].notes[0];
setTimeout(() => {
expect(
vm.$el.querySelector('.main-notes-list .note-header-author-name').textContent.trim(),
).toEqual(note.author.name);
expect(vm.$el.querySelector('.main-notes-list .note-text').innerHTML).toEqual(note.note_html);
done();
}, 0);
2017-08-07 13:23:56 -04:00
});
2017-08-04 11:51:35 -04:00
2017-08-07 13:23:56 -04:00
it('should render form', () => {
expect(vm.$el.querySelector('.js-main-target-form').tagName).toEqual('FORM');
expect(
vm.$el.querySelector('.js-main-target-form textarea').getAttribute('placeholder'),
).toEqual('Write a comment or drag your files here...');
});
2017-08-08 19:24:49 -04:00
it('should render form comment button as disabled', () => {
expect(
vm.$el.querySelector('.js-note-new-discussion').getAttribute('disabled'),
).toEqual('disabled');
});
2017-08-04 11:51:35 -04:00
});
2017-08-07 13:23:56 -04:00
describe('while fetching data', () => {
beforeEach(() => {
2017-08-08 19:24:49 -04:00
vm = mountComponent();
2017-08-07 13:23:56 -04:00
});
it('renders skeleton notes', () => {
expect(vm).toIncludeElement('.animation-container');
2017-08-07 13:23:56 -04:00
});
2017-08-04 11:51:35 -04:00
2017-08-07 13:23:56 -04:00
it('should render form', () => {
expect(vm.$el.querySelector('.js-main-target-form').tagName).toEqual('FORM');
expect(
vm.$el.querySelector('.js-main-target-form textarea').getAttribute('placeholder'),
).toEqual('Write a comment or drag your files here...');
});
2017-08-04 11:51:35 -04:00
});
2017-08-07 13:23:56 -04:00
describe('update note', () => {
describe('individual note', () => {
beforeEach((done) => {
2017-12-11 16:39:30 -05:00
Vue.http.interceptors.push(mockData.individualNoteInterceptor);
spyOn(service, 'updateNote').and.callThrough();
2017-08-08 19:24:49 -04:00
vm = mountComponent();
setTimeout(() => {
vm.$el.querySelector('.js-note-edit').click();
Vue.nextTick(done);
}, 0);
2017-08-07 13:23:56 -04:00
});
afterEach(() => {
2017-12-11 16:39:30 -05:00
Vue.http.interceptors = _.without(
Vue.http.interceptors,
mockData.individualNoteInterceptor,
);
});
it('renders edit form', () => {
expect(vm).toIncludeElement('.js-vue-issue-note-form');
2017-08-07 13:23:56 -04:00
});
2017-08-08 19:24:49 -04:00
it('calls the service to update the note', (done) => {
vm.$el.querySelector('.js-vue-issue-note-form').value = 'this is a note';
vm.$el.querySelector('.js-vue-issue-save').click();
expect(service.updateNote).toHaveBeenCalled();
// Wait for the requests to finish before destroying
Vue.nextTick()
.then(done)
.catch(done.fail);
2017-08-07 13:23:56 -04:00
});
});
describe('discussion note', () => {
beforeEach((done) => {
2017-12-11 16:39:30 -05:00
Vue.http.interceptors.push(mockData.discussionNoteInterceptor);
spyOn(service, 'updateNote').and.callThrough();
2017-08-08 19:24:49 -04:00
vm = mountComponent();
setTimeout(() => {
vm.$el.querySelector('.js-note-edit').click();
Vue.nextTick(done);
}, 0);
2017-08-08 19:24:49 -04:00
});
2017-08-07 13:23:56 -04:00
2017-08-08 19:24:49 -04:00
afterEach(() => {
2017-12-11 16:39:30 -05:00
Vue.http.interceptors = _.without(
Vue.http.interceptors,
mockData.discussionNoteInterceptor,
);
2017-08-08 19:24:49 -04:00
});
2017-08-07 13:23:56 -04:00
it('renders edit form', () => {
expect(vm).toIncludeElement('.js-vue-issue-note-form');
2017-08-08 19:24:49 -04:00
});
2017-08-07 13:23:56 -04:00
2017-08-08 19:24:49 -04:00
it('updates the note and resets the edit form', (done) => {
vm.$el.querySelector('.js-vue-issue-note-form').value = 'this is a note';
vm.$el.querySelector('.js-vue-issue-save').click();
expect(service.updateNote).toHaveBeenCalled();
// Wait for the requests to finish before destroying
Vue.nextTick()
.then(done)
.catch(done.fail);
2017-08-08 19:24:49 -04:00
});
2017-08-07 13:23:56 -04:00
});
2017-08-04 11:51:35 -04:00
});
2017-08-08 19:24:49 -04:00
describe('new note form', () => {
beforeEach(() => {
vm = mountComponent();
2017-08-04 11:51:35 -04:00
});
2017-08-08 19:24:49 -04:00
it('should render markdown docs url', () => {
const { markdownDocsPath } = mockData.notesDataMock;
expect(vm.$el.querySelector(`a[href="${markdownDocsPath}"]`).textContent.trim()).toEqual('Markdown');
2017-08-07 13:23:56 -04:00
});
2017-08-04 11:51:35 -04:00
2017-08-08 19:24:49 -04:00
it('should render quick action docs url', () => {
const { quickActionsDocsPath } = mockData.notesDataMock;
expect(vm.$el.querySelector(`a[href="${quickActionsDocsPath}"]`).textContent.trim()).toEqual('quick actions');
2017-08-04 11:51:35 -04:00
});
});
2017-08-07 13:23:56 -04:00
2017-08-08 19:24:49 -04:00
describe('edit form', () => {
beforeEach(() => {
2017-12-11 16:39:30 -05:00
Vue.http.interceptors.push(mockData.individualNoteInterceptor);
2017-08-08 19:24:49 -04:00
vm = mountComponent();
2017-08-07 13:23:56 -04:00
});
2017-08-08 19:24:49 -04:00
afterEach(() => {
2017-12-11 16:39:30 -05:00
Vue.http.interceptors = _.without(Vue.http.interceptors, mockData.individualNoteInterceptor);
2017-08-07 13:23:56 -04:00
});
2017-08-08 19:24:49 -04:00
it('should render markdown docs url', (done) => {
setTimeout(() => {
vm.$el.querySelector('.js-note-edit').click();
const { markdownDocsPath } = mockData.notesDataMock;
2017-08-08 19:24:49 -04:00
Vue.nextTick(() => {
expect(
vm.$el.querySelector(`.edit-note a[href="${markdownDocsPath}"]`).textContent.trim(),
2017-08-08 19:24:49 -04:00
).toEqual('Markdown is supported');
done();
});
}, 0);
2017-08-07 13:23:56 -04:00
});
2017-08-08 19:24:49 -04:00
it('should not render quick actions docs url', (done) => {
setTimeout(() => {
vm.$el.querySelector('.js-note-edit').click();
const { quickActionsDocsPath } = mockData.notesDataMock;
2017-08-08 19:24:49 -04:00
Vue.nextTick(() => {
expect(
vm.$el.querySelector(`.edit-note a[href="${quickActionsDocsPath}"]`),
2017-08-08 19:24:49 -04:00
).toEqual(null);
done();
});
}, 0);
2017-08-07 13:23:56 -04:00
});
});
});