debian-mirror-gitlab/spec/frontend/notes/components/notes_app_spec.js

397 lines
11 KiB
JavaScript
Raw Normal View History

2020-04-22 19:07:51 +05:30
import $ from 'jquery';
2019-12-04 20:38:33 +05:30
import AxiosMockAdapter from 'axios-mock-adapter';
2018-03-17 18:26:18 +05:30
import Vue from 'vue';
2020-04-22 19:07:51 +05:30
import { mount, shallowMount } from '@vue/test-utils';
2020-01-01 13:55:28 +05:30
import { setTestTimeout } from 'helpers/timeout';
import axios from '~/lib/utils/axios_utils';
2019-03-02 22:35:43 +05:30
import NotesApp from '~/notes/components/notes_app.vue';
2020-04-22 19:07:51 +05:30
import CommentForm from '~/notes/components/comment_form.vue';
2018-11-08 19:23:39 +05:30
import createStore from '~/notes/stores';
2020-04-22 19:07:51 +05:30
import * as constants from '~/notes/constants';
2018-05-09 12:01:36 +05:30
import '~/behaviors/markdown/render_gfm';
2019-12-04 20:38:33 +05:30
// TODO: use generated fixture (https://gitlab.com/gitlab-org/gitlab-foss/issues/62491)
2020-05-24 23:13:21 +05:30
import * as mockData from '../mock_data';
2019-12-26 22:10:19 +05:30
import * as urlUtility from '~/lib/utils/url_utility';
2020-04-22 19:07:51 +05:30
import OrderedLayout from '~/vue_shared/components/ordered_layout.vue';
2019-09-04 21:01:54 +05:30
2020-03-13 15:44:24 +05:30
jest.mock('~/user_popovers', () => jest.fn());
2019-09-04 21:01:54 +05:30
setTestTimeout(1000);
2018-03-17 18:26:18 +05:30
2020-04-22 19:07:51 +05:30
const TYPE_COMMENT_FORM = 'comment-form';
const TYPE_NOTES_LIST = 'notes-list';
const propsData = {
noteableData: mockData.noteableDataMock,
notesData: mockData.notesDataMock,
userData: mockData.userDataMock,
};
2018-03-17 18:26:18 +05:30
describe('note_app', () => {
2019-12-04 20:38:33 +05:30
let axiosMock;
2018-03-17 18:26:18 +05:30
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
2020-04-22 19:07:51 +05:30
const getComponentOrder = () => {
return wrapper
.findAll('#notes-list,.js-comment-form')
.wrappers.map(node => (node.is(CommentForm) ? TYPE_COMMENT_FORM : TYPE_NOTES_LIST));
};
2019-09-04 21:01:54 +05:30
/**
* waits for fetchNotes() to complete
*/
const waitForDiscussionsRequest = () =>
new Promise(resolve => {
const { vm } = wrapper.find(NotesApp);
const unwatch = vm.$watch('isFetching', isFetching => {
if (isFetching) {
return;
}
unwatch();
resolve();
});
});
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
2019-12-04 20:38:33 +05:30
axiosMock = new AxiosMockAdapter(axios);
2018-11-08 19:23:39 +05:30
store = createStore();
2020-04-22 19:07:51 +05:30
mountComponent = () => {
2019-03-02 22:35:43 +05:30
return mount(
{
components: {
NotesApp,
},
2019-12-26 22:10:19 +05:30
template: `<div class="js-vue-notes-event">
<notes-app ref="notesApp" v-bind="$attrs" />
</div>`,
2019-03-02 22:35:43 +05:30
},
{
propsData,
store,
},
);
2018-03-17 18:26:18 +05:30
};
});
afterEach(() => {
2019-03-02 22:35:43 +05:30
wrapper.destroy();
2019-12-04 20:38:33 +05:30
axiosMock.restore();
2018-03-17 18:26:18 +05:30
});
describe('set data', () => {
beforeEach(() => {
2020-01-01 13:55:28 +05:30
setFixtures('<div class="js-discussions-count"></div>');
2019-12-04 20:38:33 +05:30
axiosMock.onAny().reply(200, []);
2019-03-02 22:35:43 +05:30
wrapper = mountComponent();
2019-09-04 21:01:54 +05:30
return waitForDiscussionsRequest();
2018-03-17 18:26:18 +05:30
});
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
});
2020-01-01 13:55:28 +05:30
it('updates discussions badge', () => {
expect(document.querySelector('.js-discussions-count').textContent).toEqual('0');
});
2018-03-17 18:26:18 +05:30
});
describe('render', () => {
beforeEach(() => {
2019-07-07 11:18:12 +05:30
setFixtures('<div class="js-discussions-count"></div>');
2019-12-04 20:38:33 +05:30
axiosMock.onAny().reply(mockData.getIndividualNoteResponse);
2019-03-02 22:35:43 +05:30
wrapper = mountComponent();
2019-09-04 21:01:54 +05:30
return waitForDiscussionsRequest();
2018-03-17 18:26:18 +05:30
});
2019-09-04 21:01:54 +05:30
it('should render list of notes', () => {
2018-11-08 19:23:39 +05:30
const note =
mockData.INDIVIDUAL_NOTE_RESPONSE_MAP.GET[
2019-12-04 20:38:33 +05:30
'/gitlab-org/gitlab-foss/issues/26/discussions.json'
2018-11-08 19:23:39 +05:30
][0].notes[0];
2018-03-17 18:26:18 +05:30
2019-09-04 21:01:54 +05:30
expect(
wrapper
.find('.main-notes-list .note-header-author-name')
.text()
.trim(),
).toEqual(note.author.name);
2018-03-17 18:26:18 +05:30
2019-09-04 21:01:54 +05:30
expect(wrapper.find('.main-notes-list .note-text').html()).toContain(note.note_html);
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
});
2019-12-04 20:38:33 +05:30
it('should render form comment button as disabled', () => {
expect(wrapper.find('.js-note-new-discussion').attributes('disabled')).toEqual('disabled');
});
2019-09-04 21:01:54 +05:30
2019-12-04 20:38:33 +05:30
it('updates discussions badge', () => {
expect(document.querySelector('.js-discussions-count').textContent).toEqual('2');
2018-12-13 13:39:08 +05:30
});
2019-12-04 20:38:33 +05:30
});
2018-12-13 13:39:08 +05:30
2019-12-04 20:38:33 +05:30
describe('render with comments disabled', () => {
beforeEach(() => {
setFixtures('<div class="js-discussions-count"></div>');
2019-09-04 21:01:54 +05:30
2019-12-04 20:38:33 +05:30
axiosMock.onAny().reply(mockData.getIndividualNoteResponse);
2019-07-07 11:18:12 +05:30
store.state.commentsDisabled = true;
wrapper = mountComponent();
2019-12-04 20:38:33 +05:30
return waitForDiscussionsRequest();
2019-07-07 11:18:12 +05:30
});
2019-12-04 20:38:33 +05:30
it('should not render form when commenting is disabled', () => {
expect(wrapper.find('.js-main-target-form').exists()).toBe(false);
2018-03-17 18:26:18 +05:30
});
2019-07-07 11:18:12 +05:30
2019-12-04 20:38:33 +05:30
it('should render discussion filter note `commentsDisabled` is true', () => {
expect(wrapper.find('.js-discussion-filter-note').exists()).toBe(true);
2019-07-07 11:18:12 +05:30
});
2018-03-17 18:26:18 +05:30
});
describe('while fetching data', () => {
beforeEach(() => {
2020-01-01 13:55:28 +05:30
setFixtures('<div class="js-discussions-count"></div>');
2019-12-04 20:38:33 +05:30
axiosMock.onAny().reply(200, []);
2019-03-02 22:35:43 +05:30
wrapper = mountComponent();
2018-03-17 18:26:18 +05:30
});
2019-09-04 21:01:54 +05:30
afterEach(() => waitForDiscussionsRequest());
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
});
2020-01-01 13:55:28 +05:30
it('should not update discussions badge (it should be blank)', () => {
expect(document.querySelector('.js-discussions-count').textContent).toEqual('');
});
2018-03-17 18:26:18 +05:30
});
describe('update note', () => {
describe('individual note', () => {
2019-09-04 21:01:54 +05:30
beforeEach(() => {
2019-12-04 20:38:33 +05:30
axiosMock.onAny().reply(mockData.getIndividualNoteResponse);
2019-03-02 22:35:43 +05:30
wrapper = mountComponent();
2019-09-04 21:01:54 +05:30
return waitForDiscussionsRequest().then(() => {
2019-03-02 22:35:43 +05:30
wrapper.find('.js-note-edit').trigger('click');
2019-09-04 21:01:54 +05:30
});
2018-03-17 18:26:18 +05:30
});
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
});
2020-04-08 14:13:33 +05:30
it('calls the store action to update the note', () => {
jest.spyOn(axios, 'put').mockImplementation(() => Promise.resolve({ data: {} }));
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
2020-04-08 14:13:33 +05:30
expect(axios.put).toHaveBeenCalled();
2018-03-17 18:26:18 +05:30
});
});
describe('discussion note', () => {
2019-09-04 21:01:54 +05:30
beforeEach(() => {
2019-12-04 20:38:33 +05:30
axiosMock.onAny().reply(mockData.getDiscussionNoteResponse);
2019-03-02 22:35:43 +05:30
wrapper = mountComponent();
2019-09-04 21:01:54 +05:30
return waitForDiscussionsRequest().then(() => {
2019-03-02 22:35:43 +05:30
wrapper.find('.js-note-edit').trigger('click');
2019-09-04 21:01:54 +05:30
});
2018-03-17 18:26:18 +05:30
});
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
});
2019-09-04 21:01:54 +05:30
it('updates the note and resets the edit form', () => {
2020-04-08 14:13:33 +05:30
jest.spyOn(axios, 'put').mockImplementation(() => Promise.resolve({ data: {} }));
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
2020-04-08 14:13:33 +05:30
expect(axios.put).toHaveBeenCalled();
2018-03-17 18:26:18 +05:30
});
});
});
describe('new note form', () => {
beforeEach(() => {
2019-12-04 20:38:33 +05:30
axiosMock.onAny().reply(mockData.getIndividualNoteResponse);
2019-03-02 22:35:43 +05:30
wrapper = mountComponent();
2019-09-04 21:01:54 +05:30
return waitForDiscussionsRequest();
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(() => {
2019-12-04 20:38:33 +05:30
axiosMock.onAny().reply(mockData.getIndividualNoteResponse);
2019-03-02 22:35:43 +05:30
wrapper = mountComponent();
2019-09-04 21:01:54 +05:30
return waitForDiscussionsRequest();
2018-03-17 18:26:18 +05:30
});
2019-09-04 21:01:54 +05:30
it('should render markdown docs url', () => {
wrapper.find('.js-note-edit').trigger('click');
const { markdownDocsPath } = mockData.notesDataMock;
2018-03-17 18:26:18 +05:30
2019-09-04 21:01:54 +05:30
return Vue.nextTick().then(() => {
expect(
wrapper
.find(`.edit-note a[href="${markdownDocsPath}"]`)
.text()
.trim(),
).toEqual('Markdown is supported');
});
2018-03-17 18:26:18 +05:30
});
2019-09-04 21:01:54 +05:30
it('should not render quick actions docs url', () => {
wrapper.find('.js-note-edit').trigger('click');
const { quickActionsDocsPath } = mockData.notesDataMock;
2020-03-13 15:44:24 +05:30
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(`.edit-note a[href="${quickActionsDocsPath}"]`).exists()).toBe(false);
});
2018-03-17 18:26:18 +05:30
});
});
2019-02-15 15:39:39 +05:30
describe('emoji awards', () => {
2019-09-04 21:01:54 +05:30
beforeEach(() => {
2019-12-04 20:38:33 +05:30
axiosMock.onAny().reply(200, []);
2019-09-04 21:01:54 +05:30
wrapper = mountComponent();
return waitForDiscussionsRequest();
});
2019-02-15 15:39:39 +05:30
it('dispatches toggleAward after toggleAward event', () => {
const toggleAwardEvent = new CustomEvent('toggleAward', {
detail: {
awardName: 'test',
noteId: 1,
},
});
2019-09-04 21:01:54 +05:30
const toggleAwardAction = jest.fn().mockName('toggleAward');
2019-03-02 22:35:43 +05:30
wrapper.vm.$store.hotUpdate({
actions: {
toggleAward: toggleAwardAction,
2019-09-04 21:01:54 +05:30
stopPolling() {},
2019-03-02 22:35:43 +05:30
},
});
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);
2019-09-04 21:01:54 +05:30
const [, payload] = toggleAwardAction.mock.calls[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,
});
});
});
2019-12-26 22:10:19 +05:30
describe('mounted', () => {
beforeEach(() => {
axiosMock.onAny().reply(mockData.getIndividualNoteResponse);
wrapper = mountComponent();
return waitForDiscussionsRequest();
});
it('should listen hashchange event', () => {
const notesApp = wrapper.find(NotesApp);
const hash = 'some dummy hash';
jest.spyOn(urlUtility, 'getLocationHash').mockReturnValueOnce(hash);
const setTargetNoteHash = jest.spyOn(notesApp.vm, 'setTargetNoteHash');
window.dispatchEvent(new Event('hashchange'), hash);
expect(setTargetNoteHash).toHaveBeenCalled();
});
});
2020-04-22 19:07:51 +05:30
describe('when sort direction is desc', () => {
beforeEach(() => {
store = createStore();
store.state.discussionSortOrder = constants.DESC;
wrapper = shallowMount(NotesApp, {
propsData,
store,
stubs: {
'ordered-layout': OrderedLayout,
},
});
});
it('finds CommentForm before notes list', () => {
expect(getComponentOrder()).toStrictEqual([TYPE_COMMENT_FORM, TYPE_NOTES_LIST]);
});
});
describe('when sort direction is asc', () => {
beforeEach(() => {
store = createStore();
wrapper = shallowMount(NotesApp, {
propsData,
store,
stubs: {
'ordered-layout': OrderedLayout,
},
});
});
it('finds CommentForm after notes list', () => {
expect(getComponentOrder()).toStrictEqual([TYPE_NOTES_LIST, TYPE_COMMENT_FORM]);
});
});
2018-03-17 18:26:18 +05:30
});