gitlab-org--gitlab-foss/spec/javascripts/notes/components/noteable_discussion_spec.js
André Luís 296f489d85 Reapply "Merge branch '48817-fix-mr-changes-discussion-navigation' into 'master'"
This reverts commit e0fe97ca4a506405af8e85368f2c69cda637e192.
2018-08-01 15:26:57 +01:00

136 lines
4.2 KiB
JavaScript

import Vue from 'vue';
import createStore from '~/notes/stores';
import noteableDiscussion from '~/notes/components/noteable_discussion.vue';
import '~/behaviors/markdown/render_gfm';
import { noteableDataMock, discussionMock, notesDataMock } from '../mock_data';
const discussionWithTwoUnresolvedNotes = 'merge_requests/resolved_diff_discussion.json';
describe('noteable_discussion component', () => {
const Component = Vue.extend(noteableDiscussion);
let store;
let vm;
preloadFixtures(discussionWithTwoUnresolvedNotes);
beforeEach(() => {
window.mrTabs = {};
store = createStore();
store.dispatch('setNoteableData', noteableDataMock);
store.dispatch('setNotesData', notesDataMock);
vm = new Component({
store,
propsData: { discussion: discussionMock },
}).$mount();
});
afterEach(() => {
vm.$destroy();
});
it('should render user avatar', () => {
expect(vm.$el.querySelector('.user-avatar-link')).not.toBeNull();
});
it('should render discussion header', () => {
expect(vm.$el.querySelector('.discussion-header')).not.toBeNull();
expect(vm.$el.querySelector('.notes').children.length).toEqual(discussionMock.notes.length);
});
describe('actions', () => {
it('should render reply button', () => {
expect(vm.$el.querySelector('.js-vue-discussion-reply').textContent.trim()).toEqual(
'Reply...',
);
});
it('should toggle reply form', done => {
vm.$el.querySelector('.js-vue-discussion-reply').click();
Vue.nextTick(() => {
expect(vm.isReplying).toEqual(true);
// There is a watcher for `isReplying` which will init autosave in the next tick
Vue.nextTick(() => {
expect(vm.$refs.noteForm).not.toBeNull();
done();
});
});
});
it('does not render jump to discussion button', () => {
expect(
vm.$el.querySelector('*[data-original-title="Jump to next unresolved discussion"]'),
).toBeNull();
});
});
describe('computed', () => {
describe('hasMultipleUnresolvedDiscussions', () => {
it('is false if there are no unresolved discussions', done => {
spyOnProperty(vm, 'unresolvedDiscussions').and.returnValue([]);
Vue.nextTick()
.then(() => {
expect(vm.hasMultipleUnresolvedDiscussions).toBe(false);
})
.then(done)
.catch(done.fail);
});
it('is false if there is one unresolved discussion', done => {
spyOnProperty(vm, 'unresolvedDiscussions').and.returnValue([discussionMock]);
Vue.nextTick()
.then(() => {
expect(vm.hasMultipleUnresolvedDiscussions).toBe(false);
})
.then(done)
.catch(done.fail);
});
it('is true if there are two unresolved discussions', done => {
const discussion = getJSONFixture(discussionWithTwoUnresolvedNotes)[0];
discussion.notes[0].resolved = false;
vm.$store.dispatch('setInitialNotes', [discussion, discussion]);
Vue.nextTick()
.then(() => {
expect(vm.hasMultipleUnresolvedDiscussions).toBe(true);
})
.then(done)
.catch(done.fail);
});
});
});
describe('methods', () => {
describe('jumpToNextDiscussion', () => {
it('expands next unresolved discussion', done => {
const discussion2 = getJSONFixture(discussionWithTwoUnresolvedNotes)[0];
discussion2.resolved = false;
discussion2.id = 'next'; // prepare this for being identified as next one (to be jumped to)
vm.$store.dispatch('setInitialNotes', [discussionMock, discussion2]);
window.mrTabs.currentAction = 'show';
Vue.nextTick()
.then(() => {
spyOn(vm, 'expandDiscussion').and.stub();
const nextDiscussionId = discussion2.id;
setFixtures(`
<div class="discussion" data-discussion-id="${nextDiscussionId}"></div>
`);
vm.jumpToNextDiscussion();
expect(vm.expandDiscussion).toHaveBeenCalledWith({ discussionId: nextDiscussionId });
})
.then(done)
.catch(done.fail);
});
});
});
});