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

import { expect, test, type Page } from "@playwright/test";
import { Buffer } from "node:buffer";

const ORIGIN = "http://127.0.0.1:4196";
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("navigates and generates inert examples at a nested path", async ({
  page,
}) => {
  await page.setViewportSize({ width: 1800, height: 1000 });
  const external = await watchLocalOnly(page);
  await page.goto("/deep/nested/api/");
  await expect(page.getByRole("heading", { name: "API Tools" })).toBeVisible();
  await expect(page.getByText(/2 operations/iu)).toBeVisible();
  await page.getByRole("button", { name: /PATCH.*\/books/iu }).click();
  await expect(page.getByText("Generated request body")).toBeVisible();
  await expect(page.getByLabel("curl")).toHaveValue(/curl --request PATCH/iu);
  await page.getByLabel("Search operations").fill("getBook");
  await expect(page.locator(".operation-list li")).toHaveCount(1);
  expect(external).toEqual([]);
  expect(
    await page
      .locator(".toolbox-shell__main")
      .evaluate((node) => getComputedStyle(node).width),
  ).toBe("1440px");
});

test("resolves only explicitly supplied local multi-file references", async ({
  page,
}) => {
  await page.goto("/deep/nested/api/");
  const main = `openapi: 3.1.0\ninfo: {title: Multi, version: '1'}\npaths:\n  /book:\n    get:\n      responses:\n        '200':\n          description: ok\n          content:\n            application/json:\n              schema: {$ref: 'schemas.yaml#/Book'}\n`;
  const schemas = `Book: {type: object, properties: {title: {type: string, example: Remote Book}}}`;
  await page.getByTestId("api-file-input").setInputFiles([
    {
      name: "openapi.yaml",
      mimeType: "application/yaml",
      buffer: Buffer.from(main),
    },
    {
      name: "schemas.yaml",
      mimeType: "application/yaml",
      buffer: Buffer.from(schemas),
    },
  ]);
  await expect(page.getByText(/1 supporting file/iu)).toBeVisible();
  await expect(page.getByText(/Remote Book/iu)).toBeVisible();
  await page.getByLabel("Entry description").selectOption("schemas.yaml");
  await expect(page.getByText(/3 errors/iu)).toBeVisible();
  await page.getByLabel("Entry description").selectOption("openapi.yaml");
  await expect(page.getByText(/Remote Book/iu)).toBeVisible();
  await page.getByRole("button", { name: "Source" }).click();
  await expect(
    page.getByRole("list").getByText("schemas.yaml", { exact: true }),
  ).toBeVisible();
});

test("retains a valid model, compares revisions and inspects HAR", async ({
  page,
}) => {
  await page.goto("/deep/nested/api/");
  await page.getByLabel("OpenAPI source").fill('not: "unterminated');
  await page.getByRole("button", { name: "Analyse description" }).click();
  await expect(page.getByRole("alert")).toContainText("last successful");
  await expect(
    page.getByText("/books/{bookId}", { exact: true }).first(),
  ).toBeVisible();
  await page.getByRole("button", { name: "Compare" }).click();
  await expect(page.getByText("Operation was added.")).toBeVisible();
  const pending = page.waitForEvent("download");
  await page.getByRole("button", { name: "Download JSON" }).click();
  expect((await pending).suggestedFilename()).toBe(
    "openapi-change-report.json",
  );
  await page.getByRole("button", { name: "Exchanges" }).click();
  await expect(
    page.getByRole("cell", { name: "https://api.example.test/books/book-42" }),
  ).toBeVisible();
  await page
    .getByLabel("Saved HTTP exchange")
    .fill(
      "GET /health HTTP/1.1\nHost: example.test\n\n--- response ---\nHTTP/1.1 204 No Content\n",
    );
  await page.getByRole("button", { name: "Inspect saved exchange" }).click();
  await expect(page.getByRole("cell", { name: "/health" })).toBeVisible();
});

test("integrates help, dark theme, PWA identity and hardened headers", async ({
  page,
  request,
}) => {
  await page.goto("/deep/nested/api/");
  await page.getByRole("button", { name: "Help" }).click();
  await expect(
    page.getByRole("dialog", { name: "About API Tools" }),
  ).toContainText("never executes HTTP");
  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/api/");
  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/api/toolbox-app.json");
  await expect(manifest.json()).resolves.toMatchObject({
    id: "de.add-ideas.api-tools",
    version: "0.1.0",
    privacy: { processing: "local", telemetry: false },
  });
});