feat: connect UI to situation graph start flow

This commit is contained in:
2026-08-02 07:21:40 +01:00
parent 84858107b7
commit 575b8fd971
6 changed files with 450 additions and 101 deletions
+42 -27
View File
@@ -1,55 +1,70 @@
import { test, expect } from "@playwright/test";
test("v0.3 UI smoke test with live model response", async ({ page }) => {
await page.goto("http://localhost:3000");
const BASE_URL = process.env.PLAYWRIGHT_BASE_URL || "http://localhost:3000";
test.setTimeout(300000);
test("graph-backed start flow smoke test", async ({ page }) => {
await page.goto(BASE_URL);
// Page should load without error
await expect(page.getByText(/Confidence Engine/i)).toBeVisible();
// Type the scenario
const textarea = page.locator("textarea[placeholder*='Describe']");
await textarea.fill("Complaints increased by 35% while production increased by 40%.");
await textarea.fill(
"Complaints increased by 35% while production increased by 40%.",
);
await expect(textarea).toHaveValue(
"Complaints increased by 35% while production increased by 40%.",
);
// Button should be enabled
await expect(page.getByRole("button", { name: /Analyse/i })).toBeEnabled();
// Click Analyse and wait for diagnostics panel
// Click Analyse and wait for graph-backed result
await page.getByRole("button", { name: /Analyse/i }).click();
// Wait for result section (ReconstructionView rendered)
await expect(page.getByRole("heading", { name: /Next Question/i })).toBeVisible({ timeout: 180000 });
// Take screenshot of result page
await page.screenshot({ path: "tests-results/smoke-v0.3.png", fullPage: true });
await expect(
page.getByRole("heading", { name: /Selected Question/i }),
).toBeVisible({ timeout: 180000 });
await expect(
page.getByRole("heading", { name: /Situation Graph/i }),
).toBeVisible({ timeout: 180000 });
await expect(page.getByText(/Central statement/i)).toBeVisible();
await expect(page.getByText(/Active unknown/i)).toBeVisible();
await expect(page.getByText(/Error:/i)).toHaveCount(0);
// Verify diagnostics panel exists and contains relevant info
const diagPanel = page.locator('details summary').first();
if (await diagPanel.isVisible()) {
console.log("Raw response viewer:", await diagPanel.innerText().catch(() => "not visible"));
}
const rawJsonToggle = page.getByText(/Raw graph JSON/i);
await expect(rawJsonToggle).toBeVisible();
await rawJsonToggle.click();
await expect(page.getByText(/centralStatement/i)).toBeVisible();
// Get full body text for verification
const bodyText = await page.locator("body").innerText();
console.log("\n=== UI Smoke Test Results ===");
console.log("Page title:", await page.title());
console.log("Body content length:", bodyText.length);
// Check key content indicators
const hasNextQ = bodyText.includes("Next Question");
const hasComplaints = bodyText.includes("Complaint") || bodyText.includes("complaint");
const hasProduction = bodyText.includes("production") || bodyText.includes("Production");
const hasRateContext = bodyText.toLowerCase().includes("rate") ||
bodyText.toLowerCase().includes("unit") ||
bodyText.toLowerCase().includes("denominator") ||
bodyText.toLowerCase().includes("per-unit");
console.log("Has Next Question heading:", hasNextQ);
const hasSelectedQuestion = bodyText.includes("Selected Question");
const hasComplaints =
bodyText.includes("Complaint") || bodyText.includes("complaint");
const hasProduction =
bodyText.includes("production") || bodyText.includes("Production");
const hasRateContext =
bodyText.toLowerCase().includes("rate") ||
bodyText.toLowerCase().includes("unit") ||
bodyText.toLowerCase().includes("denominator") ||
bodyText.toLowerCase().includes("per-unit");
console.log("Has selected question heading:", hasSelectedQuestion);
console.log("Has complaints reference:", hasComplaints);
console.log("Has production reference:", hasProduction);
console.log("Has rate context (rate/unit/denominator):", hasRateContext);
// Basic structural checks
expect(bodyText.length).toBeGreaterThan(200);
expect(hasNextQ).toBe(true);
}, { timeout: 300000 });
expect(hasSelectedQuestion).toBe(true);
});