@ksp-gonogo/kerbcast-react 1.7.0 → 1.8.0

package/src/FeedActionBar.test.ts

@@ -0,0 +1,196 @@
+/**
+ * Tests for the FeedActionBar overflow-partition logic (issue #6 UI spec).
+ *
+ * Pure-function tests only; the rendered FeedActionBar component (built-in
+ * wiring through CameraFeed / KerbalFaceFeed) is covered by their own test
+ * suites, which exercise the real DOM output (the ⋮ trigger, the portaled
+ * overflow menu, stable ordering across enable/disable toggles).
+ */
+
+import { describe, expect, it } from "vitest";
+import { partitionActionBarEntries } from "./FeedActionBar";
+
+interface Entry {
+  id: string;
+  stateful?: boolean;
+  order?: number;
+  pinnedTrailing?: boolean;
+}
+
+function ids(entries: Entry[]): string[] {
+  return entries.map((e) => e.id);
+}
+
+describe("partitionActionBarEntries", () => {
+  it("keeps everything primary (inline) when total enabled < 4", () => {
+    const entries: Entry[] = [{ id: "a" }, { id: "b" }, { id: "c" }];
+    const { primary, overflow } = partitionActionBarEntries(entries);
+    expect(ids(primary)).toEqual(["a", "b", "c"]);
+    expect(overflow).toEqual([]);
+  });
+
+  it("collapses non-stateful entries into overflow at exactly the 4/2 threshold", () => {
+    const entries: Entry[] = [
+      { id: "tracking", stateful: true },
+      { id: "quality" },
+      { id: "pip" },
+      { id: "fullscreen" },
+    ];
+    const { primary, overflow } = partitionActionBarEntries(entries);
+    expect(ids(primary)).toEqual(["tracking"]);
+    expect(ids(overflow)).toEqual(["quality", "pip", "fullscreen"]);
+  });
+
+  it("never collapses a single non-stateful item, even with total >= 4", () => {
+    const entries: Entry[] = [
+      { id: "tracking", stateful: true },
+      { id: "rec", stateful: true },
+      { id: "close", stateful: true },
+      { id: "quality" }, // the only non-stateful eligible item
+    ];
+    const { primary, overflow } = partitionActionBarEntries(entries);
+    expect(ids(primary)).toEqual(["tracking", "rec", "close", "quality"]);
+    expect(overflow).toEqual([]);
+  });
+
+  it("stays inline when total is below 4 even with 2+ non-stateful eligible", () => {
+    const entries: Entry[] = [{ id: "quality" }, { id: "pip" }];
+    const { primary, overflow } = partitionActionBarEntries(entries);
+    expect(ids(primary)).toEqual(["quality", "pip"]);
+    expect(overflow).toEqual([]);
+  });
+
+  it("stays inline just under the total threshold (3 total, 3 non-stateful)", () => {
+    const entries: Entry[] = [{ id: "a" }, { id: "b" }, { id: "c" }];
+    const { primary, overflow } = partitionActionBarEntries(entries);
+    expect(ids(primary)).toEqual(["a", "b", "c"]);
+    expect(overflow).toEqual([]);
+  });
+
+  it("all-stateful entries never overflow regardless of count", () => {
+    const entries: Entry[] = [
+      { id: "a", stateful: true },
+      { id: "b", stateful: true },
+      { id: "c", stateful: true },
+      { id: "d", stateful: true },
+      { id: "e", stateful: true },
+    ];
+    const { primary, overflow } = partitionActionBarEntries(entries);
+    expect(ids(primary)).toEqual(["a", "b", "c", "d", "e"]);
+    expect(overflow).toEqual([]);
+  });
+
+  it("sorts by explicit order first, then preserves stable relative order for the rest", () => {
+    const entries: Entry[] = [
+      { id: "custom", order: 0 },
+      { id: "quality" },
+      { id: "tracking", stateful: true },
+      { id: "pip" },
+      { id: "fullscreen" },
+    ];
+    const { primary, overflow } = partitionActionBarEntries(entries);
+    // "custom" (order: 0) sorts first; the rest keep their input order.
+    expect(ids(primary)).toEqual(["tracking"]);
+    expect(ids(overflow)).toEqual(["custom", "quality", "pip", "fullscreen"]);
+  });
+
+  it("does not reflow the remaining chips' relative order when one is disabled", () => {
+    // Simulates a re-render where "pip" is no longer enabled (simply omitted).
+    // "help" here is just a generic non-stateful, non-pinned example action --
+    // NOT the close/remove slot (that's covered in its own describe block
+    // below, since it is excluded from this count entirely).
+    const before: Entry[] = [
+      { id: "tracking", stateful: true },
+      { id: "quality" },
+      { id: "pip" },
+      { id: "fullscreen" },
+      { id: "help" },
+    ];
+    const after: Entry[] = [
+      { id: "tracking", stateful: true },
+      { id: "quality" },
+      { id: "fullscreen" },
+      { id: "help" },
+    ];
+    const beforeResult = partitionActionBarEntries(before);
+    const afterResult = partitionActionBarEntries(after);
+    expect(ids(beforeResult.overflow)).toEqual(["quality", "pip", "fullscreen", "help"]);
+    // "pip" drops out; "quality", "fullscreen", "help" keep the same relative order.
+    expect(ids(afterResult.overflow)).toEqual(["quality", "fullscreen", "help"]);
+  });
+
+  it("preserves the partition's relative order (stateful entries interspersed in input)", () => {
+    const entries: Entry[] = [
+      { id: "quality" },
+      { id: "tracking", stateful: true },
+      { id: "pip" },
+      { id: "rec", stateful: true },
+      { id: "fullscreen" },
+    ];
+    const { primary, overflow } = partitionActionBarEntries(entries);
+    expect(ids(primary)).toEqual(["tracking", "rec"]);
+    expect(ids(overflow)).toEqual(["quality", "pip", "fullscreen"]);
+  });
+});
+
+describe("partitionActionBarEntries -- pinnedTrailing (close/remove)", () => {
+  it("returns a pinnedTrailing entry in its own group, separate from primary/overflow", () => {
+    const entries: Entry[] = [
+      { id: "spotlight", stateful: true },
+      { id: "close", pinnedTrailing: true },
+    ];
+    const { primary, overflow, pinnedTrailing } = partitionActionBarEntries(entries);
+    expect(ids(primary)).toEqual(["spotlight"]);
+    expect(overflow).toEqual([]);
+    expect(ids(pinnedTrailing)).toEqual(["close"]);
+  });
+
+  it("excludes pinnedTrailing from BOTH the total and the non-stateful-eligible count", () => {
+    // Same 4 actions CrewBar wires per face: spotlight (stateful), fullscreen,
+    // pip (both non-stateful, overflow-eligible), close (pinned). Naively
+    // counting close toward the total would hit the 4/2 threshold; excluding
+    // it drops the non-pinned total to 3, so overflow does NOT trigger --
+    // fullscreen/pip stay primary, and close is still separate (never inline
+    // with them, never counted).
+    const entries: Entry[] = [
+      { id: "spotlight", stateful: true },
+      { id: "fullscreen" },
+      { id: "pip" },
+      { id: "close", pinnedTrailing: true },
+    ];
+    const { primary, overflow, pinnedTrailing } = partitionActionBarEntries(entries);
+    expect(ids(primary)).toEqual(["spotlight", "fullscreen", "pip"]);
+    expect(overflow).toEqual([]);
+    expect(ids(pinnedTrailing)).toEqual(["close"]);
+  });
+
+  it("still triggers overflow on the remaining set once it alone crosses the threshold", () => {
+    // The Tile.tsx / CameraFeed shape: spotlight + quality + tracking + pip +
+    // fullscreen + remove (pinned). Excluding "remove", the remaining 5
+    // actions (3 non-stateful: quality/pip/fullscreen) still cross 4/2.
+    const entries: Entry[] = [
+      { id: "spotlight", stateful: true },
+      { id: "quality" },
+      { id: "tracking", stateful: true },
+      { id: "pip" },
+      { id: "fullscreen" },
+      { id: "remove", pinnedTrailing: true },
+    ];
+    const { primary, overflow, pinnedTrailing } = partitionActionBarEntries(entries);
+    expect(ids(primary)).toEqual(["spotlight", "tracking"]);
+    expect(ids(overflow)).toEqual(["quality", "pip", "fullscreen"]);
+    expect(ids(pinnedTrailing)).toEqual(["remove"]);
+  });
+
+  it("never appears inside the overflow group, even when it is the only non-stateful-looking entry", () => {
+    const entries: Entry[] = [
+      { id: "a", stateful: true },
+      { id: "b", stateful: true },
+      { id: "c", stateful: true },
+      { id: "close", pinnedTrailing: true },
+    ];
+    const { overflow, pinnedTrailing } = partitionActionBarEntries(entries);
+    expect(overflow).toEqual([]);
+    expect(ids(pinnedTrailing)).toEqual(["close"]);
+  });
+});

package/src/FeedActionBar.test.tsx

@@ -0,0 +1,215 @@
+/**
+ * Rendered-DOM tests for `FeedActionBar` -- the actual ⋮ trigger + portaled
+ * overflow menu behaviour, on top of the pure partition logic covered in
+ * FeedActionBar.test.ts.
+ */
+
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { FeedActionBar, type FeedActionBarEntry } from "./FeedActionBar";
+
+afterEach(() => {
+  cleanup();
+});
+
+function makeEntry(
+  id: string,
+  opts: {
+    stateful?: boolean;
+    order?: number;
+    pinnedTrailing?: boolean;
+    onClick?: () => void;
+  } = {},
+): FeedActionBarEntry {
+  return {
+    id,
+    label: id,
+    stateful: opts.stateful,
+    order: opts.order,
+    pinnedTrailing: opts.pinnedTrailing,
+    render: () => (
+      <button type="button" aria-label={id} onClick={opts.onClick}>
+        {id}
+      </button>
+    ),
+  };
+}
+
+describe("FeedActionBar", () => {
+  it("renders every entry inline (no ⋮ trigger) when below the overflow threshold", () => {
+    render(
+      <FeedActionBar
+        entries={[makeEntry("a"), makeEntry("b"), makeEntry("c")]}
+      />,
+    );
+    expect(screen.getByLabelText("a")).toBeTruthy();
+    expect(screen.getByLabelText("b")).toBeTruthy();
+    expect(screen.getByLabelText("c")).toBeTruthy();
+    expect(screen.queryByLabelText("More actions")).toBeNull();
+  });
+
+  it("shows the ⋮ trigger once total >= 4 and non-stateful eligible >= 2, hiding the collapsed entries inline", () => {
+    render(
+      <FeedActionBar
+        entries={[
+          makeEntry("tracking", { stateful: true }),
+          makeEntry("quality"),
+          makeEntry("pip"),
+          makeEntry("fullscreen"),
+        ]}
+      />,
+    );
+    // Stateful stays inline.
+    expect(screen.getByLabelText("tracking")).toBeTruthy();
+    // Non-stateful collapsed: not rendered inline (only inside the closed menu).
+    expect(screen.queryByLabelText("quality")).toBeNull();
+    expect(screen.getByLabelText("More actions")).toBeTruthy();
+  });
+
+  it("opens the portaled overflow menu on click, listing the collapsed entries", () => {
+    render(
+      <FeedActionBar
+        entries={[
+          makeEntry("tracking", { stateful: true }),
+          makeEntry("quality"),
+          makeEntry("pip"),
+          makeEntry("fullscreen"),
+        ]}
+      />,
+    );
+
+    fireEvent.click(screen.getByLabelText("More actions"));
+
+    const menu = screen.getByRole("menu", { name: "More actions" });
+    expect(menu.parentElement).toBe(document.body);
+    // Portaled + fixed, same contract as CameraFeed's other menus.
+    expect(getComputedStyle(menu).position).toBe("fixed");
+    expect(screen.getByLabelText("quality")).toBeTruthy();
+    expect(screen.getByLabelText("pip")).toBeTruthy();
+    expect(screen.getByLabelText("fullscreen")).toBeTruthy();
+  });
+
+  it("clicking an overflow entry fires its own onClick AND closes the overflow menu", () => {
+    const onQuality = vi.fn();
+    render(
+      <FeedActionBar
+        entries={[
+          makeEntry("tracking", { stateful: true }),
+          makeEntry("quality", { onClick: onQuality }),
+          makeEntry("pip"),
+          makeEntry("fullscreen"),
+        ]}
+      />,
+    );
+
+    fireEvent.click(screen.getByLabelText("More actions"));
+    expect(screen.getByRole("menu", { name: "More actions" })).toBeTruthy();
+
+    fireEvent.click(screen.getByLabelText("quality"));
+    expect(onQuality).toHaveBeenCalledTimes(1);
+    // The menu closes on its own after a leaf action fires, rather than
+    // waiting for an outside pointerdown.
+    expect(screen.queryByRole("menu", { name: "More actions" })).toBeNull();
+  });
+
+  it("never collapses a single non-stateful item even with 4+ total", () => {
+    render(
+      <FeedActionBar
+        entries={[
+          makeEntry("tracking", { stateful: true }),
+          makeEntry("rec", { stateful: true }),
+          makeEntry("power", { stateful: true }),
+          makeEntry("quality"),
+        ]}
+      />,
+    );
+    expect(screen.getByLabelText("quality")).toBeTruthy();
+    expect(screen.queryByLabelText("More actions")).toBeNull();
+  });
+
+  it("renders leading content ahead of the partitioned entries", () => {
+    render(
+      <FeedActionBar
+        leading={<span data-testid="leading">step buttons</span>}
+        entries={[makeEntry("a")]}
+      />,
+    );
+    expect(screen.getByTestId("leading")).toBeTruthy();
+  });
+
+  it("renders nothing when there is no leading content and no entries", () => {
+    const { container } = render(<FeedActionBar entries={[]} />);
+    expect(container.firstChild).toBeNull();
+  });
+});
+
+describe("FeedActionBar -- pinnedTrailing (close/remove)", () => {
+  it("renders the pinned entry directly, never inside the ⋮ overflow menu", () => {
+    // Same shape as CrewBar's per-face row: spotlight (stateful) + fullscreen
+    // + pip (non-stateful) + close (pinned). Excluding "close" from the count
+    // drops the non-pinned total to 3, so overflow does not even trigger --
+    // fullscreen/pip stay inline, and close sits after them.
+    render(
+      <FeedActionBar
+        entries={[
+          makeEntry("spotlight", { stateful: true }),
+          makeEntry("fullscreen"),
+          makeEntry("pip"),
+          makeEntry("close", { pinnedTrailing: true }),
+        ]}
+      />,
+    );
+    expect(screen.getByLabelText("fullscreen")).toBeTruthy();
+    expect(screen.getByLabelText("pip")).toBeTruthy();
+    expect(screen.getByLabelText("close")).toBeTruthy();
+    expect(screen.queryByLabelText("More actions")).toBeNull();
+  });
+
+  it("is excluded from the overflow-threshold count: the remaining set can still cross it on its own", () => {
+    // Tile.tsx / CameraFeed shape: spotlight + quality + tracking + pip +
+    // fullscreen + remove (pinned). Excluding "remove", the remaining 5 (3
+    // non-stateful) still cross 4/2, so the ⋮ appears for those three.
+    render(
+      <FeedActionBar
+        entries={[
+          makeEntry("spotlight", { stateful: true }),
+          makeEntry("quality"),
+          makeEntry("tracking", { stateful: true }),
+          makeEntry("pip"),
+          makeEntry("fullscreen"),
+          makeEntry("remove", { pinnedTrailing: true }),
+        ]}
+      />,
+    );
+    expect(screen.queryByLabelText("quality")).toBeNull();
+    expect(screen.queryByLabelText("pip")).toBeNull();
+    expect(screen.queryByLabelText("fullscreen")).toBeNull();
+    expect(screen.getByLabelText("More actions")).toBeTruthy();
+    // The pinned entry is never swept into the overflow menu.
+    expect(screen.getByLabelText("remove")).toBeTruthy();
+  });
+
+  it("renders as the rightmost control -- after the ⋮ trigger -- in DOM order", () => {
+    render(
+      <FeedActionBar
+        entries={[
+          makeEntry("spotlight", { stateful: true }),
+          makeEntry("quality"),
+          makeEntry("tracking", { stateful: true }),
+          makeEntry("pip"),
+          makeEntry("fullscreen"),
+          makeEntry("remove", { pinnedTrailing: true }),
+        ]}
+      />,
+    );
+    const bar = screen.getByLabelText("More actions").parentElement;
+    expect(bar).toBeTruthy();
+    const order = Array.from(bar?.querySelectorAll("button") ?? []).map((el) =>
+      el.getAttribute("aria-label"),
+    );
+    // "More actions" (⋮) immediately precedes "remove" (✕), and nothing
+    // pinned/overflow-eligible follows it.
+    expect(order.at(-2)).toBe("More actions");
+    expect(order.at(-1)).toBe("remove");
+  });
+});