Extent storybook NotificationsTable with filed report notifications

backend/src/schema/resolvers/notifications.spec.js

@@ -293,7 +293,7 @@ describe('given some notifications', () => {
       })
 
       describe('no filters', () => {
-        it.only('returns all notifications of current user', async () => {
+        it('returns all notifications of current user', async () => {
           const expected = {
             data: {
               notifications: [

webapp/components/NotificationList/NotificationList.spec.js

@@ -30,6 +30,9 @@ describe('NotificationList.vue', () => {
     })
     mocks = {
       $t: jest.fn(),
+      $i18n: {
+        locale: () => 'en',
+      },
     }
     stubs = {
       NuxtLink: RouterLinkStub,
@@ -52,7 +55,7 @@ describe('NotificationList.vue', () => {
     })
 
     it('renders Notification.vue for each notification of the user', () => {
-      expect(wrapper.findAll(Notification)).toHaveLength(3)
+      expect(wrapper.findAll(Notification)).toHaveLength(5)
     })
   })
 

webapp/components/NotificationsTable/NotificationsTable.spec.js

@@ -20,6 +20,9 @@ describe('NotificationsTable.vue', () => {
   beforeEach(() => {
     mocks = {
       $t: jest.fn((string) => string),
+      $i18n: {
+        locale: () => 'en',
+      },
     }
     stubs = {
       NuxtLink: RouterLinkStub,

webapp/components/NotificationsTable/NotificationsTable.story.js

@@ -35,14 +35,14 @@ export const notifications = [
         '<p><a class="mention" href="/profile/u1" data-mention-id="u1" target="_blank">@peter-lustig</a> </p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas pretium aenean pharetra magna ac placerat. Tempor id eu nisl nunc mi ipsum faucibus vitae. Nibh praesent tristique magna sit amet purus gravida quis blandit. Magna eget est lorem ipsum dolor. In fermentum posuere urna nec. Eleifend donec pretium vulputate sapien nec sagittis aliquam. Augue interdum velit euismod in pellentesque. Id diam maecenas ultricies mi eget mauris pharetra. Donec pretium vulputate sapien nec. Dolor morbi non arcu risus quis varius quam quisque. Blandit turpis cursus in hac habitasse. Est ultricies integer quis auctor elit sed vulputate mi sit. Nunc consequat interdum varius sit amet mattis vulputate enim. Semper feugiat nibh sed pulvinar. Eget felis eget nunc lobortis mattis aliquam. Ultrices vitae auctor eu augue. Tellus molestie nunc non blandit massa enim nec dui. Pharetra massa massa ultricies mi quis hendrerit dolor. Nisl suscipit adipiscing bibendum est ultricies integer.</p>',
       contentExcerpt:
         '<p><a href="/profile/u1" target="_blank">@peter-lustig</a> </p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas pretium aenean pharetra …</p>',
-      ...post,
       author: user,
+      post,
     },
     __typename: 'NOTIFIED',
     index: 1,
   },
   {
-    read: false,
+    read: true,
     reason: 'mentioned_in_comment',
     createdAt: '2019-10-29T15:38:13.422Z',
     from: {
@@ -56,8 +56,8 @@ export const notifications = [
         '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas pretium aenean pharetra magna ac placerat. Tempor id eu nisl nunc mi ipsum faucibus vitae. Nibh praesent tristique magna sit amet purus gravida quis blandit. Magna eget est lorem ipsum dolor. In fermentum posuere urna nec. Eleifend donec pretium vulputate sapien nec sagittis aliquam. Augue interdum velit euismod in pellentesque. Id diam maecenas ultricies mi eget mauris pharetra. Donec pretium vulputate sapien nec. Dolor morbi non arcu risus quis varius quam quisque. Blandit turpis cursus in hac habitasse. Est ultricies integer quis auctor elit sed vulputate mi sit. Nunc consequat interdum varius sit amet mattis vulputate enim. Semper feugiat nibh sed pulvinar. Eget felis eget nunc lobortis mattis aliquam. Ultrices vitae auctor eu augue. Tellus molestie nunc non blandit massa enim nec dui. Pharetra massa massa ultricies mi quis hendrerit dolor. Nisl suscipit adipiscing bibendum est ultricies integer.</p><p><a class="mention" href="/profile/u1" data-mention-id="u1" target="_blank">@peter-lustig</a> </p><p></p>',
       contentExcerpt:
         '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas pretium aenean pharetra magna ac …</p>',
-      ...post,
       author: user,
+      post,
     },
     __typename: 'NOTIFIED',
     index: 2,

webapp/components/utils/Notifications.js

@@ -1,5 +1,7 @@
 export const testNotifications = [
   {
+    createdAt: '2020-01-16T10:33:48.651Z',
+    updatedAt: '2020-01-16T10:33:48.651Z',
     read: false,
     reason: 'mentioned_in_post',
     from: {
@@ -16,6 +18,8 @@ export const testNotifications = [
     },
   },
   {
+    createdAt: '2020-01-15T16:33:48.651Z',
+    updatedAt: '2020-01-15T16:33:48.651Z',
     read: false,
     reason: 'mentioned_in_comment',
     from: {
@@ -41,6 +45,8 @@ export const testNotifications = [
     },
   },
   {
+    createdAt: '2020-01-14T12:33:48.651Z',
+    updatedAt: '2020-01-14T12:33:48.651Z',
     read: false,
     reason: 'filed_report_on_resource',
     from: {
@@ -56,6 +62,73 @@ export const testNotifications = [
       },
     },
   },
+  {
+    createdAt: '2019-08-31T17:33:48.651Z',
+    updatedAt: '2019-08-31T17:33:48.651Z',
+    read: false,
+    reason: 'filed_report_on_resource',
+    from: {
+      __typename: 'FiledReport',
+      reportId: 'reportOnUser',
+      reasonCategory: 'other',
+      reasonDescription: 'Disgusting!',
+      resource: {
+        __typename: 'Post',
+        id: 'badPost',
+        createdAt: '2019-10-29T15:38:25.184Z',
+        updatedAt: '2019-10-29T15:38:25.184Z',
+        disabled: false,
+        deleted: false,
+        title: 'post title',
+        content: 'this is a post content',
+        contentExcerpt: 'this is a post content',
+        author: {
+          id: 'post-author',
+          slug: 'post-author',
+          name: 'Post Author',
+        },
+      },
+    },
+  },
+  {
+    createdAt: '2019-08-31T17:33:48.651Z',
+    updatedAt: '2019-08-31T17:33:48.651Z',
+    read: false,
+    reason: 'filed_report_on_resource',
+    from: {
+      __typename: 'FiledReport',
+      reportId: 'reportOnUser',
+      reasonCategory: 'other',
+      reasonDescription: 'Disgusting!',
+      resource: {
+        __typename: 'Comment',
+        id: 'badComment',
+        createdAt: '2019-10-29T15:38:25.184Z',
+        updatedAt: '2019-10-29T15:38:25.184Z',
+        disabled: false,
+        deleted: false,
+        content: 'this is a comment content',
+        contentExcerpt: 'this is a comment content',
+        author: {
+          id: 'comment-author',
+          slug: 'comment-author',
+          name: 'Comment Author',
+        },
+        post: {
+          id: 'p4',
+          title: 'post title',
+          content: 'this is a post content',
+          contentExcerpt: 'this is a post content',
+          slug: 'some-post',
+          author: {
+            id: 'post-author',
+            slug: 'post-author',
+            name: 'Post Author',
+          },
+        },
+      },
+    },
+  },
 ]
 
 export const extractNotificationDataOfCurrentUser = (notification, currentUser) => {