import { test, expect, type BrowserContext } from "@playwright/test";
import { createServer, type Server } from "node:http";
import { makeContext } from "./helpers/vault";

test.describe("Real form icon injection", () => {
  let ctx: BrowserContext;
  let server: Server;
  let origin: string;

  test.beforeEach(async () => {
    server = createServer((_request, response) => {
      response.writeHead(200, { "content-type": "text/html; charset=utf-8" });
      response.end(`<!doctype html>
        <form aria-label="Sign in">
          <label>Username <input name="username" autocomplete="username"></label>
          <label>Password <input type="password" name="password" autocomplete="current-password"></label>
          <button type="submit">Sign in</button>
        </form>`);
    });
    await new Promise<void>((resolve, reject) => {
      server.once("error", reject);
      server.listen(0, "127.0.0.1", resolve);
    });
    const address = server.address();
    if (!address || typeof address === "string") throw new Error("form fixture did not bind");
    origin = `http://127.0.0.1:${address.port}`;
    ctx = await makeContext("peach-form-icon");
  });

  test.afterEach(async () => {
    await ctx?.close();
    await new Promise<void>((resolve, reject) => server.close(error => error ? reject(error) : resolve()));
  });

  test("injects Peach icons into a real login form", async () => {
    const page = await ctx.newPage();
    await page.goto(origin);
    await expect(page.locator('button[aria-label="Peach autofill"]')).toHaveCount(2, { timeout: 10_000 });
  });
});