From 793485c0fc5fe9eee1f776874bafc6656c422f0e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= Date: Thu, 22 Aug 2019 15:20:40 +0200 Subject: [PATCH] Write frontend tests --- .../handleNotificationsMiddleware.js | 6 +- .../handleNotificationsMiddleware.spec.js | 126 +++++++-------- .../Notification/Notification.spec.js | 149 ++++++++++++++++-- .../Notification/Notification.vue | 13 +- webapp/graphql/User.js | 2 +- webapp/locales/de.json | 12 +- webapp/locales/en.json | 12 +- 7 files changed, 213 insertions(+), 107 deletions(-) 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 = '

Hey Dude, #Democracy should work equal for everybody!? That seems to be the only way to have equal #Liberty for everyone.

' - 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: '@jenny-rostock is the best', + reason: 'comment_on_post', + post: null, + comment: { + id: 'comment-1', + contentExcerpt: + '@dagobert-duck 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: + '@jenny-rostock 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: + '@dagobert-duck 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 @@ /> - {{ $t(notificationTextIdents[notification.reason]) }} + + {{ $t(`notifications.menu.${notification.reason}`) }} + { 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",