diff --git a/webapp/components/Comment.spec.js b/webapp/components/Comment.spec.js index 375280cea..81972e501 100644 --- a/webapp/components/Comment.spec.js +++ b/webapp/components/Comment.spec.js @@ -33,7 +33,11 @@ describe('Comment.vue', () => { }, $apollo: { mutate: jest.fn().mockResolvedValue({ - data: { DeleteComment: { id: 'it-is-the-deleted-comment' } }, + data: { + DeleteComment: { + id: 'it-is-the-deleted-comment', + }, + }, }), }, } @@ -125,7 +129,11 @@ describe('Comment.vue', () => { it('emits "deleteComment"', () => { expect(wrapper.emitted('deleteComment')).toEqual([ - [{ id: 'it-is-the-deleted-comment' }], + [ + { + id: 'it-is-the-deleted-comment', + }, + ], ]) }) @@ -138,6 +146,30 @@ describe('Comment.vue', () => { }) }) }) + + describe('test update comment', () => { + beforeEach(() => { + wrapper = Wrapper() + }) + + describe('with a given comment', () => { + beforeEach(async () => { + await wrapper.vm.updateComment({ + id: 'it-is-the-updated-comment', + }) + }) + + it('emits "updateComment"', () => { + expect(wrapper.emitted('updateComment')).toEqual([ + [ + { + id: 'it-is-the-updated-comment', + }, + ], + ]) + }) + }) + }) }) }) }) diff --git a/webapp/components/Comment.vue b/webapp/components/Comment.vue index 2ce4d9933..b7c73b84d 100644 --- a/webapp/components/Comment.vue +++ b/webapp/components/Comment.vue @@ -13,19 +13,20 @@ + + + + - - - -
diff --git a/webapp/components/CommentForm/CommentForm.spec.js b/webapp/components/CommentForm/CommentForm.spec.js index 1ab778859..94ce5aa66 100644 --- a/webapp/components/CommentForm/CommentForm.spec.js +++ b/webapp/components/CommentForm/CommentForm.spec.js @@ -12,8 +12,8 @@ describe('CommentForm.vue', () => { let mocks let wrapper let propsData - let cancelBtn let cancelMethodSpy + let closeMethodSpy beforeEach(() => { mocks = { @@ -21,20 +21,6 @@ describe('CommentForm.vue', () => { $i18n: { locale: () => 'en', }, - $apollo: { - mutate: jest - .fn() - .mockResolvedValueOnce({ - data: { - CreateComment: { - contentExcerpt: 'this is a comment', - }, - }, - }) - .mockRejectedValue({ - message: 'Ouch!', - }), - }, $toast: { error: jest.fn(), success: jest.fn(), @@ -43,60 +29,172 @@ describe('CommentForm.vue', () => { removeHtml: a => a, }, } - propsData = { - post: { - id: 1, - }, - } }) describe('mount', () => { - const Wrapper = () => { - return mount(CommentForm, { - mocks, - localVue, - propsData, + describe('create comment', () => { + beforeEach(() => { + mocks = { + ...mocks, + $apollo: { + mutate: jest + .fn() + .mockResolvedValueOnce({ + data: { + CreateComment: { + contentExcerpt: 'this is a comment', + }, + }, + }) + .mockRejectedValue({ + message: 'Ouch!', + }), + }, + } + propsData = { + post: { + id: 'p001', + }, + } + const Wrapper = () => { + return mount(CommentForm, { + mocks, + localVue, + propsData, + }) + } + wrapper = Wrapper() + cancelMethodSpy = jest.spyOn(wrapper.vm, 'clear') }) - } - beforeEach(() => { - wrapper = Wrapper() - cancelMethodSpy = jest.spyOn(wrapper.vm, 'clear') - }) - - it('calls the apollo mutation when form is submitted', async () => { - wrapper.vm.updateEditorContent('this is a comment') - await wrapper.find('form').trigger('submit') - expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1) - }) - - it('calls clear method when the cancel button is clicked', () => { - wrapper.vm.updateEditorContent('ok') - cancelBtn = wrapper.find('.cancelBtn') - cancelBtn.trigger('click') - expect(cancelMethodSpy).toHaveBeenCalledTimes(1) - }) - - describe('mutation resolves', () => { - beforeEach(async () => { + it('calls the apollo mutation when form is submitted', async () => { wrapper.vm.updateEditorContent('this is a comment') - wrapper.find('form').trigger('submit') + await wrapper.find('form').trigger('submit') + expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1) }) - it('shows a success toaster', async () => { - await mocks.$apollo.mutate - expect(mocks.$toast.success).toHaveBeenCalledTimes(1) - }) - - it('clears the editor', () => { + it('calls `clear` method when the cancel button is clicked', async () => { + wrapper.vm.updateEditorContent('ok') + await wrapper.find('.cancelBtn').trigger('submit') expect(cancelMethodSpy).toHaveBeenCalledTimes(1) }) - describe('mutation fails', () => { - it('shows the error toaster', async () => { - await wrapper.find('form').trigger('submit') + describe('mutation resolves', () => { + beforeEach(async () => { + wrapper.vm.updateEditorContent('this is a comment') + wrapper.find('form').trigger('submit') + }) + + it('shows a success toaster', async () => { await mocks.$apollo.mutate - expect(mocks.$toast.error).toHaveBeenCalledTimes(1) + expect(mocks.$toast.success).toHaveBeenCalledTimes(1) + }) + + it('clears the editor', () => { + expect(cancelMethodSpy).toHaveBeenCalledTimes(1) + }) + + describe('mutation fails', () => { + it('shows the error toaster', async () => { + await wrapper.find('form').trigger('submit') + await mocks.$apollo.mutate + expect(mocks.$toast.error).toHaveBeenCalledTimes(1) + }) + }) + }) + }) + + describe('update comment', () => { + beforeEach(() => { + mocks = { + ...mocks, + $apollo: { + mutate: jest + .fn() + .mockResolvedValueOnce({ + data: { + UpdateComment: { + contentExcerpt: 'this is a comment', + }, + }, + }) + .mockRejectedValue({ + message: 'Ouch!', + }), + }, + } + propsData = { + update: true, + comment: { + id: 'c001', + }, + } + const Wrapper = () => { + return mount(CommentForm, { + mocks, + localVue, + propsData, + }) + } + wrapper = Wrapper() + closeMethodSpy = jest.spyOn(wrapper.vm, 'closeEditWindow') + }) + + describe('form submitted', () => { + it('calls the apollo mutation', async () => { + wrapper.vm.updateEditorContent('this is a comment') + await wrapper.find('form').trigger('submit') + expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1) + }) + + it('calls `closeEditWindow` method', async () => { + wrapper.vm.updateEditorContent('ok') + await wrapper.find('form').trigger('submit') + expect(closeMethodSpy).toHaveBeenCalledTimes(1) + }) + + it('emits `showEditCommentMenu` event', async () => { + wrapper.vm.updateEditorContent('ok') + await wrapper.find('form').trigger('submit') + expect(wrapper.emitted('showEditCommentMenu')).toEqual([[false]]) + }) + }) + + describe('cancel button is clicked', () => { + it('calls `closeEditWindow` method', async () => { + wrapper.vm.updateEditorContent('ok') + await wrapper.find('.cancelBtn').trigger('submit') + expect(closeMethodSpy).toHaveBeenCalledTimes(1) + }) + + it('emits `showEditCommentMenu` event', async () => { + wrapper.vm.updateEditorContent('ok') + await wrapper.find('.cancelBtn').trigger('submit') + expect(wrapper.emitted('showEditCommentMenu')).toEqual([[false]]) + }) + }) + + describe('mutation resolves', () => { + beforeEach(async () => { + wrapper.vm.updateEditorContent('this is a comment') + wrapper.find('form').trigger('submit') + }) + + it('shows a success toaster', async () => { + await mocks.$apollo.mutate + expect(mocks.$toast.success).toHaveBeenCalledTimes(1) + }) + + it('closes the editor', () => { + expect(closeMethodSpy).toHaveBeenCalledTimes(1) + }) + + describe('mutation fails', () => { + it('shows the error toaster', async () => { + await wrapper.find('form').trigger('submit') + await mocks.$apollo.mutate + expect(mocks.$toast.error).toHaveBeenCalledTimes(1) + }) }) }) })