chore: import upstream snapshot with attribution
This commit is contained in:
wehub-resource-sync
@@ -0,0 +1,272 @@
|
||||
/**
|
||||
* E2E tests for self-contained demo pages.
|
||||
*
|
||||
* These tests verify that the reverted self-contained demos load correctly
|
||||
* and show the expected UI components with real content verification.
|
||||
* They do NOT require a running agent backend -- only the Next.js frontend
|
||||
* (demos render their UI even without an agent connection, showing loading
|
||||
* states or empty chat).
|
||||
*
|
||||
* Suggestions are rendered client-side by CopilotKit hooks and should be
|
||||
* visible even without an agent backend.
|
||||
*
|
||||
* Note on id/route gap: some demos are described by a canonical manifest id
|
||||
* (e.g. "hitl-in-chat") but are served from a shorter legacy route path
|
||||
* (e.g. "/demos/hitl"). Test describe() blocks below use the canonical id
|
||||
* while page.goto() targets the actual route — this is intentional.
|
||||
*
|
||||
* To run with aimock (deterministic LLM responses for agent-dependent tests):
|
||||
* npx aimock --fixtures showcase/aimock --port 4010 --validate-on-load &
|
||||
* cd showcase/integrations/langgraph-python
|
||||
* OPENAI_BASE_URL=http://localhost:4010/v1 OPENAI_API_KEY=test-key pnpm dev &
|
||||
* cd ../../scripts
|
||||
* BASE_URL=http://localhost:3000 npx playwright test __tests__/e2e/demo-e2e.spec.ts
|
||||
*
|
||||
* To run against a package:
|
||||
* cd showcase/integrations/langgraph-python
|
||||
* pnpm dev &
|
||||
* cd ../../scripts
|
||||
* BASE_URL=http://localhost:3000 npx playwright test __tests__/e2e/demo-e2e.spec.ts
|
||||
*/
|
||||
|
||||
import { test, expect } from "@playwright/test";
|
||||
|
||||
test.describe("Demo: agentic-chat", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto("/demos/agentic-chat");
|
||||
// Wait for the chat input to confirm hydration
|
||||
await expect(
|
||||
page.locator('textarea[placeholder^="Type a message"]'),
|
||||
).toBeVisible({
|
||||
timeout: 15000,
|
||||
});
|
||||
});
|
||||
|
||||
test("page loads with chat input and styled background container", async ({
|
||||
page,
|
||||
}) => {
|
||||
await expect(
|
||||
page.locator('[data-testid="background-container"]'),
|
||||
).toBeVisible();
|
||||
await expect(
|
||||
page.locator('[data-testid="background-container"]'),
|
||||
).toHaveCSS("background-color", "rgb(250, 250, 249)");
|
||||
});
|
||||
|
||||
test("suggestion buttons are rendered with correct text", async ({
|
||||
page,
|
||||
}) => {
|
||||
// The agentic-chat demo configures two suggestions via useConfigureSuggestions
|
||||
// CopilotKit renders these as clickable elements in the chat UI
|
||||
await expect(page.getByText("Change background")).toBeVisible({
|
||||
timeout: 10000,
|
||||
});
|
||||
await expect(page.getByText("Generate sonnet")).toBeVisible();
|
||||
});
|
||||
|
||||
test("clicking a suggestion populates the chat input", async ({ page }) => {
|
||||
// Wait for suggestions to render
|
||||
const suggestion = page.getByText("Change background");
|
||||
await expect(suggestion).toBeVisible({ timeout: 10000 });
|
||||
|
||||
// Click the suggestion
|
||||
await suggestion.click();
|
||||
|
||||
// The chat input should now contain the suggestion's message text,
|
||||
// or the message should appear in the chat as a sent message.
|
||||
//
|
||||
// The branching below is intentional: CopilotKit's suggestion click
|
||||
// handler is not deterministic across package implementations — some
|
||||
// suggestion configurations populate the input (so the user can edit
|
||||
// before sending), others send immediately. We race against both
|
||||
// outcomes and assert the matching one. Failures in either branch
|
||||
// surface concretely: the "populated" branch fails with a substring
|
||||
// mismatch on the input value, the "sent" branch fails with a
|
||||
// visibility timeout on the chat message.
|
||||
//
|
||||
// Reading inputValue() immediately after click() races the click
|
||||
// handler — the read can resolve before the handler runs, putting us
|
||||
// into the "sent" branch incorrectly and producing a confusing 5s
|
||||
// visibility timeout. Wait until either outcome is observably true
|
||||
// before branching.
|
||||
const input = page.locator('textarea[placeholder^="Type a message"]');
|
||||
await page.waitForFunction(
|
||||
() => {
|
||||
const textarea = document.querySelector<HTMLTextAreaElement>(
|
||||
'textarea[placeholder^="Type a message"]',
|
||||
);
|
||||
const hasValue = !!textarea && textarea.value.length > 0;
|
||||
const hasSentMessage =
|
||||
document.querySelector(".copilotKitUserMessage") !== null;
|
||||
return hasValue || hasSentMessage;
|
||||
},
|
||||
undefined,
|
||||
{ timeout: 10000 },
|
||||
);
|
||||
const inputValue = await input.inputValue();
|
||||
|
||||
if (inputValue) {
|
||||
// Suggestion populated the input -- verify it contains relevant text
|
||||
expect(inputValue.toLowerCase()).toContain("background");
|
||||
} else {
|
||||
// Suggestion was sent as a message -- verify it appears in the chat
|
||||
await expect(
|
||||
page.getByText(/Change the background to something new/i),
|
||||
).toBeVisible({ timeout: 5000 });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Demo: hitl-in-chat (Human in the Loop)", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto("/demos/hitl");
|
||||
await expect(
|
||||
page.locator('textarea[placeholder^="Type a message"]'),
|
||||
).toBeVisible({
|
||||
timeout: 15000,
|
||||
});
|
||||
});
|
||||
|
||||
test("page loads with CopilotChat in a centered max-width container", async ({
|
||||
page,
|
||||
}) => {
|
||||
// The HITL demo renders CopilotChat inside a max-w-4xl centered container
|
||||
const container = page.locator(".max-w-4xl").first();
|
||||
await expect(container).toBeVisible();
|
||||
|
||||
// The chat input should be inside this container
|
||||
await expect(
|
||||
container.locator('textarea[placeholder^="Type a message"]'),
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
test("suggestion buttons are rendered with correct text", async ({
|
||||
page,
|
||||
}) => {
|
||||
// The HITL demo configures two suggestions: "Simple plan" and "Complex plan"
|
||||
await expect(page.getByText("Simple plan")).toBeVisible({
|
||||
timeout: 10000,
|
||||
});
|
||||
await expect(page.getByText("Complex plan")).toBeVisible();
|
||||
});
|
||||
|
||||
test("clicking a suggestion populates the chat or sends the message", async ({
|
||||
page,
|
||||
}) => {
|
||||
const suggestion = page.getByText("Simple plan");
|
||||
await expect(suggestion).toBeVisible({ timeout: 10000 });
|
||||
|
||||
await suggestion.click();
|
||||
|
||||
// Intentional branching: same non-deterministic race as in the
|
||||
// agentic-chat suite — suggestion click may populate the input or
|
||||
// send the message immediately depending on the package's
|
||||
// useConfigureSuggestions wiring. Each branch asserts its own
|
||||
// concrete outcome so a regression fails with a clear error (either
|
||||
// an input substring mismatch or a chat message visibility
|
||||
// timeout), not a generic both-branches-false failure.
|
||||
//
|
||||
// Wait for an observable outcome before reading inputValue() — the
|
||||
// raw read races the click handler and can misroute us into the
|
||||
// "sent" branch with a confusing 5s timeout.
|
||||
const input = page.locator('textarea[placeholder^="Type a message"]');
|
||||
await page.waitForFunction(
|
||||
() => {
|
||||
const textarea = document.querySelector<HTMLTextAreaElement>(
|
||||
'textarea[placeholder^="Type a message"]',
|
||||
);
|
||||
const hasValue = !!textarea && textarea.value.length > 0;
|
||||
const hasSentMessage =
|
||||
document.querySelector(".copilotKitUserMessage") !== null;
|
||||
return hasValue || hasSentMessage;
|
||||
},
|
||||
undefined,
|
||||
{ timeout: 10000 },
|
||||
);
|
||||
const inputValue = await input.inputValue();
|
||||
|
||||
if (inputValue) {
|
||||
// Populated the input
|
||||
expect(inputValue.toLowerCase()).toContain("trip to mars");
|
||||
} else {
|
||||
// Sent as a message
|
||||
await expect(page.getByText(/plan a trip to mars/i)).toBeVisible({
|
||||
timeout: 5000,
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Demo: tool-rendering", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto("/demos/tool-rendering");
|
||||
await expect(
|
||||
page.locator('textarea[placeholder^="Type a message"]'),
|
||||
).toBeVisible({
|
||||
timeout: 15000,
|
||||
});
|
||||
});
|
||||
|
||||
test("page loads with CopilotChat in a centered full-height layout", async ({
|
||||
page,
|
||||
}) => {
|
||||
// The tool-rendering demo wraps CopilotChat in a full-height container
|
||||
const chatContainer = page.locator(".h-full").first();
|
||||
await expect(chatContainer).toBeVisible();
|
||||
});
|
||||
|
||||
test("weather suggestion buttons are rendered with specific city text", async ({
|
||||
page,
|
||||
}) => {
|
||||
// The tool-rendering demo configures three weather suggestions with specific cities
|
||||
await expect(page.getByText("Weather in San Francisco")).toBeVisible({
|
||||
timeout: 10000,
|
||||
});
|
||||
await expect(page.getByText("Weather in New York")).toBeVisible();
|
||||
await expect(page.getByText("Weather in Tokyo")).toBeVisible();
|
||||
});
|
||||
|
||||
test("clicking a weather suggestion populates the chat or sends the message", async ({
|
||||
page,
|
||||
}) => {
|
||||
const suggestion = page.getByText("Weather in San Francisco");
|
||||
await expect(suggestion).toBeVisible({ timeout: 10000 });
|
||||
|
||||
await suggestion.click();
|
||||
|
||||
// Intentional branching: same non-deterministic race as in the
|
||||
// other demo suites — suggestion click may populate the input or
|
||||
// send the message immediately. Each branch asserts its own
|
||||
// concrete outcome so the failure mode (input substring mismatch
|
||||
// vs. chat-message visibility timeout) stays diagnosable.
|
||||
//
|
||||
// Wait for an observable outcome before reading inputValue() — the
|
||||
// raw read races the click handler and can misroute us into the
|
||||
// "sent" branch with a confusing 5s timeout.
|
||||
const input = page.locator('textarea[placeholder^="Type a message"]');
|
||||
await page.waitForFunction(
|
||||
() => {
|
||||
const textarea = document.querySelector<HTMLTextAreaElement>(
|
||||
'textarea[placeholder^="Type a message"]',
|
||||
);
|
||||
const hasValue = !!textarea && textarea.value.length > 0;
|
||||
const hasSentMessage =
|
||||
document.querySelector(".copilotKitUserMessage") !== null;
|
||||
return hasValue || hasSentMessage;
|
||||
},
|
||||
undefined,
|
||||
{ timeout: 10000 },
|
||||
);
|
||||
const inputValue = await input.inputValue();
|
||||
|
||||
if (inputValue) {
|
||||
// Populated the input with the weather question
|
||||
expect(inputValue.toLowerCase()).toContain("san francisco");
|
||||
} else {
|
||||
// Sent as a message in the chat
|
||||
await expect(page.getByText(/weather.*san francisco/i)).toBeVisible({
|
||||
timeout: 5000,
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,162 @@
|
||||
// NEVER trust DOM measurements alone — always visually inspect screenshots.
|
||||
/**
|
||||
* Screenshot verification tests for visual layout validation.
|
||||
*
|
||||
* Takes screenshots at 3 viewports (iPhone SE, iPhone 14 Pro Max, Desktop)
|
||||
* for both the starter homepage and self-contained demo pages.
|
||||
*
|
||||
* Screenshots are saved to test-results/screenshots/ for manual inspection.
|
||||
*
|
||||
* Note on DEMOS below: the manifest id (e.g. `hitl-in-chat`) and the route
|
||||
* the demo is served from (e.g. `/demos/hitl`) intentionally differ in some
|
||||
* cases — the id is the canonical feature identifier shared across all 17
|
||||
* packages, while the route is the per-package URL path and is allowed to
|
||||
* use the shorter legacy slug. Both values are kept here so the screenshot
|
||||
* filenames reflect the canonical id while the navigation targets the real
|
||||
* route.
|
||||
*
|
||||
* To run:
|
||||
* cd showcase/scripts
|
||||
* BASE_URL=http://localhost:3000 npx playwright test __tests__/e2e/screenshots.spec.ts
|
||||
*/
|
||||
|
||||
import { test, expect } from "@playwright/test";
|
||||
|
||||
const VIEWPORTS = [
|
||||
{ name: "iphone-se", width: 375, height: 667 },
|
||||
{ name: "iphone-14-pro-max", width: 430, height: 932 },
|
||||
{ name: "desktop", width: 1440, height: 900 },
|
||||
] as const;
|
||||
|
||||
const RENDERER_MODES = [
|
||||
{ name: "Tool-Based", pill: /Tool-Based/ },
|
||||
{ name: "A2UI", pill: /A2UI Catalog/ },
|
||||
{ name: "json-render", pill: /json-render/ },
|
||||
{ name: "HashBrown", pill: /HashBrown/ },
|
||||
] as const;
|
||||
|
||||
const DEMOS = [
|
||||
{
|
||||
slug: "agentic-chat",
|
||||
path: "/demos/agentic-chat",
|
||||
waitFor: '[data-testid="background-container"]',
|
||||
},
|
||||
{
|
||||
slug: "hitl-in-chat",
|
||||
path: "/demos/hitl",
|
||||
waitFor: 'textarea[placeholder^="Type a message"]',
|
||||
},
|
||||
{
|
||||
slug: "tool-rendering",
|
||||
path: "/demos/tool-rendering",
|
||||
waitFor: 'textarea[placeholder^="Type a message"]',
|
||||
},
|
||||
{
|
||||
slug: "gen-ui-agent",
|
||||
path: "/demos/gen-ui-agent",
|
||||
waitFor: 'textarea[placeholder^="Type a message"]',
|
||||
},
|
||||
{
|
||||
slug: "gen-ui-tool-based",
|
||||
path: "/demos/gen-ui-tool-based",
|
||||
waitFor: 'textarea[placeholder^="Type a message"]',
|
||||
},
|
||||
{
|
||||
slug: "shared-state-read",
|
||||
path: "/demos/shared-state-read",
|
||||
waitFor: 'textarea[placeholder^="Type a message"]',
|
||||
},
|
||||
{
|
||||
slug: "shared-state-write",
|
||||
path: "/demos/shared-state-write",
|
||||
waitFor: 'textarea[placeholder^="Type a message"]',
|
||||
},
|
||||
{
|
||||
slug: "shared-state-streaming",
|
||||
path: "/demos/shared-state-streaming",
|
||||
waitFor: 'textarea[placeholder^="Type a message"]',
|
||||
},
|
||||
{
|
||||
slug: "subagents",
|
||||
path: "/demos/subagents",
|
||||
waitFor: 'textarea[placeholder^="Type a message"]',
|
||||
},
|
||||
] as const;
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Starter homepage screenshots (with renderer switching)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
for (const viewport of VIEWPORTS) {
|
||||
test.describe(`Starter screenshots @ ${viewport.name} (${viewport.width}x${viewport.height})`, () => {
|
||||
test.use({
|
||||
viewport: { width: viewport.width, height: viewport.height },
|
||||
});
|
||||
|
||||
test("homepage loads and renders", async ({ page }) => {
|
||||
await page.goto("/");
|
||||
await expect(page.getByText("CopilotKit Sales Dashboard")).toBeVisible({
|
||||
timeout: 15000,
|
||||
});
|
||||
|
||||
await page.screenshot({
|
||||
path: `test-results/screenshots/${viewport.name}-homepage.png`,
|
||||
fullPage: true,
|
||||
});
|
||||
});
|
||||
|
||||
for (const mode of RENDERER_MODES) {
|
||||
test(`${mode.name} renderer`, async ({ page }) => {
|
||||
await page.goto("/");
|
||||
await expect(page.getByText("CopilotKit Sales Dashboard")).toBeVisible({
|
||||
timeout: 15000,
|
||||
});
|
||||
|
||||
const pill = page.getByRole("radio", { name: mode.pill });
|
||||
await pill.click();
|
||||
await expect(pill).toHaveAttribute("aria-checked", "true");
|
||||
|
||||
// Allow renderer to mount. The radio's aria-checked flip happens
|
||||
// synchronously on click, but the actual renderer swap is async
|
||||
// (dynamic import + mount of the selected UI tree). No single
|
||||
// stable data-testid spans all four renderer modes today, so we
|
||||
// fall back to a short sleep here. If a common renderer-root
|
||||
// data-testid is introduced, replace this with an explicit
|
||||
// `expect(...).toBeVisible()` on that selector.
|
||||
await page.waitForTimeout(1000);
|
||||
|
||||
await page.screenshot({
|
||||
path: `test-results/screenshots/${viewport.name}-${mode.name.toLowerCase()}.png`,
|
||||
fullPage: true,
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Demo page screenshots
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
for (const viewport of VIEWPORTS) {
|
||||
test.describe(`Demo screenshots @ ${viewport.name} (${viewport.width}x${viewport.height})`, () => {
|
||||
test.use({
|
||||
viewport: { width: viewport.width, height: viewport.height },
|
||||
});
|
||||
|
||||
for (const demo of DEMOS) {
|
||||
test(`${demo.slug}`, async ({ page }) => {
|
||||
await page.goto(demo.path);
|
||||
await page.locator(demo.waitFor).first().waitFor({
|
||||
state: "visible",
|
||||
timeout: 15000,
|
||||
});
|
||||
|
||||
await page.screenshot({
|
||||
path: `test-results/screenshots/${viewport.name}-demo-${demo.slug}.png`,
|
||||
fullPage: true,
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,249 @@
|
||||
/**
|
||||
* E2E tests for the Sales Dashboard starter.
|
||||
*
|
||||
* These tests verify that the starter's main page loads correctly,
|
||||
* the renderer selector works, and each renderer strategy shows
|
||||
* DIFFERENT content appropriate to that mode. They also exercise
|
||||
* real user interactions (clicking "Add a deal", switching modes).
|
||||
*
|
||||
* They do NOT require a running agent backend -- only the Next.js frontend.
|
||||
*
|
||||
* To run with aimock (deterministic LLM responses for agent-dependent tests):
|
||||
* npx aimock --fixtures showcase/aimock --port 4010 --validate-on-load &
|
||||
* cd showcase/integrations/langgraph-python
|
||||
* OPENAI_BASE_URL=http://localhost:4010/v1 OPENAI_API_KEY=test-key npm run dev &
|
||||
* cd ../../scripts
|
||||
* BASE_URL=http://localhost:3000 npx playwright test __tests__/e2e/starter-e2e.spec.ts
|
||||
*
|
||||
* Or against an extracted starter:
|
||||
* npx tsx showcase/scripts/extract-starter.ts langgraph-python /tmp/starter
|
||||
* cd /tmp/starter && npm install && npm run dev &
|
||||
* cd showcase/scripts
|
||||
* BASE_URL=http://localhost:3000 npx playwright test __tests__/e2e/starter-e2e.spec.ts
|
||||
*/
|
||||
|
||||
import { test, expect } from "@playwright/test";
|
||||
|
||||
test.describe("Starter: Sales Dashboard", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto("/");
|
||||
// Wait for the header to confirm the page has hydrated
|
||||
await expect(page.getByText("CopilotKit Sales Dashboard")).toBeVisible({
|
||||
timeout: 15000,
|
||||
});
|
||||
});
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Page load & renderer selector basics
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
test("page loads with header and renderer selector with 4 pills", async ({
|
||||
page,
|
||||
}) => {
|
||||
const pills = page.locator("[role='radio']");
|
||||
await expect(pills).toHaveCount(4);
|
||||
|
||||
await expect(page.getByRole("radio", { name: /Tool-Based/ })).toBeVisible();
|
||||
await expect(
|
||||
page.getByRole("radio", { name: /A2UI Catalog/ }),
|
||||
).toBeVisible();
|
||||
await expect(
|
||||
page.getByRole("radio", { name: /json-render/ }),
|
||||
).toBeVisible();
|
||||
await expect(page.getByRole("radio", { name: /HashBrown/ })).toBeVisible();
|
||||
});
|
||||
|
||||
test("default selection is Tool-Based with pipeline content visible", async ({
|
||||
page,
|
||||
}) => {
|
||||
const toolBasedPill = page.getByRole("radio", { name: /Tool-Based/ });
|
||||
await expect(toolBasedPill).toHaveAttribute("aria-checked", "true");
|
||||
|
||||
// The SalesDashboard must show the pipeline heading and KPI cards
|
||||
await expect(page.getByText("Sales Pipeline")).toBeVisible({
|
||||
timeout: 15000,
|
||||
});
|
||||
await expect(page.getByText("Total Pipeline")).toBeVisible();
|
||||
});
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Tool-Based mode: full dashboard verification
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
test("Tool-Based mode renders pipeline heading, KPI cards, and empty state", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.getByRole("radio", { name: /Tool-Based/ }).click();
|
||||
|
||||
// Pipeline heading
|
||||
await expect(page.getByText("Sales Pipeline")).toBeVisible({
|
||||
timeout: 15000,
|
||||
});
|
||||
|
||||
// KPI metric cards: Total Pipeline + the 3 non-closed stages
|
||||
await expect(page.getByText("Total Pipeline")).toBeVisible();
|
||||
await expect(page.getByText("Prospect")).toBeVisible();
|
||||
await expect(page.getByText("Qualified")).toBeVisible();
|
||||
await expect(page.getByText("Proposal")).toBeVisible();
|
||||
|
||||
// Empty state when no deals exist
|
||||
await expect(page.getByText("No deals yet")).toBeVisible();
|
||||
await expect(page.getByText("Add a deal")).toBeVisible();
|
||||
});
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// A2UI mode: same SalesDashboard content with A2UI catalog
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
test("A2UI mode renders the same SalesDashboard content", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.getByRole("radio", { name: /A2UI Catalog/ }).click();
|
||||
await expect(
|
||||
page.getByRole("radio", { name: /A2UI Catalog/ }),
|
||||
).toHaveAttribute("aria-checked", "true");
|
||||
|
||||
// Should still show pipeline and KPI cards (same SalesDashboard component)
|
||||
await expect(page.getByText("Sales Pipeline")).toBeVisible({
|
||||
timeout: 15000,
|
||||
});
|
||||
await expect(page.getByText("Total Pipeline")).toBeVisible();
|
||||
await expect(page.getByText("No deals yet")).toBeVisible();
|
||||
});
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// json-render mode: yellow fallback note + tool-based content underneath
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
test("json-render mode shows yellow fallback note with tool-based content underneath", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.getByRole("radio", { name: /json-render/ }).click();
|
||||
await expect(
|
||||
page.getByRole("radio", { name: /json-render/ }),
|
||||
).toHaveAttribute("aria-checked", "true");
|
||||
|
||||
// The yellow fallback banner
|
||||
await expect(
|
||||
page.getByText("json-render is not yet available"),
|
||||
).toBeVisible({ timeout: 10000 });
|
||||
|
||||
// Tool-based content should still be rendered underneath
|
||||
await expect(page.getByText("Sales Pipeline")).toBeVisible();
|
||||
await expect(page.getByText("Total Pipeline")).toBeVisible();
|
||||
});
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// HashBrown mode: renders SalesDashboard with HashBrown message renderer
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
test("HashBrown mode renders SalesDashboard with pipeline content", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.getByRole("radio", { name: /HashBrown/ }).click();
|
||||
await expect(
|
||||
page.getByRole("radio", { name: /HashBrown/ }),
|
||||
).toHaveAttribute("aria-checked", "true");
|
||||
|
||||
// HashBrown wraps the same SalesDashboard, so pipeline content is visible
|
||||
await expect(page.getByText("Sales Pipeline")).toBeVisible({
|
||||
timeout: 15000,
|
||||
});
|
||||
await expect(page.getByText("Total Pipeline")).toBeVisible();
|
||||
});
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Critical: switching modes actually changes visible content
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
test("switching to json-render shows fallback note that other modes lack", async ({
|
||||
page,
|
||||
}) => {
|
||||
// Tool-Based should NOT have the json-render fallback note
|
||||
await page.getByRole("radio", { name: /Tool-Based/ }).click();
|
||||
await expect(page.getByText("Sales Pipeline")).toBeVisible({
|
||||
timeout: 15000,
|
||||
});
|
||||
await expect(
|
||||
page.getByText("json-render is not yet available"),
|
||||
).not.toBeVisible();
|
||||
|
||||
// Switch to json-render -- the note appears
|
||||
await page.getByRole("radio", { name: /json-render/ }).click();
|
||||
await expect(
|
||||
page.getByText("json-render is not yet available"),
|
||||
).toBeVisible({ timeout: 10000 });
|
||||
|
||||
// Pipeline should still be visible underneath
|
||||
await expect(page.getByText("Sales Pipeline")).toBeVisible();
|
||||
});
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Critical: Add a deal interaction works (local React state, no agent)
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
test("clicking Add a deal creates a new deal card and removes empty state", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.getByRole("radio", { name: /Tool-Based/ }).click();
|
||||
|
||||
// Verify empty state is shown
|
||||
await expect(page.getByText("No deals yet")).toBeVisible({
|
||||
timeout: 15000,
|
||||
});
|
||||
|
||||
// Click the "Add a deal" button
|
||||
await page.getByRole("button", { name: "Add a deal" }).click();
|
||||
|
||||
// After adding, "No deals yet" should be gone
|
||||
await expect(page.getByText("No deals yet")).not.toBeVisible();
|
||||
|
||||
// A new deal card with the default title "New Deal" should appear
|
||||
await expect(page.getByText("New Deal")).toBeVisible();
|
||||
|
||||
// The "Active Deals" column header should be visible
|
||||
await expect(page.getByText("Active Deals")).toBeVisible();
|
||||
});
|
||||
|
||||
test("adding multiple deals shows correct count", async ({ page }) => {
|
||||
await page.getByRole("radio", { name: /Tool-Based/ }).click();
|
||||
await expect(page.getByText("No deals yet")).toBeVisible({
|
||||
timeout: 15000,
|
||||
});
|
||||
|
||||
// Add first deal via the empty state button
|
||||
await page.getByRole("button", { name: "Add a deal" }).click();
|
||||
await expect(page.getByText("Active Deals")).toBeVisible();
|
||||
|
||||
// Add second deal via the column header + button (aria-label="Add new deal")
|
||||
await page.getByRole("button", { name: "Add new deal" }).click();
|
||||
|
||||
// Should now show two "New Deal" entries
|
||||
const dealCards = page.getByText("New Deal");
|
||||
await expect(dealCards).toHaveCount(2);
|
||||
});
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Pill mutual exclusion still works (simpler version of original)
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
test("only one renderer pill is active at a time", async ({ page }) => {
|
||||
const modes = ["A2UI Catalog", "HashBrown", "json-render", "Tool-Based"];
|
||||
|
||||
for (const modeName of modes) {
|
||||
const pill = page.getByRole("radio", { name: new RegExp(modeName) });
|
||||
await pill.click();
|
||||
await expect(pill).toHaveAttribute("aria-checked", "true");
|
||||
|
||||
// All other pills should be unchecked
|
||||
for (const otherMode of modes) {
|
||||
if (otherMode !== modeName) {
|
||||
const otherPill = page.getByRole("radio", {
|
||||
name: new RegExp(otherMode),
|
||||
});
|
||||
await expect(otherPill).toHaveAttribute("aria-checked", "false");
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user