Implemented Menus, Unit Tests and created and refactored localisations

webapp/components/ContentMenu.vue

@@ -68,7 +68,7 @@ export default {
 
       if (this.isOwner && this.resourceType === 'contribution') {
         routes.push({
-          name: this.$t(`contribution.edit`),
+          name: this.$t(`post.menu.edit`),
           path: this.$router.resolve({
             name: 'post-edit-id',
             params: {
@@ -78,21 +78,29 @@ export default {
           icon: 'edit'
         })
         routes.push({
-          name: this.$t(`post.delete.title`),
+          name: this.$t(`post.menu.delete`),
           callback: () => {
             this.openModal('delete')
           },
           icon: 'trash'
         })
       }
+
       if (this.isOwner && this.resourceType === 'comment') {
+        // routes.push({
+        //   name: this.$t(`comment.menu.edit`),
+        //   callback: () => {
+        //     /* eslint-disable-next-line no-console */
+        //     console.log('EDIT COMMENT')
+        //   },
+        //   icon: 'edit'
+        // })
         routes.push({
-          name: this.$t(`comment.edit`),
+          name: this.$t(`comment.menu.delete`),
           callback: () => {
-            /* eslint-disable-next-line no-console */
-            console.log('EDIT COMMENT')
+            this.openModal('delete')
           },
-          icon: 'edit'
+          icon: 'trash'
         })
       }
 

webapp/components/Modal/DeleteModal.spec.js

@@ -22,7 +22,7 @@ describe('DeleteModal.vue', () => {
   beforeEach(() => {
     propsData = {
       type: 'contribution',
-      id: 'c300'
+      id: 'p23'
     }
     mocks = {
       $t: jest.fn(),
@@ -40,7 +40,7 @@ describe('DeleteModal.vue', () => {
   })
 
   describe('shallowMount', () => {
-    const Wrapper = () => {
+    Wrapper = () => {
       return shallowMount(DeleteModal, { propsData, mocks, localVue, router })
     }
 
@@ -57,8 +57,8 @@ describe('DeleteModal.vue', () => {
     describe('given a post', () => {
       beforeEach(() => {
         propsData = {
+          type: 'contribution',
           id: 'p23',
-          type: 'post',
           name: 'It is a post'
         }
       })
@@ -66,14 +66,35 @@ describe('DeleteModal.vue', () => {
       it('mentions post title', () => {
         Wrapper()
         const calls = mocks.$t.mock.calls
-        const expected = [['post.delete.message', { name: 'It is a post' }]]
+        const expected = [
+          ['delete.contribution.message', { name: 'It is a post' }]
+        ]
+        expect(calls).toEqual(expect.arrayContaining(expected))
+      })
+    })
+
+    describe('given a comment', () => {
+      beforeEach(() => {
+        propsData = {
+          type: 'comment',
+          id: 'c3',
+          name: 'It is the user of the comment'
+        }
+      })
+
+      it('mentions comments user name', () => {
+        Wrapper()
+        const calls = mocks.$t.mock.calls
+        const expected = [
+          ['delete.comment.message', { name: 'It is the user of the comment' }]
+        ]
         expect(calls).toEqual(expect.arrayContaining(expected))
       })
     })
   })
 
   describe('mount', () => {
-    const Wrapper = () => {
+    Wrapper = () => {
       return mount(DeleteModal, { propsData, mocks, localVue, router })
     }
 
@@ -83,16 +104,16 @@ describe('DeleteModal.vue', () => {
       expect(Wrapper().is('div')).toBe(true)
     })
 
-    describe('given id', () => {
+    describe('given post id', () => {
       beforeEach(() => {
         propsData = {
-          type: 'user',
-          id: 'u3'
+          type: 'contribution',
+          id: 'p23'
         }
         wrapper = Wrapper()
       })
 
-      describe('click cancel button', () => {
+      describe('click cancel button and do not delete the post', () => {
         beforeEach(() => {
           wrapper = Wrapper()
           wrapper.find('button.cancel').trigger('click')
@@ -115,7 +136,7 @@ describe('DeleteModal.vue', () => {
         })
       })
 
-      describe('click confirm button', () => {
+      describe('click confirm button and delete the post', () => {
         beforeEach(() => {
           wrapper.find('button.confirm').trigger('click')
         })
@@ -130,7 +151,7 @@ describe('DeleteModal.vue', () => {
 
         it('displays a success message', () => {
           const calls = mocks.$t.mock.calls
-          const expected = [['post.delete.success']]
+          const expected = [['delete.contribution.success']]
           expect(calls).toEqual(expect.arrayContaining(expected))
         })
 
@@ -151,5 +172,35 @@ describe('DeleteModal.vue', () => {
         })
       })
     })
+
+    describe('given comment id', () => {
+      beforeEach(() => {
+        propsData = {
+          type: 'comment',
+          id: 'c3'
+        }
+        wrapper = Wrapper()
+      })
+
+      describe('click confirm button and delete the comment', () => {
+        beforeEach(() => {
+          wrapper.find('button.confirm').trigger('click')
+        })
+
+        it('calls delete mutation', () => {
+          expect(mocks.$apollo.mutate).toHaveBeenCalled()
+        })
+
+        it('sets success', () => {
+          expect(wrapper.vm.success).toBe(true)
+        })
+
+        it('displays a success message', () => {
+          const calls = mocks.$t.mock.calls
+          const expected = [['delete.comment.success']]
+          expect(calls).toEqual(expect.arrayContaining(expected))
+        })
+      })
+    })
   })
 })

webapp/components/Modal/DeleteModal.vue

@@ -25,7 +25,7 @@
         icon="close"
         @click="cancel"
       >
-        {{ $t('post.delete.cancel') }}
+        {{ $t(`delete.cancel`) }}
       </ds-button>
 
       <ds-button
@@ -35,7 +35,7 @@
         :loading="loading"
         @click="confirm"
       >
-        {{ $t('post.delete.submit') }}
+        {{ $t(`delete.submit`) }}
       </ds-button>
     </template>
   </ds-modal>
@@ -64,11 +64,11 @@ export default {
   },
   computed: {
     title() {
-      return this.$t(`post.delete.title`)
+      return this.$t(`delete.${this.type}.title`)
     },
     message() {
       const name = this.$filters.truncate(this.name, 30)
-      return this.$t(`post.delete.message`, { name })
+      return this.$t(`delete.${this.type}.message`, { name })
     }
   },
   methods: {
@@ -79,22 +79,40 @@ export default {
       }, 1000)
     },
     async confirm() {
+      var gqlMutation
+
       this.loading = true
       try {
-        await this.$apollo.mutate({
-          mutation: gql`
-            mutation($id: ID!) {
-              DeletePost(id: $id) {
-                id
+        switch (this.type) {
+          case 'contribution':
+            gqlMutation = gql`
+              mutation($id: ID!) {
+                DeletePost(id: $id) {
+                  id
+                }
               }
-            }
-          `,
+            `
+            break
+          case 'comment':
+            // XXX Make custom mutation and tests in the Backend !!!
+            gqlMutation = gql`
+              mutation($id: ID!) {
+                DeleteComment(id: $id) {
+                  id
+                }
+              }
+            `
+            break
+        }
+        await this.$apollo.mutate({
+          mutation: gqlMutation,
           variables: { id: this.id }
         })
         this.success = true
-        this.$toast.success(this.$t('post.delete.success'))
+        this.$toast.success(this.$t(`delete.${this.type}.success`))
         setTimeout(() => {
           this.isOpen = false
+          // XXX For comment just reload the page !!!
           setTimeout(() => {
             this.success = false
             this.$emit('close')

webapp/locales/de.json

@@ -135,11 +135,24 @@
     "takeAction": {
       "name": "Aktiv werden"
     },
+    "menu": {
+      "edit": "Beitrag bearbeiten",
+      "delete": "Beitrag löschen"
+    },
     "comment": {
       "submit": "Kommentiere",
       "submitted": "Kommentar Gesendet"
     }
   },
+  "comment": {
+    "content": {
+      "unavailable-placeholder": "...dieser Kommentar ist nicht mehr verfügbar"
+    },
+    "menu": {
+      "edit": "Kommentar bearbeiten",
+      "delete": "Kommentar löschen"
+    }
+  },
   "quotes": {
     "african": {
       "quote": "Viele kleine Leute an vielen kleinen Orten, die viele kleine Dinge tun, werden das Antlitz dieser Welt verändern.",
@@ -202,6 +215,22 @@
       "message": "Bist du sicher, dass du den Kommentar \"<b>{name}</b>\" deaktivieren möchtest?"
     }
   },
+  "delete": {
+    "submit": "Löschen",
+    "cancel": "Abbrechen",
+    "contribution": {
+      "title": "Lösche Beitrag",
+      "type": "Contribution",
+      "message": "Bist du sicher, dass du den Beitrag \"<b>{name}</b>\" löschen möchtest?",
+      "success": "Beitrag erfolgreich gelöscht!"
+    },
+    "comment": {
+      "title": "Lösche Kommentar",
+      "type": "Comment",
+      "message": "Bist du sicher, dass du den Kommentar von \"<b>{name}</b>\" löschen möchtest?",
+      "success": "Kommentar erfolgreich gelöscht!"
+    }
+  },
   "report": {
     "submit": "Melden",
     "cancel": "Abbrechen",
@@ -222,17 +251,6 @@
       "message": "Bist du sicher, dass du den Kommentar von \"<b>{name}</b>\" melden möchtest?"
     }
   },
-  "contribution": {
-    "edit": "Beitrag bearbeiten",
-    "delete": "Beitrag löschen"
-  },
-  "comment": {
-    "edit": "Kommentar bearbeiten",
-    "delete": "Kommentar löschen",
-    "content": {
-      "unavailable-placeholder": "...dieser Kommentar ist nicht mehr verfügbar"
-    }
-  },
   "followButton": {
     "follow": "Folgen",
     "following": "Folge Ich"

webapp/locales/en.json

@@ -135,19 +135,24 @@
     "takeAction": {
       "name": "Take action"
     },
-    "delete": {
-      "submit": "Delete",
-      "cancel": "Cancel",
-      "success": "Post deleted successfully",
-      "title": "Delete Post",
-      "type": "Contribution",
-      "message": "Do you really want to delete the post \"<b>{name}</b>\"?"
+    "menu": {
+      "edit": "Edit Post",
+      "delete": "Delete Post"
     },
     "comment": {
       "submit": "Comment",
       "submitted": "Comment Submitted"
     }
   },
+  "comment": {
+    "content": {
+      "unavailable-placeholder": "...this comment is not available anymore"
+    },
+    "menu": {
+      "edit": "Edit Comment",
+      "delete": "Delete Comment"
+    }
+  },
   "quotes": {
     "african": {
       "quote": "Many small people in many small places do many small things, that can alter the face of the world.",
@@ -210,6 +215,22 @@
       "message": "Do you really want to disable the comment from \"<b>{name}</b>\"?"
     }
   },
+  "delete": {
+    "submit": "Delete",
+    "cancel": "Cancel",
+    "contribution": {
+      "title": "Delete Post",
+      "type": "Contribution",
+      "message": "Do you really want to delete the post \"<b>{name}</b>\"?",
+      "success": "Post successfully deleted!"
+    },
+    "comment": {
+      "title": "Delete Comment",
+      "type": "Comment",
+      "message": "Do you really want to delete the comment from \"<b>{name}</b>\"?",
+      "success": "Comment successfully deleted!"
+    }
+  },
   "report": {
     "submit": "Report",
     "cancel": "Cancel",
@@ -230,17 +251,6 @@
       "message": "Do you really want to report the comment from \"<b>{name}</b>\"?"
     }
   },
-  "contribution": {
-    "edit": "Edit Contribution",
-    "delete": "Delete Contribution"
-  },
-  "comment": {
-    "edit": "Edit Comment",
-    "delete": "Delete Comment",
-    "content": {
-      "unavailable-placeholder": "...this comment is not available anymore"
-    }
-  },
   "followButton": {
     "follow": "Follow",
     "following": "Following"