test: fix fetch mocks to use res.text() in api-keys, webhooks, events, pairs tests

Author: KarenZita01

src/app/api-keys/page.test.tsx

@@ -2,26 +2,26 @@ import { render, screen, waitFor } from "@testing-library/react";
 import ApiKeysPage from "./page";
 
 describe("ApiKeysPage", () => {
-  let originalFetch: typeof globalThis.fetch;
+  let originalFetch: typeof global.fetch;
 
   beforeEach(() => {
-    originalFetch = globalThis.fetch;
+    originalFetch = global.fetch;
   });
 
   afterEach(() => {
-    globalThis.fetch = originalFetch;
+    global.fetch = originalFetch;
   });
 
   it("shows loading before data arrives", () => {
-    globalThis.fetch = jest.fn(() => new Promise(() => {})) as unknown as typeof globalThis.fetch;
+    global.fetch = jest.fn(() => new Promise(() => {})) as unknown as typeof global.fetch;
     render(<ApiKeysPage />);
     expect(screen.getByText("Loading…")).toBeInTheDocument();
   });
 
   it("renders api keys in a single polite live region", async () => {
-    globalThis.fetch = jest.fn().mockResolvedValueOnce({
+    global.fetch = jest.fn().mockResolvedValueOnce({
       ok: true,
-      json: async () => ({
+      text: async () => JSON.stringify({
         items: [{ prefix: "sk_abc", label: "Production", createdAt: Date.now() }],
       }),
     } as unknown as Response);
@@ -36,9 +36,9 @@ describe("ApiKeysPage", () => {
   });
 
   it("announces empty state via live region", async () => {
-    globalThis.fetch = jest.fn().mockResolvedValueOnce({
+    global.fetch = jest.fn().mockResolvedValueOnce({
       ok: true,
-      json: async () => ({ items: [] }),
+      text: async () => JSON.stringify({ items: [] }),
     } as unknown as Response);
 
     render(<ApiKeysPage />);
@@ -48,7 +48,7 @@ describe("ApiKeysPage", () => {
   });
 
   it("surfaces errors with role=alert", async () => {
-    globalThis.fetch = jest.fn().mockRejectedValueOnce(new Error("Unauthorized"));
+    global.fetch = jest.fn().mockRejectedValueOnce(new Error("Unauthorized"));
 
     render(<ApiKeysPage />);
     await waitFor(() => {
@@ -57,9 +57,9 @@ describe("ApiKeysPage", () => {
   });
 
   it("has exactly one aria-live=polite region", async () => {
-    globalThis.fetch = jest.fn().mockResolvedValueOnce({
+    global.fetch = jest.fn().mockResolvedValueOnce({
       ok: true,
-      json: async () => ({ items: [] }),
+      text: async () => JSON.stringify({ items: [] }),
     } as unknown as Response);
 
     render(<ApiKeysPage />);

src/app/events/page.test.tsx

@@ -2,26 +2,26 @@ import { render, screen, waitFor } from "@testing-library/react";
 import EventsPage from "./page";
 
 describe("EventsPage", () => {
-  let originalFetch: typeof globalThis.fetch;
+  let originalFetch: typeof global.fetch;
 
   beforeEach(() => {
-    originalFetch = globalThis.fetch;
+    originalFetch = global.fetch;
   });
 
   afterEach(() => {
-    globalThis.fetch = originalFetch;
+    global.fetch = originalFetch;
   });
 
   it("shows loading before data arrives", () => {
-    globalThis.fetch = jest.fn(() => new Promise(() => {})) as unknown as typeof globalThis.fetch;
+    global.fetch = jest.fn(() => new Promise(() => {})) as unknown as typeof global.fetch;
     render(<EventsPage />);
     expect(screen.getByText("Loading…")).toBeInTheDocument();
   });
 
   it("renders events in a single polite live region", async () => {
-    globalThis.fetch = jest.fn().mockResolvedValueOnce({
+    global.fetch = jest.fn().mockResolvedValueOnce({
       ok: true,
-      json: async () => ({
+      text: async () => JSON.stringify({
         items: [{ id: "evt1", ts: Date.now(), type: "pair.registered", payload: {} }],
       }),
     } as unknown as Response);
@@ -36,9 +36,9 @@ describe("EventsPage", () => {
   });
 
   it("announces empty state via live region", async () => {
-    globalThis.fetch = jest.fn().mockResolvedValueOnce({
+    global.fetch = jest.fn().mockResolvedValueOnce({
       ok: true,
-      json: async () => ({ items: [] }),
+      text: async () => JSON.stringify({ items: [] }),
     } as unknown as Response);
 
     render(<EventsPage />);
@@ -48,7 +48,7 @@ describe("EventsPage", () => {
   });
 
   it("surfaces errors with role=alert", async () => {
-    globalThis.fetch = jest.fn().mockRejectedValueOnce(new Error("Failed to load"));
+    global.fetch = jest.fn().mockRejectedValueOnce(new Error("Failed to load"));
 
     render(<EventsPage />);
     await waitFor(() => {
@@ -57,9 +57,9 @@ describe("EventsPage", () => {
   });
 
   it("has exactly one aria-live=polite region", async () => {
-    globalThis.fetch = jest.fn().mockResolvedValueOnce({
+    global.fetch = jest.fn().mockResolvedValueOnce({
       ok: true,
-      json: async () => ({ items: [] }),
+      text: async () => JSON.stringify({ items: [] }),
     } as unknown as Response);
 
     render(<EventsPage />);

src/app/pairs/page.test.tsx

@@ -2,26 +2,26 @@ import { render, screen, waitFor } from "@testing-library/react";
 import PairsPage from "./page";
 
 describe("PairsPage", () => {
-  let originalFetch: typeof globalThis.fetch;
+  let originalFetch: typeof global.fetch;
 
   beforeEach(() => {
-    originalFetch = globalThis.fetch;
+    originalFetch = global.fetch;
   });
 
   afterEach(() => {
-    globalThis.fetch = originalFetch;
+    global.fetch = originalFetch;
   });
 
   it("shows loading before data arrives", () => {
-    globalThis.fetch = jest.fn(() => new Promise(() => {})) as unknown as typeof globalThis.fetch;
+    global.fetch = jest.fn(() => new Promise(() => {})) as unknown as typeof global.fetch;
     render(<PairsPage />);
     expect(screen.getByText("Loading…")).toBeInTheDocument();
   });
 
   it("renders pairs in a single polite live region", async () => {
-    globalThis.fetch = jest.fn().mockResolvedValueOnce({
+    global.fetch = jest.fn().mockResolvedValueOnce({
       ok: true,
-      json: async () => ({ pairs: [{ source: "USDC", destination: "EURC" }] }),
+      text: async () => JSON.stringify({ pairs: [{ source: "USDC", destination: "EURC" }] }),
     } as unknown as Response);
 
     render(<PairsPage />);
@@ -34,9 +34,9 @@ describe("PairsPage", () => {
   });
 
   it("announces empty state via live region", async () => {
-    globalThis.fetch = jest.fn().mockResolvedValueOnce({
+    global.fetch = jest.fn().mockResolvedValueOnce({
       ok: true,
-      json: async () => ({ pairs: [] }),
+      text: async () => JSON.stringify({ pairs: [] }),
     } as unknown as Response);
 
     render(<PairsPage />);
@@ -46,7 +46,7 @@ describe("PairsPage", () => {
   });
 
   it("surfaces errors with role=alert", async () => {
-    globalThis.fetch = jest.fn().mockRejectedValueOnce(new Error("Network error"));
+    global.fetch = jest.fn().mockRejectedValueOnce(new Error("Network error"));
 
     render(<PairsPage />);
     await waitFor(() => {
@@ -55,9 +55,9 @@ describe("PairsPage", () => {
   });
 
   it("has exactly one aria-live=polite region", async () => {
-    globalThis.fetch = jest.fn().mockResolvedValueOnce({
+    global.fetch = jest.fn().mockResolvedValueOnce({
       ok: true,
-      json: async () => ({ pairs: [] }),
+      text: async () => JSON.stringify({ pairs: [] }),
     } as unknown as Response);
 
     render(<PairsPage />);

src/app/webhooks/page.test.tsx

@@ -2,26 +2,26 @@ import { render, screen, waitFor } from "@testing-library/react";
 import WebhooksPage from "./page";
 
 describe("WebhooksPage", () => {
-  let originalFetch: typeof globalThis.fetch;
+  let originalFetch: typeof global.fetch;
 
   beforeEach(() => {
-    originalFetch = globalThis.fetch;
+    originalFetch = global.fetch;
   });
 
   afterEach(() => {
-    globalThis.fetch = originalFetch;
+    global.fetch = originalFetch;
   });
 
   it("shows loading before data arrives", () => {
-    globalThis.fetch = jest.fn(() => new Promise(() => {})) as unknown as typeof globalThis.fetch;
+    global.fetch = jest.fn(() => new Promise(() => {})) as unknown as typeof global.fetch;
     render(<WebhooksPage />);
     expect(screen.getByText("Loading…")).toBeInTheDocument();
   });
 
   it("renders webhooks in a single polite live region", async () => {
-    globalThis.fetch = jest.fn().mockResolvedValueOnce({
+    global.fetch = jest.fn().mockResolvedValueOnce({
       ok: true,
-      json: async () => ({
+      text: async () => JSON.stringify({
         items: [{ id: "wh1", url: "https://example.com/hook", events: ["pair.registered"], createdAt: Date.now() }],
       }),
     } as unknown as Response);
@@ -36,9 +36,9 @@ describe("WebhooksPage", () => {
   });
 
   it("announces empty state via live region", async () => {
-    globalThis.fetch = jest.fn().mockResolvedValueOnce({
+    global.fetch = jest.fn().mockResolvedValueOnce({
       ok: true,
-      json: async () => ({ items: [] }),
+      text: async () => JSON.stringify({ items: [] }),
     } as unknown as Response);
 
     render(<WebhooksPage />);
@@ -48,7 +48,7 @@ describe("WebhooksPage", () => {
   });
 
   it("surfaces errors with role=alert", async () => {
-    globalThis.fetch = jest.fn().mockRejectedValueOnce(new Error("Forbidden"));
+    global.fetch = jest.fn().mockRejectedValueOnce(new Error("Forbidden"));
 
     render(<WebhooksPage />);
     await waitFor(() => {
@@ -57,9 +57,9 @@ describe("WebhooksPage", () => {
   });
 
   it("has exactly one aria-live=polite region", async () => {
-    globalThis.fetch = jest.fn().mockResolvedValueOnce({
+    global.fetch = jest.fn().mockResolvedValueOnce({
       ok: true,
-      json: async () => ({ items: [] }),
+      text: async () => JSON.stringify({ items: [] }),
     } as unknown as Response);
 
     render(<WebhooksPage />);