tests/anchorPopover.test.ts

Rama main · réplica de lectura del repositorio original.

// The clamp every anchored popover is placed by (client/components/anchorPopover.ts).
//
// It is a test rather than a screenshot because the bug it exists for is
// arithmetic: the sync popover held its NEAR edge to 8px and said nothing about
// the far one, so anchored to a badge sitting inland — which on a 390px phone
// is everywhere, since the status bar's right cluster is not at the right of
// the screen — a 358px panel came out at x = −189 with more than half of the
// diagnosis it exists to show off the side of the phone. Both edges, one rule,
// three callers.
import { test } from "node:test";
import assert from "node:assert/strict";
import { clampAxis } from "../client/components/anchorPopover.ts";

const EDGE = 8;

test("a box that already fits is left where it was asked for", () => {
  assert.equal(clampAxis(100, 360, 1440), 100);
  assert.equal(clampAxis(EDGE, 360, 1440), EDGE);
});

test("the NEAR edge keeps its margin", () => {
  assert.equal(clampAxis(-189, 358, 390), EDGE);
  assert.equal(clampAxis(0, 200, 390), EDGE);
});

test("the FAR edge keeps its margin — the half that was missing", () => {
  // The sync popover's own numbers: a 358px panel on a 390px phone can start
  // no further along than 390 − 358 − 8.
  assert.equal(clampAxis(300, 358, 390), 390 - 358 - EDGE);
  assert.equal(clampAxis(1400, 360, 1440), 1440 - 360 - EDGE);
});

test("a box wider than the viewport is pinned to the leading margin, not centred on nothing", () => {
  // 100vw − 16px is the width every popover clamps itself to, so this is the
  // degenerate case a narrower viewport reaches first; the answer must be a
  // number the reader can see an edge of, not a negative one.
  assert.equal(clampAxis(50, 400, 390), EDGE);
  assert.equal(clampAxis(-50, 390, 390), EDGE);
});

test("the two edges cannot disagree: every placement lands inside", () => {
  for (const viewport of [390, 412, 768, 1024, 1440]) {
    for (const size of [40, 200, 358, 360, 700]) {
      for (const start of [-400, -1, 0, 8, 120, 700, 2000]) {
        const at = clampAxis(start, size, viewport);
        assert.ok(at >= EDGE, `${at} >= ${EDGE} for ${size} in ${viewport}`);
        // A box that cannot fit is pinned rather than squeezed; one that can
        // never runs past the far margin.
        if (size < viewport - EDGE * 2) {
          assert.ok(at + size <= viewport - EDGE, `${at + size} <= ${viewport - EDGE}`);
        }
      }
    }
  }
});