format-lab/tests/browser/app.spec.ts

import { expect, test, type Page } from "@playwright/test";

const ORIGIN = "http://127.0.0.1:4201";

async function watchLocalOnly(page: Page) {
  const external: string[] = [];
  await page.route("**/*", async (route) => {
    const url = new URL(route.request().url());
    if (url.origin !== ORIGIN) {
      external.push(url.href);
      await route.abort();
    } else await route.continue();
  });
  return external;
}

test("explores a real directed format graph at a nested path", async ({
  page,
}) => {
  await page.setViewportSize({ width: 1800, height: 1000 });
  const external = await watchLocalOnly(page);
  await page.goto("/deep/nested/format-lab/");
  await expect(page.getByRole("heading", { name: "Format Lab" })).toBeVisible();
  await page.getByLabel("Domain").selectOption("image");
  await expect(
    page.getByRole("img", {
      name: /Images conversion graph from PNG to JPEG/u,
    }),
  ).toBeVisible();
  await expect(
    page.getByText(/This v0.1 lab exposes catalog contracts for Images/u),
  ).toBeVisible();
  expect(external).toEqual([]);
  expect(
    await page
      .locator(".toolbox-shell__main")
      .evaluate((node) => getComputedStyle(node).width),
  ).toBe("1440px");
});

test("measures a typed XML round trip and downloads both outputs", async ({
  page,
}) => {
  await page.goto("/deep/nested/format-lab/");
  await page.getByLabel("To format").selectOption("xml");
  await page.getByRole("button", { name: /^JSON → XML/u }).click();
  await page.getByRole("button", { name: "Run selected round trip" }).click();
  const output = page.getByRole("textbox", {
    name: "Conversion output",
    exact: true,
  });
  await expect(output).toContainText(
    '<field name="active" type="boolean">true',
  );
  await expect(
    page.getByRole("row", { name: /Nested values.*measured preserved/u }),
  ).toBeVisible();
  const targetDownload = page.waitForEvent("download");
  await page.getByRole("button", { name: "Download target" }).click();
  expect((await targetDownload).suggestedFilename()).toBe("converted.xml");
  const reportDownload = page.waitForEvent("download");
  await page.getByRole("button", { name: "Download evidence report" }).click();
  expect((await reportDownload).suggestedFilename()).toBe(
    "format-lab-report.json",
  );
});

test("shows CSV losses and retains evidence after invalid source", async ({
  page,
}) => {
  await page.goto("/deep/nested/format-lab/");
  await expect(
    page.getByRole("row", { name: /Scalar types.*measured changed/u }),
  ).toBeVisible();
  const output = page.getByRole("textbox", {
    name: "Conversion output",
    exact: true,
  });
  const previous = await output.inputValue();
  await page.getByLabel("Source data").fill("[");
  await page.getByRole("button", { name: "Run selected round trip" }).click();
  await expect(page.getByRole("alert")).toContainText("retained");
  await expect(output).toHaveValue(previous);
});

test("identifies bounded signatures and exposes the portable evidence contract", async ({
  page,
}) => {
  await page.goto("/deep/nested/format-lab/");
  await page
    .locator('input[type="file"]')
    .first()
    .setInputFiles("tests/fixtures/signature.pdf");
  await expect(page.getByText(/PDF \(strong: %PDF- header/u)).toBeVisible();
  await page.getByText("Portable evidence JSON", { exact: true }).click();
  const evidence = await page
    .getByRole("textbox", { name: "Evidence report", exact: true })
    .inputValue();
  expect(JSON.parse(evidence)).toMatchObject({
    contractVersion: 1,
    provenance: { execution: "local-browser", networkRequired: false },
  });
});

test("integrates help, themes, identity, headers and offline reload", async ({
  page,
  request,
  context,
}) => {
  await page.goto("/deep/nested/format-lab/");
  await page.getByRole("button", { name: "Help" }).click();
  await expect(
    page.getByRole("dialog", { name: "About Format Lab" }),
  ).toContainText("lossless claim");
  await page.keyboard.press("Escape");
  await page.getByRole("button", { name: "Personalize" }).click();
  await page.getByRole("button", { name: "Dark" }).click();
  await expect(page.locator(".toolbox-shell").first()).toHaveAttribute(
    "data-toolbox-theme",
    "dark",
  );
  expect(
    await page.evaluate(async () =>
      Boolean(await navigator.serviceWorker.ready),
    ),
  ).toBe(true);
  const index = await request.get("/deep/nested/format-lab/");
  expect(index.headers()["content-security-policy"]).toContain(
    "connect-src 'self'",
  );
  expect(await index.text()).not.toMatch(/\b(?:src|href)=["']\//u);
  const manifest = await request.get(
    "/deep/nested/format-lab/toolbox-app.json",
  );
  await expect(manifest.json()).resolves.toMatchObject({
    id: "de.add-ideas.format-lab",
    version: "0.2.0",
    privacy: { processing: "local", telemetry: false },
  });
  await context.setOffline(true);
  await page.reload();
  await expect(page.getByRole("heading", { name: "Format Lab" })).toBeVisible();
});