import { readFile } from "node:fs/promises";
import path from "node:path";
import { fileURLToPath } from "node:url";
import { describe, expect, it } from "vitest";

/**
 * Zoom stays available to everyone who needs it (ADR 0065). iOS Safari's zoom into small form
 * fields is fixed by the fields' own font size, never by locking the viewport.
 */
const packageDirectory = path.dirname(path.dirname(fileURLToPath(import.meta.url)));

async function viewport(page: string): Promise<string> {
  const html = await readFile(path.join(packageDirectory, page), "utf8");
  const tag = /<meta\s+content="([^"]*)"\s+name="viewport"\s*\/?>/u.exec(html);
  if (!tag?.[1]) {
    throw new Error(`${page} has no viewport tag`);
  }
  return tag[1];
}

describe("the shell's pages never disable zoom", () => {
  for (const page of ["index.html", "display.html"]) {
    it(`${page} allows pinch and accessibility zoom`, async () => {
      const content = (await viewport(page)).replace(/\s+/gu, "");
      expect(content).toContain("width=device-width");
      expect(content).not.toMatch(/user-scalable=(no|0)/iu);
      expect(content).not.toMatch(/maximum-scale/iu);
      expect(content).not.toMatch(/minimum-scale/iu);
    });
  }

  it("lets the Dashboard lay itself out around a notch", async () => {
    expect(await viewport("index.html")).toContain("viewport-fit=cover");
  });
});