workavia-calendar-front/__test__/components/ResourceSearch.test.tsx

import {
  ResourceSearch,
  Resource,
} from "@/components/Attendees/ResourceSearch";
import { searchUsers } from "@/features/User/userAPI";
import { act, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { renderWithProviders } from "../utils/Renderwithproviders";

jest.mock("@/features/User/userAPI");
const mockedSearchUsers = searchUsers as jest.MockedFunction<
  typeof searchUsers
>;

describe("ResourceSearch", () => {
  const baseResource: Resource = {
    displayName: "Projector Room",
  };

  function setup(
    selectedResources: Resource[] = [],
    props?: Partial<React.ComponentProps<typeof ResourceSearch>>
  ) {
    const onChange = jest.fn();
    renderWithProviders(
      <ResourceSearch
        objectTypes={["resource"]}
        selectedResources={selectedResources}
        onChange={onChange}
        {...props}
      />
    );
    return { onChange };
  }

  beforeEach(() => {
    jest.useFakeTimers();
    mockedSearchUsers.mockReset();
  });

  afterEach(() => {
    jest.useRealTimers();
  });

  it("calls searchUsers after debounce when typing", async () => {
    mockedSearchUsers.mockResolvedValueOnce([
      baseResource,
    ] as unknown as Awaited<ReturnType<typeof searchUsers>>);
    setup();

    const input = screen.getByRole("combobox");
    await userEvent.type(input, "Room");
    await act(async () => {
      jest.advanceTimersByTime(300);
    });

    await waitFor(() => {
      expect(mockedSearchUsers).toHaveBeenCalledWith("Room", ["resource"]);
    });
  });

  it("renders search results and allows selection", async () => {
    mockedSearchUsers.mockResolvedValueOnce([
      baseResource,
    ] as unknown as Awaited<ReturnType<typeof searchUsers>>);
    const { onChange } = setup();

    const input = screen.getByRole("combobox");
    await userEvent.type(input, "Room");
    await act(async () => {
      jest.advanceTimersByTime(300);
    });

    const option = await screen.findByText("Projector Room");
    await userEvent.click(option);

    await waitFor(() => {
      expect(onChange).toHaveBeenCalled();
    });
  });

  it("does not show already selected resources in options", async () => {
    mockedSearchUsers.mockResolvedValueOnce([
      baseResource,
    ] as unknown as Awaited<ReturnType<typeof searchUsers>>);
    setup([baseResource]);
    const input = screen.getByRole("combobox");
    await userEvent.type(input, "Projector");
    await act(async () => {
      jest.advanceTimersByTime(300);
    });

    await waitFor(() => {
      // It shouldn't be in the dropdown options anymore
      const options = screen.queryAllByRole("option");
      expect(
        options.find((opt) => opt.textContent === "Projector Room")
      ).toBeUndefined();
    });
  });

  it("respects disabled state", () => {
    setup([], { disabled: true });
    expect(screen.getByRole("combobox")).toBeDisabled();
  });

  it("no options doesn't show dropdown when input is empty", async () => {
    mockedSearchUsers.mockResolvedValueOnce([
      baseResource,
    ] as unknown as Awaited<ReturnType<typeof searchUsers>>);
    setup();
    const input = screen.getByRole("combobox");

    await userEvent.type(input, "Room");
    await act(async () => {
      jest.advanceTimersByTime(300);
    });

    await waitFor(() => {
      expect(screen.getByRole("listbox")).toBeInTheDocument();
    });

    await userEvent.clear(input);

    await waitFor(() => {
      expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
    });
  });

  it("shows 'No results' when search succeeds but returns empty array", async () => {
    mockedSearchUsers.mockResolvedValueOnce([]);
    setup();

    const input = screen.getByRole("combobox");
    await userEvent.type(input, "Room");

    await act(async () => {
      jest.advanceTimersByTime(300);
      await Promise.resolve();
      await Promise.resolve();
    });

    const noResults = await screen.findByText(
      "resourceSearch.noResults",
      {},
      { timeout: 5000 }
    );
    expect(noResults).toBeInTheDocument();
  });

  it("clears options when search fails and shows error snackbar", async () => {
    mockedSearchUsers.mockResolvedValueOnce([
      baseResource,
    ] as unknown as Awaited<ReturnType<typeof searchUsers>>);
    setup();

    const input = screen.getByRole("combobox");
    await userEvent.type(input, "Room");
    await act(async () => {
      jest.advanceTimersByTime(300);
      await Promise.resolve();
    });

    await waitFor(() => {
      expect(screen.getByText("Projector Room")).toBeInTheDocument();
    });

    mockedSearchUsers.mockRejectedValueOnce(new Error("Network error"));
    await userEvent.clear(input);
    await userEvent.type(input, "Error");
    await act(async () => {
      jest.advanceTimersByTime(300);
      await Promise.resolve();
    });

    const errorMessage = await screen.findByText("resourceSearch.searchError");
    expect(errorMessage).toBeInTheDocument();

    expect(screen.queryByText("Projector Room")).not.toBeInTheDocument();

    mockedSearchUsers.mockResolvedValueOnce([
      baseResource,
    ] as unknown as Awaited<ReturnType<typeof searchUsers>>);
    await userEvent.clear(input);
    await userEvent.type(input, "Room");
    await act(async () => {
      jest.advanceTimersByTime(300);
      await Promise.resolve();
    });

    await waitFor(() => {
      expect(screen.getByText("Projector Room")).toBeInTheDocument();
    });
  });

  it("shows loading text when searching", async () => {
    let resolveSearch: (value: Resource[]) => void;
    const searchPromise = new Promise<Resource[]>((resolve) => {
      resolveSearch = resolve;
    });
    mockedSearchUsers.mockReturnValueOnce(
      searchPromise as unknown as ReturnType<typeof searchUsers>
    );
    setup();

    const input = screen.getByRole("combobox");
    await userEvent.type(input, "Room");
    await act(async () => {
      jest.advanceTimersByTime(300);
    });

    const loadingText = await screen.findByText(
      "resourceSearch.loading",
      {},
      { timeout: 5000 }
    );
    expect(loadingText).toBeInTheDocument();

    await act(async () => {
      resolveSearch!([baseResource]);
      await searchPromise;
    });
  });
});