Write frontend tests

This commit is contained in:
Wolfgang Huß 2019-08-22 15:20:40 +02:00
parent 04fe6b0a8c
commit 793485c0fc
7 changed files with 213 additions and 107 deletions

View File

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

View File

@ -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: [{
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: [{
notifications: [
{
read: false,
reason: 'mentioned_in_post',
post: {
content: expectedContent,
},
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: [{
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: [{
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),
}, ],
},
],
},
}),
)

View File

@ -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')
})
})
})

View File

@ -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'

View File

@ -77,7 +77,7 @@ export default i18n => {
export const currentUserNotificationsQuery = () => {
return gql`
{
query {
currentUser {
id
notifications(read: false, orderBy: createdAt_desc) {

View File

@ -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",

View File

@ -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",