sidebar availability search (#128)

* [123] added people search in left side bar * [#123] added toggle temp calendars * [#123] added tests] * fixup! [123] added people search in left side bar * fixup! [#123] added toggle temp calendars * [#123] fixed event creation on Enter * fixup! [#123] fixed event creation on Enter * fixup! [#123] fixed event creation on Enter * fixup! [#123] fixed event creation on Enter * fixup! [#123] fixed event creation on Enter * fixup! [#123] fixed event creation on Enter * fixup! [#123] fixed event creation on Enter * fixup! [#123] fixed event creation on Enter * [#123] added color diff for temp calendars * fixup! [#123] fixed event creation on Enter * fixup! [#123] added tests] * fixup! [#123] added toggle temp calendars --------- Co-authored-by: Camille Moussu <cmoussu@linagora.com>
2025-09-24 17:05:45 +02:00
parent 1db93efed9
commit 00c0b58032
14 changed files with 707 additions and 114 deletions
@@ -2,6 +2,13 @@ import { fireEvent, screen, waitFor } from "@testing-library/react";
 import CalendarApp from "../../src/components/Calendar/Calendar";
 import * as eventThunks from "../../src/features/Calendars/CalendarSlice";
 import { renderWithProviders } from "../utils/Renderwithproviders";
+import { searchUsers } from "../../src/features/User/userAPI";
+
+import userEvent from "@testing-library/user-event";
+jest.mock("../../src/features/User/userAPI");
+const mockedSearchUsers = searchUsers as jest.MockedFunction<
+  typeof searchUsers
+>;

 describe("CalendarSelection", () => {
  const today = new Date();
@@ -157,15 +164,93 @@ describe("CalendarSelection", () => {
    expect(screen.getByLabelText("Calendar delegated")).toBeInTheDocument();
    expect(screen.getByLabelText("Calendar shared")).toBeInTheDocument();

-    const delegatedAccordionSummary = screen
-      .getByText("Delegated Calendars")
+    const sharedAccordionSummary = screen
+      .getByText("Other Calendars")
      .closest(".MuiAccordionSummary-root");

-    const addButton = screen.getAllByTestId("AddIcon")[1];
+    const addButton = screen.getAllByTestId("AddIcon")[2];
    fireEvent.click(addButton);
-    expect(delegatedAccordionSummary).toHaveAttribute("aria-expanded", "true");
+    expect(sharedAccordionSummary).toHaveAttribute("aria-expanded", "true");

    fireEvent.click(addButton);
-    expect(delegatedAccordionSummary).toHaveAttribute("aria-expanded", "true");
+    expect(sharedAccordionSummary).toHaveAttribute("aria-expanded", "true");
+  });
+});
+
+describe("calendar Availability search", () => {
+  const preloadedState = {
+    user: {
+      userData: {
+        sub: "test",
+        email: "test@test.com",
+        sid: "mockSid",
+        openpaasId: "user1",
+      },
+      tokens: { accessToken: "token" },
+    },
+    calendars: {
+      list: {
+        "user1/cal1": {
+          name: "Calendar personnal",
+          id: "user1/cal1",
+          color: "#FF0000",
+          ownerEmails: ["alice@example.com"],
+          events: {},
+        },
+      },
+      pending: false,
+      templist: {},
+    },
+  };
+
+  it("imports temporary calendars when selecting new users", async () => {
+    const spy = jest
+      .spyOn(eventThunks, "getTempCalendarsListAsync")
+      .mockImplementation((payload) => {
+        return () => Promise.resolve(payload) as any;
+      });
+    mockedSearchUsers.mockResolvedValueOnce([
+      {
+        email: "newuser@example.com",
+        displayName: "New User",
+        avatarUrl: "image.png",
+        openpaasId: "1234567890",
+      },
+    ]);
+
+    renderWithProviders(<CalendarApp />, preloadedState);
+
+    const input = screen.getByPlaceholderText(/search user/i);
+    userEvent.type(input, "New");
+
+    const option = await screen.findByText("New User");
+    fireEvent.click(option);
+
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it("does not import temp calendars if user already has a calendar but toggles the shared one", async () => {
+    mockedSearchUsers.mockResolvedValueOnce([
+      {
+        email: "alice@example.com",
+        displayName: "Alice",
+        avatarUrl: "image.png",
+        openpaasId: "1234567890",
+      },
+    ]);
+    const spy = jest
+      .spyOn(eventThunks, "getTempCalendarsListAsync")
+      .mockImplementation((payload) => {
+        return () => Promise.resolve(payload) as any;
+      });
+    renderWithProviders(<CalendarApp />, preloadedState);
+
+    const input = screen.getByPlaceholderText(/search user/i);
+    userEvent.type(input, "Alice");
+
+    const option = await screen.findByText("Alice");
+    fireEvent.click(option);
+
+    expect(spy).not.toHaveBeenCalledWith();
  });
 });
@@ -190,9 +190,9 @@ describe("CalendarSelection", () => {
      .closest(".MuiAccordionSummary-root");

    fireEvent.click(delegatedAccordionSummary!);
-    expect(delegatedAccordionSummary).toHaveAttribute("aria-expanded", "false");
+    expect(delegatedAccordionSummary).toHaveAttribute("aria-expanded", "true");

    fireEvent.click(delegatedAccordionSummary!);
-    expect(delegatedAccordionSummary).toHaveAttribute("aria-expanded", "true");
+    expect(delegatedAccordionSummary).toHaveAttribute("aria-expanded", "false");
  });
 });
@@ -1,4 +1,4 @@
-import { fireEvent, screen } from "@testing-library/react";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
 import EventDuplication from "../../src/components/Event/EventDuplicate";
 import EventDisplayModal from "../../src/features/Events/EventDisplay";
 import EventPopover from "../../src/features/Events/EventModal";
@@ -147,7 +147,7 @@ describe("EventPopover", () => {
    });
    fireEvent.click(screen.getByRole("button", { name: /Save/i }));

-    expect(onClose).toHaveBeenCalled();
+    waitFor(() => expect(onClose).toHaveBeenCalled());
  });
 });

@@ -2,7 +2,7 @@ import { CalendarApi } from "@fullcalendar/core";
 import { jest } from "@jest/globals";
 import { ThunkDispatch } from "@reduxjs/toolkit";
 import "@testing-library/jest-dom";
-import { act, screen, within } from "@testing-library/react";
+import { act, screen, waitFor, within } from "@testing-library/react";
 import * as appHooks from "../../src/app/hooks";
 import CalendarApp from "../../src/components/Calendar/Calendar";
 import { renderWithProviders } from "../utils/Renderwithproviders";
@@ -97,7 +97,7 @@ describe("CalendarApp integration", () => {

        fcEvent?.setEnd(newEnd);

-        expect(dispatch).toHaveBeenCalled();
+        waitFor(() => expect(dispatch).toHaveBeenCalled());
      }
    });
  });
@@ -0,0 +1,102 @@
+import { screen, fireEvent, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import {
+  User,
+  PeopleSearch,
+} from "../../src/components/Attendees/PeopleSearch";
+import { renderWithProviders } from "../utils/Renderwithproviders";
+import { searchUsers } from "../../src/features/User/userAPI";
+
+jest.mock("../../src/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
+        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");
+    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");
+    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");
+    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();
+  });
+});