From 1c20e06da5a9817c15c80ca5a25cfacf8eeb0485 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Mon, 11 Dec 2023 18:47:59 +0100 Subject: test(services): add tests for createComment mutation * add Jest test * add a Cypress test in article pages spec --- tests/cypress/e2e/pages/article.cy.ts | 13 ++++++ tests/fixtures/wp-posts.fixture.ts | 31 ++++++++++++++ tests/msw/handlers/forms/create-comment.handler.ts | 49 ++++++++++++++++++++++ tests/msw/handlers/forms/index.ts | 3 +- tests/msw/handlers/posts/post.handler.ts | 4 +- tests/msw/schema/types/create-comment.types.ts | 19 +++++++++ tests/msw/schema/types/index.ts | 3 ++ 7 files changed, 120 insertions(+), 2 deletions(-) create mode 100644 tests/msw/handlers/forms/create-comment.handler.ts create mode 100644 tests/msw/schema/types/create-comment.types.ts (limited to 'tests') diff --git a/tests/cypress/e2e/pages/article.cy.ts b/tests/cypress/e2e/pages/article.cy.ts index cf64015..abe6629 100644 --- a/tests/cypress/e2e/pages/article.cy.ts +++ b/tests/cypress/e2e/pages/article.cy.ts @@ -46,4 +46,17 @@ describe('Article', () => { 'exist' ); }); + + it('can submit a new comment', () => { + const comment = { + author: 'Jerome37', + email: 'Etha19@example.net', + content: 'Commodi sed quia.', + }; + cy.findByRole('textbox', { name: /Nom/ }).type(comment.author); + cy.findByRole('textbox', { name: /E-mail/ }).type(comment.email); + cy.findByRole('textbox', { name: /Commentaire/ }).type(comment.content); + cy.findByRole('button', { name: /Publier/ }).click(); + cy.findByText(/Merci/i).should('be.visible'); + }); }); diff --git a/tests/fixtures/wp-posts.fixture.ts b/tests/fixtures/wp-posts.fixture.ts index 7adc928..a512c51 100644 --- a/tests/fixtures/wp-posts.fixture.ts +++ b/tests/fixtures/wp-posts.fixture.ts @@ -174,4 +174,35 @@ export const wpPostsFixture = [ slug: '/post-4', title: 'Post 4', }, + { + acfPosts: null, + author: { + node: { + name: 'Claudia78', + }, + }, + commentCount: 1, + contentParts: { + afterMore: + 'Dolor quidem cumque animi consectetur consequuntur eos dolores porro reiciendis. Repellat tempore unde vel. Sed eos neque veritatis incidunt rerum totam molestiae consequatur. Voluptas laboriosam non atque. Ipsam nulla voluptate molestias ut. Doloremque reprehenderit id aut sequi totam sit assumenda et odit.', + beforeMore: + 'In minus nihil ut. Et et exercitationem consequatur. Maiores neque voluptas mollitia ut. Doloremque reiciendis quam.', + }, + databaseId: 36, + date: '2023-01-23', + featuredImage: null, + info: { + wordsCount: 450, + }, + modified: '2023-01-23', + seo: { + metaDesc: 'Omnis quo commodi nam aut eum officiis veritatis eligendi.', + title: 'non vel ad', + }, + /* I don't want to mock all the requests so I need an existing slug. The + * solution is only temporary since if I write another article, I would + * need to update the slug... */ + slug: '/version-2022-bonjour-next-js', + title: 'porro adipisci adipisci', + }, ] satisfies WPPost[]; diff --git a/tests/msw/handlers/forms/create-comment.handler.ts b/tests/msw/handlers/forms/create-comment.handler.ts new file mode 100644 index 0000000..d4c6003 --- /dev/null +++ b/tests/msw/handlers/forms/create-comment.handler.ts @@ -0,0 +1,49 @@ +import { type ExecutionResult, graphql } from 'graphql'; +import { HttpResponse } from 'msw'; +import type { + CreateCommentInput, + CreateCommentPayload, + CreateCommentResponse, +} from '../../../../src/services/graphql'; +import { wordpressAPI } from '../../instances'; +import { schema } from '../../schema'; + +export const createCommentHandler = wordpressAPI.mutation< + CreateCommentResponse, + Record<'input', CreateCommentInput> +>('CreateComment', async ({ query, variables }) => { + const pageParams = new URLSearchParams(window.location.search); + const isError = pageParams.get('error') === 'true'; + + if (isError) + return HttpResponse.json({ + data: { + createComment: { + clientMutationId: null, + comment: null, + success: false, + }, + }, + }); + + const { data, errors } = (await graphql({ + schema, + source: query, + variableValues: variables, + rootValue: { + createComment({ input }: typeof variables): CreateCommentPayload { + const { clientMutationId } = input; + + return { + clientMutationId, + comment: { + approved: true, + }, + success: true, + }; + }, + }, + })) as ExecutionResult; + + return HttpResponse.json({ data, errors }); +}); diff --git a/tests/msw/handlers/forms/index.ts b/tests/msw/handlers/forms/index.ts index ce1e5b3..64be29b 100644 --- a/tests/msw/handlers/forms/index.ts +++ b/tests/msw/handlers/forms/index.ts @@ -1,3 +1,4 @@ +import { createCommentHandler } from './create-comment.handler'; import { sendEmailHandler } from './send-email.handler'; -export const formsHandlers = [sendEmailHandler]; +export const formsHandlers = [createCommentHandler, sendEmailHandler]; diff --git a/tests/msw/handlers/posts/post.handler.ts b/tests/msw/handlers/posts/post.handler.ts index 72f7b95..57f415b 100644 --- a/tests/msw/handlers/posts/post.handler.ts +++ b/tests/msw/handlers/posts/post.handler.ts @@ -14,7 +14,9 @@ export const postHandler = wordpressAPI.query< source: query, variableValues: variables, rootValue: { - post: wpPostsFixture.find((wpPost) => wpPost.slug === variables.slug), + post: wpPostsFixture.find((wpPost) => + wpPost.slug.includes(variables.slug) + ), }, })) as ExecutionResult; diff --git a/tests/msw/schema/types/create-comment.types.ts b/tests/msw/schema/types/create-comment.types.ts new file mode 100644 index 0000000..31fc54d --- /dev/null +++ b/tests/msw/schema/types/create-comment.types.ts @@ -0,0 +1,19 @@ +export const createCommentTypes = `input CreateCommentInput { + approved: String + author: String + authorEmail: String + authorUrl: String + clientMutationId: String + commentOn: Int + content: String + date: String + parent: ID + status: CommentStatusEnum + type: String +} + +type CreateCommentPayload { + clientMutationId: String + comment: Comment + success: Boolean +}`; diff --git a/tests/msw/schema/types/index.ts b/tests/msw/schema/types/index.ts index 1063772..e1d260a 100644 --- a/tests/msw/schema/types/index.ts +++ b/tests/msw/schema/types/index.ts @@ -1,6 +1,7 @@ import { authorTypes } from './author.types'; import { commentTypes } from './comment.types'; import { commonTypes } from './common.types'; +import { createCommentTypes } from './create-comment.types'; import { featuredImageTypes } from './featured-image.types'; import { postTypes } from './post.types'; import { sendEmailTypes } from './send-email.types'; @@ -54,6 +55,7 @@ const rootQueryType = `type Query { }`; const rootMutationType = `type Mutation { + createComment(input: CreateCommentInput!): CreateCommentPayload sendEmail(input: SendEmailInput!): SendEmailPayload }`; @@ -61,6 +63,7 @@ export const types = [ authorTypes, commentTypes, commonTypes, + createCommentTypes, featuredImageTypes, postTypes, sendEmailTypes, -- cgit v1.2.3