@bearmenu/ui 0.8.3 → 0.8.6

package/src/components/coverflow.test.tsx

@@ -0,0 +1,193 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Coverflow, type CoverflowItem } from "./coverflow";
+
+const items = (count: number): CoverflowItem[] =>
+  Array.from({ length: count }, (_, index) => ({
+    id: `e${index}`,
+    title: `Event ${index}`,
+    meta: `Meta ${index}`,
+  }));
+
+const renderCoverflow = (props: Partial<React.ComponentProps<typeof Coverflow>> = {}) =>
+  render(
+    <Coverflow
+      items={items(7)}
+      activeIndex={0}
+      freeLabel="Free"
+      prevLabel="Previous"
+      nextLabel="Next"
+      {...props}
+    />
+  );
+
+/** Every card is named by its title, so the mounted set is readable from the roles. */
+const mountedTitles = () =>
+  screen.getAllByRole("button").map((node) => node.getAttribute("aria-label"));
+
+describe("Coverflow", () => {
+  describe("the ring", () => {
+    // The reported defect: at activeIndex 0 nothing had a negative offset, so
+    // the left half of the stage was empty while three cards stacked right.
+    it("fills both flanks at activeIndex 0", () => {
+      renderCoverflow({ activeIndex: 0 });
+
+      // 7 items, visible window |offset| <= 3 — the whole ring is on stage,
+      // items 4/5/6 having wrapped round to offsets -3/-2/-1.
+      const titles = mountedTitles().filter((title) => title !== "Previous" && title !== "Next");
+      expect(titles).toEqual(expect.arrayContaining(["Event 4", "Event 5", "Event 6"]));
+    });
+
+    it("steps backwards from 0 to the last index instead of clamping", async () => {
+      const onActiveIndexChange = vi.fn();
+      renderCoverflow({ activeIndex: 0, onActiveIndexChange });
+
+      await userEvent.click(screen.getByRole("button", { name: "Previous" }));
+      expect(onActiveIndexChange).toHaveBeenCalledWith(6);
+    });
+
+    it("steps forwards from the last index back to 0 instead of clamping", async () => {
+      const onActiveIndexChange = vi.fn();
+      renderCoverflow({ activeIndex: 6, onActiveIndexChange });
+
+      await userEvent.click(screen.getByRole("button", { name: "Next" }));
+      expect(onActiveIndexChange).toHaveBeenCalledWith(0);
+    });
+
+    it("reports the index of the side poster that was clicked", async () => {
+      const onActiveIndexChange = vi.fn();
+      renderCoverflow({ activeIndex: 0, onActiveIndexChange });
+
+      // Event 6 sits at offset -1, immediately left of the lead.
+      await userEvent.click(screen.getByRole("button", { name: "Event 6" }));
+      expect(onActiveIndexChange).toHaveBeenCalledWith(6);
+    });
+  });
+
+  describe("the wrap", () => {
+    // The card that comes round the back must NOT tween across the face of the
+    // stage. It renders without its transition classes for exactly the commit
+    // in which it crosses the seam, so the transform lands instantly.
+    it("drops the transition only on the card crossing the seam", () => {
+      const ring = items(7);
+      const { rerender } = renderCoverflow({ items: ring, activeIndex: 0 });
+
+      const transitionClass = "transition-[transform,box-shadow]";
+      expect(screen.getByRole("button", { name: "Event 4" }).className).toContain(transitionClass);
+
+      // Advancing by one sends Event 4 from offset -3 to offset +3 the short
+      // way round, while Event 6 merely slides from -1 to -2.
+      rerender(
+        <Coverflow
+          items={ring}
+          activeIndex={1}
+          freeLabel="Free"
+          prevLabel="Previous"
+          nextLabel="Next"
+        />
+      );
+
+      expect(screen.getByRole("button", { name: "Event 4" }).className).not.toContain(
+        transitionClass
+      );
+      expect(screen.getByRole("button", { name: "Event 6" }).className).toContain(transitionClass);
+    });
+
+    it("keeps the transition on every card when the lead jumps several slots at once", () => {
+      const ring = items(20);
+      const { rerender } = renderCoverflow({ items: ring, activeIndex: 5 });
+
+      rerender(
+        <Coverflow
+          items={ring}
+          activeIndex={8}
+          freeLabel="Free"
+          prevLabel="Previous"
+          nextLabel="Next"
+        />
+      );
+
+      // A three-slot jump (clicking the outermost side poster) moves every card
+      // by three — nothing crossed the seam, so nothing may pop.
+      expect(screen.getByRole("button", { name: "Event 5" }).className).toContain(
+        "transition-[transform,box-shadow]"
+      );
+    });
+  });
+
+  describe("the visible window", () => {
+    // A 50-item ring must not paint 50 posters just because every item now
+    // resolves to some offset.
+    it("mounts only the cards within three slots of the lead", () => {
+      renderCoverflow({ items: items(50), activeIndex: 0 });
+
+      const titles = mountedTitles().filter((title) => title !== "Previous" && title !== "Next");
+      expect(titles).toHaveLength(7);
+      expect(titles).toEqual(
+        expect.arrayContaining([
+          "Event 47",
+          "Event 48",
+          "Event 49",
+          "Event 0",
+          "Event 1",
+          "Event 2",
+          "Event 3",
+        ])
+      );
+    });
+  });
+
+  describe("degenerate lengths", () => {
+    it("renders nothing at all for an empty list", () => {
+      const { container } = renderCoverflow({ items: [] });
+      expect(container).toBeEmptyDOMElement();
+    });
+
+    // A control that looks operable and does nothing is the bug the component's
+    // own docblock argues against — with one item there is nowhere to step to.
+    it("renders no arrows for a single item", () => {
+      renderCoverflow({ items: items(1) });
+
+      expect(screen.queryByRole("button", { name: "Previous" })).not.toBeInTheDocument();
+      expect(screen.queryByRole("button", { name: "Next" })).not.toBeInTheDocument();
+    });
+
+    it("keeps the two-item ring's second card on one consistent side", () => {
+      const { rerender } = renderCoverflow({ items: items(2), activeIndex: 0 });
+      const at0 = screen.getByRole("button", { name: "Event 1" }).getAttribute("style");
+
+      rerender(
+        <Coverflow
+          items={items(2)}
+          activeIndex={1}
+          freeLabel="Free"
+          prevLabel="Previous"
+          nextLabel="Next"
+        />
+      );
+      const at1 = screen.getByRole("button", { name: "Event 0" }).getAttribute("style");
+
+      // Whichever card is not the lead resolves the n/2 tie the same way, so
+      // both renders put it in the identical right-flank slot rather than
+      // flipping it between the two flanks.
+      expect(at0).toBe(at1);
+    });
+  });
+
+  describe("caption and position", () => {
+    it("renders the position on its own, with no separator dot, when there is no caption", () => {
+      renderCoverflow({ positionLabel: "1 of 7" });
+
+      expect(screen.getByText("1 of 7")).toBeInTheDocument();
+      expect(screen.queryByText("·")).not.toBeInTheDocument();
+    });
+
+    it("separates the two only when both are given", () => {
+      renderCoverflow({ caption: "7 events", positionLabel: "1 of 7" });
+
+      expect(screen.getByText("7 events")).toBeInTheDocument();
+      expect(screen.getByText("·")).toBeInTheDocument();
+    });
+  });
+});