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

import { PeopleSearch, User } from "@/components/Attendees/PeopleSearch";
import { searchUsers } from "@/features/User/userAPI";
import { act, fireEvent, 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("PeopleSearch", () => {
  const baseUser: User = {
    email: "test@example.com",
    displayName: "Test User",
    avatarUrl: "https://example.com/avatar.png",
    openpaasId: "1234567890",
  };

  function setup(
    selectedUsers: User[] = [],
    props?: Partial<React.ComponentProps<typeof PeopleSearch>>
  ) {
    const onChange = jest.fn();
    renderWithProviders(
      <PeopleSearch
        objectTypes={["user"]}
        selectedUsers={selectedUsers}
        onChange={onChange}
        {...props}
      />
    );
    return { onChange };
  }

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

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

  it("calls searchUsers after debounce when typing", async () => {
    mockedSearchUsers.mockResolvedValueOnce([baseUser]);
    setup();

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

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

  it("renders search results and allows selection", async () => {
    mockedSearchUsers.mockResolvedValueOnce([baseUser]);
    const { onChange } = setup();

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

    const option = await screen.findByText("Test User");
    await userEvent.click(option);

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

  it("does not show already selected users in options", async () => {
    mockedSearchUsers.mockResolvedValueOnce([baseUser]);
    setup([baseUser]);
    const input = screen.getByRole("combobox");
    await userEvent.type(input, "Test");
    await act(async () => {
      jest.advanceTimersByTime(300);
    });

    await waitFor(() => {
      expect(screen.queryByText("test@example.com")).not.toBeInTheDocument();
    });
  });

  it("triggers onToggleEventPreview on Enter key press", () => {
    const onToggleEventPreview = jest.fn();
    setup([], { onToggleEventPreview });

    const input = screen.getByRole("combobox");
    fireEvent.keyDown(input, { key: "Enter" });

    expect(onToggleEventPreview).toHaveBeenCalled();
  });

  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([baseUser]);
    setup();
    const input = screen.getByRole("combobox");

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

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

    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, "Test");

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

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

  it("does not clear options when search fails and shows error snackbar", async () => {
    mockedSearchUsers.mockResolvedValueOnce([baseUser]);
    setup();

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

    await waitFor(() => {
      expect(screen.getByText("Test User")).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("peopleSearch.searchError");
    expect(errorMessage).toBeInTheDocument();

    expect(screen.queryByText("Test User")).not.toBeInTheDocument();

    mockedSearchUsers.mockResolvedValueOnce([baseUser]);
    await userEvent.clear(input);
    await userEvent.type(input, "Test");
    await act(async () => {
      jest.advanceTimersByTime(300);
      await Promise.resolve();
    });

    await waitFor(() => {
      expect(screen.getByText("Test User")).toBeInTheDocument();
    });
  });

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

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

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

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

  describe("paste multiple attendees", () => {
    function setupFreeSolo(selectedUsers: User[] = []) {
      const onChange = jest.fn();
      renderWithProviders(
        <PeopleSearch
          objectTypes={["user"]}
          selectedUsers={selectedUsers}
          onChange={onChange}
          freeSolo
        />
      );
      return { onChange };
    }

    it("splits pasted comma-separated emails into individual attendees", async () => {
      const { onChange } = setupFreeSolo();
      const input = screen.getByRole("combobox");

      fireEvent.paste(input, {
        clipboardData: {
          getData: () => "alice@example.com, bob@example.com",
        },
      });

      await waitFor(() => {
        expect(onChange).toHaveBeenCalledWith(
          expect.anything(),
          expect.arrayContaining([
            expect.objectContaining({ email: "alice@example.com" }),
            expect.objectContaining({ email: "bob@example.com" }),
          ])
        );
      });
    });

    it("splits pasted semicolon-separated emails", async () => {
      const { onChange } = setupFreeSolo();
      const input = screen.getByRole("combobox");

      fireEvent.paste(input, {
        clipboardData: {
          getData: () => "alice@example.com;bob@example.com",
        },
      });

      await waitFor(() => {
        expect(onChange).toHaveBeenCalledWith(
          expect.anything(),
          expect.arrayContaining([
            expect.objectContaining({ email: "alice@example.com" }),
            expect.objectContaining({ email: "bob@example.com" }),
          ])
        );
      });
    });

    it("splits pasted newline-separated emails", async () => {
      const { onChange } = setupFreeSolo();
      const input = screen.getByRole("combobox");

      fireEvent.paste(input, {
        clipboardData: {
          getData: () => "alice@example.com\nbob@example.com",
        },
      });

      await waitFor(() => {
        expect(onChange).toHaveBeenCalledWith(
          expect.anything(),
          expect.arrayContaining([
            expect.objectContaining({ email: "alice@example.com" }),
            expect.objectContaining({ email: "bob@example.com" }),
          ])
        );
      });
    });

    it("splits pasted space-separated emails", async () => {
      const { onChange } = setupFreeSolo();
      const input = screen.getByRole("combobox");

      fireEvent.paste(input, {
        clipboardData: {
          getData: () => "alice@example.com bob@example.com",
        },
      });

      await waitFor(() => {
        expect(onChange).toHaveBeenCalledWith(
          expect.anything(),
          expect.arrayContaining([
            expect.objectContaining({ email: "alice@example.com" }),
            expect.objectContaining({ email: "bob@example.com" }),
          ])
        );
      });
    });

    it("skips duplicate emails already in selectedUsers", async () => {
      const existing: User = {
        email: "alice@example.com",
        displayName: "Alice",
      };
      const { onChange } = setupFreeSolo([existing]);
      const input = screen.getByRole("combobox");

      fireEvent.paste(input, {
        clipboardData: {
          getData: () => "alice@example.com, bob@example.com",
        },
      });

      await waitFor(() => {
        expect(onChange).toHaveBeenCalledWith(
          expect.anything(),
          expect.arrayContaining([
            existing,
            expect.objectContaining({ email: "bob@example.com" }),
          ])
        );
        // Should NOT have alice duplicated
        const call = onChange.mock.calls[0][1];
        const aliceCount = call.filter(
          (u: User) => u.email === "alice@example.com"
        ).length;
        expect(aliceCount).toBe(1);
      });
    });

    it("leaves invalid text in input when some emails are invalid", async () => {
      const { onChange } = setupFreeSolo();
      const input = screen.getByRole("combobox");

      fireEvent.paste(input, {
        clipboardData: {
          getData: () => "alice@example.com, not-an-email, bob@example.com",
        },
      });

      await waitFor(() => {
        expect(onChange).toHaveBeenCalledWith(
          expect.anything(),
          expect.arrayContaining([
            expect.objectContaining({ email: "alice@example.com" }),
            expect.objectContaining({ email: "bob@example.com" }),
          ])
        );
      });
    });

    it("does not intercept paste of a single email", async () => {
      const { onChange } = setupFreeSolo();
      const input = screen.getByRole("combobox");

      fireEvent.paste(input, {
        clipboardData: {
          getData: () => "alice@example.com",
        },
      });

      // Single email should NOT trigger multi-paste handler
      expect(onChange).not.toHaveBeenCalled();
    });
  });

  it("retains input value when field loses focus (blur)", async () => {
    let resolveSearch: (value: User[]) => void;
    const searchPromise = new Promise<User[]>((resolve) => {
      resolveSearch = resolve;
    });
    mockedSearchUsers.mockReturnValueOnce(searchPromise);
    await act(async () => {
      setup();
    });

    const input = screen.getByRole("combobox");

    await act(async () => {
      userEvent.type(input, "Test");
    });

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

    expect(input).toHaveValue("Test");

    await act(async () => {
      input.blur();
    });

    await waitFor(() => {
      expect(input).toHaveValue("Test");
    });
  });
});