import test from "node:test";
import assert from "node:assert/strict";
import { readFile } from "node:fs/promises";

const html = await readFile(new URL("../public/index.html", import.meta.url), "utf8");
const app = await readFile(new URL("../public/app.js", import.meta.url), "utf8");
const css = await readFile(new URL("../public/styles.css", import.meta.url), "utf8");

test("history table exposes a control for showing or hiding old run columns", () => {
  assert.match(html, /id="run-collapse-toggle"/);
  assert.match(html, /id="run-collapse-note"/);
  assert.match(app, /runCollapseToggle\s*=\s*document\.querySelector\("#run-collapse-toggle"\)/);
  assert.match(app, /runCollapseNote\s*=\s*document\.querySelector\("#run-collapse-note"\)/);
});

test("old run controls are near the platform filters instead of the table corner", () => {
  assert.ok(html.indexOf('class="platform-filters"') < html.indexOf('class="run-collapse-tools"'));
  assert.ok(html.indexOf('class="run-collapse-tools"') < html.indexOf('class="table-wrap"'));
});

test("history table only renders recent runs until the user expands old columns", () => {
  assert.match(app, /VISIBLE_RECENT_RUNS\s*=\s*12/);
  assert.match(app, /showAllRuns/);
  assert.match(app, /visibleRunsForTable\(runs\)/);
  assert.match(app, /hiddenRunCount\(runs\)/);
  assert.match(app, /run-collapse-cell/);
});

test("old-column collapse controls have compact table styling", () => {
  assert.match(css, /\.run-collapse-tools/);
  assert.match(css, /\.run-collapse-cell/);
  assert.match(css, /\.run-collapse-note/);
  assert.match(css, /#run-collapse-toggle/);
});