feat: add e2e tests for insights charts (calcom#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>

Author: 3 people

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

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>
-  ) : (
-    <></>
   );
 };

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>
-  ) : (
-    <></>
   );
 };

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",