import { writeFile } from "node:fs/promises";
import { expect } from "e2e";
import { test, WEB } from "./t3.ts";

test("Icon-only thread controls name their actions on hover", WEB, async ({ t3, app, screen, browser }) => {
  const project = await t3.project("Tooltip demo", { "README.md": "# Tooltip demo\n" });
  await t3.open();
  const observed: Record<string, string[]> = {};
  await screen.getByRole("button", "Add project script", { exact: true }).hover();
  await browser.evaluate(() => new Promise(resolve => setTimeout(resolve, 1500)));
  observed["Add project script"] = await browser.locator('[data-slot="tooltip-popup"]').allTextContents();
  await app.screenshot("add-project-script");
  await screen.getByRole("button", "Add project script", { exact: true }).tap();
  await browser.locator("#script-name").fill("Test");
  await browser.locator("#script-command").fill("echo hi");
  await screen.getByRole("button", "Save action", { exact: true }).tap();
  await writeFile(`${project}/README.md`, "# Tooltip demo\n\nA temporary tracked change.\n");
  await screen.getByRole("button", "Git action options", { exact: true }).waitFor();
  for (const label of ["Run Test", "Choose editor", "Script actions", "Git action options", "Commit"]) {
    await browser.mouse.move(640, 400);
    await screen.getByRole("button", label, { exact: true }).hover();
    await browser.evaluate(() => new Promise(resolve => setTimeout(resolve, 1500)));
    observed[label] = await browser.locator('[data-slot="tooltip-popup"]').allTextContents();
    await app.screenshot(label.toLowerCase().replaceAll(" ", "-"));
  }
  expect(observed).toEqual({
    "Add project script": ["Add project script"],
    "Run Test": ["Run Test"],
    "Choose editor": ["Choose editor"],
    "Script actions": ["Script actions"],
    "Git action options": ["Git action options"],
    "Commit": ["Commit"],
  });
});