debian-mirror-gitlab/spec/javascripts/notes/components/note_app_spec.js

315 lines
8.6 KiB
JavaScript
Raw Normal View History

2018-05-09 12:01:36 +05:30
import $ from 'jquery';
2018-03-17 18:26:18 +05:30
import _ from 'underscore';
import Vue from 'vue';
2019-03-02 22:35:43 +05:30
import { mount, createLocalVue } from '@vue/test-utils';
import NotesApp from '~/notes/components/notes_app.vue';
2018-03-17 18:26:18 +05:30
import service from '~/notes/services/notes_service';
2018-11-08 19:23:39 +05:30
import createStore from '~/notes/stores';
2018-05-09 12:01:36 +05:30
import '~/behaviors/markdown/render_gfm';
2018-03-17 18:26:18 +05:30
import * as mockData from '../mock_data';
describe('note_app', () => {
let mountComponent;
2019-03-02 22:35:43 +05:30
let wrapper;
2018-11-08 19:23:39 +05:30
let store;
2018-03-17 18:26:18 +05:30
beforeEach(() => {
2018-03-27 19:54:05 +05:30
$('body').attr('data-page', 'projects:merge_requests:show');
2018-03-17 18:26:18 +05:30
2018-11-08 19:23:39 +05:30
store = createStore();
mountComponent = data => {
2019-03-02 22:35:43 +05:30
const propsData = data || {
2018-03-17 18:26:18 +05:30
noteableData: mockData.noteableDataMock,
notesData: mockData.notesDataMock,
userData: mockData.userDataMock,
};
2019-03-02 22:35:43 +05:30
const localVue = createLocalVue();
return mount(
{
components: {
NotesApp,
},
template: '<div class="js-vue-notes-event"><notes-app v-bind="$attrs" /></div>',
},
{
propsData,
store,
localVue,
sync: false,
},
);
2018-03-17 18:26:18 +05:30
};
});
afterEach(() => {
2019-03-02 22:35:43 +05:30
wrapper.destroy();
2018-03-17 18:26:18 +05:30
});
describe('set data', () => {
const responseInterceptor = (request, next) => {
2018-11-08 19:23:39 +05:30
next(
request.respondWith(JSON.stringify([]), {
status: 200,
}),
);
2018-03-17 18:26:18 +05:30
};
beforeEach(() => {
Vue.http.interceptors.push(responseInterceptor);
2019-03-02 22:35:43 +05:30
wrapper = mountComponent();
2018-03-17 18:26:18 +05:30
});
afterEach(() => {
Vue.http.interceptors = _.without(Vue.http.interceptors, responseInterceptor);
});
it('should set notes data', () => {
2019-03-02 22:35:43 +05:30
expect(store.state.notesData).toEqual(mockData.notesDataMock);
2018-03-17 18:26:18 +05:30
});
it('should set issue data', () => {
2019-03-02 22:35:43 +05:30
expect(store.state.noteableData).toEqual(mockData.noteableDataMock);
2018-03-17 18:26:18 +05:30
});
it('should set user data', () => {
2019-03-02 22:35:43 +05:30
expect(store.state.userData).toEqual(mockData.userDataMock);
2018-03-17 18:26:18 +05:30
});
2018-11-08 19:23:39 +05:30
it('should fetch discussions', () => {
2019-03-02 22:35:43 +05:30
expect(store.state.discussions).toEqual([]);
2018-03-17 18:26:18 +05:30
});
});
describe('render', () => {
beforeEach(() => {
Vue.http.interceptors.push(mockData.individualNoteInterceptor);
2019-03-02 22:35:43 +05:30
wrapper = mountComponent();
2018-03-17 18:26:18 +05:30
});
afterEach(() => {
Vue.http.interceptors = _.without(Vue.http.interceptors, mockData.individualNoteInterceptor);
});
2018-11-08 19:23:39 +05:30
it('should render list of notes', done => {
const note =
mockData.INDIVIDUAL_NOTE_RESPONSE_MAP.GET[
'/gitlab-org/gitlab-ce/issues/26/discussions.json'
][0].notes[0];
2018-03-17 18:26:18 +05:30
setTimeout(() => {
expect(
2019-03-02 22:35:43 +05:30
wrapper
.find('.main-notes-list .note-header-author-name')
.text()
.trim(),
2018-03-17 18:26:18 +05:30
).toEqual(note.author.name);
2019-03-02 22:35:43 +05:30
expect(wrapper.find('.main-notes-list .note-text').html()).toContain(note.note_html);
2018-03-17 18:26:18 +05:30
done();
}, 0);
});
it('should render form', () => {
2019-03-02 22:35:43 +05:30
expect(wrapper.find('.js-main-target-form').name()).toEqual('form');
expect(wrapper.find('.js-main-target-form textarea').attributes('placeholder')).toEqual(
'Write a comment or drag your files here…',
);
2018-03-17 18:26:18 +05:30
});
2018-12-13 13:39:08 +05:30
it('should not render form when commenting is disabled', () => {
store.state.commentsDisabled = true;
2019-03-02 22:35:43 +05:30
wrapper = mountComponent();
2018-12-13 13:39:08 +05:30
2019-03-02 22:35:43 +05:30
expect(wrapper.find('.js-main-target-form').exists()).toBe(false);
2018-12-13 13:39:08 +05:30
});
2018-03-17 18:26:18 +05:30
it('should render form comment button as disabled', () => {
2019-03-02 22:35:43 +05:30
expect(wrapper.find('.js-note-new-discussion').attributes('disabled')).toEqual('disabled');
2018-03-17 18:26:18 +05:30
});
});
describe('while fetching data', () => {
beforeEach(() => {
2019-03-02 22:35:43 +05:30
wrapper = mountComponent();
2018-03-17 18:26:18 +05:30
});
2018-03-27 19:54:05 +05:30
it('renders skeleton notes', () => {
2019-03-02 22:35:43 +05:30
expect(wrapper.find('.animation-container').exists()).toBe(true);
2018-03-17 18:26:18 +05:30
});
it('should render form', () => {
2019-03-02 22:35:43 +05:30
expect(wrapper.find('.js-main-target-form').name()).toEqual('form');
expect(wrapper.find('.js-main-target-form textarea').attributes('placeholder')).toEqual(
'Write a comment or drag your files here…',
);
2018-03-17 18:26:18 +05:30
});
});
describe('update note', () => {
describe('individual note', () => {
2018-11-08 19:23:39 +05:30
beforeEach(done => {
2018-03-17 18:26:18 +05:30
Vue.http.interceptors.push(mockData.individualNoteInterceptor);
spyOn(service, 'updateNote').and.callThrough();
2019-03-02 22:35:43 +05:30
wrapper = mountComponent();
2018-03-17 18:26:18 +05:30
setTimeout(() => {
2019-03-02 22:35:43 +05:30
wrapper.find('.js-note-edit').trigger('click');
2018-03-17 18:26:18 +05:30
Vue.nextTick(done);
}, 0);
});
afterEach(() => {
Vue.http.interceptors = _.without(
Vue.http.interceptors,
mockData.individualNoteInterceptor,
);
});
it('renders edit form', () => {
2019-03-02 22:35:43 +05:30
expect(wrapper.find('.js-vue-issue-note-form').exists()).toBe(true);
2018-03-17 18:26:18 +05:30
});
2018-11-08 19:23:39 +05:30
it('calls the service to update the note', done => {
2019-03-02 22:35:43 +05:30
wrapper.find('.js-vue-issue-note-form').value = 'this is a note';
wrapper.find('.js-vue-issue-save').trigger('click');
2018-03-17 18:26:18 +05:30
expect(service.updateNote).toHaveBeenCalled();
// Wait for the requests to finish before destroying
Vue.nextTick()
.then(done)
.catch(done.fail);
});
});
describe('discussion note', () => {
2018-11-08 19:23:39 +05:30
beforeEach(done => {
2018-03-17 18:26:18 +05:30
Vue.http.interceptors.push(mockData.discussionNoteInterceptor);
spyOn(service, 'updateNote').and.callThrough();
2019-03-02 22:35:43 +05:30
wrapper = mountComponent();
2018-03-17 18:26:18 +05:30
setTimeout(() => {
2019-03-02 22:35:43 +05:30
wrapper.find('.js-note-edit').trigger('click');
2018-03-17 18:26:18 +05:30
Vue.nextTick(done);
}, 0);
});
afterEach(() => {
Vue.http.interceptors = _.without(
Vue.http.interceptors,
mockData.discussionNoteInterceptor,
);
});
it('renders edit form', () => {
2019-03-02 22:35:43 +05:30
expect(wrapper.find('.js-vue-issue-note-form').exists()).toBe(true);
2018-03-17 18:26:18 +05:30
});
2018-11-08 19:23:39 +05:30
it('updates the note and resets the edit form', done => {
2019-03-02 22:35:43 +05:30
wrapper.find('.js-vue-issue-note-form').value = 'this is a note';
wrapper.find('.js-vue-issue-save').trigger('click');
2018-03-17 18:26:18 +05:30
expect(service.updateNote).toHaveBeenCalled();
// Wait for the requests to finish before destroying
Vue.nextTick()
.then(done)
.catch(done.fail);
});
});
});
describe('new note form', () => {
beforeEach(() => {
2019-03-02 22:35:43 +05:30
wrapper = mountComponent();
2018-03-17 18:26:18 +05:30
});
it('should render markdown docs url', () => {
const { markdownDocsPath } = mockData.notesDataMock;
2018-12-13 13:39:08 +05:30
2019-03-02 22:35:43 +05:30
expect(
wrapper
.find(`a[href="${markdownDocsPath}"]`)
.text()
.trim(),
).toEqual('Markdown');
2018-03-17 18:26:18 +05:30
});
it('should render quick action docs url', () => {
const { quickActionsDocsPath } = mockData.notesDataMock;
2018-12-13 13:39:08 +05:30
2019-03-02 22:35:43 +05:30
expect(
wrapper
.find(`a[href="${quickActionsDocsPath}"]`)
.text()
.trim(),
).toEqual('quick actions');
2018-03-17 18:26:18 +05:30
});
});
describe('edit form', () => {
beforeEach(() => {
Vue.http.interceptors.push(mockData.individualNoteInterceptor);
2019-03-02 22:35:43 +05:30
wrapper = mountComponent();
2018-03-17 18:26:18 +05:30
});
afterEach(() => {
Vue.http.interceptors = _.without(Vue.http.interceptors, mockData.individualNoteInterceptor);
});
2018-11-08 19:23:39 +05:30
it('should render markdown docs url', done => {
2018-03-17 18:26:18 +05:30
setTimeout(() => {
2019-03-02 22:35:43 +05:30
wrapper.find('.js-note-edit').trigger('click');
2018-03-17 18:26:18 +05:30
const { markdownDocsPath } = mockData.notesDataMock;
Vue.nextTick(() => {
expect(
2019-03-02 22:35:43 +05:30
wrapper
.find(`.edit-note a[href="${markdownDocsPath}"]`)
.text()
.trim(),
2018-03-17 18:26:18 +05:30
).toEqual('Markdown is supported');
done();
});
}, 0);
});
2018-11-08 19:23:39 +05:30
it('should not render quick actions docs url', done => {
2018-03-17 18:26:18 +05:30
setTimeout(() => {
2019-03-02 22:35:43 +05:30
wrapper.find('.js-note-edit').trigger('click');
2018-03-17 18:26:18 +05:30
const { quickActionsDocsPath } = mockData.notesDataMock;
Vue.nextTick(() => {
2019-03-02 22:35:43 +05:30
expect(wrapper.find(`.edit-note a[href="${quickActionsDocsPath}"]`).exists()).toBe(false);
2018-03-17 18:26:18 +05:30
done();
});
}, 0);
});
});
2019-02-15 15:39:39 +05:30
describe('emoji awards', () => {
it('dispatches toggleAward after toggleAward event', () => {
const toggleAwardEvent = new CustomEvent('toggleAward', {
detail: {
awardName: 'test',
noteId: 1,
},
});
2019-03-02 22:35:43 +05:30
const toggleAwardAction = jasmine.createSpy('toggleAward');
wrapper.vm.$store.hotUpdate({
actions: {
toggleAward: toggleAwardAction,
},
});
2019-02-15 15:39:39 +05:30
2019-03-02 22:35:43 +05:30
wrapper.vm.$parent.$el.dispatchEvent(toggleAwardEvent);
2019-02-15 15:39:39 +05:30
2019-03-02 22:35:43 +05:30
expect(toggleAwardAction).toHaveBeenCalledTimes(1);
const [, payload] = toggleAwardAction.calls.argsFor(0);
2019-02-15 15:39:39 +05:30
2019-03-02 22:35:43 +05:30
expect(payload).toEqual({
2019-02-15 15:39:39 +05:30
awardName: 'test',
noteId: 1,
});
});
});
2018-03-17 18:26:18 +05:30
});