7 files changed, 120 insertions, 2 deletions
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,