11 files changed, 136 insertions, 11 deletions
diff --git a/tests/cypress/e2e/pages/contact.cy.ts b/tests/cypress/e2e/pages/contact.cy.ts
index 64f8bdb..e2c8e2f 100644
--- a/tests/cypress/e2e/pages/contact.cy.ts
+++ b/tests/cypress/e2e/pages/contact.cy.ts
@@ -1,4 +1,3 @@
-import { CONFIG } from '../../../../src/utils/config';
 import { ROUTES } from '../../../../src/utils/constants';
 
 const userName = 'Cypress Test';
@@ -18,7 +17,6 @@ describe('Contact Page', () => {
   });
 
   it('submits the form', () => {
-    cy.intercept('POST', CONFIG.api.url ?? '').as('sendMail');
     cy.findByRole('textbox', { name: /Nom/i })
       .type(userName)
       .should('have.value', userName);
@@ -32,9 +30,9 @@ describe('Contact Page', () => {
       .type(message)
       .should('have.value', message);
     cy.findByRole('button', { name: /Envoyer/i }).click();
-    cy.findByText(/Mail en cours/i).should('be.visible');
-    cy.wait('@sendMail');
-    cy.get('body').should('not.contain.text', /Mail en cours/i);
+    // The test seems to quick to find the loading state...
+    //cy.findByText(/Mail en cours/i).should('be.visible');
+    cy.findByText(/Merci/i).should('be.visible');
   });
 
   it('prevents the form to submit if some fields are missing', () => {
diff --git a/tests/cypress/support/e2e.ts b/tests/cypress/support/e2e.ts
index 37a498f..88361ec 100644
--- a/tests/cypress/support/e2e.ts
+++ b/tests/cypress/support/e2e.ts
@@ -12,9 +12,5 @@
 // You can read more here:
 // https://on.cypress.io/configuration
 // ***********************************************************
-
-// Import commands.js using ES2015 syntax:
 import './commands';
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
+import './msw';
diff --git a/tests/cypress/support/msw.ts b/tests/cypress/support/msw.ts
new file mode 100644
index 0000000..829b147
--- /dev/null
+++ b/tests/cypress/support/msw.ts
@@ -0,0 +1,44 @@
+import type { SetupWorker } from 'msw/lib/browser';
+
+export type CustomWindow = {
+  msw?: {
+    worker: SetupWorker;
+  };
+} & Window;
+
+Cypress.on('test:before:run:async', async () => {
+  window.process = {
+    // @ts-expect-error -- window.process type is not NodeJS process type
+    env: {
+      NEXT_PUBLIC_STAGING_GRAPHQL_API: Cypress.env(
+        'NEXT_PUBLIC_STAGING_GRAPHQL_API'
+      ),
+    },
+  };
+
+  if (!('msw' in window) || !window.msw) {
+    const { worker } = await import('../../msw/browser');
+    await worker
+      .start({
+        onUnhandledRequest(request) {
+          if (
+            request.url.includes('/_next/') ||
+            request.url.includes('/__next')
+          ) {
+            return;
+          }
+
+          console.warn(
+            '[MSW] Warning: intercepted a request without a matching request handler: %s %s',
+            request.method,
+            request.url
+          );
+        },
+      })
+      .then(() => {
+        (window as CustomWindow).msw = {
+          worker,
+        };
+      });
+  }
+});
diff --git a/tests/msw/browser.ts b/tests/msw/browser.ts
new file mode 100644
index 0000000..0a56427
--- /dev/null
+++ b/tests/msw/browser.ts
@@ -0,0 +1,4 @@
+import { setupWorker } from 'msw/browser';
+import { handlers } from './handlers';
+
+export const worker = setupWorker(...handlers);
diff --git a/tests/msw/handlers/forms/index.ts b/tests/msw/handlers/forms/index.ts
new file mode 100644
index 0000000..ce1e5b3
--- /dev/null
+++ b/tests/msw/handlers/forms/index.ts
@@ -0,0 +1,3 @@
+import { sendEmailHandler } from './send-email.handler';
+
+export const formsHandlers = [sendEmailHandler];
diff --git a/tests/msw/handlers/forms/send-email.handler.ts b/tests/msw/handlers/forms/send-email.handler.ts
new file mode 100644
index 0000000..8917330
--- /dev/null
+++ b/tests/msw/handlers/forms/send-email.handler.ts
@@ -0,0 +1,53 @@
+import { type ExecutionResult, graphql } from 'graphql';
+import { HttpResponse } from 'msw';
+import type {
+  SendEmail,
+  SendEmailInput,
+  SendEmailResponse,
+} from '../../../../src/services/graphql';
+import { CONFIG } from '../../../../src/utils/config';
+import { wordpressAPI } from '../../instances';
+import { schema } from '../../schema';
+
+export const sendEmailHandler = wordpressAPI.mutation<
+  SendEmailResponse,
+  Record<'input', SendEmailInput>
+>('SendEmail', async ({ query, variables }) => {
+  const pageParams = new URLSearchParams(window.location.search);
+  const isError = pageParams.get('error') === 'true';
+
+  if (isError)
+    return HttpResponse.json({
+      data: {
+        sendEmail: {
+          clientMutationId: null,
+          message: 'Not allowed.',
+          origin: CONFIG.url,
+          replyTo: '',
+          sent: false,
+        },
+      },
+    });
+
+  const { data, errors } = (await graphql({
+    schema,
+    source: query,
+    variableValues: variables,
+    rootValue: {
+      sendEmail({ input }: typeof variables): SendEmail {
+        const { body, clientMutationId, replyTo, subject } = input;
+        const message = `Object: ${subject}\n\n${body}`;
+
+        return {
+          clientMutationId,
+          message,
+          origin: CONFIG.url,
+          replyTo,
+          sent: replyTo.includes('@'),
+        };
+      },
+    },
+  })) as ExecutionResult<SendEmailResponse>;
+
+  return HttpResponse.json({ data, errors });
+});
diff --git a/tests/msw/handlers/index.ts b/tests/msw/handlers/index.ts
index bfdeb95..a41733e 100644
--- a/tests/msw/handlers/index.ts
+++ b/tests/msw/handlers/index.ts
@@ -1,4 +1,5 @@
 import { commentsHandlers } from './comments';
+import { formsHandlers } from './forms';
 import { postsHandlers } from './posts';
 import { repositoriesHandlers } from './repositories';
 import { thematicsHandlers } from './thematics';
@@ -6,6 +7,7 @@ import { topicsHandlers } from './topics';
 
 export const handlers = [
   ...commentsHandlers,
+  ...formsHandlers,
   ...postsHandlers,
   ...repositoriesHandlers,
   ...thematicsHandlers,
diff --git a/tests/msw/instances/index.ts b/tests/msw/instances/index.ts
index 82218c3..2e2dfeb 100644
--- a/tests/msw/instances/index.ts
+++ b/tests/msw/instances/index.ts
@@ -1,7 +1,8 @@
 import { graphql } from 'msw';
 import { GITHUB_API } from '../../../src/utils/constants';
 
-const wordpressGraphQLUrl = process.env.NEXT_PUBLIC_STAGING_GRAPHQL_API;
+const { env } = { ...process, ...window.process };
+const wordpressGraphQLUrl = env.NEXT_PUBLIC_STAGING_GRAPHQL_API;
 
 if (!wordpressGraphQLUrl)
   throw new Error('You forgot to define an URL for the WordPress GraphQL API');
diff --git a/tests/msw/schema/types/index.ts b/tests/msw/schema/types/index.ts
index ada7f2c..1063772 100644
--- a/tests/msw/schema/types/index.ts
+++ b/tests/msw/schema/types/index.ts
@@ -3,6 +3,7 @@ import { commentTypes } from './comment.types';
 import { commonTypes } from './common.types';
 import { featuredImageTypes } from './featured-image.types';
 import { postTypes } from './post.types';
+import { sendEmailTypes } from './send-email.types';
 import { thematicTypes } from './thematic.types';
 import { topicTypes } from './topic.types';
 
@@ -52,13 +53,19 @@ const rootQueryType = `type Query {
   ): RootQueryToTopicConnection
 }`;
 
+const rootMutationType = `type Mutation {
+  sendEmail(input: SendEmailInput!): SendEmailPayload
+}`;
+
 export const types = [
   authorTypes,
   commentTypes,
   commonTypes,
   featuredImageTypes,
   postTypes,
+  sendEmailTypes,
   thematicTypes,
   topicTypes,
   rootQueryType,
+  rootMutationType,
 ];
diff --git a/tests/msw/schema/types/send-email.types.ts b/tests/msw/schema/types/send-email.types.ts
new file mode 100644
index 0000000..5889572
--- /dev/null
+++ b/tests/msw/schema/types/send-email.types.ts
@@ -0,0 +1,17 @@
+export const sendEmailTypes = `input SendEmailInput {
+  body: String
+  clientMutationId: String
+  from: String
+  replyTo: String
+  subject: String
+  to: String
+}
+
+type SendEmailPayload {
+  clientMutationId: String
+  message: String
+  origin: String
+  replyTo: String
+  sent: Boolean
+  to: String
+}`;
diff --git a/tests/msw/index.ts b/tests/msw/server.ts
index 29504a4..29504a4 100644
--- a/tests/msw/index.ts
+++ b/tests/msw/server.ts