import { expect } from "e2e";
import { test, WEB } from "./t3.ts";

test("Stashed prompt previews preserve complete emoji in text and accessible labels", WEB, async ({ t3, app, screen, browser }) => {
  await t3.project("stash-demo");
  await t3.open();
  const composer = screen.getByRole("textbox");
  await composer.fill("a".repeat(89) + "😀 and more");
  await composer.press("Control+s");
  await composer.fill("a".repeat(88) + "😀 and more");
  await composer.press("Control+s");
  await screen.getByRole("button", "Stashed prompts: 2. Open stash.").tap();
  // Reveal the generated string's end, which CSS ellipsis otherwise hides at this viewport.
  await browser.evaluate(() => {
    const drawer = document.querySelector<HTMLElement>("[data-composer-stash-drawer]")!;
    drawer.style.width = "900px";
    drawer.style.maxWidth = "none";
    for (const row of document.querySelectorAll<HTMLElement>("[data-stash-restore]")) {
      row.style.overflow = "visible";
      row.style.fontSize = "12px";
    }
  });
  await app.screenshot("stash-previews");
  const previews = await browser.evaluate(() => Array.from(document.querySelectorAll("[data-stash-restore]"), row => ({
    text: row.textContent ?? "",
    label: row.getAttribute("aria-label") ?? "",
  })));
  expect(previews.length).toBe(2);
  expect(previews.map(row => ({ text: row.text.isWellFormed(), label: row.label.isWellFormed() }))).toEqual([
    { text: true, label: true }, { text: true, label: true },
  ]);
});