Write frontend tests

backend/src/middleware/handleNotifications/handleNotificationsMiddleware.js

@@ -1,6 +1,4 @@
-import {
+import { UserInputError } from 'apollo-server'
-  UserInputError
-} from 'apollo-server'
 import extractMentionedUsers from './notifications/extractMentionedUsers'
 import extractHashtags from './hashtags/extractHashtags'
 

backend/src/middleware/handleNotifications/handleNotificationsMiddleware.spec.js

@@ -1,14 +1,7 @@
-import {
+import { gql } from '../../jest/helpers'
-  gql
-} from '../../jest/helpers'
 import Factory from '../../seed/factories'
-import {
+import { createTestClient } from 'apollo-server-testing'
-  createTestClient
+import { neode, getDriver } from '../../bootstrap/neo4j'
-} from 'apollo-server-testing'
-import {
-  neode,
-  getDriver
-} from '../../bootstrap/neo4j'
 import createServer from '../../server'
 
 let server
@@ -162,20 +155,20 @@ describe('notifications', () => {
             const expected = expect.objectContaining({
               data: {
                 currentUser: {
-                  notifications: [{
+                  notifications: [
+                    {
                       read: false,
                       reason: 'comment_on_post',
                       post: null,
                       comment: {
                         content: commentContent,
                       },
-                  }, ],
+                    },
+                  ],
                 },
               },
             })
-            const {
+            const { query } = createTestClient(server)
-              query
-            } = createTestClient(server)
             await expect(
               query({
                 query: notificationQuery,
@@ -196,9 +189,7 @@ describe('notifications', () => {
                 },
               },
             })
-            const {
+            const { query } = createTestClient(server)
-              query
-            } = createTestClient(server)
             await expect(
               query({
                 query: notificationQuery,
@@ -226,9 +217,7 @@ describe('notifications', () => {
                 },
               },
             })
-            const {
+            const { query } = createTestClient(server)
-              query
-            } = createTestClient(server)
             await expect(
               query({
                 query: notificationQuery,
@@ -265,20 +254,20 @@ describe('notifications', () => {
           const expected = expect.objectContaining({
             data: {
               currentUser: {
-                notifications: [{
+                notifications: [
+                  {
                     read: false,
                     reason: 'mentioned_in_post',
                     post: {
                       content: expectedContent,
                     },
                     comment: null,
-                }, ],
+                  },
+                ],
               },
             },
           })
-          const {
+          const { query } = createTestClient(server)
-            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 {
+            const { query } = createTestClient(server)
-              query
-            } = createTestClient(server)
             await expect(
               query({
                 query: notificationQuery,
@@ -410,20 +398,20 @@ describe('notifications', () => {
             const expected = expect.objectContaining({
               data: {
                 currentUser: {
-                  notifications: [{
+                  notifications: [
+                    {
                       read: false,
                       reason: 'mentioned_in_comment',
                       post: null,
                       comment: {
                         content: commentContent,
                       },
-                  }, ],
+                    },
+                  ],
                 },
               },
             })
-            const {
+            const { query } = createTestClient(server)
-              query
-            } = createTestClient(server)
             await expect(
               query({
                 query: notificationQuery,
@@ -458,9 +446,7 @@ describe('notifications', () => {
                 },
               },
             })
-            const {
+            const { query } = createTestClient(server)
-              query
-            } = createTestClient(server)
             await expect(
               query({
                 query: notificationQuery,
@@ -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: [{
+              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: [{
+                Post: [
+                  {
                     tags: expect.arrayContaining(expected),
-                }, ],
+                  },
+                ],
               },
             }),
           )

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 = {
+        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 title",
+            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',
+            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')
       })
     })
   })

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'

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) {

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 …",
+      "mentioned_in_post": "Hat dich in einem Beitrag erwähnt …",
-      "mentionedInComment": "Hat dich in einem Kommentar erwähnt …",
+      "mentioned_in_comment": "Hat dich in einem Kommentar erwähnt …",
-      "commentedOnPost": "Hat deinen Beitrag kommentiert …"
+      "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",

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 …",
+      "mentioned_in_post": "Mentioned you in a post …",
-      "mentionedInComment": "Mentioned you in a comment …",
+      "mentioned_in_comment": "Mentioned you in a comment …",
-      "commentedOnPost": "Commented on your post …"
+      "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",