test(services): add tests for createComment mutation

* add Jest test
* add a Cypress test in article pages spec

10 files changed, 161 insertions, 34 deletions

diff --git a/next.config.js b/next.config.js
index fada5f4..5bd458d 100644
--- a/next.config.js
+++ b/next.config.js
@@ -103,6 +103,10 @@ const nextConfig = {
         protocol: 'https',
         hostname: 'secure.gravatar.com',
       },
+      {
+        protocol: 'https',
+        hostname: 'cloudflare-ipfs.com',
+      },
     ],
   },
   output: 'standalone',
@@ -185,3 +189,5 @@ const withMDX = nextMDX({
 });
 
 export default withBundleAnalyzer(withMDX(nextConfig));
+
+// cSpell:ignore ipfs
diff --git a/src/services/graphql/mutators/create-comment.test.ts b/src/services/graphql/mutators/create-comment.test.ts
new file mode 100644
index 0000000..b3742f5
--- /dev/null
+++ b/src/services/graphql/mutators/create-comment.test.ts
@@ -0,0 +1,23 @@
+import { describe, expect, it } from '@jest/globals';
+import { type CreateCommentInput, createComment } from './create-comment';
+
+describe('create-comment', () => {
+  it('successfully create a new comment', async () => {
+    const email: CreateCommentInput = {
+      author: 'Bruce_Lowe12',
+      authorEmail: 'Wiley_Wolf18@example.net',
+      authorUrl: '',
+      clientMutationId: 'aliquid',
+      commentOn: 2,
+      content: 'Error vel fugit nisi accusantium.',
+    };
+    const result = await createComment(email);
+
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    expect.assertions(3);
+
+    expect(result.clientMutationId).toBe(email.clientMutationId);
+    expect(result.comment?.approved).toBe(true);
+    expect(result.success).toBe(true);
+  });
+});
diff --git a/src/services/graphql/mutators/create-comment.ts b/src/services/graphql/mutators/create-comment.ts
index d9d177d..37d5348 100644
--- a/src/services/graphql/mutators/create-comment.ts
+++ b/src/services/graphql/mutators/create-comment.ts
@@ -1,43 +1,23 @@
-import type { Nullable } from '../../../types';
+import type { Nullable, WPComment } from '../../../types';
 import { fetchGraphQL, getGraphQLUrl } from '../../../utils/helpers';
 
-type CreatedComment = {
-  clientMutationId: string;
+export type CreateCommentPayload = {
+  clientMutationId: Nullable<string>;
   success: boolean;
-  comment: Nullable<{
-    approved: boolean;
-  }>;
+  comment: Nullable<Pick<WPComment, 'approved'>>;
 };
 
-type CreateCommentResponse = {
-  createComment: CreatedComment;
+export type CreateCommentResponse = {
+  createComment: CreateCommentPayload;
 };
 
-export const createCommentMutation = `mutation CreateComment(
-  $author: String!
-  $authorEmail: String!
-  $authorUrl: String!
-  $content: String!
-  $parent: ID = null
-  $commentOn: Int!
-  $clientMutationId: String!
-) {
-  createComment(
-    input: {
-      author: $author
-      authorEmail: $authorEmail
-      authorUrl: $authorUrl
-      content: $content
-      parent: $parent
-      commentOn: $commentOn
-      clientMutationId: $clientMutationId
-    }
-  ) {
+export const createCommentMutation = `mutation CreateComment($input: CreateCommentInput!) {
+  createComment(input: $input) {
     clientMutationId
-    success
     comment {
       approved
     }
+    success
   }
 }`;
 
@@ -55,15 +35,15 @@ export type CreateCommentInput = {
  * Create a new comment using GraphQL API.
  *
  * @param {CreateCommentInput} input - The comment data.
- * @returns {Promise<CreatedComment>} The created comment.
+ * @returns {Promise<CreateCommentPayload>} The created comment.
  */
 export const createComment = async (
   input: CreateCommentInput
-): Promise<CreatedComment> => {
+): Promise<CreateCommentPayload> => {
   const response = await fetchGraphQL<CreateCommentResponse>({
     query: createCommentMutation,
     url: getGraphQLUrl(),
-    variables: { ...input },
+    variables: { input },
   });
 
   return response.createComment;
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<CreateCommentResponse>;
+
+  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<PostResponse>;
 
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,