diff options
author | Kushal Pandya <kushalspandya@gmail.com> | 2019-01-30 06:00:39 +0000 |
---|---|---|
committer | Kushal Pandya <kushalspandya@gmail.com> | 2019-01-30 06:00:39 +0000 |
commit | 4c6ad05cfdc11d8f0296c1ad322bb11aa67f23d8 (patch) | |
tree | 8588caa2a3cb94393f7281b33b708acb29c16cd9 /spec | |
parent | 8fa9761cfc21d59a3d63baa6d044c2919b94eebd (diff) | |
parent | d8e18a743e4f6a975bc188370434e7f6beca4e60 (diff) | |
download | gitlab-ce-4c6ad05cfdc11d8f0296c1ad322bb11aa67f23d8.tar.gz |
Merge branch 'winh-noteable_discussion_spec-vue-test-utils' into 'master'
Convert noteable_discussion_spec.js to Vue test utils
See merge request gitlab-org/gitlab-ce!24765
Diffstat (limited to 'spec')
-rw-r--r-- | spec/javascripts/notes/components/noteable_discussion_spec.js | 142 |
1 files changed, 77 insertions, 65 deletions
diff --git a/spec/javascripts/notes/components/noteable_discussion_spec.js b/spec/javascripts/notes/components/noteable_discussion_spec.js index 3aff2dd0641..c4b7eb17393 100644 --- a/spec/javascripts/notes/components/noteable_discussion_spec.js +++ b/spec/javascripts/notes/components/noteable_discussion_spec.js @@ -1,4 +1,4 @@ -import Vue from 'vue'; +import { shallowMount, createLocalVue } from '@vue/test-utils'; import createStore from '~/notes/stores'; import noteableDiscussion from '~/notes/components/noteable_discussion.vue'; import '~/behaviors/markdown/render_gfm'; @@ -8,9 +8,8 @@ import mockDiffFile from '../../diffs/mock_data/diff_file'; const discussionWithTwoUnresolvedNotes = 'merge_requests/resolved_diff_discussion.json'; describe('noteable_discussion component', () => { - const Component = Vue.extend(noteableDiscussion); let store; - let vm; + let wrapper; preloadFixtures(discussionWithTwoUnresolvedNotes); @@ -20,54 +19,62 @@ describe('noteable_discussion component', () => { store.dispatch('setNoteableData', noteableDataMock); store.dispatch('setNotesData', notesDataMock); - vm = new Component({ + const localVue = createLocalVue(); + wrapper = shallowMount(noteableDiscussion, { store, propsData: { discussion: discussionMock }, - }).$mount(); + localVue, + sync: false, + }); }); afterEach(() => { - vm.$destroy(); + wrapper.destroy(); }); 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', () => { - 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 }; discussion.diff_file = mockDiffFile; discussion.diff_discussion = true; - vm.$destroy(); - vm = new Component({ - store, - propsData: { discussion }, - }).$mount(); + wrapper.setProps({ discussion }); - 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', () => { it('should render reply button', () => { - expect(vm.$el.querySelector('.js-vue-discussion-reply').textContent.trim()).toEqual( - 'Reply...', - ); + expect( + wrapper + .find('.js-vue-discussion-reply') + .text() + .trim(), + ).toEqual('Reply...'); }); it('should toggle reply form', done => { - vm.$el.querySelector('.js-vue-discussion-reply').click(); + wrapper.find('.js-vue-discussion-reply').trigger('click'); - Vue.nextTick(() => { - expect(vm.isReplying).toEqual(true); + wrapper.vm.$nextTick(() => { + expect(wrapper.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(); + wrapper.vm.$nextTick(() => { + expect(wrapper.vm.$refs.noteForm).not.toBeNull(); done(); }); }); @@ -75,8 +82,8 @@ describe('noteable_discussion component', () => { it('does not render jump to discussion button', () => { expect( - vm.$el.querySelector('*[data-original-title="Jump to next unresolved discussion"]'), - ).toBeNull(); + wrapper.find('*[data-original-title="Jump to next unresolved discussion"]').exists(), + ).toBe(false); }); }); @@ -87,12 +94,13 @@ describe('noteable_discussion component', () => { discussion2.resolved = false; discussion2.active = true; 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'; - Vue.nextTick() + wrapper.vm + .$nextTick() .then(() => { - spyOn(vm, 'expandDiscussion').and.stub(); + spyOn(wrapper.vm, 'expandDiscussion').and.stub(); const nextDiscussionId = discussion2.id; @@ -100,9 +108,11 @@ describe('noteable_discussion component', () => { <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) .catch(done.fail); @@ -117,7 +127,7 @@ describe('noteable_discussion component', () => { notes: [{ body: 'hello world!' }], }; - const note = vm.componentData(data); + const note = wrapper.vm.componentData(data); expect(note).toEqual(data.notes[0]); }); @@ -127,7 +137,7 @@ describe('noteable_discussion component', () => { notes: [{ id: 12 }], }; - const note = vm.componentData(data); + const note = wrapper.vm.componentData(data); expect(note).toEqual(data); }); @@ -138,46 +148,48 @@ describe('noteable_discussion component', () => { const truncatedCommitId = commitId.substr(0, 8); let commitElement; - beforeEach(() => { - vm.$destroy(); - + beforeEach(done => { store.state.diffs = { projectPath: 'something', }; - vm = new Component({ - propsData: { - discussion: { - ...discussionMock, - for_commit: true, - commit_id: commitId, - diff_discussion: true, - diff_file: { - ...mockDiffFile, - }, + wrapper.setProps({ + discussion: { + ...discussionMock, + for_commit: true, + commit_id: commitId, + diff_discussion: true, + diff_file: { + ...mockDiffFile, }, - renderDiffFile: true, }, - store, - }).$mount(); + renderDiffFile: true, + }); - commitElement = vm.$el.querySelector('.commit-sha'); + wrapper.vm + .$nextTick() + .then(() => { + commitElement = wrapper.find('.commit-sha'); + }) + .then(done) + .catch(done.fail); }); describe('for commit discussions', () => { it('should display a monospace started a discussion on commit', () => { - expect(vm.$el).toContainText(`started a discussion on commit ${truncatedCommitId}`); - expect(commitElement).not.toBe(null); - expect(commitElement).toHaveText(truncatedCommitId); + expect(wrapper.text()).toContain(`started a discussion on commit ${truncatedCommitId}`); + expect(commitElement.exists()).toBe(true); + expect(commitElement.text()).toContain(truncatedCommitId); }); }); describe('for diff discussion with a commit id', () => { 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); done(); @@ -185,11 +197,11 @@ describe('noteable_discussion component', () => { }); it('should display outdated change on commit header', done => { - vm.discussion.for_commit = false; - vm.discussion.active = false; + wrapper.vm.discussion.for_commit = false; + wrapper.vm.discussion.active = false; - vm.$nextTick(() => { - expect(vm.$el).toContainText( + wrapper.vm.$nextTick(() => { + expect(wrapper.text()).toContain( `started a discussion on an outdated change in commit ${truncatedCommitId}`, ); @@ -202,27 +214,27 @@ describe('noteable_discussion component', () => { describe('for diff discussions without a commit id', () => { it('should show started a discussion on the diff text', done => { - Object.assign(vm.discussion, { + Object.assign(wrapper.vm.discussion, { for_commit: false, commit_id: null, }); - vm.$nextTick(() => { - expect(vm.$el).toContainText('started a discussion on the diff'); + wrapper.vm.$nextTick(() => { + expect(wrapper.text()).toContain('started a discussion on the diff'); done(); }); }); it('should show discussion on older version text', done => { - Object.assign(vm.discussion, { + Object.assign(wrapper.vm.discussion, { for_commit: false, commit_id: null, active: false, }); - vm.$nextTick(() => { - expect(vm.$el).toContainText('started a discussion on an old version of the diff'); + wrapper.vm.$nextTick(() => { + expect(wrapper.text()).toContain('started a discussion on an old version of the diff'); done(); }); |