@bongos/core 1.19.446 → 1.19.448

package/tests/hall_board_world.mjs

@@ -0,0 +1,153 @@
+// tests/hall_board_world.mjs — the Work Board + Home in the chrome world
+// (task 1003304, goal 1000081).
+//
+// tests/hall_tokens.mjs pins the TIER these two pages spend; this pins how they
+// spend it. Everything here is a fact that is silent in a browser: the page
+// still renders, it just renders wrong, or it renders right on one machine and
+// fails a floor on the reviewer's. Each assertion is something the re-skin
+// measured and would otherwise have to re-measure by hand every time.
+//
+// What it locks:
+//   * THE CARD-IN-CARD. In v3 a claimable task IS a --bg-card panel, so the
+//     section around the list has to be .scroll--bare. Put the .scroll back and
+//     the board silently returns to a stack of boxes inside a box, which is
+//     exactly the treatment the owner's pick removed — and nothing errors.
+//   * THE 24px FLOOR ON BOTH AXES. The two checkboxes were 15px controls; they
+//     are now 24px hit areas with a 14px drawn box, and the prose links buy
+//     their width with padding and give it back with a negative margin. A
+//     later "tidy" that drops the ::before box or the negative margin puts the
+//     floor back under, and only the kit render would catch it.
+//   * WHITE ON THE SALMON. DESIGN.md bans it outright (it fails AA); the claim
+//     button carried a literal `#fff` until this task. It is the single most
+//     likely thing to be pasted back from another codebase.
+//   * THE COMPAT ALIASES. work.css's whole removal list. The aliases still
+//     EXIST for the pages nobody has re-skinned, so spending one here is legal
+//     CSS that quietly opts this sheet back out of the world.
+//   * THE ONE h1. work.html had none — the hall predates the floor — so the
+//     page failed one-header-main-h1 on all 36 width x mode x state renders.
+//
+// Reproduce the renders these came from:
+//   node modules/ui-design/kit/render.js --states modules/hall-ui/public/work.states.json
+//   node modules/ui-design/kit/render.js --states modules/hall-ui/public/index.states.json
+
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const HALL = path.join(ROOT, 'modules', 'hall-ui', 'public');
+const read = (f) => fs.readFileSync(path.join(HALL, f), 'utf8');
+
+const styleCss = read('style.css');
+const workCss = read('work.css');
+const workHtml = read('work.html');
+
+// The body of the first rule matching `selector {`, comments stripped. Naive on
+// purpose: these are flat declaration blocks, not nested at-rules. Takes a PLAIN
+// selector and escapes it here — pass a pre-escaped one and it is escaped twice,
+// which matches a literal backslash and silently finds nothing.
+const rule = (css, selector) => {
+  const esc = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const re = new RegExp(`(^|[},])\\s*${esc}\\s*\\{([^}]*)\\}`, 'm');
+  const m = css.replace(/\/\*[\s\S]*?\*\//g, '').match(re);
+  return m ? m[2] : null;
+};
+
+// ---- 1. the card is the panel, so the section must not be one ---------------
+
+test('the Ready queue is BARE — a task card inside a .scroll is a card in a card', () => {
+  const m = workHtml.match(/<section[^>]*id="claim-scroll"[^>]*>/);
+  assert.ok(m, 'work.html still has the #claim-scroll section');
+  assert.match(m[0], /class="[^"]*\bscroll--bare\b/,
+    'v3 puts claimable tasks on the ground as --bg-card cards; a .scroll around them paints a card inside a card');
+});
+
+test('.task IS the panel — --bg-card at the full radius, with no drawn edge at rest', () => {
+  const t = rule(styleCss, '.task');
+  assert.ok(t, '.task has a rule');
+  assert.match(t, /background:\s*var\(--bg-card\)/, 'the card is the panel tone');
+  assert.match(t, /border-radius:\s*var\(--radius\)/, 'the full radius, not --radius-sm');
+  assert.match(t, /border:\s*var\(--line\)\s+solid\s+transparent/,
+    'the edge is transparent at rest and reserved so hover does not reflow the row');
+});
+
+// ---- 2. the 24px floor, on BOTH axes ---------------------------------------
+
+// The floor is `width < 24 || height < 24`, and the width half is the one that
+// gets missed: "Git" came back 17x24 after a height-only fix.
+for (const sel of ['.task__select', '.wip__select']) {
+  test(`${sel} is a 24px target with a 14px drawn box`, () => {
+    const css = sel.includes('wip') ? workCss : styleCss;
+    const box = rule(css, sel);
+    assert.ok(box, `${sel} has a rule`);
+    assert.match(box, /width:\s*24px/, 'the HIT AREA is 24px — this is what the floor measures');
+    assert.match(box, /appearance:\s*none/, 'the native box has to go, or sizing it up sizes the glyph up too');
+    const before = rule(css, `${sel}::before`);
+    assert.ok(before, `${sel}::before draws the box the viewer actually sees`);
+    assert.match(before, /width:\s*14px/, 'the drawn box stays 14px inside the 24px target');
+  });
+}
+
+test('a prose link buys BOTH axes — padding for width, negative margin to give it back', () => {
+  const body = styleCss.replace(/\/\*[\s\S]*?\*\//g, '')
+    .match(/\.scroll__lede a,[\s\S]*?\{([^}]*)\}/);
+  assert.ok(body, 'the shared prose-link floor rule is still keyed on .scroll__lede a');
+  assert.match(body[1], /min-width:\s*24px/, 'width is half the floor — "Git" is 17px wide and fails without it');
+  assert.match(body[1], /min-height:\s*24px/, 'height is the other half');
+  assert.match(body[1], /margin:\s*0\s+-4px/,
+    'the negative margin hands the padding back to the line, so the sentence does not re-space');
+});
+
+// ---- 3. the world's own bans ------------------------------------------------
+
+test('nothing on the board paints text white on the accent', () => {
+  const claim = rule(workCss, '.task__claim');
+  assert.ok(claim, '.task__claim has a rule');
+  assert.match(claim, /background:\s*var\(--accent\)/, 'the claim button is the page\'s one accent fill');
+  assert.match(claim, /color:\s*var\(--accent-on\)/,
+    '--accent-on is the dark ink for the salmon; white on it fails AA and DESIGN.md bans it');
+  // Match white as a VALUE, not anywhere in the block: `white-space: nowrap` is
+  // a property name and read as a colour by a bare /\bwhite\b/.
+  assert.doesNotMatch(claim, /:\s*(#fff\b|#ffffff\b|white\b)/i,
+    'the literal this task removed must not come back');
+});
+
+test('work.css spends no compat alias — that was the sheet\'s removal list', () => {
+  const aliases = ['--surface', '--surface-2', '--border', '--border-strong', '--accent-weak', '--accent-text'];
+  const bare = workCss.replace(/\/\*[\s\S]*?\*\//g, '');
+  const spent = aliases.filter((a) => new RegExp(`var\\(\\s*${a}\\s*[,)]`).test(bare));
+  assert.deepEqual(spent, [],
+    'the aliases still exist for un-reskinned pages, so spending one here is legal CSS that silently opts this sheet out of the world');
+});
+
+test('the bulk toolbar carries no rgba literal and is opaque over the cards', () => {
+  const bar = rule(workCss, '.bulk-toolbar');
+  assert.ok(bar, '.bulk-toolbar has a rule');
+  assert.doesNotMatch(bar, /rgba?\(/i,
+    'the three rgba(255,255,255,…) literals went with the inverted --ink surface that needed them');
+  // The bar sits over CONTENT, not the page ground, and --glass in light is a 5%
+  // tint with the blur at 0 — bare glass let a task title read straight through.
+  assert.match(bar, /background:\s*linear-gradient\(var\(--glass\), var\(--glass\)\), var\(--bg\)/,
+    'the tint needs the page ground painted under it, or the bar is transparent in light');
+  assert.match(bar, /z-index:\s*var\(--z-/, 'the z ladder, not a hand-picked number');
+});
+
+// ---- 4. the landmark floor --------------------------------------------------
+
+test('work.html has exactly one h1', () => {
+  // Strip HTML comments first: the comment ABOVE the heading names <h1>, and
+  // counting it made this read 2 when the page has one.
+  const h1s = workHtml.replace(/<!--[\s\S]*?-->/g, '').match(/<h1\b/g) || [];
+  assert.equal(h1s.length, 1,
+    'the page had none until task 1003304 and failed one-header-main-h1 on every render');
+});
+
+test('both re-skinned pages have a states file, so the floors are reproducible', () => {
+  for (const f of ['work.states.json', 'index.states.json']) {
+    const json = JSON.parse(read(f));
+    assert.equal(json.surface, 'hall-ui', `${f} names its surface`);
+    assert.ok(Object.keys(json.states).length >= 4, `${f} renders more than the default state`);
+  }
+});