testWebUiGraph

tcmts.cli.test.e2e.contributions.testWebUiGraph · #hiuqxpda · function

the front page's graph (/forge/?view=graph): the map as clouds, laid out on the server and drawn in the browser, where a definition chosen beside it says what uses it

import { CHROME, withPage } from "#codebase/tcmts/cli/test/browser";
import { codebase, LIB, startServer, uiPage } from "#codebase/tcmts/cli/test/e2e/contributions";
import { tempDir, withChildren } from "#codebase/tcmts/cli/test/e2e/harness";
import assert from "node:assert/strict";

export const testWebUiGraph = async () => {
  const root = tempDir("graph");
  await withChildren(async (keep) => {
    const server = codebase(root, "served");
    server.write(LIB);
    server.tcm("add");
    const url = await startServer(keep, server.dir, "tok", ["--public"]);
    const front = await uiPage(`${url}/forge/?view=graph`);
    assert.equal(front.status, 200, front.html);
    assert.match(front.html, /class="codemap"/);
    assert.doesNotMatch(front.html, /class="map"/, "the graph instead of the list");
    if (!CHROME) return console.log("skipped the browser part: no Chrome");
    await withPage(`${url}/forge/?view=graph`, async (page) => {
      const side = `document.querySelector(".cmside")?.textContent ?? ""`;
      assert.match(
        await page.waitFor<string>(side, (t) => t.includes("between them"), 60_000),
        /2 definitions, 1 reference between them/,
      );
      // the most used, chosen: what uses it
      await page.evaluate(
        `[...document.querySelectorAll(".cmside .cmpick")].find((e) => e.textContent === "square").click()`,
      );
      assert.match(
        await page.waitFor<string>(side, (t) => t.includes("Used by"), 15_000),
        /in lib.*Used by 1lib\.sumSquares/,
      );
      assert.deepEqual(page.errors, []);
    });
  });
}

uses