mirror of
https://github.com/CopilotKit/CopilotKit.git
synced 2026-09-14 16:26:20 +08:00
Alem Tuzlak
02e48162c4
Ports 16 diverged Playwright e2e specs verbatim from langgraph-python and adds 3 previously-missing specs (chat-customization-css, prebuilt-sidebar, reasoning-custom). All 19 files are byte-identical to LGP, mirroring the same approach the recent ADK parity push used for the demo pages. Why this matters even though D5 is the gold standard: the per-package Playwright suites (`pnpm test:e2e`) are the local dev validation loop. Without parity here, a contributor editing google-adk's CopilotChat surface has no local check that matches what langgraph-python ships, and tiny divergences between the two surfaces (missing testids, stale selectors, wrong assertion shapes) silently accumulate until they surface as D5 regressions in CI.
77 lines
2.6 KiB
TypeScript
77 lines
2.6 KiB
TypeScript
import { test, expect } from "@playwright/test";
|
|
|
|
/**
|
|
* E2E spec for the Declarative UI: json-render demo. Structurally
|
|
* mirrors `gen-ui-tool-based.spec.ts` so the dashboard's BYOC rows
|
|
* exercise the same surfaces (json-render-root + metric-card + chart).
|
|
*/
|
|
test.describe("Declarative UI: json-render", () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.goto("/demos/declarative-json-render");
|
|
});
|
|
|
|
test("page loads with chat composer and suggestion pills", async ({
|
|
page,
|
|
}) => {
|
|
// Chat composer
|
|
await expect(
|
|
page.locator('textarea, [placeholder*="message"]').first(),
|
|
).toBeVisible({ timeout: 10000 });
|
|
|
|
// Suggestion pills driven by useConfigureSuggestions. The
|
|
// CopilotChat welcome screen renders titles as buttons/links.
|
|
await expect(page.getByText("Sales dashboard")).toBeVisible({
|
|
timeout: 10000,
|
|
});
|
|
await expect(page.getByText("Revenue by category")).toBeVisible();
|
|
await expect(page.getByText("Expense trend")).toBeVisible();
|
|
});
|
|
|
|
test("sales dashboard request renders a json-render tree", async ({
|
|
page,
|
|
}) => {
|
|
const input = page.locator('textarea, [placeholder*="message"]').first();
|
|
await input.fill(
|
|
"Show me the sales dashboard with metrics and a revenue chart",
|
|
);
|
|
await input.press("Enter");
|
|
|
|
// The JsonRenderAssistantMessage slot wraps renders in this testid.
|
|
await expect(
|
|
page.locator('[data-testid="json-render-root"]').first(),
|
|
).toBeVisible({ timeout: 60000 });
|
|
|
|
// A MetricCard should appear in the rendered tree.
|
|
await expect(
|
|
page.locator('[data-testid="metric-card"]').first(),
|
|
).toBeVisible({ timeout: 60000 });
|
|
|
|
// ...plus at least one chart (either shape).
|
|
await expect(
|
|
page
|
|
.locator('[data-testid="bar-chart"], [data-testid="pie-chart"]')
|
|
.first(),
|
|
).toBeVisible({ timeout: 60000 });
|
|
});
|
|
|
|
test("revenue-by-category request renders a pie chart", async ({ page }) => {
|
|
const input = page.locator('textarea, [placeholder*="message"]').first();
|
|
await input.fill("Break down revenue by category as a pie chart");
|
|
await input.press("Enter");
|
|
|
|
await expect(page.locator('[data-testid="pie-chart"]').first()).toBeVisible(
|
|
{ timeout: 60000 },
|
|
);
|
|
});
|
|
|
|
test("expense-trend request renders a bar chart", async ({ page }) => {
|
|
const input = page.locator('textarea, [placeholder*="message"]').first();
|
|
await input.fill("Show me monthly expenses as a bar chart");
|
|
await input.press("Enter");
|
|
|
|
await expect(page.locator('[data-testid="bar-chart"]').first()).toBeVisible(
|
|
{ timeout: 60000 },
|
|
);
|
|
});
|
|
});
|