From 03321187246bc32ebd8a1690365204d0b9c7529b Mon Sep 17 00:00:00 2001
From: Eunjae Lee <hey@eunjae.dev>
Date: Mon, 15 Sep 2025 11:00:00 +0200
Subject: [PATCH] feat: add e2e tests for insights charts (#23777)

* feat: add e2e tests for insights ChartCard components

- Test that all ChartCard components render with expected titles
- Test graceful handling of TRPC call failures
- Test ChartCard rendering for organization users
- Wait for page load and TRPC calls before checking chart presence
- Use text-based selectors to find ChartCard titles in h2 elements
- Remove page.waitForTimeout() calls to comply with ESLint rules

Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>

* clean up e2e tests

* fix titles

* still render charts if no data

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
---
 apps/web/playwright/insights.e2e.ts           | 35 +++++++++++++++++++
 .../booking/HighestRatedMembersTable.tsx      |  4 +--
 .../booking/LowestRatedMembersTable.tsx       |  4 +--
 packages/ui/components/card/PanelCard.tsx     |  1 +
 4 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/apps/web/playwright/insights.e2e.ts b/apps/web/playwright/insights.e2e.ts
index 30366a1dcc..d775545e99 100644
--- a/apps/web/playwright/insights.e2e.ts
+++ b/apps/web/playwright/insights.e2e.ts
@@ -237,4 +237,39 @@ test.describe("Insights", async () => {
     // Wait for the download process to complete and save the downloaded file somewhere.
     await download.saveAs("./" + "test-insights.csv");
   });
+
+  test("should render all ChartCard components with expected titles", async ({ page, users }) => {
+    const owner = await users.create();
+    const member = await users.create();
+
+    await createTeamsAndMembership(owner.id, member.id);
+
+    await owner.apiLogin();
+
+    await page.goto("/insights");
+
+    const expectedChartTitles = [
+      "Events",
+      "Performance",
+      "Event Trends",
+      "Bookings by Hour",
+      "Average Event Duration",
+      "Most Bookings Scheduled",
+      "Least Bookings Scheduled",
+      "Most Bookings Completed",
+      "Least Bookings Completed",
+      "Most Cancelled",
+      "Most No-Show",
+      "Recent No-Show Guests",
+      "Highest Rated",
+      "Lowest Rated",
+      "Recent Ratings",
+      "Popular Events",
+    ];
+
+    for (const title of expectedChartTitles) {
+      const chartCard = page.locator("[data-testid='panel-card'] h2").filter({ hasText: title });
+      await expect(chartCard).toBeVisible();
+    }
+  });
 });
diff --git a/packages/features/insights/components/booking/HighestRatedMembersTable.tsx b/packages/features/insights/components/booking/HighestRatedMembersTable.tsx
index 8c0a7d8db2..d1bc201fb4 100644
--- a/packages/features/insights/components/booking/HighestRatedMembersTable.tsx
+++ b/packages/features/insights/components/booking/HighestRatedMembersTable.tsx
@@ -27,11 +27,9 @@ export const HighestRatedMembersTable = () => {
 
   if (!isSuccess || !data) return null;
 
-  return data && data.length > 0 ? (
+  return (
     <ChartCard title={t("highest_rated")}>
       <UserStatsTable data={data} />
     </ChartCard>
-  ) : (
-    <></>
   );
 };
diff --git a/packages/features/insights/components/booking/LowestRatedMembersTable.tsx b/packages/features/insights/components/booking/LowestRatedMembersTable.tsx
index 64dcdeffe2..0aa7c57b36 100644
--- a/packages/features/insights/components/booking/LowestRatedMembersTable.tsx
+++ b/packages/features/insights/components/booking/LowestRatedMembersTable.tsx
@@ -27,11 +27,9 @@ export const LowestRatedMembersTable = () => {
 
   if (!isSuccess || !data) return null;
 
-  return data && data.length > 0 ? (
+  return (
     <ChartCard title={t("lowest_rated")}>
       <UserStatsTable data={data} />
     </ChartCard>
-  ) : (
-    <></>
   );
 };
diff --git a/packages/ui/components/card/PanelCard.tsx b/packages/ui/components/card/PanelCard.tsx
index 94477957d5..6c715d7e15 100644
--- a/packages/ui/components/card/PanelCard.tsx
+++ b/packages/ui/components/card/PanelCard.tsx
@@ -45,6 +45,7 @@ export function PanelCard({
 
   return (
     <div
+      data-testid="panel-card"
       ref={animationParent}
       className={classNames(
         "bg-muted group relative flex w-full flex-col items-center rounded-2xl px-1",