diff --git a/webapp/components/Comment/Comment.spec.js b/webapp/components/Comment/Comment.spec.js index b307700d9..ea04d7c5b 100644 --- a/webapp/components/Comment/Comment.spec.js +++ b/webapp/components/Comment/Comment.spec.js @@ -1,4 +1,4 @@ -import { config, shallowMount } from '@vue/test-utils' +import { config, mount } from '@vue/test-utils' import Comment from './Comment.vue' import Vuex from 'vuex' @@ -47,14 +47,14 @@ describe('Comment.vue', () => { } }) - describe('shallowMount', () => { + describe('mount', () => { beforeEach(jest.useFakeTimers) Wrapper = () => { const store = new Vuex.Store({ getters, }) - return shallowMount(Comment, { + return mount(Comment, { store, propsData, mocks, @@ -68,6 +68,7 @@ describe('Comment.vue', () => { id: '2', contentExcerpt: 'Hello I am a comment content', content: 'Hello I am comment content', + author: { id: 'commentAuthorId', slug: 'ogerly'} } }) @@ -199,6 +200,24 @@ describe('Comment.vue', () => { }) }) }) + + describe('click reply button', () => { + + beforeEach(async () => { + wrapper = Wrapper() + await wrapper.find('.reply-button').trigger('click') + }) + it('emits "reply"', () => { + expect(wrapper.emitted('reply')).toEqual([ + [ + { + id: 'commentAuthorId', + slug: 'ogerly' + }, + ], + ]) + }) + }) }) }) }) diff --git a/webapp/components/Comment/Comment.vue b/webapp/components/Comment/Comment.vue index b31414449..da205aaee 100644 --- a/webapp/components/Comment/Comment.vue +++ b/webapp/components/Comment/Comment.vue @@ -55,11 +55,11 @@ @@ -76,6 +76,7 @@ import HcCommentForm from '~/components/CommentForm/CommentForm' import CommentMutations from '~/graphql/CommentMutations' import scrollToAnchor from '~/mixins/scrollToAnchor.js' + export default { mixins: [scrollToAnchor], data() { @@ -148,7 +149,7 @@ export default { }, }, methods: { - reply(comment) { + reply() { const message = { slug: this.comment.author.slug, id: this.comment.author.id } this.$emit('reply', message) }, @@ -204,11 +205,11 @@ export default { float: right; } -.answerbutton { +.reply-button { float: right; top: 0px; } -.answerbutton:after { +.reply-button:after { clear: both; } diff --git a/webapp/components/CommentList/CommentList.spec.js b/webapp/components/CommentList/CommentList.spec.js index 0c037d2ff..0b4a667a7 100644 --- a/webapp/components/CommentList/CommentList.spec.js +++ b/webapp/components/CommentList/CommentList.spec.js @@ -103,4 +103,22 @@ describe('CommentList.vue', () => { }) }) }) + + describe('Comment', () => { + beforeEach(() => { + wrapper = Wrapper() + }) + + it('Comment emitted reply()', () => { + wrapper.find('.comment-tag').vm.$emit('reply') + expect(wrapper.emitted('reply')).toEqual([ + [ + { + id: 'commentAuthorId', + slug: 'ogerly' + }, + ], + ]) + }) + }) }) diff --git a/webapp/components/CommentList/CommentList.vue b/webapp/components/CommentList/CommentList.vue index d21f2b407..061210176 100644 --- a/webapp/components/CommentList/CommentList.vue +++ b/webapp/components/CommentList/CommentList.vue @@ -17,6 +17,7 @@ @deleteComment="updateCommentList" @updateComment="updateCommentList" @toggleNewCommentForm="toggleNewCommentForm" + class="comment-tag" /> diff --git a/webapp/locales/de.json b/webapp/locales/de.json index a394424cb..de9797596 100644 --- a/webapp/locales/de.json +++ b/webapp/locales/de.json @@ -270,7 +270,7 @@ "submit": "Kommentiere", "submitted": "Kommentar Gesendet", "updated": "Änderungen gespeichert", - "answer": "Antworten" + "reply": "Antworten" }, "edited": "bearbeitet" }, diff --git a/webapp/locales/en.json b/webapp/locales/en.json index e6e3426a7..9226793c1 100644 --- a/webapp/locales/en.json +++ b/webapp/locales/en.json @@ -424,7 +424,7 @@ "submit": "Comment", "submitted": "Comment Submitted", "updated": "Changes Saved", - "answer": "Answer" + "reply": "Reply" }, "edited": "edited" }, diff --git a/webapp/pages/post/_id/_slug/index.spec.js b/webapp/pages/post/_id/_slug/index.spec.js index db960bb67..d7c234c4c 100644 --- a/webapp/pages/post/_id/_slug/index.spec.js +++ b/webapp/pages/post/_id/_slug/index.spec.js @@ -1,16 +1,16 @@ import { config, shallowMount } from '@vue/test-utils' import PostSlug from './index.vue' import Vuex from 'vuex' +import CommentList from '~/components/CommentList/CommentList' const localVue = global.localVue -config.stubs['client-only'] = '' - describe('PostSlug', () => { let wrapper let Wrapper let store let mocks + let propsData beforeEach(() => { store = new Vuex.Store({ @@ -20,6 +20,7 @@ describe('PostSlug', () => { }, }, }) + propsData = {} mocks = { $t: jest.fn(), $filters: { @@ -44,12 +45,14 @@ describe('PostSlug', () => { } }) + describe('shallowMount', () => { Wrapper = () => { return shallowMount(PostSlug, { store, mocks, localVue, + propsData, }) } @@ -92,4 +95,16 @@ describe('PostSlug', () => { }) }) }) + + describe('given a comment', () => { + wrapper = Wrapper() + const bar = wrapper.find(CommentList) + it('hc-comment-list', () => { + expect(bar).toBe({"selector": "Component"}) + }) + + + + }) }) +