@bearmenu/ui 0.8.13 → 0.8.15

package/src/components/place-card.test.tsx

@@ -1,16 +1,26 @@
 import { describe, it, expect, vi } from "vitest";
 import { render, screen, fireEvent } from "@testing-library/react";
-import { PlaceCard } from "./place-card";
+import { PlaceCard, PlaceCardSkeleton } from "./place-card";
 import type { PlaceCardLabels, PlacePreview } from "./place-types";
 
 // ─── Fixtures ─────────────────────────────────────────────────────────────────
 
 const LABELS: PlaceCardLabels = {
-  open: "Open",
   closed: "Closed",
-  until: "until",
-  opensAt: "opens at",
-  currency: "RON",
+  viewDetails: (name) => `View details for ${name}`,
+  priceLevel: (level) => `Price level ${level} of 4`,
+  grade: {
+    soft: "Worth exploring",
+    bands: {
+      exceptional: "Exceptional",
+      great: "Great",
+      good: "Good",
+      decent: "Decent",
+      weak: "Weak",
+    },
+    aria: (value) => `Grade ${value} out of 10`,
+    capped: "Capped",
+  },
 };
 
 function makePlace(overrides: Partial<PlacePreview> = {}): PlacePreview {
@@ -25,163 +35,241 @@ function makePlace(overrides: Partial<PlacePreview> = {}): PlacePreview {
 // ─── Tests ────────────────────────────────────────────────────────────────────
 
 describe("PlaceCard", () => {
-  // ─── Happy path ─────────────────────────────────────────────────────────────
+  it("renders the name and an accessible card label", () => {
+    render(<PlaceCard place={makePlace()} labels={LABELS} onOpen={vi.fn()} />);
+    expect(screen.getByText("Test Place")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "View details for Test Place" })).toBeInTheDocument();
+  });
 
-  it("renders place name", () => {
-    render(<PlaceCard place={makePlace()} labels={LABELS} />);
+  it("is a plain block — no role, no tab stop — without href or onOpen", () => {
+    const { container } = render(<PlaceCard place={makePlace()} labels={LABELS} />);
     expect(screen.getByText("Test Place")).toBeInTheDocument();
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+    expect(screen.queryByRole("link")).not.toBeInTheDocument();
+    expect(container.querySelector("[tabindex]")).not.toBeInTheDocument();
+    expect(container.querySelector(".cursor-pointer")).not.toBeInTheDocument();
   });
 
-  it("renders rating when provided", () => {
+  // ─── Headline metric ────────────────────────────────────────────────────────
+
+  it("shows the grade over the star when the place has one", () => {
     render(
       <PlaceCard
-        place={makePlace({ rating: { rating: 4.5, count: 120 } })}
+        place={makePlace({
+          rating: { rating: 4.5, count: 120 },
+          reviews_digest: { grade: { overall: 8.2 } },
+        })}
         labels={LABELS}
       />
     );
-    expect(screen.getByText("4.5")).toBeInTheDocument();
-    expect(screen.getByText("(120)")).toBeInTheDocument();
+    expect(screen.getByLabelText("Grade 8.2 out of 10")).toBeInTheDocument();
+    expect(screen.queryByText("4.5")).not.toBeInTheDocument();
   });
 
-  it("does not render rating when omitted", () => {
-    render(<PlaceCard place={makePlace()} labels={LABELS} />);
-    // No star-rating text should appear
-    expect(screen.queryByText(/^\d+\.\d+$/)).not.toBeInTheDocument();
+  it("falls back to the star rating when there is no grade", () => {
+    render(<PlaceCard place={makePlace({ rating: { rating: 4.5, count: 120 } })} labels={LABELS} />);
+    expect(screen.getByText("4.5")).toBeInTheDocument();
   });
 
-  // ─── onClick / interactive behaviour ────────────────────────────────────────
-
-  it("renders a <button> with cursor-pointer class when onClick is provided", () => {
-    const onClick = vi.fn();
-    render(<PlaceCard place={makePlace()} labels={LABELS} onClick={onClick} />);
-    const button = screen.getByRole("button");
-    expect(button).toBeInTheDocument();
-    expect(button.className).toContain("cursor-pointer");
+  it("falls back to the star when the grade is soft — the xs slot has no room for the sentence", () => {
+    render(
+      <PlaceCard
+        place={makePlace({
+          rating: { rating: 4.5, count: 120 },
+          reviews_digest: { grade: { overall: 5.1, show_number: false } },
+        })}
+        labels={LABELS}
+      />
+    );
+    expect(screen.getByText("4.5")).toBeInTheDocument();
+    expect(screen.queryByText("Worth exploring")).not.toBeInTheDocument();
   });
 
-  it("renders a <div> (no button role) when onClick is omitted", () => {
+  it("renders nothing in the metric slot without rating or grade", () => {
     render(<PlaceCard place={makePlace()} labels={LABELS} />);
-    expect(screen.queryByRole("button")).not.toBeInTheDocument();
-  });
-
-  it("fires onClick with the place object when clicked", () => {
-    const onClick = vi.fn();
-    const place = makePlace({ name: "Clickable Place" });
-    render(<PlaceCard place={place} labels={LABELS} onClick={onClick} />);
-    fireEvent.click(screen.getByRole("button"));
-    expect(onClick).toHaveBeenCalledTimes(1);
-    expect(onClick).toHaveBeenCalledWith(place);
+    expect(screen.queryByText(/^\d+\.\d+$/)).not.toBeInTheDocument();
   });
 
-  // ─── Thumbnail fallback ──────────────────────────────────────────────────────
-
-  it("renders UtensilsCrossed icon when thumbnail_url is missing", () => {
-    render(<PlaceCard place={makePlace()} labels={LABELS} />);
-    // The icon is aria-hidden but we can check that no <img> is rendered
-    expect(screen.queryByRole("img")).not.toBeInTheDocument();
-    // Verify the container still renders (icon placeholder)
-    const heading = screen.getByText("Test Place");
-    expect(heading).toBeInTheDocument();
-  });
+  // ─── Meta rows ──────────────────────────────────────────────────────────────
 
-  it("renders image when thumbnail_url is provided", () => {
+  it("renders the first cuisine and the price level", () => {
     render(
       <PlaceCard
-        place={makePlace({ thumbnail_url: "https://example.com/thumb.jpg" })}
+        place={makePlace({ cuisines: ["italian", "pizza"], price_dishes: { price_score: 2 } })}
         labels={LABELS}
       />
     );
-    expect(screen.getByRole("img")).toBeInTheDocument();
+    expect(screen.getByText("italian")).toBeInTheDocument();
+    expect(screen.queryByText("pizza")).not.toBeInTheDocument();
+    expect(screen.getByLabelText("Price level 2 of 4")).toBeInTheDocument();
+  });
+
+  it("clamps an out-of-range price level instead of throwing", () => {
+    render(<PlaceCard place={makePlace({ price_drinks: { price_score: 7 } })} labels={LABELS} />);
+    expect(screen.getByLabelText("Price level 7 of 4")).toHaveTextContent("$$$$");
   });
 
-  it("falls back to UtensilsCrossed icon when image errors", () => {
+  it("prefers distance over the neighbourhood once it is known", () => {
     render(
       <PlaceCard
-        place={makePlace({ thumbnail_url: "https://example.com/thumb.jpg" })}
+        place={makePlace({
+          areas: [{ name: "Centru" }],
+          location: { distance: { meters: 1240 } },
+        })}
         labels={LABELS}
       />
     );
-    const img = screen.getByRole("img");
-    expect(img).toBeInTheDocument();
-
-    // Trigger the error handler
-    fireEvent.error(img);
-
-    // Image should be replaced by the fallback (no <img> in DOM)
-    expect(screen.queryByRole("img")).not.toBeInTheDocument();
+    expect(screen.getByText("1.2 km")).toBeInTheDocument();
+    expect(screen.queryByText("Centru")).not.toBeInTheDocument();
   });
 
-  // ─── Open / Closed status labels ────────────────────────────────────────────
+  it("shows the neighbourhood without geolocation, and metres under a kilometre", () => {
+    const { rerender } = render(
+      <PlaceCard place={makePlace({ areas: [{ name: "Centru" }] })} labels={LABELS} />
+    );
+    expect(screen.getByText("Centru")).toBeInTheDocument();
 
-  it("shows labels.open text when place.open_now is true", () => {
-    render(
-      <PlaceCard place={makePlace({ open_now: true })} labels={LABELS} />
+    rerender(
+      <PlaceCard place={makePlace({ location: { distance: { meters: 340 } } })} labels={LABELS} />
     );
-    expect(screen.getByText("Open")).toBeInTheDocument();
+    expect(screen.getByText("340 m")).toBeInTheDocument();
   });
 
-  it("shows labels.closed text when place.open_now is false", () => {
-    render(
+  it("shows the closed pill only when open_now is explicitly false", () => {
+    const { rerender } = render(
       <PlaceCard place={makePlace({ open_now: false })} labels={LABELS} />
     );
     expect(screen.getByText("Closed")).toBeInTheDocument();
+
+    rerender(<PlaceCard place={makePlace()} labels={LABELS} />);
+    expect(screen.queryByText("Closed")).not.toBeInTheDocument();
+  });
+
+  it("renders the footer under a separator", () => {
+    const { container } = render(
+      <PlaceCard place={makePlace()} labels={LABELS} footer={<span>Served as X</span>} />
+    );
+    expect(screen.getByText("Served as X")).toBeInTheDocument();
+    expect(container.querySelector('[data-slot="separator"]')).toBeInTheDocument();
+  });
+
+  // ─── Cover image ────────────────────────────────────────────────────────────
+
+  it("renders the placeholder without a cover, and after the cover fails", () => {
+    const { rerender } = render(<PlaceCard place={makePlace()} labels={LABELS} />);
+    expect(screen.queryByRole("img")).not.toBeInTheDocument();
+
+    rerender(
+      <PlaceCard place={makePlace({ cover_url: "https://example.com/cover.jpg" })} labels={LABELS} />
+    );
+    const img = screen.getByRole("img");
+    expect(img).toHaveAttribute("alt", "Test Place");
+    fireEvent.error(img);
+    expect(screen.queryByRole("img")).not.toBeInTheDocument();
   });
 
-  it("uses labels.until with closes_at hour when open_now is true", () => {
+  it("routes the cover through an injected image component with the sizes and priority hints", () => {
+    const ImageComponent = vi.fn(() => <span data-testid="injected-image" />);
     render(
       <PlaceCard
-        place={makePlace({
-          open_now: true,
-          today_schedule: [{ opens_at: 9, closes_at: 22 }],
-        })}
+        place={makePlace({ cover_url: "place/1/cover.avif" })}
         labels={LABELS}
+        imageComponent={ImageComponent}
+        imageSizes="220px"
+        priority
       />
     );
-    // Renders "· until 22:00"
-    expect(screen.getByText(/until 22:00/)).toBeInTheDocument();
+    expect(screen.getByTestId("injected-image")).toBeInTheDocument();
+    expect(ImageComponent).toHaveBeenCalledWith(
+      expect.objectContaining({
+        src: "place/1/cover.avif",
+        alt: "Test Place",
+        sizes: "220px",
+        priority: true,
+      }),
+      undefined
+    );
   });
 
-  it("uses labels.opensAt with opens_at hour when open_now is false", () => {
+  // ─── Interaction ────────────────────────────────────────────────────────────
+
+  it("opens on click, Enter and Space without an href", () => {
+    const onOpen = vi.fn();
+    const place = makePlace();
+    render(<PlaceCard place={place} labels={LABELS} onOpen={onOpen} />);
+    const root = screen.getByRole("button");
+    fireEvent.click(root);
+    fireEvent.keyDown(root, { key: "Enter" });
+    fireEvent.keyDown(root, { key: " " });
+    expect(onOpen).toHaveBeenCalledTimes(3);
+    expect(onOpen).toHaveBeenCalledWith(place);
+  });
+
+  it("renders a real anchor for an href and intercepts only plain left-clicks", () => {
+    const onOpen = vi.fn();
     render(
-      <PlaceCard
-        place={makePlace({
-          open_now: false,
-          today_schedule: [{ opens_at: 9, closes_at: 22 }],
-        })}
-        labels={LABELS}
-      />
+      <PlaceCard place={makePlace()} labels={LABELS} href="/ro/cluj/places/test-place" onOpen={onOpen} />
     );
-    expect(screen.getByText(/opens at 09:00/)).toBeInTheDocument();
+    const link = screen.getByRole("link", { name: "View details for Test Place" });
+    expect(link).toHaveAttribute("href", "/ro/cluj/places/test-place");
+
+    const plain = fireEvent.click(link);
+    expect(plain).toBe(false);
+    expect(onOpen).toHaveBeenCalledTimes(1);
+
+    const modified = fireEvent.click(link, { metaKey: true });
+    expect(modified).toBe(true);
+    expect(onOpen).toHaveBeenCalledTimes(1);
   });
 
-  // ─── Schedule priority: today_schedule[0] over hours[0] ─────────────────────
+  it("keeps the linked root mounted across re-renders (motion wrapper is memoised)", () => {
+    const place = makePlace({ cover_url: "https://example.com/cover.jpg" });
+    const { rerender } = render(<PlaceCard place={place} labels={LABELS} href="/x" />);
+    const anchor = screen.getByRole("link");
+    const img = screen.getByRole("img");
 
-  it("prefers today_schedule[0] over hours[0] for schedule display", () => {
+    // A fresh labels object forces a render; an un-memoised `motion.create`
+    // would give the root a new element type and React would remount both.
+    rerender(<PlaceCard place={place} labels={{ ...LABELS }} href="/x" />);
+    expect(screen.getByRole("link")).toBe(anchor);
+    expect(screen.getByRole("img")).toBe(img);
+  });
+
+  it("uses the injected link component", () => {
+    const LinkComponent = vi.fn(({ href, children }: { href: string; children: React.ReactNode }) => (
+      <a href={href} data-testid="injected-link">
+        {children}
+      </a>
+    ));
     render(
-      <PlaceCard
-        place={makePlace({
-          open_now: false,
-          today_schedule: [{ opens_at: 11, closes_at: 23 }],
-          hours: [{ opens_at: 9, closes_at: 22 }],
-        })}
-        labels={LABELS}
-      />
+      <PlaceCard place={makePlace()} labels={LABELS} href="/x" linkComponent={LinkComponent} />
     );
-    // today_schedule says opens at 11, hours says 9 — expect 11
-    expect(screen.getByText(/opens at 11:00/)).toBeInTheDocument();
-    expect(screen.queryByText(/09:00/)).not.toBeInTheDocument();
+    expect(screen.getByTestId("injected-link")).toHaveAttribute("href", "/x");
   });
 
-  it("falls back to hours[0] when today_schedule is absent", () => {
+  it("keeps the photo overlay outside the interactive root", () => {
     render(
       <PlaceCard
-        place={makePlace({
-          open_now: false,
-          hours: [{ opens_at: 9, closes_at: 22 }],
-        })}
+        place={makePlace()}
         labels={LABELS}
+        onOpen={vi.fn()}
+        photoOverlay={<button type="button">Trending</button>}
       />
     );
-    expect(screen.getByText(/opens at 09:00/)).toBeInTheDocument();
+    const overlay = screen.getByRole("button", { name: "Trending" });
+    const card = screen.getByRole("button", { name: "View details for Test Place" });
+    expect(card).not.toContainElement(overlay);
+  });
+});
+
+describe("PlaceCardSkeleton", () => {
+  it("is hidden from assistive tech and reserves the footer when asked", () => {
+    const { container, rerender } = render(<PlaceCardSkeleton />);
+    expect(container.firstChild).toHaveAttribute("aria-hidden", "true");
+    expect(container.querySelector('[data-slot="separator"]')).not.toBeInTheDocument();
+
+    rerender(<PlaceCardSkeleton footer={<span data-testid="footer-skeleton" />} />);
+    expect(container.querySelector('[data-slot="separator"]')).toBeInTheDocument();
+    expect(screen.getByTestId("footer-skeleton")).toBeInTheDocument();
   });
 });