@bearmenu/ui 0.1.1 → 0.5.0

package/src/components/place-about-tab.test.tsx

@@ -0,0 +1,325 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { PlaceAboutTab } from "./place-about-tab";
+import type { PlaceAboutTabLabels, PlacePreview } from "./place-types";
+
+// ─── Fixtures ─────────────────────────────────────────────────────────────────
+
+const LABELS: PlaceAboutTabLabels = {
+  overview: "Overview",
+  description: "Description",
+  whatPeopleSay: "What people say",
+  contactAndLocation: "Contact & Location",
+  address: "Address",
+  instagram: "Instagram",
+  facebook: "Facebook",
+  todayHours: "Today's hours",
+  statusOpen: "Open now",
+  statusClosed: "Closed",
+  typicalBusyness: "Typical busyness",
+  cuisines: "Cuisines",
+  amenities: "Amenities",
+  paymentOptions: "Payment options",
+  accessibility: "Accessibility",
+  parking: "Parking",
+  nearbyLandmarks: "Nearby landmarks",
+  neighborhood: "Neighborhood",
+  businessInformation: "Business information",
+  type: "Type",
+  status: "Status",
+  amenityLabels: { wifi: "Free Wi-Fi" },
+  paymentLabels: {},
+  accessibilityLabels: {},
+  parkingLabels: {},
+  typeLabels: {},
+  statusLabels: {},
+};
+
+function makePlace(overrides: Partial<PlacePreview> = {}): PlacePreview {
+  return {
+    id: "1",
+    slug: "test-place",
+    name: "Test Place",
+    ...overrides,
+  };
+}
+
+// ─── Tests ────────────────────────────────────────────────────────────────────
+
+describe("PlaceAboutTab", () => {
+  // ─── Contact section: each field conditionally rendered ─────────────────────
+
+  it("renders phone link only when place.phone is provided", () => {
+    const { rerender } = render(
+      <PlaceAboutTab place={makePlace({ phone: "+40700000000" })} labels={LABELS} />
+    );
+    expect(screen.getByText("+40700000000")).toBeInTheDocument();
+
+    rerender(<PlaceAboutTab place={makePlace()} labels={LABELS} />);
+    expect(screen.queryByText("+40700000000")).not.toBeInTheDocument();
+  });
+
+  it("renders website link only when place.website_url is provided", () => {
+    render(
+      <PlaceAboutTab
+        place={makePlace({ website_url: "https://example.com" })}
+        labels={LABELS}
+      />
+    );
+    expect(screen.getByText("https://example.com")).toBeInTheDocument();
+  });
+
+  it("does not render website link when website_url is absent", () => {
+    render(<PlaceAboutTab place={makePlace()} labels={LABELS} />);
+    expect(screen.queryByRole("link", { name: /http/ })).not.toBeInTheDocument();
+  });
+
+  it("renders Instagram link only when place.socials.instagram_url is provided", () => {
+    render(
+      <PlaceAboutTab
+        place={makePlace({ socials: { instagram_url: "https://instagram.com/test" } })}
+        labels={LABELS}
+      />
+    );
+    expect(screen.getByText("Instagram")).toBeInTheDocument();
+  });
+
+  it("does not render Instagram link when socials.instagram_url is absent", () => {
+    render(<PlaceAboutTab place={makePlace()} labels={LABELS} />);
+    expect(screen.queryByText("Instagram")).not.toBeInTheDocument();
+  });
+
+  it("renders Facebook link only when place.socials.facebook_url is provided", () => {
+    render(
+      <PlaceAboutTab
+        place={makePlace({ socials: { facebook_url: "https://facebook.com/test" } })}
+        labels={LABELS}
+      />
+    );
+    expect(screen.getByText("Facebook")).toBeInTheDocument();
+  });
+
+  it("does not render Facebook link when socials.facebook_url is absent", () => {
+    render(<PlaceAboutTab place={makePlace()} labels={LABELS} />);
+    expect(screen.queryByText("Facebook")).not.toBeInTheDocument();
+  });
+
+  // ─── mapSlot ────────────────────────────────────────────────────────────────
+
+  it("renders mapSlot when prop is passed (regardless of busyness data)", () => {
+    render(
+      <PlaceAboutTab
+        place={makePlace()}
+        labels={LABELS}
+        mapSlot={<div data-testid="map-slot">Map</div>}
+      />
+    );
+    expect(screen.getByTestId("map-slot")).toBeInTheDocument();
+  });
+
+  it("does not render mapSlot content when prop is omitted", () => {
+    render(<PlaceAboutTab place={makePlace()} labels={LABELS} />);
+    expect(screen.queryByTestId("map-slot")).not.toBeInTheDocument();
+  });
+
+  // ─── busynessSlot ───────────────────────────────────────────────────────────
+
+  it("renders busynessSlot when both the prop and place.busyness entries are present", () => {
+    render(
+      <PlaceAboutTab
+        place={makePlace({ busyness: [{ hour: 12, score: 80 }] })}
+        labels={LABELS}
+        busynessSlot={<div data-testid="busyness-slot">Chart</div>}
+      />
+    );
+    expect(screen.getByTestId("busyness-slot")).toBeInTheDocument();
+  });
+
+  it("does NOT render busynessSlot when prop is present but place.busyness is empty", () => {
+    render(
+      <PlaceAboutTab
+        place={makePlace({ busyness: [] })}
+        labels={LABELS}
+        busynessSlot={<div data-testid="busyness-slot">Chart</div>}
+      />
+    );
+    expect(screen.queryByTestId("busyness-slot")).not.toBeInTheDocument();
+  });
+
+  it("does NOT render busynessSlot when prop is present but place.busyness is absent", () => {
+    render(
+      <PlaceAboutTab
+        place={makePlace()}
+        labels={LABELS}
+        busynessSlot={<div data-testid="busyness-slot">Chart</div>}
+      />
+    );
+    expect(screen.queryByTestId("busyness-slot")).not.toBeInTheDocument();
+  });
+
+  it("does NOT render busynessSlot when the prop is omitted even if busyness data exists", () => {
+    render(
+      <PlaceAboutTab
+        place={makePlace({ busyness: [{ hour: 12, score: 80 }] })}
+        labels={LABELS}
+      />
+    );
+    expect(screen.queryByTestId("busyness-slot")).not.toBeInTheDocument();
+  });
+
+  // ─── onLinkClick ────────────────────────────────────────────────────────────
+
+  it("fires onLinkClick with kind='phone' and correct url on phone click", () => {
+    const onLinkClick = vi.fn();
+    render(
+      <PlaceAboutTab
+        place={makePlace({ phone: "+40700000000" })}
+        labels={LABELS}
+        onLinkClick={onLinkClick}
+      />
+    );
+    fireEvent.click(screen.getByText("+40700000000"));
+    expect(onLinkClick).toHaveBeenCalledWith("phone", "+40700000000");
+  });
+
+  it("fires onLinkClick with kind='website' on website click", () => {
+    const onLinkClick = vi.fn();
+    render(
+      <PlaceAboutTab
+        place={makePlace({ website_url: "https://example.com" })}
+        labels={LABELS}
+        onLinkClick={onLinkClick}
+      />
+    );
+    fireEvent.click(screen.getByText("https://example.com"));
+    expect(onLinkClick).toHaveBeenCalledWith("website", "https://example.com");
+  });
+
+  it("fires onLinkClick with kind='instagram' on instagram click", () => {
+    const onLinkClick = vi.fn();
+    render(
+      <PlaceAboutTab
+        place={makePlace({ socials: { instagram_url: "https://instagram.com/test" } })}
+        labels={LABELS}
+        onLinkClick={onLinkClick}
+      />
+    );
+    fireEvent.click(screen.getByText("Instagram"));
+    expect(onLinkClick).toHaveBeenCalledWith(
+      "instagram",
+      "https://instagram.com/test"
+    );
+  });
+
+  it("fires onLinkClick with kind='facebook' on facebook click", () => {
+    const onLinkClick = vi.fn();
+    render(
+      <PlaceAboutTab
+        place={makePlace({ socials: { facebook_url: "https://facebook.com/test" } })}
+        labels={LABELS}
+        onLinkClick={onLinkClick}
+      />
+    );
+    fireEvent.click(screen.getByText("Facebook"));
+    expect(onLinkClick).toHaveBeenCalledWith(
+      "facebook",
+      "https://facebook.com/test"
+    );
+  });
+
+  // ─── Today's hours card ──────────────────────────────────────────────────────
+
+  it("renders today's hours card when place.hours has entries", () => {
+    render(
+      <PlaceAboutTab
+        place={makePlace({ hours: [{ opens_at: 9, closes_at: 22 }] })}
+        labels={LABELS}
+      />
+    );
+    expect(screen.getByText("Today's hours")).toBeInTheDocument();
+    expect(screen.getByText("09:00 - 22:00")).toBeInTheDocument();
+  });
+
+  it("does NOT render today's hours card when place.hours is empty", () => {
+    render(
+      <PlaceAboutTab place={makePlace({ hours: [] })} labels={LABELS} />
+    );
+    expect(screen.queryByText("Today's hours")).not.toBeInTheDocument();
+  });
+
+  it("does NOT render today's hours card when place.hours is absent", () => {
+    render(<PlaceAboutTab place={makePlace()} labels={LABELS} />);
+    expect(screen.queryByText("Today's hours")).not.toBeInTheDocument();
+  });
+
+  // ─── amenityLabels fallback to humanizeEnum ──────────────────────────────────
+
+  it("uses the amenityLabels map when the key is present", () => {
+    render(
+      <PlaceAboutTab
+        place={makePlace({ amenities: ["wifi"] })}
+        labels={LABELS}
+      />
+    );
+    // LABELS.amenityLabels.wifi = "Free Wi-Fi"
+    expect(screen.getByText("Free Wi-Fi")).toBeInTheDocument();
+  });
+
+  it("falls back to humanizeEnum (underscores → spaces) when key missing from amenityLabels", () => {
+    render(
+      <PlaceAboutTab
+        place={makePlace({ amenities: ["outdoor_seating"] })}
+        labels={LABELS}
+      />
+    );
+    // humanizeEnum("outdoor_seating") → "outdoor seating"
+    expect(screen.getByText("outdoor seating")).toBeInTheDocument();
+  });
+
+  // ─── Description card visibility ────────────────────────────────────────────
+
+  it("renders description card when description is set", () => {
+    render(
+      <PlaceAboutTab
+        place={makePlace({ description: "A great place to eat." })}
+        labels={LABELS}
+      />
+    );
+    expect(screen.getByText("A great place to eat.")).toBeInTheDocument();
+  });
+
+  it("renders description card when generative_summary is set", () => {
+    render(
+      <PlaceAboutTab
+        place={makePlace({ generative_summary: "AI summary here." })}
+        labels={LABELS}
+      />
+    );
+    expect(screen.getByText("AI summary here.")).toBeInTheDocument();
+  });
+
+  it("renders description card when review_summary is set", () => {
+    render(
+      <PlaceAboutTab
+        place={makePlace({ review_summary: "People love it." })}
+        labels={LABELS}
+      />
+    );
+    expect(screen.getByText("People love it.")).toBeInTheDocument();
+  });
+
+  it("hides description card when none of description/generative_summary/review_summary are set", () => {
+    render(<PlaceAboutTab place={makePlace()} labels={LABELS} />);
+    // The card header title is "Description" which is the same as labels.description.
+    // The description card renders labels.description as its CardTitle.
+    // Use a more specific query: look for the card header content.
+    // Since labels.contactAndLocation is always rendered, we need to count occurrences.
+    // "Description" appears in labels.description; if no card exists it should not appear at all.
+    expect(screen.queryByText("A great place to eat.")).not.toBeInTheDocument();
+    // Verify no card title "Description" is rendered (description card uses labels.description as title)
+    // Note: "Description" also equals labels.description label inside the card — use getAllByText and check count
+    const descTexts = screen.queryAllByText("Description");
+    // When description card is hidden, "Description" label should not appear
+    expect(descTexts).toHaveLength(0);
+  });
+});