@balby/booking-search 1.0.0

package/src/components/booking-search/tests/index.test.tsx

@@ -0,0 +1,424 @@
+import { test, expect, describe, beforeEach } from "bun:test"
+import React from "react"
+import { render, screen, fireEvent, waitFor } from "@testing-library/react"
+import { BookingSearch } from "../index"
+import type { SearchLocation, AvailabilityDay, BookingSearchPayload } from "../../../types/booking"
+import { format, addDays } from "date-fns"
+
+describe("BookingSearch", () => {
+  const today = new Date()
+  const tomorrow = addDays(today, 1)
+  const nextWeek = addDays(today, 7)
+
+  const mockLocations: SearchLocation[] = [
+    { id: "1", name: "Rome", type: "City" },
+    { id: "2", name: "Milan", type: "City" },
+    { id: "3", name: "Venice", type: "City" },
+  ]
+
+  const mockAvailability: AvailabilityDay[] = Array.from({ length: 30 }, (_, i) => {
+    const date = addDays(today, i)
+    return {
+      date: format(date, "yyyy-MM-dd"),
+      isAvailable: true,
+      price: 100 + i * 5,
+    }
+  })
+
+  const mockOnSearch = (params: BookingSearchPayload) => {}
+
+  beforeEach(() => {
+    // Mock window.innerWidth for desktop view
+    Object.defineProperty(window, "innerWidth", {
+      writable: true,
+      configurable: true,
+      value: 1024,
+    })
+  })
+
+  test("renders all search components on desktop", () => {
+    render(
+      <BookingSearch
+        availability={mockAvailability}
+        locations={mockLocations}
+        onSearch={mockOnSearch}
+      />
+    )
+
+    expect(screen.getByText("Destination")).toBeDefined()
+    expect(screen.getByText("Check-in - Check-out")).toBeDefined()
+    expect(screen.getByText("Guests")).toBeDefined()
+    expect(screen.getByRole("button", { name: /search/i })).toBeDefined()
+  })
+
+  test("displays default location when provided", () => {
+    const firstLocation = mockLocations[0]
+    if (!firstLocation) return
+
+    render(
+      <BookingSearch
+        availability={mockAvailability}
+        locations={mockLocations}
+        onSearch={mockOnSearch}
+        defaultValues={{
+          location: firstLocation,
+          checkIn: null,
+          checkOut: null,
+          adults: 2,
+          children: 0,
+        }}
+      />
+    )
+
+    expect(screen.getByText("Rome")).toBeDefined()
+  })
+
+  test("displays default dates when provided", () => {
+    render(
+      <BookingSearch
+        availability={mockAvailability}
+        locations={mockLocations}
+        onSearch={mockOnSearch}
+        defaultValues={{
+          location: null,
+          checkIn: today,
+          checkOut: nextWeek,
+          adults: 2,
+          children: 0,
+        }}
+      />
+    )
+
+    const dateText = screen.getByText(/\d{2} \w{3} - \d{2} \w{3}/)
+    expect(dateText).toBeDefined()
+  })
+
+  test("displays default guest count when provided", () => {
+    render(
+      <BookingSearch
+        availability={mockAvailability}
+        locations={mockLocations}
+        onSearch={mockOnSearch}
+        defaultValues={{
+          location: null,
+          checkIn: null,
+          checkOut: null,
+          adults: 3,
+          children: 2,
+        }}
+      />
+    )
+
+    expect(screen.getByText("3 adulti, 2 bambini")).toBeDefined()
+  })
+
+  test("search button is disabled when location is not selected", () => {
+    render(
+      <BookingSearch
+        availability={mockAvailability}
+        locations={mockLocations}
+        onSearch={mockOnSearch}
+      />
+    )
+
+    const searchButton = screen.getByRole("button", { name: /search/i })
+    expect(searchButton.hasAttribute("disabled")).toBe(true)
+  })
+
+  test("search button is disabled when dates are not selected", () => {
+    const firstLocation = mockLocations[0]
+    if (!firstLocation) return
+
+    render(
+      <BookingSearch
+        availability={mockAvailability}
+        locations={mockLocations}
+        onSearch={mockOnSearch}
+        defaultValues={{
+          location: firstLocation,
+          checkIn: null,
+          checkOut: null,
+          adults: 2,
+          children: 0,
+        }}
+      />
+    )
+
+    const searchButton = screen.getByRole("button", { name: /search/i })
+    expect(searchButton.hasAttribute("disabled")).toBe(true)
+  })
+
+  test("search button is enabled when location and dates are selected", () => {
+    const firstLocation = mockLocations[0]
+    if (!firstLocation) return
+
+    render(
+      <BookingSearch
+        availability={mockAvailability}
+        locations={mockLocations}
+        onSearch={mockOnSearch}
+        defaultValues={{
+          location: firstLocation,
+          checkIn: today,
+          checkOut: nextWeek,
+          adults: 2,
+          children: 0,
+        }}
+      />
+    )
+
+    const searchButton = screen.getByRole("button", { name: /search/i })
+    expect(searchButton.hasAttribute("disabled")).toBe(false)
+  })
+
+  test("calls onSearch with correct parameters when search button is clicked", () => {
+    const firstLocation = mockLocations[0]
+    if (!firstLocation) return
+
+    let searchParams: BookingSearchPayload | null = null
+    const handleSearch = (params: BookingSearchPayload) => {
+      searchParams = params
+    }
+
+    render(
+      <BookingSearch
+        availability={mockAvailability}
+        locations={mockLocations}
+        onSearch={handleSearch}
+        defaultValues={{
+          location: firstLocation,
+          checkIn: today,
+          checkOut: nextWeek,
+          adults: 2,
+          children: 1,
+        }}
+      />
+    )
+
+    const searchButton = screen.getByRole("button", { name: /search/i })
+    expect(searchButton).toBeDefined()
+    fireEvent.click(searchButton)
+
+    expect(searchParams).not.toBeNull()
+    expect(searchParams!.location?.id).toBe(firstLocation.id)
+    expect(searchParams!.adults).toBe(2)
+    expect(searchParams!.children).toBe(1)
+  })
+
+  test("uses custom search button text when provided", () => {
+    render(
+      <BookingSearch
+        availability={mockAvailability}
+        locations={mockLocations}
+        onSearch={mockOnSearch}
+        searchButtonText="Ricerca"
+      />
+    )
+
+    expect(screen.getByText("Ricerca")).toBeDefined()
+  })
+
+  test("uses custom location placeholder when provided", () => {
+    render(
+      <BookingSearch
+        availability={mockAvailability}
+        locations={mockLocations}
+        onSearch={mockOnSearch}
+        locationPlaceholder="Custom placeholder"
+      />
+    )
+
+    expect(screen.getByText("Custom placeholder")).toBeDefined()
+  })
+
+  test("applies custom className to container", () => {
+    const { container } = render(
+      <BookingSearch
+        availability={mockAvailability}
+        locations={mockLocations}
+        onSearch={mockOnSearch}
+        className="custom-search-class"
+      />
+    )
+
+    const searchContainer = container.querySelector('[role="search"]')
+    expect(searchContainer?.classList.contains("custom-search-class")).toBe(true)
+  })
+
+  test("renders mobile view when window width is below 768px", () => {
+    // Mock mobile viewport
+    Object.defineProperty(window, "innerWidth", {
+      writable: true,
+      configurable: true,
+      value: 375,
+    })
+
+    // Trigger resize event
+    window.dispatchEvent(new Event("resize"))
+
+    render(
+      <BookingSearch
+        availability={mockAvailability}
+        locations={mockLocations}
+        onSearch={mockOnSearch}
+      />
+    )
+
+    // In mobile view, a dialog trigger button should be rendered
+    expect(screen.getByText("Dove vuoi andare?")).toBeDefined()
+  })
+
+  test("integrates all sub-components correctly", async () => {
+    render(
+      <BookingSearch
+        availability={mockAvailability}
+        locations={mockLocations}
+        onSearch={mockOnSearch}
+      />
+    )
+
+    // Test location selection
+    const locationButton = screen.getByRole("combobox")
+    expect(locationButton).toBeDefined()
+
+    // Test date picker
+    const dateButton = screen.getByRole("button", { name: "Select Date Range" })
+    expect(dateButton).toBeDefined()
+
+    // Test guest selector
+    const guestButton = screen.getByRole("button", { name: "Select guests" })
+    expect(guestButton).toBeDefined()
+
+    // Test search button
+    const searchButton = screen.getByRole("button", { name: /search/i })
+    expect(searchButton).toBeDefined()
+  })
+
+  test("passes minNights prop to DateRangePicker", () => {
+    render(
+      <BookingSearch
+        availability={mockAvailability}
+        locations={mockLocations}
+        onSearch={mockOnSearch}
+        minNights={3}
+      />
+    )
+
+    // The component should render without errors
+    expect(screen.getByText("Check-in - Check-out")).toBeDefined()
+  })
+
+  test("passes maxAdults prop to GuestSelector", () => {
+    render(
+      <BookingSearch
+        availability={mockAvailability}
+        locations={mockLocations}
+        onSearch={mockOnSearch}
+        maxAdults={10}
+      />
+    )
+
+    // The component should render without errors
+    expect(screen.getByText("Guests")).toBeDefined()
+  })
+
+  test("passes maxChildren prop to GuestSelector", () => {
+    render(
+      <BookingSearch
+        availability={mockAvailability}
+        locations={mockLocations}
+        onSearch={mockOnSearch}
+        maxChildren={5}
+      />
+    )
+
+    // The component should render without errors
+    expect(screen.getByText("Guests")).toBeDefined()
+  })
+
+  test("updates state when location is changed", async () => {
+    let searchParams: BookingSearchPayload | null = null
+    const handleSearch = (params: BookingSearchPayload) => {
+      searchParams = params
+    }
+
+    render(
+      <BookingSearch
+        availability={mockAvailability}
+        locations={mockLocations}
+        onSearch={handleSearch}
+        defaultValues={{
+          location: null,
+          checkIn: today,
+          checkOut: nextWeek,
+          adults: 2,
+          children: 0,
+        }}
+      />
+    )
+
+    // Initially search button should be disabled
+    const searchButton = screen.getByRole("button", { name: /search/i })
+    expect(searchButton.hasAttribute("disabled")).toBe(true)
+
+    // Open location combobox
+    const locationButton = screen.getByRole("combobox")
+    fireEvent.click(locationButton)
+
+    const locationItems = await waitFor(() => {
+      const items = screen.getAllByText("Rome")
+      expect(items.length).toBeGreaterThan(0)
+      return items
+    })
+
+    // Click on the location in the popover
+    const lastItem = locationItems[locationItems.length - 1]
+    if (lastItem) {
+      fireEvent.click(lastItem)
+    }
+
+    // Wait for state to update and get updated button reference
+    const updatedSearchButton = await waitFor(() => {
+      const btn = screen.getByRole("button", { name: /search/i })
+      expect(btn).toBeDefined()
+      expect(btn.hasAttribute("disabled")).toBe(false)
+      return btn
+    })
+
+    // Click search button
+    if (updatedSearchButton) {
+      fireEvent.click(updatedSearchButton)
+    }
+
+    // Verify search params include the selected location
+    const firstLocation = mockLocations[0]
+    await waitFor(() => {
+      expect(searchParams).not.toBeNull()
+      if (searchParams && firstLocation) {
+        expect(searchParams.location?.id).toBe(firstLocation.id)
+      }
+    })
+  })
+
+  test("has proper ARIA labels for accessibility", () => {
+    render(
+      <BookingSearch
+        availability={mockAvailability}
+        locations={mockLocations}
+        onSearch={mockOnSearch}
+      />
+    )
+
+    const searchContainer = screen.getByRole("search", { name: "Booking search" })
+    expect(searchContainer).toBeDefined()
+
+    const locationButton = screen.getByLabelText("Select location")
+    expect(locationButton).toBeDefined()
+
+    const dateButton = screen.getByLabelText("Select Date Range")
+    expect(dateButton).toBeDefined()
+
+    const guestButton = screen.getByLabelText("Select guests")
+    expect(guestButton).toBeDefined()
+  })
+})

package/src/components/booking-search/tests/location-combobox.test.tsx

@@ -0,0 +1,263 @@
+import { test, expect, describe, beforeEach } from "bun:test"
+import React from "react"
+import { render, screen, fireEvent, waitFor } from "@testing-library/react"
+import { LocationCombobox } from "../location-combobox"
+import type { SearchLocation } from "../../../types/booking"
+
+describe("LocationCombobox", () => {
+  const mockLocations: SearchLocation[] = [
+    { id: "1", name: "Rome", type: "City" },
+    { id: "2", name: "Milan", type: "City" },
+    { id: "3", name: "Venice", type: "City" },
+  ]
+
+  const mockOnChange = (location: SearchLocation | null) => {}
+
+  beforeEach(() => {
+    // Reset any state between tests if needed
+  })
+
+  test("renders with placeholder when no value is selected", () => {
+    render(
+      <LocationCombobox
+        locations={mockLocations}
+        value={null}
+        onChange={mockOnChange}
+        placeholder="Where do you want to go?"
+      />
+    )
+
+    expect(screen.getByText("Where do you want to go?")).toBeDefined()
+    expect(screen.getByText("Destination")).toBeDefined()
+  })
+
+  test("displays selected location", () => {
+    const firstLocation = mockLocations[0]
+    if (!firstLocation) return
+
+    render(
+      <LocationCombobox
+        locations={mockLocations}
+        value={firstLocation}
+        onChange={mockOnChange}
+      />
+    )
+
+    expect(screen.getByText("Rome")).toBeDefined()
+  })
+
+  test("opens popover when button is clicked", async () => {
+    render(
+      <LocationCombobox
+        locations={mockLocations}
+        value={null}
+        onChange={mockOnChange}
+      />
+    )
+
+    const button = screen.getByRole("combobox")
+    fireEvent.click(button)
+
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText("Search a destination...")).toBeDefined()
+    })
+  })
+
+  test("displays all locations in the popover", async () => {
+    render(
+      <LocationCombobox
+        locations={mockLocations}
+        value={null}
+        onChange={mockOnChange}
+      />
+    )
+
+    const button = screen.getByRole("combobox")
+    fireEvent.click(button)
+
+    await waitFor(() => {
+      for (const location of mockLocations) {
+        expect(screen.getAllByText(location.name).length).toBeGreaterThan(0)
+      }
+    })
+  })
+
+  test("calls onChange when a location is selected", async () => {
+    let selectedLocation: SearchLocation | null = null
+    const handleChange = (location: SearchLocation | null) => {
+      selectedLocation = location
+    }
+
+    render(
+      <LocationCombobox
+        locations={mockLocations}
+        value={null}
+        onChange={handleChange}
+      />
+    )
+
+    const button = screen.getByRole("combobox")
+    fireEvent.click(button)
+
+    const locationItems = await waitFor(() => {
+      const items = screen.getAllByText("Rome")
+      expect(items.length).toBeGreaterThan(0)
+      return items
+    })
+
+    // Click on the location in the popover (not the button)
+    const lastItem = locationItems[locationItems.length - 1]
+    if (lastItem) {
+      fireEvent.click(lastItem)
+    }
+
+    const firstLocation = mockLocations[0]
+    await waitFor(() => {
+      expect(selectedLocation).not.toBeNull()
+      if (selectedLocation && firstLocation) {
+        expect(selectedLocation.id).toBe(firstLocation.id)
+      }
+    })
+  })
+
+  test("toggles selection when clicking on already selected location", async () => {
+    const firstLocation = mockLocations[0]
+    if (!firstLocation) return
+
+    let selectedLocation: SearchLocation | null = firstLocation
+    const handleChange = (location: SearchLocation | null) => {
+      selectedLocation = location
+    }
+
+    render(
+      <LocationCombobox
+        locations={mockLocations}
+        value={firstLocation}
+        onChange={handleChange}
+      />
+    )
+
+    const button = screen.getByRole("combobox")
+    fireEvent.click(button)
+
+    const locationItems = await waitFor(() => {
+      const items = screen.getAllByText("Rome")
+      expect(items.length).toBeGreaterThan(0)
+      return items
+    })
+
+    const lastItem = locationItems[locationItems.length - 1]
+    if (lastItem) {
+      fireEvent.click(lastItem)
+    }
+
+    await waitFor(() => {
+      expect(selectedLocation).toBe(null)
+    })
+  })
+
+  test("disables the button when disabled prop is true", () => {
+    render(
+      <LocationCombobox
+        locations={mockLocations}
+        value={null}
+        onChange={mockOnChange}
+        disabled={true}
+      />
+    )
+
+    const button = screen.getByRole("combobox")
+    expect(button.hasAttribute("disabled")).toBe(true)
+  })
+
+  test("shows location type when available", async () => {
+    render(
+      <LocationCombobox
+        locations={mockLocations}
+        value={null}
+        onChange={mockOnChange}
+      />
+    )
+
+    const button = screen.getByRole("combobox")
+    fireEvent.click(button)
+
+    await waitFor(() => {
+      mockLocations.forEach((location) => {
+        if (location.type) {
+          expect(screen.getAllByText(location.type).length).toBeGreaterThan(0)
+        }
+      })
+    })
+  })
+
+  test("shows empty message when no locations match search", async () => {
+    render(
+      <LocationCombobox
+        locations={mockLocations}
+        value={null}
+        onChange={mockOnChange}
+      />
+    )
+
+    const button = screen.getByRole("combobox")
+    fireEvent.click(button)
+
+    await waitFor(() => {
+      const searchInput = screen.getByPlaceholderText("Search a destination...")
+      fireEvent.change(searchInput, { target: { value: "Nonexistent City" } })
+    })
+
+    await waitFor(() => {
+      expect(screen.getByText("No location found.")).toBeDefined()
+    })
+  })
+
+  test("applies custom className", () => {
+    const { container } = render(
+      <LocationCombobox
+        locations={mockLocations}
+        value={null}
+        onChange={mockOnChange}
+        className="custom-class"
+      />
+    )
+
+    const button = container.querySelector("button")
+    expect(button).toBeDefined()
+    expect(button?.classList.contains("custom-class")).toBe(true)
+  })
+
+  test("closes popover after selecting a location", async () => {
+    render(
+      <LocationCombobox
+        locations={mockLocations}
+        value={null}
+        onChange={mockOnChange}
+      />
+    )
+
+    const button = screen.getByRole("combobox")
+    expect(button).toBeDefined()
+    fireEvent.click(button)
+
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText("Search a destination...")).toBeDefined()
+    })
+
+    const locationItems = await waitFor(() => {
+      const items = screen.getAllByText("Milan")
+      expect(items.length).toBeGreaterThan(0)
+      return items
+    })
+
+    const lastItem = locationItems[locationItems.length - 1]
+    if (lastItem) {
+      fireEvent.click(lastItem)
+    }
+
+    await waitFor(() => {
+      expect(screen.queryByPlaceholderText("Search a destination...")).toBeNull()
+    })
+  })
+})