refactor(chips): share the chip-overflow measure core between the two lanes (S3)

ActiveFilterChips (feed applied-filter row) and ChannelTagsControl both hand-rolled the same single-line chip-fit measurer: a hidden mirror + a layout-effect + ResizeObserver reading chip right edges, the real rem gap, the pill width and the lane width. The policy half was already extracted (decideChipLayout); the DOM-measurement half was still duplicated. Promote that half to useChipOverflowFit(rowRef, chipsRef, pillRef, deps, decide, initial): it owns the effect + observer + initial measure and reads the common geometry, then hands it to each caller's own policy. The feed row layers its leading label + trailing "Clear all" reservation on top and keeps decideChipLayout; the tag cell's chips-only policy is extracted as fitChipsWithPill (pure, unit-tested) alongside it. Add a jsdom test for the hook (stubbed offsets, re-measure on deps). Behaviour unchanged — verified in the browser: feed all/count modes + popover, tag "+N" fit + hover reveal.
2026-08-23 23:22:52 +02:00
parent 9538fb1b7a
commit fc32188fd2
6 changed files with 313 additions and 109 deletions
@@ -0,0 +1,102 @@
+// @vitest-environment jsdom
+//
+// The shared chip-overflow measure core (S3). jsdom has no layout engine — every offset* / clientWidth
+// is 0 — so we stub those on the real ref'd nodes and assert the hook (a) reads the geometry off them
+// (chip right edges, pill width, the gap between the last chip and the pill, and the lane's available
+// width), (b) returns the caller's `decide` result, and (c) re-measures when `deps` changes.
+import { describe, it, expect, afterEach } from "vitest";
+import { useRef } from "react";
+import { render, screen, cleanup, act } from "@testing-library/react";
+import { useChipOverflowFit, type ChipRowGeometry } from "./useChipOverflowFit";
+
+function stub(
+  el: HTMLElement,
+  props: Partial<Record<"offsetLeft" | "offsetWidth" | "clientWidth", number>>,
+) {
+  for (const [k, v] of Object.entries(props)) {
+    Object.defineProperty(el, k, { configurable: true, get: () => v });
+  }
+}
+
+let lastGeom: ChipRowGeometry | null = null;
+
+function Harness({ deps }: { deps: string }) {
+  const rowRef = useRef<HTMLDivElement | null>(null);
+  const chipRefs = useRef<Array<HTMLElement | null>>([]);
+  const pillRef = useRef<HTMLSpanElement | null>(null);
+  const visible = useChipOverflowFit<number>({
+    rowRef,
+    chipsRef: chipRefs,
+    pillRef,
+    deps,
+    initial: -1,
+    decide: (g) => {
+      lastGeom = g;
+      // A trivial policy: count the chips whose right edge fits the lane.
+      return g.chipRights.filter((r) => r <= g.avail).length;
+    },
+  });
+  return (
+    <div>
+      <div ref={rowRef} data-testid="row" />
+      <span
+        ref={(el) => {
+          chipRefs.current[0] = el;
+        }}
+        data-testid="chip0"
+      />
+      <span
+        ref={(el) => {
+          chipRefs.current[1] = el;
+        }}
+        data-testid="chip1"
+      />
+      <span ref={pillRef} data-testid="pill" />
+      <div data-testid="visible">{visible}</div>
+    </div>
+  );
+}
+
+afterEach(() => {
+  cleanup();
+  lastGeom = null;
+});
+
+describe("useChipOverflowFit", () => {
+  it("reads geometry off the refs and returns the decide() result; re-measures on deps change", () => {
+    const { rerender } = render(<Harness deps="a" />);
+
+    // First pass ran against jsdom's 0-sized boxes.
+    expect(lastGeom).toEqual({ avail: 0, chipRights: [0, 0], pillW: 0, gap: 0 });
+
+    // Give the boxes real geometry, then bump deps to force a re-measure.
+    stub(screen.getByTestId("row"), { clientWidth: 100 });
+    stub(screen.getByTestId("chip0"), { offsetLeft: 0, offsetWidth: 30 }); // right edge 30
+    stub(screen.getByTestId("chip1"), { offsetLeft: 36, offsetWidth: 30 }); // right edge 66
+    stub(screen.getByTestId("pill"), { offsetLeft: 72, offsetWidth: 20 }); // gap = 72 - 66 = 6
+
+    act(() => {
+      rerender(<Harness deps="b" />);
+    });
+
+    expect(lastGeom).toEqual({ avail: 100, chipRights: [30, 66], pillW: 20, gap: 6 });
+    // decide counted both chips (30 and 66 both <= 100).
+    expect(screen.getByTestId("visible").textContent).toBe("2");
+  });
+
+  it("drops a chip whose right edge exceeds the lane, via the caller's policy", () => {
+    const { rerender } = render(<Harness deps="a" />);
+    stub(screen.getByTestId("row"), { clientWidth: 40 });
+    stub(screen.getByTestId("chip0"), { offsetLeft: 0, offsetWidth: 30 }); // right edge 30 <= 40
+    stub(screen.getByTestId("chip1"), { offsetLeft: 36, offsetWidth: 30 }); // right edge 66 > 40
+    stub(screen.getByTestId("pill"), { offsetLeft: 72, offsetWidth: 20 });
+
+    act(() => {
+      rerender(<Harness deps="b" />);
+    });
+
+    expect(lastGeom).toEqual({ avail: 40, chipRights: [30, 66], pillW: 20, gap: 6 });
+    // Only chip0 (right edge 30) fits the 40-wide lane; chip1 (66) is dropped by the policy.
+    expect(screen.getByTestId("visible").textContent).toBe("1");
+  });
+});