[#3] added pretty attendee list and tests + fixed broken tests due to dates

__test__/components/MiniCalendarColor.test.tsx

@@ -47,10 +47,10 @@ describe("MiniCalendar", () => {
 
   it("renders mini calendar with today in orange", async () => {
     renderCalendar();
-    const today = new Date().getDate().toString();
-    const todayTile = screen
-      .getAllByText(today)
-      .find((el) => el.tagName.toLowerCase() === "abbr");
+    const today = new Date();
+    const dateTestId = `date-${today.getFullYear()}-${today.getMonth()}-${today.getDate()}`;
+
+    const todayTile = screen.getByTestId(dateTestId);
     expect(todayTile?.parentElement).toHaveClass("today");
   });
 
@@ -65,13 +65,10 @@ describe("MiniCalendar", () => {
       const date = new Date(sunday);
       date.setDate(sunday.getDate() + i);
       const dateTestId = `date-${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
-      preview.debug();
 
       const tile = screen.getByTestId(dateTestId);
 
       if (date.getTime() !== today.setHours(0, 0, 0, 0)) {
-        preview.debug();
-
         expect(tile?.parentElement).toHaveClass("selectedWeek");
       }
     }
@@ -84,10 +81,10 @@ describe("MiniCalendar", () => {
     const dayViewButton = await screen.findByTitle(/day view/i);
     fireEvent.click(dayViewButton);
 
-    const today = new Date().getDate().toString();
-    const todayTile = screen
-      .getAllByText(today)
-      .find((el) => el.tagName.toLowerCase() === "abbr");
+    const today = new Date();
+    const dateTestId = `date-${today.getFullYear()}-${today.getMonth()}-${today.getDate()}`;
+
+    const todayTile = screen.getByTestId(dateTestId);
     expect(todayTile?.parentElement).toHaveClass("selectedWeek");
   });
 
@@ -164,23 +161,19 @@ describe("Found Bugs", () => {
     const previousMonthButton = screen.getByText("<");
     fireEvent.click(nextMonthButton);
     fireEvent.click(previousMonthButton);
-    const shownDay = screen.getByText((content, element) => {
-      return (
-        element?.className.toLowerCase().includes("fc-daygrid-day-number") ??
-        false
-      );
-    });
     const selectedTile = screen.getByText((content, element) => {
       return element?.className.includes("selectedWeek") ?? false;
     });
-    const supposedSelectedTile = screen
-      .getAllByText((content, element) => {
-        return element?.tagName.toLowerCase() === "abbr";
-      })
-      .find((el) => el.innerHTML === shownDay.innerHTML);
+    const ariaLabel = screen.getByRole("columnheader");
+    const shownDayDate = new Date(
+      ariaLabel.getAttribute("data-date") as string
+    );
+    const dateTestId = `date-${shownDayDate.getFullYear()}-${shownDayDate.getMonth()}-${shownDayDate.getDate()}`;
+
+    const supposedSelectedTile = screen.getByTestId(dateTestId);
 
     expect(selectedTile.children[0].innerHTML).toBe(
-      supposedSelectedTile?.innerHTML
+      supposedSelectedTile.parentElement?.children[0]?.innerHTML
     );
     expect(supposedSelectedTile?.parentElement).toHaveClass("selectedWeek");
   });

__test__/features/Events/EventDisplay.test.tsx

@@ -0,0 +1,172 @@
+import { screen, fireEvent, waitFor } from "@testing-library/react";
+import * as eventThunks from "../../../src/features/Calendars/CalendarSlice";
+import { renderWithProviders } from "../../utils/Renderwithproviders";
+import EventPopover from "../../../src/features/Events/EventModal";
+import { DateSelectArg } from "@fullcalendar/core";
+import preview from "jest-preview";
+import { formatDateToYYYYMMDDTHHMMSS } from "../../../src/utils/dateUtils";
+import EventDisplayModal from "../../../src/features/Events/EventDisplay";
+
+describe("Event Display", () => {
+  const mockOnClose = jest.fn();
+  const day = new Date();
+  const RealDateToLocaleString = Date.prototype.toLocaleString;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const preloadedState = {
+    user: {
+      userData: {
+        sub: "test",
+        email: "test@test.com",
+        sid: "aiYbWZSk2g0F+LrQeD7Dg4QcUMR8R/zTZdZBiA7N6Ro",
+        openpaasId: "667037022b752d0026472254",
+      },
+      organiserData: {
+        cn: "test",
+        cal_address: "mailto:test@test.com",
+      },
+    },
+    calendars: {
+      list: {
+        "667037022b752d0026472254/cal1": {
+          id: "667037022b752d0026472254/cal1",
+          name: "Calendar 1",
+          color: "#FF0000",
+          events: {
+            event1: {
+              id: "event1",
+              title: "Test Event",
+              start: day.toISOString(),
+              end: day.toISOString(),
+            },
+          },
+        },
+        "otherCal/cal": {
+          id: "otherCal/cal",
+          name: "Calendar 1",
+          color: "#FF0000",
+          events: {
+            event1: {
+              id: "event1",
+              title: "Test Event Other cal",
+              start: day.toISOString(),
+              end: day.toISOString(),
+            },
+          },
+        },
+      },
+      pending: false,
+    },
+  };
+
+  it("renders correctly event data", () => {
+    jest
+      .spyOn(Date.prototype, "toLocaleString")
+      .mockImplementation(function (
+        this: Date,
+        locales?: Intl.LocalesArgument,
+        options?: Intl.DateTimeFormatOptions | undefined
+      ): string {
+        return RealDateToLocaleString.call(this, "en-UK", options);
+      });
+    renderWithProviders(
+      <EventDisplayModal
+        anchorEl={document.body}
+        open={true}
+        onClose={mockOnClose}
+        calId={"667037022b752d0026472254/cal1"}
+        eventId={"event1"}
+      />,
+      preloadedState
+    );
+    const weekday = day.toLocaleString("en-UK", { weekday: "long" });
+    const month = day.toLocaleString("en-UK", { month: "long" });
+    const dayOfMonth = day.getDate().toString();
+
+    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`))
+    ).toBeInTheDocument();
+
+    expect(screen.getByText(/\d{2}:\d{2} – \d{2}:\d{2}/)).toBeInTheDocument();
+    expect(screen.getByText("Calendar 1")).toBeInTheDocument();
+  });
+  it("calls onClose when Cancel clicked", () => {
+    renderWithProviders(
+      <EventDisplayModal
+        anchorEl={document.body}
+        open={true}
+        onClose={mockOnClose}
+        calId={"667037022b752d0026472254/cal1"}
+        eventId={"event1"}
+      />,
+      preloadedState
+    );
+    fireEvent.click(screen.getByTestId("CloseIcon"));
+
+    expect(mockOnClose).toHaveBeenCalledWith({}, "backdropClick");
+  });
+  it("Shows delete button only when calendar is own", () => {
+    // Renders the other cal event
+    renderWithProviders(
+      <EventDisplayModal
+        anchorEl={document.body}
+        open={true}
+        onClose={mockOnClose}
+        calId={"otherCal/cal"}
+        eventId={"event1"}
+      />,
+      preloadedState
+    );
+    expect(screen.queryByTestId("DeleteIcon")).not.toBeInTheDocument();
+    // Renders the personnal cal event
+    renderWithProviders(
+      <EventDisplayModal
+        anchorEl={document.body}
+        open={true}
+        onClose={mockOnClose}
+        calId={"667037022b752d0026472254/cal1"}
+        eventId={"event1"}
+      />,
+      preloadedState
+    );
+    expect(screen.queryByTestId("DeleteIcon")).toBeInTheDocument();
+  });
+  it("calls delete when Delete clicked", async () => {
+    renderWithProviders(
+      <EventDisplayModal
+        anchorEl={document.body}
+        open={true}
+        onClose={mockOnClose}
+        calId={"667037022b752d0026472254/cal1"}
+        eventId={"event1"}
+      />,
+      preloadedState
+    );
+    const spy = jest
+      .spyOn(eventThunks, "deleteEventAsync")
+      .mockImplementation((payload) => {
+        return () => Promise.resolve(payload) as any;
+      });
+
+    fireEvent.click(screen.getByTestId("DeleteIcon"));
+
+    await waitFor(() => {
+      expect(spy).toHaveBeenCalled();
+    });
+
+    const receivedPayload = spy.mock.calls[0][0];
+
+    expect(receivedPayload).toEqual({
+      calId: "667037022b752d0026472254/cal1",
+      eventId: "event1",
+    });
+
+    expect(mockOnClose).toHaveBeenCalledWith({}, "backdropClick");
+  });
+});

__test__/features/Events/EventModal.test.tsx

@@ -165,7 +165,6 @@ describe("EventPopover", () => {
     fireEvent.change(screen.getByLabelText("Location"), {
       target: { value: newEvent.location },
     });
-    preview.debug();
     const spy = jest
       .spyOn(eventThunks, "putEventAsync")
       .mockImplementation((payload) => {