refactor(pages): refine Contact page

* remove next/router dependency
* remove pageTitle since it is defined in MDX
* reduce statements by grouping messages
* mock response with MSW and add test for sendEmail

2 files changed, 45 insertions, 5 deletions

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,
+        };
+      });
+  }
+});