testTcmReact

tcmts.cli.test.e2e.react.testTcmReact · #aioqut3c · term

The react library, mounted from tcm: its router and data hooks are placed in the browser, typecheck, run in Chrome's tests, and the server's first paint renders the route of the page's URL

import { CHROME } from "#codebase/tcmts/cli/test/browser";
import { withChildren } from "#codebase/tcmts/cli/test/e2e/harness";
import { ROUTED, serve } from "#codebase/tcmts/cli/test/e2e/react";
import { setUp } from "#codebase/tcmts/cli/test/e2e/vitest";
import assert from "node:assert/strict";
import fs from "node:fs";
import path from "node:path";

export const testTcmReact = async () => {
  if (!CHROME) return console.log("skipped: no Chrome");
  const { dir, tcm, write } = setUp();
  tcm("lib", "add", "tcm", "react", "--at", "ui.lib.react");
  write("ui.tsx", ROUTED);
  const checked = tcm("check", "ui.tsx");
  assert.match(checked, /✓ ui\.testMatch/, checked);
  assert.match(checked, /✓ ui\.testRoutesLinksAndData/, checked);
  assert.match(checked, /✓ ui\.testNavigatingKeepsThePageUntilTheNextIsReady/, checked);
  tcm("add", "ui.tsx");
  assert.match(tcm("view", "ui.Note"), /renders in the browser: it uses ui\.lib\.react\.useData/);
  assert.match(
    tcm("view", "ui.App"),
    /renders in the browser: it uses ui\.lib\.react\.use(AppLinks|Location)/,
  );
  assert.match(tcm("view", "ui.readNote"), /runs anywhere/);
  tcm("edit", "ui.App");
  assert.match(
    fs.readFileSync(path.join(dir, "scratch.tsx"), "utf8"),
    /from "#codebase\/ui\/lib\/react"/,
    "a scratch file imports it from the mount",
  );
  fs.rmSync(path.join(dir, "scratch.tsx"));
  await withChildren(async (keep) => {
    const url = await serve(keep, dir, "dev", "ui.App");
    const html = await (
      await fetch(new URL("/notes/z", url), { headers: { accept: "text/html" } })
    ).text();
    assert.match(html, /<h1>note z<\/h1>/, "the first paint is the route's page");
    assert.match(html, /<p>loading<\/p>/, "with what's still to be read");
  });
}