conference-room-booking-system/frontend/src/__tests__/pages/ConfirmationPage.test.tsx

import React from "react";
import { MemoryRouter } from "react-router-dom";
import { render, screen } from "@testing-library/react";
import ConfirmationPage from "../../pages/ConfirmationPage";
import * as roomsApi from "../../apis/rooms";
import { BookingContext } from "../../context/BookingContext";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
describe("ConfirmationPage", () => {
  beforeAll(() => {
    /**
     * Mock implementation of EventSource for tests.
     * Implements the minimal EventSource interface.
     */
    /**
     * Mock implementation of EventSource for tests.
     * TypeScript: 'as any' is used to bypass constructor signature requirements.
     */
    class EventSourceMock implements EventSource {
      static readonly CONNECTING = 0;
      static readonly OPEN = 1;
      static readonly CLOSED = 2;
      readonly CONNECTING = 0;
      readonly OPEN = 1;
      readonly CLOSED = 2;
      readyState = 0;
      url = "";
      withCredentials = false;
      close() {}
      addEventListener() {}
      removeEventListener() {}
      dispatchEvent() {
        return true;
      }
      onmessage: ((this: EventSource, ev: MessageEvent) => any) | null = null;
      onerror: ((this: EventSource, ev: Event) => any) | null = null;
      onopen: ((this: EventSource, ev: Event) => any) | null = null;
    }
    window.EventSource = EventSourceMock as any;
  });
  it("renders confirmation page heading", async () => {
    // Setup required mocks and context
    jest.spyOn(roomsApi, "getRooms").mockResolvedValue([
      {
        id: "1",
        name: "Test Room",
        capacity: 2,
        amenities: [],
        price: 100,
      },
    ]);
    const queryClient = new QueryClient();
    const mockBooking = {
      id: "b1",
      roomId: "1",
      guestName: "Test Guest",
      date: "2025-09-19",
      start_time: "10:00",
      end_time: "11:00",
      status: "confirmed",
    };
    render(
      <QueryClientProvider client={queryClient}>
        <BookingContext.Provider
          value={{ bookings: [mockBooking], fetchMonth: jest.fn() }}
        >
          <MemoryRouter
            initialEntries={[
              { pathname: "/confirmation", state: { booking: mockBooking } },
            ]}
          >
            <ConfirmationPage />
          </MemoryRouter>
        </BookingContext.Provider>
      </QueryClientProvider>
    );
    expect(await screen.findByText(/Booking Confirmed/i)).toBeInTheDocument();
  });
});