write tests and fix minor appearing and position problems with context menu

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',
+                },
+              ],
+            ])
+          })
+        })
+      })
     })
   })
 })

webapp/components/Comment.vue

@@ -13,19 +13,20 @@
     <ds-card :id="`commentId-${comment.id}`">
       <ds-space margin-bottom="small">
         <hc-user :user="author" :date-time="comment.createdAt" />
+        <!-- Content Menu (can open Modals) -->
+        <client-only>
+          <content-menu
+            v-show="!openEditCommentMenu"
+            placement="bottom-end"
+            resource-type="comment"
+            :resource="comment"
+            :modalsData="menuModalsData"
+            style="float-right"
+            :is-owner="isAuthor(author.id)"
+            @showEditCommentMenu="editCommentMenu"
+          />
+        </client-only>
       </ds-space>
-      <!-- Content Menu (can open Modals) -->
-      <client-only>
-        <content-menu
-          placement="bottom-end"
-          resource-type="comment"
-          :resource="comment"
-          :modalsData="menuModalsData"
-          style="float-right"
-          :is-owner="isAuthor(author.id)"
-          @showEditCommentMenu="editCommentMenu"
-        />
-      </client-only>
 
       <ds-space margin-bottom="small" />
       <div v-if="openEditCommentMenu">

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 = () => {
+    describe('create comment', () => {
-      return mount(CommentForm, {
+      beforeEach(() => {
-        mocks,
+        mocks = {
-        localVue,
+          ...mocks,
-        propsData,
+          $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(() => {
+      it('calls the apollo mutation when form is submitted', async () => {
-      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')
+        await wrapper.find('form').trigger('submit')
+        expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
       })
 
-      it('shows a success toaster', async () => {
+      it('calls `clear` method when the cancel button is clicked', async () => {
-        await mocks.$apollo.mutate
+        wrapper.vm.updateEditorContent('ok')
-        expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
+        await wrapper.find('.cancelBtn').trigger('submit')
-      })
-
-      it('clears the editor', () => {
         expect(cancelMethodSpy).toHaveBeenCalledTimes(1)
       })
 
-      describe('mutation fails', () => {
+      describe('mutation resolves', () => {
-        it('shows the error toaster', async () => {
+        beforeEach(async () => {
-          await wrapper.find('form').trigger('submit')
+          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)
+          })
         })
       })
     })