From d15037607ca0dec4d95f15130183ac0bb129afe5 Mon Sep 17 00:00:00 2001 From: mattwr18 Date: Thu, 23 Jan 2020 13:05:36 +0100 Subject: [PATCH] Add component test for direct reply to comment - we have found it challenging to add component tests that mount the tiptap editor, so we are stubbing it, which means that we will add e2e tests to up the coverage of how much of the workflow has automated tests --- webapp/components/Comment/Comment.spec.js | 3 + webapp/components/CommentForm/CommentForm.vue | 5 +- .../CommentList/CommentList.spec.js | 11 ++- webapp/pages/post/_id/_slug/index.spec.js | 96 +++++++++---------- webapp/pages/post/_id/_slug/index.vue | 19 ++-- 5 files changed, 67 insertions(+), 67 deletions(-) diff --git a/webapp/components/Comment/Comment.spec.js b/webapp/components/Comment/Comment.spec.js index 229d88663..dc97f0569 100644 --- a/webapp/components/Comment/Comment.spec.js +++ b/webapp/components/Comment/Comment.spec.js @@ -3,8 +3,11 @@ import Comment from './Comment.vue' import Vuex from 'vuex' const localVue = global.localVue +localVue.directive('scrollTo', jest.fn()) config.stubs['client-only'] = '' +config.stubs['nuxt-link'] = '' +config.stubs['content-viewer'] = '' describe('Comment.vue', () => { let propsData diff --git a/webapp/components/CommentForm/CommentForm.vue b/webapp/components/CommentForm/CommentForm.vue index 61cba42d5..81eceb21c 100644 --- a/webapp/components/CommentForm/CommentForm.vue +++ b/webapp/components/CommentForm/CommentForm.vue @@ -52,6 +52,7 @@ export default { }, methods: { reply(message) { + if (!this.$refs.editor.insertReply) return null this.$refs.editor.insertReply(message) }, updateEditorContent(value) { @@ -136,8 +137,8 @@ export default { query() { return minimisedUserQuery() }, - result(result) { - this.users = result.data.User + update({ User }) { + this.users = User }, }, }, diff --git a/webapp/components/CommentList/CommentList.spec.js b/webapp/components/CommentList/CommentList.spec.js index 4feef5c77..02d2f2f42 100644 --- a/webapp/components/CommentList/CommentList.spec.js +++ b/webapp/components/CommentList/CommentList.spec.js @@ -1,10 +1,13 @@ import { config, mount } from '@vue/test-utils' import CommentList from './CommentList' +import Comment from '~/components/Comment/Comment' import Vuex from 'vuex' +import Vue from 'vue' const localVue = global.localVue localVue.filter('truncate', string => string) +localVue.directive('scrollTo', jest.fn()) config.stubs['v-popover'] = '' config.stubs['nuxt-link'] = '' @@ -102,8 +105,12 @@ describe('CommentList.vue', () => { beforeEach(() => { wrapper = Wrapper() }) - it.only('Comment emitted reply()', () => { - wrapper.find('.comment-tag').vm.$emit('reply') + it('Comment emitted reply()', () => { + wrapper.find(Comment).vm.$emit('reply', { + id: 'commentAuthorId', + slug: 'ogerly', + }) + Vue.nextTick() expect(wrapper.emitted('reply')).toEqual([ [ { diff --git a/webapp/pages/post/_id/_slug/index.spec.js b/webapp/pages/post/_id/_slug/index.spec.js index e66e124ad..f662539c8 100644 --- a/webapp/pages/post/_id/_slug/index.spec.js +++ b/webapp/pages/post/_id/_slug/index.spec.js @@ -1,20 +1,20 @@ import { config, mount } from '@vue/test-utils' -import PostSlug from './index.vue' import Vuex from 'vuex' -import Vue from 'vue' +import PostSlug from './index.vue' +import CommentList from '~/components/CommentList/CommentList' config.stubs['client-only'] = '' config.stubs['nuxt-link'] = '' config.stubs['router-link'] = '' +config.stubs['content-viewer'] = '' +config.stubs['hc-editor'] = '' +config.stubs['hc-emotions'] = '' const localVue = global.localVue +localVue.directive('scrollTo', jest.fn()) describe('PostSlug', () => { - let wrapper - let Wrapper - let store - let mocks - let propsData + let wrapper, Wrapper, store, mocks, propsData, spy beforeEach(() => { store = new Vuex.Store({ @@ -50,7 +50,38 @@ describe('PostSlug', () => { query: jest.fn().mockResolvedValue(), }, $scrollTo: jest.fn(), + $refs: { + editor: { + insertReply: jest.fn(), + }, + commentForm: { + reply: jest.fn(), + }, + }, } + jest.useFakeTimers() + wrapper = Wrapper() + wrapper.setData({ + post: { + id: '1', + author: { + id: '1stUser', + }, + comments: [ + { + id: 'comment134', + contentExcerpt: 'this is a comment', + content: 'this is a comment', + author: { + id: '1stUser', + slug: '1st-user', + }, + }, + ], + }, + ready: true, + }) + spy = jest.spyOn(wrapper.vm, 'reply') }) describe('mount', () => { @@ -64,22 +95,9 @@ describe('PostSlug', () => { } describe('test Post callbacks', () => { - beforeEach(() => { - wrapper = Wrapper() - // wrapper.setData({ - // post: { - // id: 'p23', - // name: 'It is a post', - // author: { - // id: 'u1', - // }, - // }, - // }) - }) - describe('deletion of Post from Page by invoking "deletePostCallback()"', () => { - beforeEach(() => { - wrapper.vm.deletePostCallback() + beforeEach(async () => { + await wrapper.vm.deletePostCallback() }) describe('after timeout', () => { @@ -100,35 +118,13 @@ describe('PostSlug', () => { }) }) - describe('test Post callbacks', () => { - beforeEach(() => { - beforeEach(jest.useFakeTimers) - wrapper = Wrapper() - }) - it('CommentList', () => { - wrapper.setData({ - post: { - id: 1, - author: { - id: '1stUser', - }, - comments: [ - { - id: 'comment134', - contentExcerpt: 'this is a comment', - content: 'this is a comment', - author: { - id: '1stUser', - slug: '1st-user', - }, - }, - ], - }, + describe('reply method called when emitted reply received', () => { + it('CommentList', async () => { + wrapper.find(CommentList).vm.$emit('reply', { + id: 'commentAuthorId', + slug: 'ogerly', }) - jest.runAllTimers() - Vue.nextTick() - const spy = jest.spyOn(wrapper.vm, 'reply') - expect(spy).toBe(true) + expect(spy).toHaveBeenCalledTimes(1) }) }) }) diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue index 2a703a96b..dac0dc36a 100644 --- a/webapp/pages/post/_id/_slug/index.vue +++ b/webapp/pages/post/_id/_slug/index.vue @@ -84,8 +84,7 @@ - { // NOTE: quick fix for jumping flexbox implementation @@ -227,8 +219,9 @@ export default { } }, update({ Post }) { - this.post = Post + this.post = Post[0] || {} this.title = this.post.title + this.blurred = this.post.imageBlurred }, fetchPolicy: 'cache-and-network', },