From 4cf94678d484c3cf5842add754c9007cea15e2c4 Mon Sep 17 00:00:00 2001
From: "groombook-paperclip[bot]"
 <268890960+groombook-paperclip[bot]@users.noreply.github.com>
Date: Wed, 18 Mar 2026 03:26:53 +0000
Subject: [PATCH] fix(e2e): mock reports endpoints with shaped responses in
 navigation tests (#47)

The Reports page expects structured objects from the API (e.g. summary
with nested revenue/appointments fields, revenue with byPeriod/byGroomer,
etc.). Returning a bare [] caused runtime errors when the component
accessed properties like apptData.byPeriod, crashing the React tree and
making "Groom Book" disappear from the DOM on retries.

Co-authored-by: Groom Book CTO <cto@groombook.app>
Co-authored-by: Paperclip <noreply@paperclip.ing>
---
 apps/e2e/tests/navigation.spec.ts | 31 +++++++++++++++++++++++++++----
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/apps/e2e/tests/navigation.spec.ts b/apps/e2e/tests/navigation.spec.ts
index 381cb12..1e7388a 100644
--- a/apps/e2e/tests/navigation.spec.ts
+++ b/apps/e2e/tests/navigation.spec.ts
@@ -6,13 +6,36 @@ import { test, expect } from "@playwright/test";
  */
 
 test.beforeEach(async ({ page }) => {
-  // Intercept all API calls and return empty defaults so pages render
+  // Intercept all API calls and return empty defaults so pages render.
+  // Reports endpoints need shaped responses (not bare []) to avoid render crashes.
   await page.route("/api/**", (route) => {
     const url = route.request().url();
-    if (url.includes("/api/book/services")) {
-      return route.fulfill({ json: [] });
+    if (url.includes("/api/reports/summary")) {
+      return route.fulfill({
+        json: {
+          from: "",
+          to: "",
+          revenue: { totalCents: 0, paidInvoices: 0 },
+          appointments: { total: 0, completed: 0, cancelled: 0, noShow: 0 },
+          clients: { total: 0, new: 0 },
+        },
+      });
     }
-    // Appointments, clients, services, staff, invoices, reports, etc.
+    if (url.includes("/api/reports/revenue")) {
+      return route.fulfill({ json: { byPeriod: [], byGroomer: [] } });
+    }
+    if (url.includes("/api/reports/appointments")) {
+      return route.fulfill({ json: { byPeriod: [] } });
+    }
+    if (url.includes("/api/reports/services")) {
+      return route.fulfill({ json: { rows: [] } });
+    }
+    if (url.includes("/api/reports/clients")) {
+      return route.fulfill({
+        json: { newClients: [], activeInPeriodCount: 0, churnRisk: [], churnRiskTotal: 0 },
+      });
+    }
+    // Appointments, clients, services, staff, invoices, book, etc.
     return route.fulfill({ json: [] });
   });
 });