testWebManifest

tcmts.cli.web.testWebManifest · #hw2d2fcm · term
import { pwaImage, webManifest, withPwa } from "#codebase/tcmts/cli/web";
import assert from "node:assert/strict";

export const testWebManifest = () => {
  // a 192×192 .png's first bytes: the signature, then its IHDR chunk with the size
  const png = new Uint8Array([
    0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, 0, 0, 0, 13, 0x49, 0x48, 0x44, 0x52, 0, 0, 0,
    192, 0, 0, 0, 192,
  ]);
  assert.deepEqual(pwaImage(png), { bytes: png, ext: ".png", type: "image/png", sizes: "192x192" });
  assert.equal(pwaImage("<svg/>")?.type, "image/svg+xml");
  assert.equal(pwaImage("/icon.png"), undefined, "a URL is left as it is");
  const kept = new Map<string, Uint8Array>();
  const keep = (content: Uint8Array, stem: string, ext: string) => {
    const name = `${stem}-${kept.size}${ext}`;
    kept.set(name, content);
    return name;
  };
  const made = webManifest(
    {
      name: "Reminders",
      short_name: "Todo",
      theme_color: "#f2f2f7",
      icons: [{ src: "<svg/>" }, { src: png }, { src: png, purpose: "maskable" }],
      shortcuts: [{ name: "Today", url: "/today" }],
    },
    keep,
  );
  const manifest = JSON.parse(
    new TextDecoder().decode(kept.get("manifest-3.webmanifest")),
  ) as Record<string, any>;
  // its paths are the app's, from where the manifest is kept (_app/assets/)
  assert.equal(manifest.start_url, "../../");
  assert.equal(manifest.scope, "../../");
  assert.equal(manifest.shortcuts[0].url, "../../today");
  assert.equal(manifest.display, "standalone");
  assert.deepEqual(manifest.icons[0], { src: "icon-0.svg", type: "image/svg+xml", sizes: "any" });
  assert.deepEqual(manifest.icons[2], {
    src: "icon-2.png",
    type: "image/png",
    sizes: "192x192",
    purpose: "maskable",
  });
  assert.equal(made.title, "Reminders");
  assert.deepEqual(made.warnings, []);
  assert.ok(made.head.includes('<link rel="manifest" href="/_app/assets/manifest-3.webmanifest">'));
  assert.ok(
    made.head.includes(
      '<link rel="icon" href="/_app/assets/icon-0.svg" type="image/svg+xml" sizes="any">',
    ),
  );
  assert.ok(
    made.head.includes('<link rel="apple-touch-icon" href="/_app/assets/icon-1.png">'),
    "not the maskable one",
  );
  assert.ok(made.head.includes('<meta name="theme-color" content="#f2f2f7">'));
  assert.deepEqual(webManifest({ name: "x", icons: [{ src: "<svg/>" }] }, keep).warnings, [
    "the pwa has no .png icon of 180×180 or more, which iOS's home screen needs",
  ]);
  assert.throws(() => webManifest({ icons: [] }, keep), /has no name/);
  assert.throws(
    () => webManifest({ name: "x", icons: [{ src: 1 }] }, keep),
    /icons\[0\]\.src is a file of the codebase/,
  );
  // the page: its title the app's name, and the tags before the service worker's registration
  const page = withPwa(
    "<html><head><title>reminders.App</title></head></html>",
    ["<meta x>"],
    "A & B",
  );
  assert.match(
    page,
    /<title>A &amp; B<\/title><meta x>\n<script>\nif \("serviceWorker" in navigator\)/,
  );
}
testWebManifest

uses
