diff --git a/backend/src/middleware/handleNotifications/handleNotificationsMiddleware.js b/backend/src/middleware/handleNotifications/handleNotificationsMiddleware.js
index 6b880cfd7..b56a1384e 100644
--- a/backend/src/middleware/handleNotifications/handleNotificationsMiddleware.js
+++ b/backend/src/middleware/handleNotifications/handleNotificationsMiddleware.js
@@ -1,6 +1,4 @@
-import {
-  UserInputError
-} from 'apollo-server'
+import { UserInputError } from 'apollo-server'
 import extractMentionedUsers from './notifications/extractMentionedUsers'
 import extractHashtags from './hashtags/extractHashtags'
 
@@ -155,4 +153,4 @@ export default {
     CreateComment: handleCreateComment,
     UpdateComment: handleContentDataOfComment,
   },
-}
\ No newline at end of file
+}
diff --git a/backend/src/middleware/handleNotifications/handleNotificationsMiddleware.spec.js b/backend/src/middleware/handleNotifications/handleNotificationsMiddleware.spec.js
index d982f318d..3b52d13e0 100644
--- a/backend/src/middleware/handleNotifications/handleNotificationsMiddleware.spec.js
+++ b/backend/src/middleware/handleNotifications/handleNotificationsMiddleware.spec.js
@@ -1,14 +1,7 @@
-import {
-  gql
-} from '../../jest/helpers'
+import { gql } from '../../jest/helpers'
 import Factory from '../../seed/factories'
-import {
-  createTestClient
-} from 'apollo-server-testing'
-import {
-  neode,
-  getDriver
-} from '../../bootstrap/neo4j'
+import { createTestClient } from 'apollo-server-testing'
+import { neode, getDriver } from '../../bootstrap/neo4j'
 import createServer from '../../server'
 
 let server
@@ -20,7 +13,7 @@ const factory = Factory()
 const driver = getDriver()
 const instance = neode()
 const categoryIds = ['cat9']
-const createPostMutation = gql `
+const createPostMutation = gql`
   mutation($id: ID, $title: String!, $postContent: String!, $categoryIds: [ID]!) {
     CreatePost(id: $id, title: $title, content: $postContent, categoryIds: $categoryIds) {
       id
@@ -29,7 +22,7 @@ const createPostMutation = gql `
     }
   }
 `
-const updatePostMutation = gql `
+const updatePostMutation = gql`
   mutation($id: ID!, $title: String!, $postContent: String!, $categoryIds: [ID]!) {
     UpdatePost(id: $id, content: $postContent, title: $title, categoryIds: $categoryIds) {
       title
@@ -37,7 +30,7 @@ const updatePostMutation = gql `
     }
   }
 `
-const createCommentMutation = gql `
+const createCommentMutation = gql`
   mutation($id: ID, $postId: ID!, $commentContent: String!) {
     CreateComment(id: $id, postId: $postId, content: $commentContent) {
       id
@@ -82,7 +75,7 @@ afterEach(async () => {
 })
 
 describe('notifications', () => {
-  const notificationQuery = gql `
+  const notificationQuery = gql`
     query($read: Boolean) {
       currentUser {
         notifications(read: $read, orderBy: createdAt_desc) {
@@ -162,20 +155,20 @@ describe('notifications', () => {
             const expected = expect.objectContaining({
               data: {
                 currentUser: {
-                  notifications: [{
-                    read: false,
-                    reason: 'comment_on_post',
-                    post: null,
-                    comment: {
-                      content: commentContent,
+                  notifications: [
+                    {
+                      read: false,
+                      reason: 'comment_on_post',
+                      post: null,
+                      comment: {
+                        content: commentContent,
+                      },
                     },
-                  }, ],
+                  ],
                 },
               },
             })
-            const {
-              query
-            } = createTestClient(server)
+            const { query } = createTestClient(server)
             await expect(
               query({
                 query: notificationQuery,
@@ -196,9 +189,7 @@ describe('notifications', () => {
                 },
               },
             })
-            const {
-              query
-            } = createTestClient(server)
+            const { query } = createTestClient(server)
             await expect(
               query({
                 query: notificationQuery,
@@ -226,9 +217,7 @@ describe('notifications', () => {
                 },
               },
             })
-            const {
-              query
-            } = createTestClient(server)
+            const { query } = createTestClient(server)
             await expect(
               query({
                 query: notificationQuery,
@@ -265,20 +254,20 @@ describe('notifications', () => {
           const expected = expect.objectContaining({
             data: {
               currentUser: {
-                notifications: [{
-                  read: false,
-                  reason: 'mentioned_in_post',
-                  post: {
-                    content: expectedContent,
+                notifications: [
+                  {
+                    read: false,
+                    reason: 'mentioned_in_post',
+                    post: {
+                      content: expectedContent,
+                    },
+                    comment: null,
                   },
-                  comment: null,
-                }, ],
+                ],
               },
             },
           })
-          const {
-            query
-          } = createTestClient(server)
+          const { query } = createTestClient(server)
           await expect(
             query({
               query: notificationQuery,
@@ -326,7 +315,8 @@ describe('notifications', () => {
             const expected = expect.objectContaining({
               data: {
                 currentUser: {
-                  notifications: [{
+                  notifications: [
+                    {
                       read: false,
                       reason: 'mentioned_in_post',
                       post: {
@@ -371,9 +361,7 @@ describe('notifications', () => {
                 },
               },
             })
-            const {
-              query
-            } = createTestClient(server)
+            const { query } = createTestClient(server)
             await expect(
               query({
                 query: notificationQuery,
@@ -410,20 +398,20 @@ describe('notifications', () => {
             const expected = expect.objectContaining({
               data: {
                 currentUser: {
-                  notifications: [{
-                    read: false,
-                    reason: 'mentioned_in_comment',
-                    post: null,
-                    comment: {
-                      content: commentContent,
+                  notifications: [
+                    {
+                      read: false,
+                      reason: 'mentioned_in_comment',
+                      post: null,
+                      comment: {
+                        content: commentContent,
+                      },
                     },
-                  }, ],
+                  ],
                 },
               },
             })
-            const {
-              query
-            } = createTestClient(server)
+            const { query } = createTestClient(server)
             await expect(
               query({
                 query: notificationQuery,
@@ -458,9 +446,7 @@ describe('notifications', () => {
                 },
               },
             })
-            const {
-              query
-            } = createTestClient(server)
+            const { query } = createTestClient(server)
             await expect(
               query({
                 query: notificationQuery,
@@ -481,7 +467,7 @@ describe('Hashtags', () => {
   const title = 'Two Hashtags'
   const postContent =
     '<p>Hey Dude, <a class="hashtag" href="/search/hashtag/Democracy">#Democracy</a> should work equal for everybody!? That seems to be the only way to have equal <a class="hashtag" href="/search/hashtag/Liberty">#Liberty</a> for everyone.</p>'
-  const postWithHastagsQuery = gql `
+  const postWithHastagsQuery = gql`
     query($id: ID) {
       Post(id: $id) {
         tags {
@@ -513,7 +499,8 @@ describe('Hashtags', () => {
       })
 
       it('both Hashtags are created with the "id" set to their "name"', async () => {
-        const expected = [{
+        const expected = [
+          {
             id: 'Democracy',
           },
           {
@@ -528,9 +515,11 @@ describe('Hashtags', () => {
         ).resolves.toEqual(
           expect.objectContaining({
             data: {
-              Post: [{
-                tags: expect.arrayContaining(expected),
-              }, ],
+              Post: [
+                {
+                  tags: expect.arrayContaining(expected),
+                },
+              ],
             },
           }),
         )
@@ -552,7 +541,8 @@ describe('Hashtags', () => {
             },
           })
 
-          const expected = [{
+          const expected = [
+            {
               id: 'Elections',
             },
             {
@@ -567,9 +557,11 @@ describe('Hashtags', () => {
           ).resolves.toEqual(
             expect.objectContaining({
               data: {
-                Post: [{
-                  tags: expect.arrayContaining(expected),
-                }, ],
+                Post: [
+                  {
+                    tags: expect.arrayContaining(expected),
+                  },
+                ],
               },
             }),
           )
@@ -577,4 +569,4 @@ describe('Hashtags', () => {
       })
     })
   })
-})
\ No newline at end of file
+})
diff --git a/webapp/components/notifications/Notification/Notification.spec.js b/webapp/components/notifications/Notification/Notification.spec.js
index 8fbc524fb..8cc5fa8cc 100644
--- a/webapp/components/notifications/Notification/Notification.spec.js
+++ b/webapp/components/notifications/Notification/Notification.spec.js
@@ -14,10 +14,11 @@ describe('Notification', () => {
   let stubs
   let mocks
   let propsData
+  let wrapper
   beforeEach(() => {
     propsData = {}
     mocks = {
-      $t: jest.fn(),
+      $t: key => key,
     }
     stubs = {
       NuxtLink: RouterLinkStub,
@@ -33,37 +34,159 @@ describe('Notification', () => {
     })
   }
 
-  describe('given a notification', () => {
+  describe('given a notification about a comment on a post', () => {
     beforeEach(() => {
       propsData.notification = {
-        post: {
-          title: "It's a title",
-          id: 'post-1',
-          slug: 'its-a-title',
-          contentExcerpt: '<a href="/profile/u3" target="_blank">@jenny-rostock</a> is the best',
+        reason: 'comment_on_post',
+        post: null,
+        comment: {
+          id: 'comment-1',
+          contentExcerpt:
+            '<a href="/profile/u123" target="_blank">@dagobert-duck</a> is the best on this comment.',
+          post: {
+            title: "It's a post title",
+            id: 'post-1',
+            slug: 'its-a-title',
+            contentExcerpt: 'Post content.',
+          },
         },
       }
     })
 
+    it('renders reason', () => {
+      wrapper = Wrapper()
+      expect(wrapper.find('.reason-text-for-test').text()).toEqual(
+        'notifications.menu.comment_on_post',
+      )
+    })
     it('renders title', () => {
-      expect(Wrapper().text()).toContain("It's a title")
+      wrapper = Wrapper()
+      expect(wrapper.text()).toContain("It's a post title")
+    })
+    it('renders the "Comment:"', () => {
+      wrapper = Wrapper()
+      expect(wrapper.text()).toContain('Comment:')
     })
-
     it('renders the contentExcerpt', () => {
-      expect(Wrapper().text()).toContain('@jenny-rostock is the best')
+      wrapper = Wrapper()
+      expect(wrapper.text()).toContain('@dagobert-duck is the best on this comment.')
     })
-
     it('has no class "read"', () => {
-      expect(Wrapper().classes()).not.toContain('read')
+      wrapper = Wrapper()
+      expect(wrapper.classes()).not.toContain('read')
     })
 
     describe('that is read', () => {
       beforeEach(() => {
         propsData.notification.read = true
+        wrapper = Wrapper()
       })
 
       it('has class "read"', () => {
-        expect(Wrapper().classes()).toContain('read')
+        expect(wrapper.classes()).toContain('read')
+      })
+    })
+  })
+
+  describe('given a notification about a mention in a post', () => {
+    beforeEach(() => {
+      propsData.notification = {
+        reason: 'mentioned_in_post',
+        post: {
+          title: "It's a post title",
+          id: 'post-1',
+          slug: 'its-a-title',
+          contentExcerpt:
+            '<a href="/profile/u3" target="_blank">@jenny-rostock</a> is the best on this post.',
+        },
+        comment: null,
+      }
+    })
+
+    it('renders reason', () => {
+      wrapper = Wrapper()
+      expect(wrapper.find('.reason-text-for-test').text()).toEqual(
+        'notifications.menu.mentioned_in_post',
+      )
+    })
+    it('renders title', () => {
+      wrapper = Wrapper()
+      expect(wrapper.text()).toContain("It's a post title")
+    })
+    it('renders the contentExcerpt', () => {
+      wrapper = Wrapper()
+      expect(wrapper.text()).toContain('@jenny-rostock is the best on this post.')
+    })
+    it('has no class "read"', () => {
+      wrapper = Wrapper()
+      expect(wrapper.classes()).not.toContain('read')
+    })
+
+    describe('that is read', () => {
+      beforeEach(() => {
+        propsData.notification.read = true
+        wrapper = Wrapper()
+      })
+
+      it('has class "read"', () => {
+        expect(wrapper.classes()).toContain('read')
+      })
+    })
+  })
+
+  describe('given a notification about a mention in a comment', () => {
+    beforeEach(() => {
+      propsData.notification = {
+        reason: 'mentioned_in_comment',
+        post: null,
+        comment: {
+          id: 'comment-1',
+          contentExcerpt:
+            '<a href="/profile/u123" target="_blank">@dagobert-duck</a> is the best on this comment.',
+          post: {
+            title: "It's a post title",
+            id: 'post-1',
+            slug: 'its-a-title',
+            contentExcerpt: 'Post content.',
+          },
+        },
+      }
+    })
+
+    it('renders reason', () => {
+      wrapper = Wrapper()
+      expect(wrapper.find('.reason-text-for-test').text()).toEqual(
+        'notifications.menu.mentioned_in_comment',
+      )
+    })
+    it('renders title', () => {
+      wrapper = Wrapper()
+      expect(wrapper.text()).toContain("It's a post title")
+    })
+
+    it('renders the "Comment:"', () => {
+      wrapper = Wrapper()
+      expect(wrapper.text()).toContain('Comment:')
+    })
+
+    it('renders the contentExcerpt', () => {
+      wrapper = Wrapper()
+      expect(wrapper.text()).toContain('@dagobert-duck is the best on this comment.')
+    })
+
+    it('has no class "read"', () => {
+      wrapper = Wrapper()
+      expect(wrapper.classes()).not.toContain('read')
+    })
+
+    describe('that is read', () => {
+      beforeEach(() => {
+        propsData.notification.read = true
+        wrapper = Wrapper()
+      })
+
+      it('has class "read"', () => {
+        expect(wrapper.classes()).toContain('read')
       })
     })
   })
diff --git a/webapp/components/notifications/Notification/Notification.vue b/webapp/components/notifications/Notification/Notification.vue
index 8afde5793..8c36cb900 100644
--- a/webapp/components/notifications/Notification/Notification.vue
+++ b/webapp/components/notifications/Notification/Notification.vue
@@ -10,7 +10,9 @@
         />
         <hc-user v-else :user="comment.author" :date-time="comment.createdAt" :trunc="35" />
       </ds-space>
-      <ds-text color="soft">{{ $t(notificationTextIdents[notification.reason]) }}</ds-text>
+      <ds-text class="reason-text-for-test" color="soft">
+        {{ $t(`notifications.menu.${notification.reason}`) }}
+      </ds-text>
     </no-ssr>
     <ds-space margin-bottom="x-small" />
     <nuxt-link
@@ -51,15 +53,6 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      notificationTextIdents: {
-        mentioned_in_post: 'notifications.menu.mentionedInPost',
-        mentioned_in_comment: 'notifications.menu.mentionedInComment',
-        comment_on_post: 'notifications.menu.commentedOnPost',
-      },
-    }
-  },
   computed: {
     resourceType() {
       return this.post.id ? 'Post' : 'Comment'
diff --git a/webapp/graphql/User.js b/webapp/graphql/User.js
index a4cb4f039..381a51791 100644
--- a/webapp/graphql/User.js
+++ b/webapp/graphql/User.js
@@ -77,7 +77,7 @@ export default i18n => {
 
 export const currentUserNotificationsQuery = () => {
   return gql`
-    {
+    query {
       currentUser {
         id
         notifications(read: false, orderBy: createdAt_desc) {
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 2328caaf5..e824d565c 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -10,7 +10,7 @@
       "all": "Alle"
     },
     "general": {
-      "header": "Filtern nach..."
+      "header": "Filtern nach …"
     },
     "followers": {
       "label": "Benutzern, denen ich folge"
@@ -92,7 +92,7 @@
     }
   },
   "editor": {
-    "placeholder": "Schreib etwas Inspirierendes...",
+    "placeholder": "Schreib etwas Inspirierendes …",
     "mention": {
       "noUsersFound": "Keine Benutzer gefunden"
     },
@@ -124,9 +124,9 @@
   },
   "notifications": {
     "menu": {
-      "mentionedInPost": "Hat dich in einem Beitrag erwähnt …",
-      "mentionedInComment": "Hat dich in einem Kommentar erwähnt …",
-      "commentedOnPost": "Hat deinen Beitrag kommentiert …"
+      "mentioned_in_post": "Hat dich in einem Beitrag erwähnt …",
+      "mentioned_in_comment": "Hat dich in einem Kommentar erwähnt …",
+      "comment_on_post": "Hat deinen Beitrag kommentiert …"
     }
   },
   "search": {
@@ -298,7 +298,7 @@
   },
   "comment": {
     "content": {
-      "unavailable-placeholder": "...dieser Kommentar ist nicht mehr verfügbar"
+      "unavailable-placeholder": "… dieser Kommentar ist nicht mehr verfügbar"
     },
     "menu": {
       "edit": "Kommentar bearbeiten",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 04f2310f8..edc6e2d28 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -10,7 +10,7 @@
       "all": "All"
     },
     "general": {
-      "header": "Filter by..."
+      "header": "Filter by …"
     },
     "followers": {
       "label": "Users I follow"
@@ -92,7 +92,7 @@
     }
   },
   "editor": {
-    "placeholder": "Leave your inspirational thoughts...",
+    "placeholder": "Leave your inspirational thoughts …",
     "mention": {
       "noUsersFound": "No users found"
     },
@@ -124,9 +124,9 @@
   },
   "notifications": {
     "menu": {
-      "mentionedInPost": "Mentioned you in a post …",
-      "mentionedInComment": "Mentioned you in a comment …",
-      "commentedOnPost": "Commented on your post …"
+      "mentioned_in_post": "Mentioned you in a post …",
+      "mentioned_in_comment": "Mentioned you in a comment …",
+      "comment_on_post": "Commented on your post …"
     }
   },
   "search": {
@@ -298,7 +298,7 @@
   },
   "comment": {
     "content": {
-      "unavailable-placeholder": "...this comment is not available anymore"
+      "unavailable-placeholder": "… this comment is not available anymore"
     },
     "menu": {
       "edit": "Edit Comment",