Integrate mock service worker to intercept and satisfy requests to the backend using mock data

.env.local

@@ -1,6 +1,6 @@
 WEBAPP_URL = http://localhost:3000
 
-CANNON_URL = https://cannon-staging-dev.sinfo.org/
+CANNON_URL = https://cannon-staging-dev.sinfo.org
 
 NEXTAUTH_SECRET = ZlnjlEkgh4hRX41tGPc3glhUMKJd8+HxGWqVe+l7jtA=
 

next.config.js

@@ -1,8 +1,15 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    images: {
-        domains: ["static.sinfo.org", "sinfo.ams3.cdn.digitaloceanspaces.com", "sonaesierracms-v2.cdnpservers.net"]
-    }
-}
+  images: {
+    domains: [
+      "static.sinfo.org",
+      "sinfo.ams3.cdn.digitaloceanspaces.com",
+      "sonaesierracms-v2.cdnpservers.net",
+    ],
+  },
+  experimental: {
+    instrumentationHook: true,
+  },
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

package.json

@@ -16,6 +16,7 @@
     "autoprefixer": "10.4.15",
     "eslint": "8.47.0",
     "eslint-config-next": "^14.1.0",
+    "msw": "^2.6.5",
     "next": "^14.1.0",
     "next-auth": "^4.23.1",
     "postcss": "8.4.28",

src/app/(authenticated)/qr/page.tsx

@@ -13,10 +13,10 @@ import convertToAppRole from "@/utils/utils";
 export default async function QR() {
   const session = await getServerSession(authOptions);
 
-  const user: User = await UserService.getMe(session!.cannonToken);
+  const user: User = await UserService.getMe(session?.cannonToken ?? "");
   if (!user) return <UserSignOut />;
 
-  let company!: Company | null;
+  let company: Company | null = null;
   if (user.role === "company") {
     // assumes that cannon api only provides the company associated with the current edition
     if (user.company.length == 0) {

src/instrumentation.ts

@@ -0,0 +1,11 @@
+export async function register() {
+  if (
+    process.env.NEXT_RUNTIME == "nodejs" &&
+    process.env.NODE_ENV == "development"
+  ) {
+    const { server } = await import("@/mocks/node");
+    server.listen({
+      onUnhandledRequest: "bypass",
+    });
+  }
+}

src/mocks/data/company.ts

@@ -0,0 +1,6 @@
+export const MOCK_COMPANY: Company = {
+  id: "mock_company_id",
+  name: "Cloudflare",
+  advertisementLvl: "max",
+  img: "https://static.sinfo.org/static%2F30-sinfo%2FcompanyLogos%2FCloudFlare-01.webp",
+};

src/mocks/data/index.ts

@@ -0,0 +1,2 @@
+export * from "./user";
+export * from "./company";

src/mocks/data/user.ts

@@ -0,0 +1,14 @@
+export const MOCK_USER: User = {
+  id: "mock_user_id",
+  name: "Bill Gates",
+  img: "https://media.licdn.com/dms/image/v2/D5603AQHv6LsdiUg1kw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1695167344576?e=1737590400&v=beta&t=U88-qdsyfBJ_2IjA08tPPNCpAAKXDQ9NbsI-rqoeiNo",
+  role: "user",
+  shareLinks: false,
+  company: [],
+  signatures: [],
+  linkShared: [],
+  bearer: [],
+  mail: "gatesybill@gmail.com",
+  registered: "2024-07-21T23:02:19.167Z",
+  updated: "2024-11-16T23:02:19.167Z",
+};

src/mocks/handlers.ts

@@ -0,0 +1,21 @@
+import { http, HttpResponse } from "msw";
+import { MOCK_USER, MOCK_COMPANY } from "./data";
+
+const BACKEND_URL = process.env.CANNON_URL;
+
+export const handlers = [
+  http.post(`${BACKEND_URL}/auth/*`, () => {
+    return HttpResponse.json({
+      token: "some_cannon_token",
+    });
+  }),
+  http.get(`${BACKEND_URL}/users/me`, () => {
+    return HttpResponse.json(MOCK_USER);
+  }),
+  http.put(`${BACKEND_URL}/users/me`, () => {
+    return new Response(null, { status: 200 });
+  }),
+  http.get(`${BACKEND_URL}/company/*`, () => {
+    return HttpResponse.json(MOCK_COMPANY);
+  }),
+];

src/mocks/node.ts

@@ -0,0 +1,4 @@
+import { setupServer } from "msw/node";
+import { handlers } from "./handlers";
+
+export const server = setupServer(...handlers);