diff --git a/webapp/components/ContentMenu.vue b/webapp/components/ContentMenu.vue index 5de2820da..29473d6b2 100644 --- a/webapp/components/ContentMenu.vue +++ b/webapp/components/ContentMenu.vue @@ -77,6 +77,13 @@ export default { }).href, icon: 'edit' }) + routes.push({ + name: this.$t(`post.delete.title`), + callback: () => { + this.openModal('delete') + }, + icon: 'trash' + }) } if (this.isOwner && this.resourceType === 'comment') { routes.push({ diff --git a/webapp/components/Modal.vue b/webapp/components/Modal.vue index 0507e5439..2ea482190 100644 --- a/webapp/components/Modal.vue +++ b/webapp/components/Modal.vue @@ -14,19 +14,28 @@ :name="name" @close="close" /> + + + diff --git a/webapp/components/User/index.vue b/webapp/components/User/index.vue index 857f4f302..240c9dd6d 100644 --- a/webapp/components/User/index.vue +++ b/webapp/components/User/index.vue @@ -5,7 +5,7 @@ >
@@ -40,7 +40,7 @@ :image="user.avatar" :name="userName" style="display: inline-block; vertical-align: middle;" - size="32px" + size="small" />
diff --git a/webapp/components/comments/CommentForm/index.vue b/webapp/components/comments/CommentForm/index.vue index d59314e07..fedd8a884 100644 --- a/webapp/components/comments/CommentForm/index.vue +++ b/webapp/components/comments/CommentForm/index.vue @@ -97,8 +97,8 @@ export default { }) .then(res => { this.loading = false - this.$root.$emit('refetchPostComments', res.data.CreateComment) - this.$refs.editor.clear() + this.$root.$emit('refetchPostComments') + this.clear() this.$toast.success(this.$t('post.comment.submitted')) this.disabled = false }) diff --git a/webapp/components/comments/CommentForm/spec.js b/webapp/components/comments/CommentForm/spec.js new file mode 100644 index 000000000..511f76c1d --- /dev/null +++ b/webapp/components/comments/CommentForm/spec.js @@ -0,0 +1,92 @@ +import { config, mount, createLocalVue, createWrapper } from '@vue/test-utils' +import CommentForm from './index.vue' +import Vue from 'vue' +import Styleguide from '@human-connection/styleguide' + +const localVue = createLocalVue() + +localVue.use(Styleguide) + +config.stubs['no-ssr'] = '' + +describe('CommentForm.vue', () => { + let mocks + let wrapper + let propsData + let cancelBtn + let cancelMethodSpy + + beforeEach(() => { + ;(mocks = { + $t: jest.fn(), + $apollo: { + mutate: jest + .fn() + .mockResolvedValueOnce({ + data: { CreateComment: { contentExcerpt: 'this is a comment' } } + }) + .mockRejectedValue({ message: 'Ouch!' }) + }, + $toast: { + error: jest.fn(), + success: jest.fn() + } + }), + (propsData = { + post: { id: 1 } + }) + }) + + describe('mount', () => { + const Wrapper = () => { + return mount(CommentForm, { mocks, localVue, propsData }) + } + + 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 () => { + 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('clears the editor', () => { + expect(cancelMethodSpy).toHaveBeenCalledTimes(1) + }) + + it('emits a method call with the returned comment', () => { + const rootWrapper = createWrapper(wrapper.vm.$root) + expect(rootWrapper.emitted().refetchPostComments.length).toEqual(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) + }) + }) + }) + }) +}) diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue index 64ec4d375..f34b02899 100644 --- a/webapp/layouts/default.vue +++ b/webapp/layouts/default.vue @@ -48,7 +48,7 @@ {name}\"?" + }, "comment": { "submit": "Comment", "submitted": "Comment Submitted" diff --git a/webapp/locales/es.json b/webapp/locales/es.json index ba46f9ec1..5beab2eef 100644 --- a/webapp/locales/es.json +++ b/webapp/locales/es.json @@ -88,6 +88,14 @@ }, "takeAction": { "name": "Tomar acción" + }, + "delete": { + "submit": "Borrar", + "cancel": "Cancelar", + "success": "Mensaje borrado satisfactoriamente", + "title": "Borrar mensaje", + "type": "Mensaje", + "message": "¿Realmente quieres borrar el mensaje \"{name}\"?" } }, "quotes": {