test: add Playwright integration tests for dev-playground

apps/dev-playground/.gitignore

@@ -0,0 +1,3 @@
+# Playwright
+test-results/
+playwright-report/

apps/dev-playground/README.md

@@ -0,0 +1,41 @@
+# Dev Playground
+
+Test application showing AppKit capabilities including analytics dashboards, SSE streaming, telemetry, and data visualization.
+
+## Development
+
+```bash
+# Start development server
+pnpm dev
+
+# Build for production
+pnpm build
+
+# Start production server
+pnpm start:local
+```
+
+## Integration Tests
+
+Integration tests use Playwright to verify the application works correctly with mocked backend responses.
+
+**Note:** These are frontend-only integration tests. API calls are intercepted at the browser level and return mock data, so the AppKit backend plugins are not tested. They focus on verifying UI behavior, navigation, data rendering, and client-side interactions.
+
+### Running Tests
+
+```bash
+# Run all integration tests
+pnpm test:integration
+
+# Run tests with interactive UI mode (for debugging)
+pnpm test:integration:ui
+
+# Run tests in headed mode (see the browser)
+pnpm test:integration:headed
+
+# Run a specific test file
+npx playwright test tests/smoke.spec.ts
+
+# Run tests matching a pattern
+npx playwright test -g "analytics"
+```

apps/dev-playground/client/src/routes/telemetry.route.tsx

@@ -106,9 +106,7 @@ function TelemetryRoute() {
     <div className="min-h-screen bg-background">
       <div className="max-w-6xl mx-auto px-6 py-12">
         <div className="mb-8">
-          <h1 className="text-3xl font-bold text-gray-900 mb-2">
-            Telemetry Demo
-          </h1>
+          <h1 className="text-3xl font-bold mb-2">Telemetry Demo</h1>
           <p className="text-base text-gray-500">
             Demonstrates how the SDK's auto-instrumentation integrates with
             custom application telemetry. This example showcases HTTP and cache

apps/dev-playground/package.json

@@ -14,7 +14,10 @@
     "preview": "vite preview",
     "check": "tsc",
     "clean": "rm -rf build && cd client && rm -rf dist",
-    "clean:full": "rm -rf build node_modules && cd client && rm -rf dist node_modules"
+    "clean:full": "rm -rf build node_modules && cd client && rm -rf dist node_modules",
+    "test:integration": "playwright test",
+    "test:integration:ui": "playwright test --ui",
+    "test:integration:headed": "playwright test --headed"
   },
   "keywords": [],
   "author": "",
@@ -25,6 +28,7 @@
     "zod": "^4.1.13"
   },
   "devDependencies": {
+    "@playwright/test": "^1.58.1",
     "@types/node": "^20.0.0",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@vitejs/plugin-react": "^5.0.4",

apps/dev-playground/playwright.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./tests",
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: "html",
+  use: {
+    baseURL: "http://localhost:8000",
+    trace: "on-first-retry",
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+  webServer: {
+    command: "pnpm dev",
+    url: "http://localhost:8000",
+    reuseExistingServer: !process.env.CI,
+    timeout: 120 * 1000,
+  },
+});

apps/dev-playground/tests/arrow-analytics.spec.ts

@@ -0,0 +1,98 @@
+import { expect, test } from "@playwright/test";
+import {
+  STRICT_MODE_MULTIPLIER,
+  setupMockAPI,
+  trackApiCalls,
+  waitForChartsToLoad,
+} from "./utils/test-utils";
+
+test.describe("Arrow Analytics", () => {
+  test.beforeEach(async ({ page }) => {
+    await setupMockAPI(page);
+  });
+
+  test("page loads and displays heading", async ({ page }) => {
+    await page.goto("/arrow-analytics", { waitUntil: "networkidle" });
+
+    await expect(page.getByText("Unified Charts API")).toBeVisible();
+  });
+
+  test("calls expected API endpoints", async ({ page }) => {
+    const appsListCalls = trackApiCalls(page, "apps_list");
+    const spendDataCalls = trackApiCalls(page, "spend_data");
+    const topContributorsCalls = trackApiCalls(page, "top_contributors");
+    const heatmapCalls = trackApiCalls(page, "app_activity_heatmap");
+
+    await page.goto("/arrow-analytics", { waitUntil: "networkidle" });
+    await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
+    await waitForChartsToLoad(page);
+
+    expect(appsListCalls.length).toBe(5 * STRICT_MODE_MULTIPLIER);
+    expect(spendDataCalls.length).toBe(5 * STRICT_MODE_MULTIPLIER);
+    expect(topContributorsCalls.length).toBe(2 * STRICT_MODE_MULTIPLIER);
+    expect(heatmapCalls.length).toBe(2 * STRICT_MODE_MULTIPLIER);
+  });
+
+  test("charts render with mock data (no empty states)", async ({ page }) => {
+    await page.goto("/arrow-analytics", { waitUntil: "networkidle" });
+    await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
+    await waitForChartsToLoad(page);
+
+    const barCharts = page.locator('[data-testid="bar-chart-apps_list"]');
+    expect(await barCharts.count()).toBe(3);
+    await expect(barCharts.first().locator("canvas")).toBeVisible();
+
+    const lineCharts = page.locator('[data-testid="line-chart-spend_data"]');
+    expect(await lineCharts.count()).toBe(3);
+    await expect(lineCharts.first().locator("canvas")).toBeVisible();
+
+    const donutCharts = page.locator(
+      '[data-testid="donut-chart-top_contributors"]',
+    );
+    expect(await donutCharts.count()).toBe(2);
+    await expect(donutCharts.first().locator("canvas")).toBeVisible();
+
+    const heatmapCharts = page.locator(
+      '[data-testid="heatmap-chart-app_activity_heatmap"]',
+    );
+    expect(await heatmapCharts.count()).toBe(2);
+    await expect(heatmapCharts.first().locator("canvas")).toBeVisible();
+  });
+
+  test("chart tooltip appears on hover with mock app data", async ({
+    page,
+  }) => {
+    await page.goto("/arrow-analytics", { waitUntil: "networkidle" });
+    await waitForChartsToLoad(page);
+
+    const barChart = page
+      .locator('[data-testid="bar-chart-apps_list"]')
+      .first()
+      .locator("canvas");
+    await expect(barChart).toBeVisible();
+
+    const box = await barChart.boundingBox();
+    if (!box) throw new Error("Could not get chart bounding box");
+
+    const positions = [0.2, 0.35, 0.5, 0.65, 0.8];
+    for (const xRatio of positions) {
+      await page.mouse.move(
+        box.x + box.width * xRatio,
+        box.y + box.height * 0.4,
+      );
+
+      const tooltip = page
+        .locator("div")
+        .filter({ hasText: /App One|App Two|App Three/ });
+
+      try {
+        await expect(tooltip.first()).toBeVisible({ timeout: 1000 });
+        return;
+      } catch {}
+    }
+
+    throw new Error(
+      "Could not trigger tooltip with any mock app data after trying multiple positions",
+    );
+  });
+});