From 3f8f3eff23165950d5e9167b7ac4a36c024d7e65 Mon Sep 17 00:00:00 2001 From: Camille Moussu <66134347+Eriikah@users.noreply.github.com> Date: Tue, 7 Oct 2025 11:20:09 +0200 Subject: [PATCH] [#162] changed preview modal looks to follow figma (#163) Co-authored-by: Camille Moussu --- __test__/components/DuplicateEvent.test.tsx | 15 +- .../features/Events/EventDisplay.test.tsx | 64 ++- src/components/Calendar/Calendar.tsx | 9 +- src/components/Calendar/CalendarSelection.tsx | 2 +- .../Calendar/handlers/eventHandlers.ts | 7 - .../Calendar/handlers/viewHandlers.ts | 7 +- .../hooks/useCalendarEventHandlers.ts | 3 +- src/components/Event/EventDisplayPreview.tsx | 452 ++++++++++++++++++ src/components/Event/EventDuplicate.tsx | 9 +- src/components/Event/InfoRow.tsx | 91 ++++ src/components/Event/utils/eventUtils.tsx | 105 ++++ src/components/Menubar/Menubar.tsx | 2 +- src/features/Events/EventDisplay.tsx | 174 ++----- src/features/Events/EventDisplayPreview.tsx | 410 ---------------- 14 files changed, 731 insertions(+), 619 deletions(-) create mode 100644 src/components/Event/EventDisplayPreview.tsx create mode 100644 src/components/Event/InfoRow.tsx create mode 100644 src/components/Event/utils/eventUtils.tsx delete mode 100644 src/features/Events/EventDisplayPreview.tsx diff --git a/__test__/components/DuplicateEvent.test.tsx b/__test__/components/DuplicateEvent.test.tsx index 71c5def..6bda106 100644 --- a/__test__/components/DuplicateEvent.test.tsx +++ b/__test__/components/DuplicateEvent.test.tsx @@ -3,7 +3,7 @@ import EventDuplication from "../../src/components/Event/EventDuplicate"; import EventDisplayModal from "../../src/features/Events/EventDisplay"; import EventPopover from "../../src/features/Events/EventModal"; import { renderWithProviders } from "../utils/Renderwithproviders"; -import EventPreviewModal from "../../src/features/Events/EventDisplayPreview"; +import EventPreviewModal from "../../src/components/Event/EventDisplayPreview"; const day = new Date(); const preloadedState = { @@ -75,10 +75,9 @@ describe("EventDuplication", () => { preloadedState ); - const button = screen.getByRole("button"); - fireEvent.click(button); + fireEvent.click(screen.getByText("Duplicate event")); - expect(screen.getByText(/Duplicate Event/i)).toBeInTheDocument(); + expect(screen.getAllByText(/Duplicate Event/i)[1]).toBeInTheDocument(); }); it("calls onClose when closing the popover", () => { @@ -94,7 +93,7 @@ describe("EventDuplication", () => { preloadedState ); - fireEvent.click(screen.getByRole("button")); + fireEvent.click(screen.getByText("Duplicate event")); fireEvent.click(screen.getByRole("button", { name: /Cancel/i })); @@ -159,13 +158,13 @@ describe("EventDisplayModal", () => { calId="667037022b752d0026472254/cal1" open={true} onClose={jest.fn()} - anchorPosition={{ top: 0, left: 0 }} />, preloadedState ); - fireEvent.click(screen.getByTestId("AddToPhotosIcon")); - expect(screen.getByText(/Duplicate Event/i)).toBeInTheDocument(); + fireEvent.click(screen.getByTestId("MoreVertIcon")); + fireEvent.click(screen.getByText("Duplicate event")); + expect(screen.getAllByText(/Duplicate Event/i)[1]).toBeInTheDocument(); expect( screen.getByDisplayValue( preloadedState.calendars.list["667037022b752d0026472254/cal1"].events diff --git a/__test__/features/Events/EventDisplay.test.tsx b/__test__/features/Events/EventDisplay.test.tsx index aeaa59b..d2cb2e0 100644 --- a/__test__/features/Events/EventDisplay.test.tsx +++ b/__test__/features/Events/EventDisplay.test.tsx @@ -1,12 +1,19 @@ -import { screen, fireEvent, waitFor, act } from "@testing-library/react"; +import { + screen, + fireEvent, + waitFor, + act, + cleanup, +} from "@testing-library/react"; import * as eventThunks from "../../../src/features/Calendars/CalendarSlice"; import { renderWithProviders } from "../../utils/Renderwithproviders"; -import EventDisplayModal, { - InfoRow, - stringAvatar, +import EventDisplayModal from "../../../src/features/Events/EventDisplay"; +import EventPreviewModal from "../../../src/components/Event/EventDisplayPreview"; +import { InfoRow } from "../../../src/components/Event/InfoRow"; +import { stringToColor, -} from "../../../src/features/Events/EventDisplay"; -import EventPreviewModal from "../../../src/features/Events/EventDisplayPreview"; + stringAvatar, +} from "../../../src/components/Event/utils/eventUtils"; describe("Event Preview Display", () => { const mockOnClose = jest.fn(); @@ -104,7 +111,6 @@ describe("Event Preview Display", () => { }); renderWithProviders( { expect(screen.getByText("Test Event")).toBeInTheDocument(); expect(screen.getByText(new RegExp(weekday, "i"))).toBeInTheDocument(); - expect(screen.getByText(new RegExp(month, "i"))).toBeInTheDocument(); expect( - screen.getByText(new RegExp(`\\b${dayOfMonth}\\b`)) + screen.getByText(new RegExp(`\\b${dayOfMonth}\\b ${month}`)) ).toBeInTheDocument(); expect(screen.getByText(/\d{2}:\d{2} – \d{2}:\d{2}/)).toBeInTheDocument(); @@ -129,7 +134,6 @@ describe("Event Preview Display", () => { it("calls onClose when Cancel clicked", () => { renderWithProviders( { // Renders the other cal event renderWithProviders( { />, preloadedState ); - expect(screen.queryByTestId("DeleteIcon")).not.toBeInTheDocument(); + fireEvent.click(screen.getByTestId("MoreVertIcon")); + expect(screen.queryByText("Delete event")).not.toBeInTheDocument(); + cleanup(); // Renders the personnal cal event renderWithProviders( { />, preloadedState ); - expect(screen.queryByTestId("DeleteIcon")).toBeInTheDocument(); + fireEvent.click(screen.getByTestId("MoreVertIcon")); + expect(screen.queryByText("Delete event")).toBeInTheDocument(); }); it("calls delete when Delete clicked", async () => { renderWithProviders( { .mockImplementation((payload) => { return () => Promise.resolve(payload) as any; }); - - fireEvent.click(screen.getByTestId("DeleteIcon")); + fireEvent.click(screen.getByTestId("MoreVertIcon")); + fireEvent.click(screen.getByText("Delete event")); await waitFor(() => { expect(spy).toHaveBeenCalled(); @@ -237,7 +241,6 @@ describe("Event Preview Display", () => { renderWithProviders( { rsvpStateIsOrga ); - expect(screen.getByText("Will you attend?")).toBeInTheDocument(); + expect(screen.getByText("Attending?")).toBeInTheDocument(); expect(screen.getByRole("button", { name: "Accept" })).toBeInTheDocument(); expect(screen.getByRole("button", { name: "Maybe" })).toBeInTheDocument(); expect(screen.getByRole("button", { name: "Decline" })).toBeInTheDocument(); @@ -284,7 +287,6 @@ describe("Event Preview Display", () => { renderWithProviders( { rsvpStateIsOrga ); - expect(screen.queryByText("Will you attend?")).not.toBeInTheDocument(); + expect(screen.queryByText("Attending?")).not.toBeInTheDocument(); expect( screen.queryByRole("button", { name: "Accept" }) ).not.toBeInTheDocument(); @@ -344,7 +346,6 @@ describe("Event Preview Display", () => { renderWithProviders( { renderWithProviders( { renderWithProviders( { renderWithProviders( { (window as any).MAIL_SPA_URL = "test"; renderWithProviders( { />, preloadedState ); - expect(screen.getByTestId("EmailIcon")).toBeInTheDocument(); + fireEvent.click(screen.getByTestId("MoreVertIcon")); + expect(screen.getByText("Email attendees")).toBeInTheDocument(); }); it("doesnt render message button when MAIL_SPA_URL is not null and event has no attendees", () => { (window as any).MAIL_SPA_URL = "test"; renderWithProviders( { it("doesnt render message button when MAIL_SPA_URL is null and event has attendees", () => { renderWithProviders( { renderWithProviders( { preloadedState ); - const emailButton = screen.getByTestId("EmailIcon"); + fireEvent.click(screen.getByTestId("MoreVertIcon")); + const emailButton = screen.getByText("Email attendees"); expect(emailButton).toBeInTheDocument(); - fireEvent.click(emailButton.closest("button")!); + fireEvent.click(emailButton); const event = preloadedState.calendars.list["667037022b752d0026472254/cal1"].events[ @@ -1403,7 +1399,7 @@ describe("Event Full Display", () => { videoState ); - expect(screen.getByText("Video conference available")).toBeInTheDocument(); + expect(screen.getByText("Join the video conference")).toBeInTheDocument(); }); }); @@ -1416,7 +1412,7 @@ describe("Helper functions", () => { it("stringAvatar returns correct props", () => { const result = stringAvatar("Alice"); expect(result.children).toBe("A"); - expect(result.sx.bgcolor).toMatch(/^#/); + expect(result.style.backgroundColor).toMatch(/^#/); }); it("InfoRow renders text and link if url is valid", () => { diff --git a/src/components/Calendar/Calendar.tsx b/src/components/Calendar/Calendar.tsx index efeb23a..502e632 100644 --- a/src/components/Calendar/Calendar.tsx +++ b/src/components/Calendar/Calendar.tsx @@ -20,7 +20,7 @@ import { } from "../../utils/dateUtils"; import { Calendars } from "../../features/Calendars/CalendarTypes"; import { push } from "redux-first-history"; -import EventPreviewModal from "../../features/Events/EventDisplayPreview"; +import EventPreviewModal from "../Event/EventDisplayPreview"; import { createSelector } from "@reduxjs/toolkit"; import AddIcon from "@mui/icons-material/Add"; import { TempCalendarsInput } from "./TempCalendarsInput"; @@ -161,10 +161,7 @@ export default function CalendarApp({ }, [rangeKey, Object.keys(tempcalendars).join(","), pending]); const [anchorEl, setAnchorEl] = useState(null); - const [anchorPosition, setAnchorPosition] = useState<{ - top: number; - left: number; - } | null>(null); + const [openEventDisplay, setOpenEventDisplay] = useState(false); const [eventDisplayedId, setEventDisplayedId] = useState(""); const [eventDisplayedTemp, setEventDisplayedTemp] = useState(false); @@ -187,7 +184,6 @@ export default function CalendarApp({ calendarRange, dispatch, setOpenEventDisplay, - setAnchorPosition, setEventDisplayedId, setEventDisplayedCalId, setEventDisplayedTemp, @@ -431,7 +427,6 @@ export default function CalendarApp({ eventId={eventDisplayedId} calId={eventDisplayedCalId} tempEvent={eventDisplayedTemp} - anchorPosition={anchorPosition} open={openEventDisplay} onClose={eventHandlers.handleCloseEventDisplay} /> diff --git a/src/components/Calendar/CalendarSelection.tsx b/src/components/Calendar/CalendarSelection.tsx index 7a43327..b974b64 100644 --- a/src/components/Calendar/CalendarSelection.tsx +++ b/src/components/Calendar/CalendarSelection.tsx @@ -217,7 +217,7 @@ function CalendarSelector({