[#310] fix color error + strenghtened test on missing apple:color (#314)

Co-authored-by: Camille Moussu <cmoussu@linagora.com>

__test__/components/CalendarColors.test.tsx

@@ -328,13 +328,17 @@ describe("CalendarSearch", () => {
 
     expect(addSharedCalendarSpy).not.toHaveBeenCalled();
   });
-
   it("BUGFIX : handles calendar with no apple:color", async () => {
+    const addSharedCalendarSpy = jest
+      .spyOn(CalendarSlice, "addSharedCalendarAsync")
+      .mockImplementation((payload) => {
+        return () => Promise.resolve(payload) as any;
+      });
     const mockCalendarNoColor = {
       "dav:name": "Test Calendar",
       _links: {
         self: {
-          href: "/calendars/user123/cal1.json",
+          href: "/calendars/user123/cal2.json",
         },
       },
     };
@@ -357,6 +361,10 @@ describe("CalendarSearch", () => {
       userEvent.type(input, "Test");
     });
 
+    await waitFor(() => {
+      expect(mockedSearchUsers).toHaveBeenCalledWith("Test", expect.anything());
+    });
+
     const option = await screen.findByText("Test User");
     await act(async () => {
       fireEvent.click(option);
@@ -373,5 +381,33 @@ describe("CalendarSearch", () => {
       expect(screen.getByText("Test Calendar")).toBeInTheDocument();
       expect(screen.getByText("user@example.com")).toBeInTheDocument();
     });
+
+    const addButton = screen.getByRole("button", { name: /add/i });
+    await act(async () => {
+      fireEvent.click(addButton);
+    });
+    await waitFor(() =>
+      expect(addSharedCalendarSpy).toHaveBeenCalledWith({
+        cal: {
+          cal: {
+            _links: { self: { href: "/calendars/user123/cal2.json" } },
+            "dav:name": "Test Calendar",
+          },
+          color: { dark: "#329655", light: "#D0ECDA" },
+          owner: {
+            avatarUrl: "https://example.com/avatar.jpg",
+            displayName: "Test User",
+            email: "user@example.com",
+            openpaasId: "user123",
+          },
+        },
+        calId: expect.any(String),
+        userId: "user1",
+      })
+    );
+
+    expect(mockOnClose).toHaveBeenCalledWith(
+      expect.arrayContaining(["user123/cal2"])
+    );
   });
 });

src/components/Calendar/CalendarSearch.tsx

@@ -50,10 +50,10 @@ function CalendarItem({
           src={cal.owner.avatarUrl}
           alt={cal.owner.email}
           style={{
-            border: `2px solid ${cal.cal["apple:color"] || defaultColors[0]}`,
+            border: `2px solid ${cal.cal["apple:color"] || defaultColors[0].light}`,
             boxShadow: cal.cal["apple:color"]
               ? `0 0 0 2px ${cal.cal["apple:color"]}`
-              : `0 0 0 2px ${defaultColors[0]}`,
+              : `0 0 0 2px ${defaultColors[0].light}`,
           }}
         />
         <Box>
@@ -196,6 +196,8 @@ export default function CalendarSearch({
   onClose: Function;
 }) {
   const dispatch = useAppDispatch();
+  const theme = useTheme();
+
   const openpaasId =
     useAppSelector((state) => state.user.userData?.openpaasId) ?? "";
   const calendars = useAppSelector((state) => state.calendars.list);
@@ -222,7 +224,12 @@ export default function CalendarSearch({
                 calId,
                 cal: {
                   ...cal,
-                  color: cal.cal["apple:color"],
+                  color: cal.cal["apple:color"]
+                    ? {
+                        light: cal.cal["apple:color"],
+                        dark: getAccessiblePair(cal.cal["apple:color"], theme),
+                      }
+                    : defaultColors[0],
                 },
               })
             );
@@ -320,7 +327,6 @@ export default function CalendarSearch({
                     cal: {
                       ...prevcal.cal,
                       "apple:color": color.light,
-                      "X-TWAKE-Dark-theme-color": color.dark,
                     },
                   }
                 : prevcal

src/components/Calendar/CalendarSelection.tsx

@@ -38,6 +38,7 @@ function CalendarAccordion({
   setOpen: Function;
 }) {
   const allCalendars = useAppSelector((state) => state.calendars.list);
+  const { t } = useI18n();
 
   const [expended, setExpended] = useState(defaultExpanded);
   useEffect(() => setExpended(defaultExpanded), [defaultExpanded]);
@@ -82,7 +83,7 @@ function CalendarAccordion({
             key={id}
             calendars={allCalendars}
             id={id}
-            isPersonal={defaultExpanded}
+            isPersonal={title === t("calendar.personal")}
             selectedCalendars={selectedCalendars}
             handleCalendarToggle={handleToggle}
             setOpen={() => setOpen(id)}

src/features/Calendars/CalendarSlice.ts

@@ -563,10 +563,7 @@ export const addSharedCalendarAsync = createAsyncThunk<
         calId: cal.cal._links.self.href
           .replace("/calendars/", "")
           .replace(".json", ""),
-        color: {
+        color: cal.color,
-          light: cal.cal["apple:color"],
-          dark: "#000",
-        },
         link: `/calendars/${userId}/${calId}.json`,
         desc: cal.cal["caldav:description"],
         name: