diff-tools/tests/browser/app.spec.ts

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

const ORIGIN = "http://127.0.0.1:4173";
const APP_PATH = "/deep/nested/diff/";

function auditPage(page: Page) {
  const external: string[] = [];
  const errors: string[] = [];
  const responses: Response[] = [];
  page.on("pageerror", (error) => errors.push(error.message));
  page.on("console", (message) => {
    if (message.type() === "error") errors.push(message.text());
  });
  page.on("response", (response) => responses.push(response));
  void 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, errors, responses };
}

async function openApp(page: Page) {
  await page.goto(APP_PATH);
  await expect(
    page
      .locator(".hero")
      .getByRole("heading", { name: "Diff Tools", exact: true }),
  ).toBeVisible();
  await expect(page.getByText(/substantive change row/u)).toBeVisible();
}

test("runs from a nested path in a same-origin module worker", async ({
  page,
}) => {
  const audit = auditPage(page);
  await openApp(page);
  await expect(
    page.getByRole("region", { name: "Comparison result" }),
  ).toBeVisible();
  await expect(page.getByText("CRLF", { exact: true }).first()).toBeVisible();

  const worker = audit.responses.find((response) =>
    /\/deep\/nested\/diff\/assets\/diff\.worker-[\w-]+\.js$/u.test(
      new URL(response.url()).pathname,
    ),
  );
  expect(worker, "the comparator worker was requested").toBeTruthy();
  expect(new URL(worker!.url()).origin).toBe(ORIGIN);
  expect(worker!.headers()["content-type"]).toContain("text/javascript");
  expect(worker!.headers()["cache-control"]).toBe(
    "public, max-age=31536000, immutable",
  );
  expect(audit.external).toEqual([]);
  expect(audit.errors).toEqual([]);
});

test("exports exact-decimal JSON Patch without losing the prior result", async ({
  page,
}) => {
  const audit = auditPage(page);
  await openApp(page);
  await page.getByRole("button", { name: /JSON Semantic/u }).click();
  await page.getByTestId("left-editor").fill('{"amount":1,"keep":true}');
  await page
    .getByTestId("right-editor")
    .fill('{"amount":9007199254740993123456789,"keep":true}');
  await page.getByRole("button", { name: "Compare now" }).click();
  await expect(page.getByText(/1 substantive change row/u)).toBeVisible();
  await page.getByRole("button", { name: "Patches" }).click();
  await expect(page.getByTestId("json-patch")).toContainText(
    "9007199254740993123456789",
  );

  await page.getByRole("button", { name: /XML Namespace-aware/u }).click();
  await expect(page.getByText(/substantive change row/u)).toBeVisible();
  const previousVerdict = page.getByText("Different", { exact: true }).first();
  await expect(previousVerdict).toBeVisible();
  await page.getByTestId("left-editor").fill("<!DOCTYPE x><x/>");
  await page.getByRole("button", { name: "Compare now" }).click();
  await expect(page.getByText("xml.doctype-rejected")).toBeVisible();
  await expect(previousVerdict).toBeVisible();
  expect(audit.external).toEqual([]);
  expect(audit.errors).toEqual([]);
});

test("opens local keyed CSV and reports duplicate keys", async ({ page }) => {
  const audit = auditPage(page);
  await openApp(page);
  await page.getByRole("button", { name: /CSV \/ TSV Keyed rows/u }).click();
  await page.getByTestId("left-file-input").setInputFiles({
    name: "duplicates.csv",
    mimeType: "text/csv",
    buffer: Buffer.from("id,name\n1,Ada\n1,Grace", "utf8"),
  });
  await expect(
    page.getByRole("heading", { name: "duplicates.csv" }),
  ).toBeVisible();
  await page.getByRole("button", { name: "Compare now" }).click();
  await expect(page.getByText("csv.duplicate-key")).toBeVisible();
  await expect(page.getByText("Duplicate key", { exact: false })).toBeVisible();
  expect(audit.external).toEqual([]);
  expect(audit.errors).toEqual([]);
});

test("serves the release identity and hardened headers", async ({
  request,
}) => {
  const index = await request.get(APP_PATH);
  expect(index.ok()).toBe(true);
  expect(index.headers()["content-security-policy"]).toContain(
    "default-src 'self'",
  );
  expect(index.headers()["content-security-policy"]).toContain(
    "worker-src 'self' blob:",
  );
  expect(await index.text()).not.toMatch(/\b(?:src|href)=["']\//u);
  const manifest = await request.get(`${APP_PATH}toolbox-app.json`);
  await expect(manifest.json()).resolves.toMatchObject({
    id: "de.add-ideas.diff-tools",
    version: "0.2.0",
    entry: "./",
    privacy: { processing: "local", fileUploads: true, telemetry: false },
  });
});

test("runs the bounded three-way merge workspace", async ({ page }) => {
  await page.goto("/deep/nested/diff/");
  await page.getByRole("button", { name: "Three-way merge" }).click();
  await page.getByLabel("Base").fill("one\ntwo\nthree\n");
  await page.getByLabel("Ours").fill("ONE\ntwo\nthree\n");
  await page.getByLabel("Theirs").fill("one\ntwo\nTHREE\n");
  await page.getByRole("button", { name: "Merge locally" }).click();
  await expect(page.getByTestId("merge-output")).toHaveValue(
    "ONE\ntwo\nTHREE\n",
  );
  await expect(
    page.getByRole("heading", { name: "0 conflict(s)" }),
  ).toBeVisible();
});

test("imports and compares portable directory manifests", async ({ page }) => {
  await page.goto("/deep/nested/diff/");
  await page.getByRole("button", { name: "Directories" }).click();
  const manifest = (digest: string) => ({
    schema: "de.add-ideas.diff-tools.directory-manifest.v1",
    schemaVersion: 1,
    generatedLocally: true,
    hashAlgorithm: "SHA-256",
    entries: [{ path: "file.txt", bytes: 4, sha256: digest }],
    totals: { files: 1, bytes: 4 },
  });
  const inputs = page.locator('input[accept*="application/json"]');
  await inputs.nth(0).setInputFiles({
    name: "left.json",
    mimeType: "application/json",
    buffer: Buffer.from(JSON.stringify(manifest("a".repeat(64)))),
  });
  await inputs.nth(1).setInputFiles({
    name: "right.json",
    mimeType: "application/json",
    buffer: Buffer.from(JSON.stringify(manifest("b".repeat(64)))),
  });
  await page.getByRole("button", { name: "Build & compare manifests" }).click();
  await expect(
    page.getByRole("row", { name: /file\.txt modified/iu }),
  ).toBeVisible();
});