Commit d8e18a74 authored by Winnie Hellmann's avatar Winnie Hellmann

Convert noteable_discussion_spec.js to Vue test utils

parent fda30abd
import Vue from 'vue'; import { shallowMount, createLocalVue } from '@vue/test-utils';
import createStore from '~/notes/stores'; import createStore from '~/notes/stores';
import noteableDiscussion from '~/notes/components/noteable_discussion.vue'; import noteableDiscussion from '~/notes/components/noteable_discussion.vue';
import '~/behaviors/markdown/render_gfm'; import '~/behaviors/markdown/render_gfm';
...@@ -8,9 +8,8 @@ import mockDiffFile from '../../diffs/mock_data/diff_file'; ...@@ -8,9 +8,8 @@ import mockDiffFile from '../../diffs/mock_data/diff_file';
const discussionWithTwoUnresolvedNotes = 'merge_requests/resolved_diff_discussion.json'; const discussionWithTwoUnresolvedNotes = 'merge_requests/resolved_diff_discussion.json';
describe('noteable_discussion component', () => { describe('noteable_discussion component', () => {
const Component = Vue.extend(noteableDiscussion);
let store; let store;
let vm; let wrapper;
preloadFixtures(discussionWithTwoUnresolvedNotes); preloadFixtures(discussionWithTwoUnresolvedNotes);
...@@ -20,54 +19,62 @@ describe('noteable_discussion component', () => { ...@@ -20,54 +19,62 @@ describe('noteable_discussion component', () => {
store.dispatch('setNoteableData', noteableDataMock); store.dispatch('setNoteableData', noteableDataMock);
store.dispatch('setNotesData', notesDataMock); store.dispatch('setNotesData', notesDataMock);
vm = new Component({ const localVue = createLocalVue();
wrapper = shallowMount(noteableDiscussion, {
store, store,
propsData: { discussion: discussionMock }, propsData: { discussion: discussionMock },
}).$mount(); localVue,
sync: false,
});
}); });
afterEach(() => { afterEach(() => {
vm.$destroy(); wrapper.destroy();
}); });
it('should render user avatar', () => { it('should render user avatar', () => {
expect(vm.$el.querySelector('.user-avatar-link')).not.toBeNull(); expect(wrapper.find('.user-avatar-link').exists()).toBe(true);
}); });
it('should not render discussion header for non diff discussions', () => { it('should not render discussion header for non diff discussions', () => {
expect(vm.$el.querySelector('.discussion-header')).toBeNull(); expect(wrapper.find('.discussion-header').exists()).toBe(false);
}); });
it('should render discussion header', () => { it('should render discussion header', done => {
const discussion = { ...discussionMock }; const discussion = { ...discussionMock };
discussion.diff_file = mockDiffFile; discussion.diff_file = mockDiffFile;
discussion.diff_discussion = true; discussion.diff_discussion = true;
vm.$destroy(); wrapper.setProps({ discussion });
vm = new Component({
store,
propsData: { discussion },
}).$mount();
expect(vm.$el.querySelector('.discussion-header')).not.toBeNull(); wrapper.vm
.$nextTick()
.then(() => {
expect(wrapper.find('.discussion-header').exists()).toBe(true);
})
.then(done)
.catch(done.fail);
}); });
describe('actions', () => { describe('actions', () => {
it('should render reply button', () => { it('should render reply button', () => {
expect(vm.$el.querySelector('.js-vue-discussion-reply').textContent.trim()).toEqual( expect(
'Reply...', wrapper
); .find('.js-vue-discussion-reply')
.text()
.trim(),
).toEqual('Reply...');
}); });
it('should toggle reply form', done => { it('should toggle reply form', done => {
vm.$el.querySelector('.js-vue-discussion-reply').click(); wrapper.find('.js-vue-discussion-reply').trigger('click');
Vue.nextTick(() => { wrapper.vm.$nextTick(() => {
expect(vm.isReplying).toEqual(true); expect(wrapper.vm.isReplying).toEqual(true);
// There is a watcher for `isReplying` which will init autosave in the next tick // There is a watcher for `isReplying` which will init autosave in the next tick
Vue.nextTick(() => { wrapper.vm.$nextTick(() => {
expect(vm.$refs.noteForm).not.toBeNull(); expect(wrapper.vm.$refs.noteForm).not.toBeNull();
done(); done();
}); });
}); });
...@@ -75,8 +82,8 @@ describe('noteable_discussion component', () => { ...@@ -75,8 +82,8 @@ describe('noteable_discussion component', () => {
it('does not render jump to discussion button', () => { it('does not render jump to discussion button', () => {
expect( expect(
vm.$el.querySelector('*[data-original-title="Jump to next unresolved discussion"]'), wrapper.find('*[data-original-title="Jump to next unresolved discussion"]').exists(),
).toBeNull(); ).toBe(false);
}); });
}); });
...@@ -87,12 +94,13 @@ describe('noteable_discussion component', () => { ...@@ -87,12 +94,13 @@ describe('noteable_discussion component', () => {
discussion2.resolved = false; discussion2.resolved = false;
discussion2.active = true; discussion2.active = true;
discussion2.id = 'next'; // prepare this for being identified as next one (to be jumped to) discussion2.id = 'next'; // prepare this for being identified as next one (to be jumped to)
vm.$store.dispatch('setInitialNotes', [discussionMock, discussion2]); store.dispatch('setInitialNotes', [discussionMock, discussion2]);
window.mrTabs.currentAction = 'show'; window.mrTabs.currentAction = 'show';
Vue.nextTick() wrapper.vm
.$nextTick()
.then(() => { .then(() => {
spyOn(vm, 'expandDiscussion').and.stub(); spyOn(wrapper.vm, 'expandDiscussion').and.stub();
const nextDiscussionId = discussion2.id; const nextDiscussionId = discussion2.id;
...@@ -100,9 +108,11 @@ describe('noteable_discussion component', () => { ...@@ -100,9 +108,11 @@ describe('noteable_discussion component', () => {
<div class="discussion" data-discussion-id="${nextDiscussionId}"></div> <div class="discussion" data-discussion-id="${nextDiscussionId}"></div>
`); `);
vm.jumpToNextDiscussion(); wrapper.vm.jumpToNextDiscussion();
expect(vm.expandDiscussion).toHaveBeenCalledWith({ discussionId: nextDiscussionId }); expect(wrapper.vm.expandDiscussion).toHaveBeenCalledWith({
discussionId: nextDiscussionId,
});
}) })
.then(done) .then(done)
.catch(done.fail); .catch(done.fail);
...@@ -117,7 +127,7 @@ describe('noteable_discussion component', () => { ...@@ -117,7 +127,7 @@ describe('noteable_discussion component', () => {
notes: [{ body: 'hello world!' }], notes: [{ body: 'hello world!' }],
}; };
const note = vm.componentData(data); const note = wrapper.vm.componentData(data);
expect(note).toEqual(data.notes[0]); expect(note).toEqual(data.notes[0]);
}); });
...@@ -127,7 +137,7 @@ describe('noteable_discussion component', () => { ...@@ -127,7 +137,7 @@ describe('noteable_discussion component', () => {
notes: [{ id: 12 }], notes: [{ id: 12 }],
}; };
const note = vm.componentData(data); const note = wrapper.vm.componentData(data);
expect(note).toEqual(data); expect(note).toEqual(data);
}); });
...@@ -138,15 +148,12 @@ describe('noteable_discussion component', () => { ...@@ -138,15 +148,12 @@ describe('noteable_discussion component', () => {
const truncatedCommitId = commitId.substr(0, 8); const truncatedCommitId = commitId.substr(0, 8);
let commitElement; let commitElement;
beforeEach(() => { beforeEach(done => {
vm.$destroy();
store.state.diffs = { store.state.diffs = {
projectPath: 'something', projectPath: 'something',
}; };
vm = new Component({ wrapper.setProps({
propsData: {
discussion: { discussion: {
...discussionMock, ...discussionMock,
for_commit: true, for_commit: true,
...@@ -157,27 +164,32 @@ describe('noteable_discussion component', () => { ...@@ -157,27 +164,32 @@ describe('noteable_discussion component', () => {
}, },
}, },
renderDiffFile: true, renderDiffFile: true,
}, });
store,
}).$mount();
commitElement = vm.$el.querySelector('.commit-sha'); wrapper.vm
.$nextTick()
.then(() => {
commitElement = wrapper.find('.commit-sha');
})
.then(done)
.catch(done.fail);
}); });
describe('for commit discussions', () => { describe('for commit discussions', () => {
it('should display a monospace started a discussion on commit', () => { it('should display a monospace started a discussion on commit', () => {
expect(vm.$el).toContainText(`started a discussion on commit ${truncatedCommitId}`); expect(wrapper.text()).toContain(`started a discussion on commit ${truncatedCommitId}`);
expect(commitElement).not.toBe(null); expect(commitElement.exists()).toBe(true);
expect(commitElement).toHaveText(truncatedCommitId); expect(commitElement.text()).toContain(truncatedCommitId);
}); });
}); });
describe('for diff discussion with a commit id', () => { describe('for diff discussion with a commit id', () => {
it('should display started discussion on commit header', done => { it('should display started discussion on commit header', done => {
vm.discussion.for_commit = false; wrapper.vm.discussion.for_commit = false;
wrapper.vm.$nextTick(() => {
expect(wrapper.text()).toContain(`started a discussion on commit ${truncatedCommitId}`);
vm.$nextTick(() => {
expect(vm.$el).toContainText(`started a discussion on commit ${truncatedCommitId}`);
expect(commitElement).not.toBe(null); expect(commitElement).not.toBe(null);
done(); done();
...@@ -185,11 +197,11 @@ describe('noteable_discussion component', () => { ...@@ -185,11 +197,11 @@ describe('noteable_discussion component', () => {
}); });
it('should display outdated change on commit header', done => { it('should display outdated change on commit header', done => {
vm.discussion.for_commit = false; wrapper.vm.discussion.for_commit = false;
vm.discussion.active = false; wrapper.vm.discussion.active = false;
vm.$nextTick(() => { wrapper.vm.$nextTick(() => {
expect(vm.$el).toContainText( expect(wrapper.text()).toContain(
`started a discussion on an outdated change in commit ${truncatedCommitId}`, `started a discussion on an outdated change in commit ${truncatedCommitId}`,
); );
...@@ -202,27 +214,27 @@ describe('noteable_discussion component', () => { ...@@ -202,27 +214,27 @@ describe('noteable_discussion component', () => {
describe('for diff discussions without a commit id', () => { describe('for diff discussions without a commit id', () => {
it('should show started a discussion on the diff text', done => { it('should show started a discussion on the diff text', done => {
Object.assign(vm.discussion, { Object.assign(wrapper.vm.discussion, {
for_commit: false, for_commit: false,
commit_id: null, commit_id: null,
}); });
vm.$nextTick(() => { wrapper.vm.$nextTick(() => {
expect(vm.$el).toContainText('started a discussion on the diff'); expect(wrapper.text()).toContain('started a discussion on the diff');
done(); done();
}); });
}); });
it('should show discussion on older version text', done => { it('should show discussion on older version text', done => {
Object.assign(vm.discussion, { Object.assign(wrapper.vm.discussion, {
for_commit: false, for_commit: false,
commit_id: null, commit_id: null,
active: false, active: false,
}); });
vm.$nextTick(() => { wrapper.vm.$nextTick(() => {
expect(vm.$el).toContainText('started a discussion on an old version of the diff'); expect(wrapper.text()).toContain('started a discussion on an old version of the diff');
done(); done();
}); });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment