|
| 1 | +import assert from "node:assert/strict"; |
| 2 | +import { join } from "node:path"; |
| 3 | + |
| 4 | +export const extensionSource = `export default function (pi) { |
| 5 | + pi.registerCommand("e2e-dialog", { |
| 6 | + handler: async (mode, ctx) => { |
| 7 | + let result; |
| 8 | + if (mode === "timeout") { |
| 9 | + await ctx.ui.select("E2E timeout", ["Wait"], { timeout: 4000 }); |
| 10 | + result = await ctx.ui.input("E2E after timeout"); |
| 11 | + } else if (mode === "select") { |
| 12 | + result = await ctx.ui.select("E2E select", Array.from({ length: 30 }, (_, i) => "Option " + (i + 1))); |
| 13 | + } else { |
| 14 | + result = await ctx.ui[mode]("E2E " + mode, "Details"); |
| 15 | + } |
| 16 | + ctx.ui.notify("E2E " + mode + " result: " + String(result)); |
| 17 | + }, |
| 18 | + }); |
| 19 | +}`; |
| 20 | + |
| 21 | +export async function checkExtensionDialogs(page, artifacts, width) { |
| 22 | + const commands = []; |
| 23 | + const onRequest = (request) => { |
| 24 | + if (request.method() === "POST" && /\/api\/agent\/[^/]+$/.test(new URL(request.url()).pathname)) { |
| 25 | + commands.push(request.postDataJSON()); |
| 26 | + } |
| 27 | + }; |
| 28 | + page.on("request", onRequest); |
| 29 | + const start = async (mode) => { |
| 30 | + await page.mouse.move(0, 0); |
| 31 | + await page.locator("[data-minimap-preview-box]").waitFor({ state: "hidden" }); |
| 32 | + const input = page.locator("textarea").last(); |
| 33 | + await input.fill(`/e2e-dialog ${mode}`); |
| 34 | + await page.getByRole("button", { name: "Send", exact: true }).click(); |
| 35 | + const dialog = page.getByRole("dialog", { name: `E2E ${mode}`, exact: true }); |
| 36 | + await dialog.waitFor(); |
| 37 | + return dialog; |
| 38 | + }; |
| 39 | + const finish = async (mode, result) => { |
| 40 | + await page.getByText(`E2E ${mode} result: ${result}`, { exact: true }).waitFor(); |
| 41 | + await page.getByRole("button", { name: "Stop agent", exact: true }).waitFor({ state: "hidden" }); |
| 42 | + }; |
| 43 | + |
| 44 | + try { |
| 45 | + const select = await start("select"); |
| 46 | + await page.waitForFunction(() => document.activeElement?.textContent === "Option 1"); |
| 47 | + for (const [key, expected] of [["ArrowUp", "Option 30"], ["ArrowDown", "Option 1"], ["ArrowRight", "Option 2"], ["ArrowLeft", "Option 1"], ["End", "Option 30"], ["Home", "Option 1"], ["End", "Option 30"]]) { |
| 48 | + await page.keyboard.press(key); |
| 49 | + assert.equal(await page.locator(":focus").textContent(), expected); |
| 50 | + } |
| 51 | + assert.ok(await page.locator(":focus").evaluate(element => { |
| 52 | + const bounds = element.getBoundingClientRect(); |
| 53 | + const container = element.parentElement.parentElement.getBoundingClientRect(); |
| 54 | + return bounds.top >= container.top && bounds.bottom <= container.bottom; |
| 55 | + }), "Keyboard selection must scroll into view"); |
| 56 | + await page.screenshot({ path: join(artifacts, `extension-select-${width}.png`) }); |
| 57 | + await page.keyboard.press("Enter"); |
| 58 | + await select.waitFor({ state: "hidden" }); |
| 59 | + await finish("select", "Option 30"); |
| 60 | + |
| 61 | + for (const mode of ["select", "confirm", "input", "editor"]) { |
| 62 | + const dialog = await start(mode); |
| 63 | + assert.ok(await page.locator(":focus").evaluate(element => element.closest('[role="dialog"]'))); |
| 64 | + if (mode === "input" || mode === "editor") { |
| 65 | + await dialog.getByRole("textbox").fill("Preserved draft"); |
| 66 | + await dialog.getByRole("button", { name: "Collapse", exact: true }).click(); |
| 67 | + await page.getByRole("button", { name: new RegExp(`Awaiting response.*E2E ${mode}`) }).click(); |
| 68 | + assert.equal(await dialog.getByRole("textbox").inputValue(), "Preserved draft"); |
| 69 | + } |
| 70 | + if (mode === "input" || mode === "editor") await dialog.getByRole("button", { name: "Cancel", exact: true }).focus(); |
| 71 | + const before = commands.length; |
| 72 | + await page.keyboard.press("Escape"); |
| 73 | + await dialog.waitFor({ state: "hidden" }); |
| 74 | + await finish(mode, mode === "confirm" ? "false" : "undefined"); |
| 75 | + assert.equal(commands.slice(before).filter(command => command.type === "extension_ui_response").length, 1); |
| 76 | + assert.equal(commands.slice(before).some(command => command.type === "abort"), false, "Dialog Esc must not abort the agent"); |
| 77 | + } |
| 78 | + |
| 79 | + const timed = await start("timeout"); |
| 80 | + const countdown = timed.getByText(/expires in \ds/); |
| 81 | + await countdown.waitFor(); |
| 82 | + const initialCountdown = await countdown.innerText(); |
| 83 | + await page.waitForFunction(initial => { |
| 84 | + const text = document.querySelector('[role="dialog"]')?.textContent; |
| 85 | + return text?.includes("expires in") && !text.includes(initial); |
| 86 | + }, initialCountdown); |
| 87 | + const before = commands.length; |
| 88 | + await timed.getByRole("button", { name: "Collapse", exact: true }).click(); |
| 89 | + await page.getByRole("button", { name: /Awaiting response.*E2E timeout.*expires in/ }).waitFor(); |
| 90 | + const afterTimeout = page.getByRole("dialog", { name: "E2E after timeout", exact: true }); |
| 91 | + await afterTimeout.waitFor(); |
| 92 | + assert.equal(commands.slice(before).some(command => command.type === "extension_ui_response"), false, "Only the server closes expired requests"); |
| 93 | + assert.equal(await afterTimeout.getByText(/expires in/).count(), 0); |
| 94 | + await afterTimeout.getByRole("textbox").fill("Still answerable"); |
| 95 | + await page.keyboard.press("Enter"); |
| 96 | + await finish("timeout", "Still answerable"); |
| 97 | + console.log(`PASS: ${width}px extension keyboard navigation, cancel, draft preservation, and server expiry`); |
| 98 | + } finally { |
| 99 | + page.off("request", onRequest); |
| 100 | + } |
| 101 | +} |
0 commit comments