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', },