fix(ui): expand session dialogs and repeat confirmation actions

2026-09-14 18:13:53 +02:00
parent b1723c34c4
commit c3caba94dd
35 changed files with 425 additions and 142 deletions
@@ -619,3 +619,74 @@ for (const width of [390, 1280]) {
    await expect(page.getByRole("dialog", { name: "Stop the session?" })).toBeVisible();
  });
 }
+
+for (const [width, height, mode] of [
+  [390, 844, "embedded"], [1280, 900, "embedded"], [1440, 1000, "full"],
+  [844, 390, "embedded"], [320, 640, "embedded"],
+] as const) {
+  test(`session confirmation layout stays within ${mode} view at ${width}x${height}`, async ({ page }, testInfo) => {
+    await page.setViewportSize({ width, height });
+    await fixtures(page, mode);
+    await page.route("**/api/sessions", route => route.request().method() === "POST"
+      ? route.fulfill({ json: { id: "layout-session" } }) : route.fallback());
+    await page.route("**/api/sessions/layout-session", route => route.fulfill({ json: { id: "layout-session", active: true, status: "open", workspace } }));
+    await page.goto("/");
+    if (mode === "embedded") await page.addStyleTag({ content: `
+      body { margin: 0; padding-top: 60px; }
+      #root { margin-left: ${width > 900 ? 160 : 0}px; height: calc(100dvh - 80px); overflow: hidden; }
+    ` });
+    await expect(page.getByRole("textbox", { name: "New question", exact: true })).toBeVisible();
+    await page.getByRole("textbox", { name: "New question", exact: true }).fill("Review the cohort");
+    await page.getByRole("button", { name: "Send", exact: true }).click();
+    await expect(page.getByRole("textbox", { name: "Steering", exact: true })).toBeVisible();
+    await page.evaluate(async () => {
+      const path = "/src/store/sessionStore.ts";
+      const { useSessionStore } = await import(/* @vite-ignore */ path);
+      useSessionStore.getState().applyEvent({ type: "ui_request", ui_request: {
+        id: "layout-gate", widget: "artifact-gate", title: "Verifica della domanda e dei criteri di inclusione",
+        artifact: { kind: "markdown", content: "## Criteri di inclusione\n\n" + "Verificare i pazienti inclusi nella coorte e il periodo di riferimento.\n\n".repeat(100) },
+        options: [{ id: "approve", label: "Conferma e procedi alla fase successiva" }], reserved: ["back", "other"],
+      } });
+    });
+    const dialog = page.getByRole("dialog");
+    await expect(dialog).toBeVisible();
+    await page.keyboard.press("Escape");
+    await expect(dialog).toBeVisible();
+    const bounds = await dialog.boundingBox();
+    const area = await page.getByTestId("app-shell").boundingBox();
+    expect(area).not.toBeNull();
+    expect(bounds!.x).toBeGreaterThanOrEqual(area!.x);
+    expect(bounds!.y).toBeGreaterThanOrEqual(area!.y);
+    expect(bounds!.x + bounds!.width).toBeLessThanOrEqual(area!.x + area!.width);
+    expect(bounds!.y + bounds!.height).toBeLessThanOrEqual(area!.y + area!.height);
+    expect(bounds!.width).toBeGreaterThan(Math.min(1000, area!.width - 60));
+    expect(bounds!.height).toBeGreaterThan(area!.height * 0.8);
+    const confirmations = dialog.getByRole("button", { name: "Conferma e procedi alla fase successiva" });
+    await expect(confirmations).toHaveCount(2);
+    for (const button of await confirmations.all()) {
+      await button.scrollIntoViewIfNeeded();
+      await expect(button).toBeInViewport();
+    }
+    expect(await dialog.evaluate(el => el.scrollWidth <= el.clientWidth)).toBe(true);
+    const body = dialog.locator(".thot-session-dialog__body");
+    expect(await body.evaluate(el => el.scrollHeight > el.clientHeight)).toBe(true);
+    await body.evaluate(el => { el.scrollTop = el.scrollHeight; });
+    await page.screenshot({ path: testInfo.outputPath("session-review.png") });
+    await page.evaluate(async () => {
+      const path = "/src/store/sessionStore.ts";
+      const { useSessionStore } = await import(/* @vite-ignore */ path);
+      useSessionStore.getState().clearPending();
+    });
+    await page.getByRole("button", { name: "Stop and save session", exact: true }).click();
+    const stop = page.getByRole("dialog", { name: "Stop the session?" });
+    await expect(stop.getByRole("button", { name: "Stop & save", exact: true })).toHaveCount(2);
+    await expect(stop.getByRole("button", { name: "Cancel", exact: true })).toBeFocused();
+    const stopBounds = await stop.boundingBox();
+    expect(stopBounds!.width).toBeGreaterThan(Math.min(600, area!.width - 60));
+    expect(stopBounds!.y).toBeGreaterThanOrEqual(area!.y);
+    expect(stopBounds!.y + stopBounds!.height).toBeLessThanOrEqual(area!.y + area!.height);
+    await page.screenshot({ path: testInfo.outputPath("session-stop.png") });
+    await stop.getByRole("button", { name: "Cancel", exact: true }).click();
+    await expect(stop).toHaveCount(0);
+  });
+}