@bearmenu/ui 0.8.8 → 0.8.10

package/src/components/event-detail-panel.test.tsx

@@ -0,0 +1,181 @@
+import { describe, it, expect, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import {
+  EventDetailFooter,
+  EventDetailGhostAction,
+  EventDetailPanel,
+  EventDetailPanelError,
+  type EventDetailPanelLabels,
+} from "./event-detail-panel";
+import type { EventFormatters, EventPreview } from "./event-types";
+
+const labels: EventDetailPanelLabels = {
+  free: "Free entry",
+  liveNow: "Now",
+  ended: "Ended",
+  venueHeading: "Event venue",
+  venueNoPage: "name only — no venue page yet",
+  lineupHeading: "Line-up",
+  aboutHeading: "About this event",
+  noDescription: "Event details coming soon.",
+  readMore: "Read more",
+  readLess: "Read less",
+};
+const formatters: EventFormatters = {
+  time: () => "17:30",
+  day: () => "Tue",
+  price: (n) => `${n} RON`,
+};
+const event: EventPreview = {
+  id: "e1",
+  title: "Brides & Bubbles",
+  description: "",
+  location: "Sophie Wedding House",
+  starts_at: "2026-09-08T17:30:00",
+  entry_fee: 50,
+};
+const base = { event, labels, formatters, dateLine: "Tuesday · 17:30" };
+
+describe("EventDetailPanel", () => {
+  it("shows the status chip for live, soon and ended, and none when upcoming", () => {
+    const { rerender } = render(<EventDetailPanel {...base} />);
+    expect(screen.queryByText("Now")).not.toBeInTheDocument();
+    rerender(<EventDetailPanel {...base} status="live" />);
+    expect(screen.getByText("Now")).toBeInTheDocument();
+    rerender(
+      <EventDetailPanel {...base} status="soon" soonLabel="Starts in 2h" />,
+    );
+    expect(screen.getByText("Starts in 2h")).toBeInTheDocument();
+    rerender(<EventDetailPanel {...base} status="ended" />);
+    expect(screen.getByText("Ended")).toBeInTheDocument();
+  });
+
+  it("renders the fee as a chip: paid amount, free label, nothing when unknown", () => {
+    const { rerender } = render(<EventDetailPanel {...base} />);
+    expect(screen.getByText("50 RON")).toBeInTheDocument();
+    rerender(<EventDetailPanel {...base} event={{ ...event, entry_fee: 0 }} />);
+    expect(screen.getByText("Free entry")).toBeInTheDocument();
+    rerender(
+      <EventDetailPanel {...base} event={{ ...event, entry_fee: undefined }} />,
+    );
+    expect(screen.queryByText(/RON|Free entry/)).not.toBeInTheDocument();
+  });
+
+  it("links the venue card only when the venue has a page, and says so otherwise", () => {
+    const { rerender } = render(
+      <EventDetailPanel
+        {...base}
+        venue={{
+          name: "Sophie",
+          address: "Str. 5",
+          ratingLabel: "4.7",
+          href: "/places/sophie",
+        }}
+      />,
+    );
+    expect(screen.getByRole("link", { name: /Sophie/ })).toHaveAttribute(
+      "href",
+      "/places/sophie",
+    );
+    expect(screen.queryByText(labels.venueNoPage)).not.toBeInTheDocument();
+
+    rerender(<EventDetailPanel {...base} venue={{ name: "Sophie" }} />);
+    expect(screen.queryByRole("link")).not.toBeInTheDocument();
+    expect(screen.getByText(labels.venueNoPage)).toBeInTheDocument();
+  });
+
+  it("previews five performers and reveals the rest on request", () => {
+    const performers = ["A", "B", "C", "D", "E", "F", "G"];
+    render(
+      <EventDetailPanel
+        {...base}
+        performers={performers}
+        showAllPerformersLabel="Show all 7"
+      />,
+    );
+    expect(screen.queryByText("F")).not.toBeInTheDocument();
+    fireEvent.click(screen.getByRole("button", { name: "Show all 7" }));
+    expect(screen.getByText("F")).toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "Show all 7" }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("clamps a long description behind Read more and prints the placeholder for none", () => {
+    const long = "x".repeat(300);
+    const { rerender } = render(
+      <EventDetailPanel {...base} event={{ ...event, description: long }} />,
+    );
+    expect(screen.getByText(long).className).toContain("line-clamp-4");
+    fireEvent.click(screen.getByRole("button", { name: "Read more" }));
+    expect(screen.getByText(long).className).not.toContain("line-clamp-4");
+    expect(
+      screen.getByRole("button", { name: "Read less" }),
+    ).toBeInTheDocument();
+
+    rerender(<EventDetailPanel {...base} />);
+    expect(screen.getByText("Event details coming soon.")).toBeInTheDocument();
+  });
+
+  it("dims the poster and mutes the title when ended, not the whole panel", () => {
+    render(
+      <EventDetailPanel
+        {...base}
+        status="ended"
+        event={{ ...event, poster_url: "p.jpg" }}
+      />,
+    );
+    expect(screen.getByRole("img").parentElement?.className).toContain(
+      "saturate-",
+    );
+    expect(
+      screen.getByRole("heading", { name: "Brides & Bubbles" }).className,
+    ).toContain("text-muted-foreground");
+  });
+});
+
+describe("EventDetailFooter", () => {
+  it("lays out the ghosts in one row above the primary", () => {
+    render(
+      <EventDetailFooter
+        ghosts={[
+          <EventDetailGhostAction key="a" href="/a">
+            Directions
+          </EventDetailGhostAction>,
+          <EventDetailGhostAction key="b" href="/b">
+            Event page
+          </EventDetailGhostAction>,
+        ]}
+        primary={<button type="button">Reserve</button>}
+      />,
+    );
+    expect(
+      screen.getByRole("link", { name: "Directions" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("link", { name: "Event page" }),
+    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Reserve" })).toBeInTheDocument();
+  });
+});
+
+describe("EventDetailPanelError", () => {
+  it("offers a retry and a way onward", () => {
+    const onRetry = vi.fn();
+    render(
+      <EventDetailPanelError
+        title="We could not load this event"
+        description="Try again."
+        retryLabel="Try again"
+        onRetry={onRetry}
+        secondaryLabel="See what's on tonight"
+        secondaryHref="/events/schedule"
+      />,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Try again" }));
+    expect(onRetry).toHaveBeenCalled();
+    expect(
+      screen.getByRole("link", { name: "See what's on tonight" }),
+    ).toHaveAttribute("href", "/events/schedule");
+  });
+});