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

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

const ORIGIN = "http://127.0.0.1:4173";
async function localOnly(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("runs from a nested path without external requests", async ({ page }) => {
  const errors: string[] = [];
  page.on("pageerror", (error) => errors.push(error.message));
  page.on("console", (message) => {
    if (message.type() === "error") errors.push(message.text());
  });
  const external = await localOnly(page);
  await page.goto("/deep/nested/barcode/");
  await expect(
    page.getByRole("heading", { name: "Barcode Tools" }),
  ).toBeVisible();
  expect(external).toEqual([]);
  expect(errors).toEqual([]);
});

test("generates an inert SVG and validates a GTIN", async ({ page }) => {
  const external = await localOnly(page);
  await page.goto("/deep/nested/barcode/");
  await page
    .getByRole("textbox", { name: "Payload", exact: true })
    .fill("browser-local barcode gate");
  await page
    .getByRole("region", { name: "Scalable barcode" })
    .getByRole("button", { name: "Generate", exact: true })
    .click();
  await expect(
    page.getByRole("img", { name: "Generated barcode preview" }),
  ).toBeVisible();
  await expect(page.getByText(/Vector bounds/u)).toBeVisible();
  await page.getByText("Print size and quiet-zone plan").click();
  await expect(page.getByText(/Manual measurement required/u)).toBeVisible();
  await page.getByRole("button", { name: "GS1 helper" }).click();
  await expect(page.getByText("Batch / lot", { exact: true })).toBeVisible();
  await expect(page.getByText("Serial", { exact: true })).toBeVisible();
  await page.getByLabel("Complete GTIN").fill("4006381333931");
  await expect(page.getByText("The check digit is valid.")).toBeVisible();
  expect(external).toEqual([]);
});

test("requests camera permission only after the explicit start action", async ({
  page,
}) => {
  await page.addInitScript(() => {
    const state = { requests: 0, stopped: false };
    Object.defineProperty(window, "__barcodeCameraState", { value: state });
    Object.defineProperty(navigator, "mediaDevices", {
      configurable: true,
      value: {
        getUserMedia: async () => {
          state.requests += 1;
          const stream = document.createElement("canvas").captureStream(1);
          for (const track of stream.getTracks()) {
            const stop = track.stop.bind(track);
            track.stop = () => {
              state.stopped = true;
              stop();
            };
          }
          return stream;
        },
      },
    });
    Object.defineProperty(window, "BarcodeDetector", {
      configurable: true,
      value: class {
        async detect() {
          return [{ rawValue: "camera-local", format: "qr_code" }];
        }
      },
    });
    HTMLMediaElement.prototype.play = async () => undefined;
  });
  const external = await localOnly(page);
  await page.goto("/deep/nested/barcode/");
  await page.getByRole("button", { name: "Decode" }).click();
  await expect
    .poll(() =>
      page.evaluate(
        () =>
          (
            window as unknown as {
              __barcodeCameraState: { requests: number };
            }
          ).__barcodeCameraState.requests,
      ),
    )
    .toBe(0);
  await page.getByRole("button", { name: "Start camera" }).click();
  await expect(page.getByText("camera-local", { exact: true })).toBeVisible();
  await expect
    .poll(() =>
      page.evaluate(
        () =>
          (
            window as unknown as {
              __barcodeCameraState: { requests: number };
            }
          ).__barcodeCameraState.requests,
      ),
    )
    .toBe(1);
  await page.getByRole("button", { name: "Stop camera" }).click();
  await expect
    .poll(() =>
      page.evaluate(
        () =>
          (
            window as unknown as {
              __barcodeCameraState: { stopped: boolean };
            }
          ).__barcodeCameraState.stopped,
      ),
    )
    .toBe(true);
  expect(external).toEqual([]);
});

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