[#82] added cozy-ui for internationnalisation (#267)

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

__test__/components/Calendar.test.tsx

@@ -1,10 +1,10 @@
-import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { act, 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 * as calendarThunks from "../../src/features/Calendars/CalendarSlice";
-import { act, useRef } from "react";
+import { useRef } from "react";
 
 import userEvent from "@testing-library/user-event";
 import CalendarLayout from "../../src/components/Calendar/CalendarLayout";
@@ -41,7 +41,7 @@ describe("CalendarSelection", () => {
     calendars: {
       list: {
         "user1/cal1": {
-          name: "Calendar personnal",
+          name: "Calendar personal",
           id: "user1/cal1",
           color: { light: "#FF0000", dark: "#000" },
           ownerEmails: ["alice@example.com"],
@@ -146,11 +146,11 @@ describe("CalendarSelection", () => {
         preloadedState
       );
     });
-    expect(screen.getByText("Personnal Calendars")).toBeInTheDocument();
-    expect(screen.getByText("Delegated Calendars")).toBeInTheDocument();
-    expect(screen.getByText("Other Calendars")).toBeInTheDocument();
+    expect(screen.getByText("calendar.personal")).toBeInTheDocument();
+    expect(screen.getByText("calendar.delegated")).toBeInTheDocument();
+    expect(screen.getByText("calendar.other")).toBeInTheDocument();
 
-    expect(screen.getByLabelText("Calendar personnal")).toBeInTheDocument();
+    expect(screen.getByLabelText("Calendar personal")).toBeInTheDocument();
     expect(screen.getByLabelText("Calendar delegated")).toBeInTheDocument();
     expect(screen.getByLabelText("Calendar shared")).toBeInTheDocument();
   });
@@ -162,16 +162,16 @@ describe("CalendarSelection", () => {
         preloadedState
       );
     });
-    expect(screen.getByText("Personnal Calendars")).toBeInTheDocument();
-    expect(screen.getByText("Delegated Calendars")).toBeInTheDocument();
-    expect(screen.getByText("Other Calendars")).toBeInTheDocument();
+    expect(screen.getByText("calendar.personal")).toBeInTheDocument();
+    expect(screen.getByText("calendar.delegated")).toBeInTheDocument();
+    expect(screen.getByText("calendar.other")).toBeInTheDocument();
 
-    expect(screen.getByLabelText("Calendar personnal")).toBeInTheDocument();
+    expect(screen.getByLabelText("Calendar personal")).toBeInTheDocument();
     expect(screen.getByLabelText("Calendar delegated")).toBeInTheDocument();
     expect(screen.getByLabelText("Calendar shared")).toBeInTheDocument();
 
     const sharedAccordionSummary = screen
-      .getByText("Other Calendars")
+      .getByText("calendar.other")
       .closest(".MuiAccordionSummary-root");
 
     const addButton = screen.getAllByTestId("AddIcon")[2];
@@ -185,12 +185,12 @@ describe("CalendarSelection", () => {
     });
     expect(sharedAccordionSummary).toHaveAttribute("aria-expanded", "true");
   });
-  it("BUGFIX: remove dots in mini calendar when unselecting personnal calendar", async () => {
+  it("BUGFIX: remove dots in mini calendar when unselecting personal calendar", async () => {
     await act(async () =>
       renderWithProviders(<CalendarLayout />, preloadedState)
     );
 
-    const checkbox = screen.getByLabelText("Calendar personnal");
+    const checkbox = screen.getByLabelText("Calendar personal");
     // checkbox checked : events shown
     expect(
       screen.getByTestId(
@@ -223,9 +223,9 @@ describe("CalendarSelection", () => {
       renderWithProviders(<CalendarLayout />, preloadedState)
     );
 
-    // hide personnal event first
+    // hide personal event first
     await act(async () => {
-      fireEvent.click(screen.getByLabelText("Calendar personnal"));
+      fireEvent.click(screen.getByLabelText("Calendar personal"));
     });
     const checkbox = screen.getByLabelText("Calendar delegated");
 
@@ -250,9 +250,9 @@ describe("CalendarSelection", () => {
       renderWithProviders(<CalendarLayout />, preloadedState)
     );
 
-    // hide personnal event first
+    // hide personal event first
     await act(async () => {
-      fireEvent.click(screen.getByLabelText("Calendar personnal"));
+      fireEvent.click(screen.getByLabelText("Calendar personal"));
     });
     const checkbox = screen.getByLabelText("Calendar shared");
 
@@ -286,7 +286,7 @@ describe("CalendarSelection", () => {
       );
     });
 
-    expect(screen.getByLabelText("Calendar personnal")).toBeChecked();
+    expect(screen.getByLabelText("Calendar personal")).toBeChecked();
     expect(screen.getByLabelText("Calendar delegated")).toBeChecked();
     expect(screen.getByLabelText("Calendar shared")).toBeChecked();
   });
@@ -299,12 +299,12 @@ describe("CalendarSelection", () => {
       );
     });
 
-    expect(screen.getByLabelText("Calendar personnal")).toBeChecked();
+    expect(screen.getByLabelText("Calendar personal")).toBeChecked();
     expect(screen.getByLabelText("Calendar delegated")).not.toBeChecked();
     expect(screen.getByLabelText("Calendar shared")).not.toBeChecked();
 
     await act(async () => {
-      fireEvent.click(screen.getByLabelText("Calendar personnal"));
+      fireEvent.click(screen.getByLabelText("Calendar personal"));
       fireEvent.click(screen.getByLabelText("Calendar shared"));
     });
 
@@ -333,7 +333,7 @@ describe("calendar Availability search", () => {
     calendars: {
       list: {
         "user1/cal1": {
-          name: "Calendar personnal",
+          name: "Calendar personal",
           id: "user1/cal1",
           color: { light: "#FF0000", dark: "#000" },
           ownerEmails: ["alice@example.com"],
@@ -364,7 +364,7 @@ describe("calendar Availability search", () => {
       renderWithProviders(<CalendarTestWrapper />, preloadedState)
     );
 
-    const input = screen.getByPlaceholderText(/start typing a name or email/i);
+    const input = screen.getByPlaceholderText("peopleSearch.placeholder");
     act(() => {
       userEvent.type(input, "New");
     });
@@ -394,7 +394,7 @@ describe("calendar Availability search", () => {
       renderWithProviders(<CalendarTestWrapper />, preloadedState)
     );
 
-    const input = screen.getByPlaceholderText(/start typing a name or email/i);
+    const input = screen.getByPlaceholderText("peopleSearch.placeholder");
     await act(async () => userEvent.type(input, "Alice"));
 
     const option = await screen.findByText("Alice");
@@ -423,7 +423,7 @@ describe("calendar Availability search", () => {
       renderWithProviders(<CalendarTestWrapper />, preloadedState)
     );
 
-    const input = screen.getByPlaceholderText(/start typing a name or email/i);
+    const input = screen.getByPlaceholderText("peopleSearch.placeholder");
     await act(async () => userEvent.type(input, "New"));
 
     const option = await screen.findByText("New User");
@@ -433,10 +433,12 @@ describe("calendar Availability search", () => {
     });
     expect(spy).toHaveBeenCalled();
     await act(async () => {
-      fireEvent.click(screen.getByRole("button", { name: /create event/i }));
+      fireEvent.click(
+        screen.getByRole("button", { name: "event.createEvent" })
+      );
     });
     await waitFor(() => {
-      expect(screen.getAllByText(/Create Event/i)).toHaveLength(2);
+      expect(screen.getAllByText("event.createEvent")).toHaveLength(2);
       expect(screen.getAllByText(/New User/i)).toHaveLength(2);
     });
   });
@@ -460,7 +462,7 @@ describe("calendar Availability search", () => {
       renderWithProviders(<CalendarTestWrapper />, preloadedState)
     );
 
-    const input = screen.getByPlaceholderText(/start typing a name or email/i);
+    const input = screen.getByPlaceholderText("peopleSearch.placeholder");
     await act(async () => userEvent.type(input, "New"));
 
     const option = await screen.findByText("New User");
@@ -473,12 +475,12 @@ describe("calendar Availability search", () => {
     });
 
     await waitFor(() => {
-      expect(screen.getAllByText(/Create Event/i)).toHaveLength(2);
+      expect(screen.getAllByText("event.createEvent")).toHaveLength(2);
       expect(screen.getAllByText(/New User/i)).toHaveLength(2);
     });
   });
 
-  it("BUGFIX: can untoggle all personnal calendars", async () => {
+  it("BUGFIX: can untoggle all calendar.personal", async () => {
     await act(async () =>
       renderWithProviders(<CalendarTestWrapper />, {
         user: preloadedState.user,
@@ -489,7 +491,7 @@ describe("calendar Availability search", () => {
       })
     );
 
-    const checkbox = screen.getByLabelText("Calendar personnal");
+    const checkbox = screen.getByLabelText("Calendar personal");
     expect(checkbox).toBeChecked();
 
     fireEvent.click(checkbox); // toggle off

__test__/components/CalendarColors.test.tsx

@@ -1,6 +1,5 @@
-import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { fireEvent, screen, waitFor, act } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { act } from "react";
 import CalendarSearch from "../../src/components/Calendar/CalendarSearch";
 import * as CalendarApi from "../../src/features/Calendars/CalendarApi";
 import * as CalendarSlice from "../../src/features/Calendars/CalendarSlice";
@@ -188,7 +187,7 @@ describe("CalendarSearch", () => {
 
     await waitFor(() => {
       expect(
-        screen.getByText("No more Calendar for Test User")
+        screen.getByText("calendar.noMoreCalendarsFor(name=Test User)")
       ).toBeInTheDocument();
     });
 
@@ -223,7 +222,7 @@ describe("CalendarSearch", () => {
 
     await waitFor(() => {
       expect(
-        screen.getByText("No publicly available calendars for Test User")
+        screen.getByText("calendar.noPublicCalendarsFor(name=Test User)")
       ).toBeInTheDocument();
     });
   });

__test__/components/CalendarSelection.test.tsx

@@ -44,7 +44,7 @@ describe("CalendarSelection", () => {
     jest.clearAllMocks();
     cleanup();
   });
-  it("renders personal, delegated and other calendars", () => {
+  it("renders personal, delegated and calendar.other", () => {
     renderWithProviders(
       <CalendarSelection
         selectedCalendars={["user1/cal1"]}
@@ -56,9 +56,9 @@ describe("CalendarSelection", () => {
       }
     );
 
-    expect(screen.getByText("Personnal Calendars")).toBeInTheDocument();
-    expect(screen.getByText("Delegated Calendars")).toBeInTheDocument();
-    expect(screen.getByText("Other Calendars")).toBeInTheDocument();
+    expect(screen.getByText("calendar.personal")).toBeInTheDocument();
+    expect(screen.getByText("calendar.delegated")).toBeInTheDocument();
+    expect(screen.getByText("calendar.other")).toBeInTheDocument();
 
     expect(screen.getByLabelText("Calendar personal")).toBeChecked();
     expect(screen.getByLabelText("Calendar delegated")).not.toBeChecked();
@@ -125,11 +125,13 @@ describe("CalendarSelection", () => {
     fireEvent.click(addButtons[1]);
 
     await waitFor(() =>
-      expect(screen.getByText(/Add new calendar/i)).toBeInTheDocument()
+      expect(
+        screen.getByText("calendarPopover.tabs.addNew")
+      ).toBeInTheDocument()
     );
   });
 
-  it("Navigates to deletion dialog and deletes personnal cal", async () => {
+  it("Navigates to deletion dialog and deletes personal cal", async () => {
     const spy = jest
       .spyOn(calendarThunks, "removeCalendarAsync")
       .mockImplementation((payload) => {
@@ -152,7 +154,9 @@ describe("CalendarSelection", () => {
     userEvent.click(screen.getByText(/delete/i));
 
     await waitFor(() =>
-      expect(screen.getByText("Remove Calendar personal?")).toBeInTheDocument()
+      expect(
+        screen.getByText("calendar.delete.title(name=Calendar personal)")
+      ).toBeInTheDocument()
     );
     fireEvent.click(screen.getByRole("button", { name: /delete/i }));
 
@@ -182,7 +186,9 @@ describe("CalendarSelection", () => {
     userEvent.click(screen.getByText(/remove/i));
 
     await waitFor(() =>
-      expect(screen.getByText("Remove Calendar delegated?")).toBeInTheDocument()
+      expect(
+        screen.getByText("calendar.delete.title(name=Calendar delegated)")
+      ).toBeInTheDocument()
     );
     fireEvent.click(screen.getByRole("button", { name: /remove/i }));
 
@@ -204,10 +210,12 @@ describe("CalendarSelection", () => {
     const addButtons = screen.getAllByTestId("AddIcon");
     fireEvent.click(addButtons[1]); // seccond Add button (other)
 
-    expect(screen.getByText("Browse other calendars")).toBeInTheDocument();
+    expect(
+      screen.getByText("calendar.browseOtherCalendars")
+    ).toBeInTheDocument();
   });
 
-  it("when only personnal calendars are in the state, only personnal calendars and the title for other to be added are shown", () => {
+  it("when only calendar.personal are in the state, only calendar.personal and the title for other to be added are shown", () => {
     renderWithProviders(
       <CalendarSelection
         selectedCalendars={[]}
@@ -224,9 +232,9 @@ describe("CalendarSelection", () => {
       }
     );
 
-    expect(screen.getByText("Personnal Calendars")).toBeInTheDocument();
-    expect(screen.queryByText("Delegated Calendars")).not.toBeInTheDocument();
-    expect(screen.queryByText("Other Calendars")).toBeInTheDocument();
+    expect(screen.getByText("calendar.personal")).toBeInTheDocument();
+    expect(screen.queryByText("calendar.delegated")).not.toBeInTheDocument();
+    expect(screen.queryByText("calendar.other")).toBeInTheDocument();
   });
 
   it("renders nothing when no calendars are present", () => {
@@ -256,7 +264,7 @@ describe("CalendarSelection", () => {
       }
     );
     const delegatedAccordionSummary = screen
-      .getByText("Delegated Calendars")
+      .getByText("calendar.delegated")
       .closest(".MuiAccordionSummary-root");
 
     fireEvent.click(delegatedAccordionSummary!);

__test__/components/DuplicateEvent.test.tsx

@@ -1,6 +1,5 @@
 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";
 import { renderWithProviders } from "../utils/Renderwithproviders";
 import EventPreviewModal from "../../src/features/Events/EventDisplayPreview";
@@ -31,8 +30,8 @@ const preloadedState = {
             URL: "calendars/667037022b752d0026472254/cal1/event1.ics",
             title: "Test Event",
             calId: "667037022b752d0026472254/cal1",
-            start: day,
-            end: day,
+            start: day.toISOString(),
+            end: day.toISOString(),
             timezone: "UTC",
             organizer: { cn: "test", cal_address: "test@test.com" },
             attendee: [
@@ -77,7 +76,9 @@ describe("EventDuplication", () => {
       preloadedState
     );
 
-    fireEvent.click(screen.getByRole("menuitem", { name: /Duplicate event/i }));
+    fireEvent.click(
+      screen.getByRole("menuitem", { name: "eventDuplication.duplicateEvent" })
+    );
 
     expect(onOpenDuplicate).toHaveBeenCalled();
   });
@@ -126,7 +127,7 @@ describe("EventPopover", () => {
     fireEvent.change(screen.getByLabelText(/Title/i), {
       target: { value: "Duplicated Event" },
     });
-    fireEvent.click(screen.getByRole("button", { name: /Save/i }));
+    fireEvent.click(screen.getByRole("button", { name: "actions.save" }));
 
     waitFor(() => expect(onClose).toHaveBeenCalled());
   });
@@ -145,8 +146,12 @@ describe("EventDisplayModal", () => {
     );
 
     fireEvent.click(screen.getByTestId("MoreVertIcon"));
-    fireEvent.click(screen.getByRole("menuitem", { name: /Duplicate event/i }));
-    expect(screen.getAllByText(/Duplicate Event/i)[1]).toBeInTheDocument();
+    fireEvent.click(
+      screen.getByRole("menuitem", { name: "eventDuplication.duplicateEvent" })
+    );
+    expect(
+      screen.getAllByText("eventDuplication.duplicateEvent")[1]
+    ).toBeInTheDocument();
     expect(
       screen.getByDisplayValue(
         preloadedState.calendars.list["667037022b752d0026472254/cal1"].events

__test__/components/Menubar.test.tsx

@@ -34,7 +34,7 @@ describe("Calendar App Component Display Tests", () => {
       />,
       preloadedState
     );
-    const logoElement = screen.getByAltText("Calendar");
+    const logoElement = screen.getByAltText("menubar.logoAlt");
     expect(logoElement).toBeInTheDocument();
   });
   it("renders the main title", () => {
@@ -52,7 +52,7 @@ describe("Calendar App Component Display Tests", () => {
       />,
       preloadedState
     );
-    expect(screen.getByAltText("Calendar")).toBeInTheDocument();
+    expect(screen.getByAltText("menubar.logoAlt")).toBeInTheDocument();
   });
 
   it("shows avatar with user initials", () => {

__test__/components/RepeatEvent.test.tsx

@@ -99,20 +99,22 @@ async function setupEventPopover(
   );
 
   // Fill in title
-  const titleInput = screen.getByLabelText("Title");
+  const titleInput = screen.getByLabelText("event.form.title");
   fireEvent.change(titleInput, { target: { value: "Meeting" } });
 
   // Click More options to expand the dialog
-  const showMoreButton = screen.getByRole("button", { name: /More options/i });
+  const showMoreButton = screen.getByRole("button", {
+    name: "common.moreOptions",
+  });
   fireEvent.click(showMoreButton);
 
   // Check Repeat checkbox to show repeat options
-  const repeatCheckbox = screen.getByLabelText("Repeat");
+  const repeatCheckbox = screen.getByLabelText("event.form.repeat");
   fireEvent.click(repeatCheckbox);
 
   // Wait for RepeatEvent component to be rendered
   await waitFor(() => {
-    expect(screen.getByText("Day(s)")).toBeInTheDocument();
+    expect(screen.getByText("event.repeat.frequency.days")).toBeInTheDocument();
   });
 }
 
@@ -154,7 +156,7 @@ describe("RepeatEvent Component", () => {
     fireEvent.mouseDown(frequencySelect);
 
     // Select Week(s)
-    const weeklyOption = screen.getByText("Week(s)");
+    const weeklyOption = screen.getByText("event.repeat.frequency.weeks");
     fireEvent.click(weeklyOption);
 
     expect(setRepetition).toHaveBeenCalledWith(
@@ -183,7 +185,7 @@ describe("RepeatEvent Component", () => {
   it("toggles day selection for weekly frequency", () => {
     const { setRepetition } = setupRepeatEvent({ freq: "weekly" });
 
-    const mondayCheckbox = screen.getByLabelText("MO");
+    const mondayCheckbox = screen.getByLabelText("event.repeat.days.monday");
     fireEvent.click(mondayCheckbox);
 
     expect(setRepetition).toHaveBeenCalledWith(
@@ -203,9 +205,11 @@ describe("Repeat Event Integration Tests", () => {
 
     // When Repeat checkbox is checked, repetition is set to empty object
     // We need to set the frequency manually
-    const frequencySelect = screen.getByText("Day(s)");
+    const frequencySelect = screen.getByText("event.repeat.frequency.days");
     fireEvent.mouseDown(frequencySelect);
-    const dailyOption = screen.getByRole("option", { name: "Day(s)" });
+    const dailyOption = screen.getByRole("option", {
+      name: "event.repeat.frequency.days",
+    });
     fireEvent.click(dailyOption);
 
     await expectRRule({ freq: "daily", interval: 1 });
@@ -259,13 +263,17 @@ describe("Repeat Event Integration Tests", () => {
     await setupEventPopover();
 
     // Select Week(s) frequency
-    const frequencySelect = screen.getByText("Day(s)");
+    const frequencySelect = screen.getByText("event.repeat.frequency.days");
     fireEvent.mouseDown(frequencySelect);
-    const weeklyOption = screen.getByRole("option", { name: "Week(s)" });
+    const weeklyOption = screen.getByRole("option", {
+      name: "event.repeat.frequency.weeks",
+    });
     fireEvent.click(weeklyOption);
 
     // Select Thursday
-    const thursdayCheckbox = screen.getByLabelText("TH");
+    const thursdayCheckbox = screen.getByLabelText(
+      "event.repeat.days.thursday"
+    );
     fireEvent.click(thursdayCheckbox);
 
     await expectRRule({
@@ -280,9 +288,11 @@ describe("Repeat Event Integration Tests", () => {
     await setupEventPopover();
 
     // Select Week(s) frequency
-    const frequencySelect = screen.getByText("Day(s)");
+    const frequencySelect = screen.getByText("event.repeat.frequency.days");
     fireEvent.mouseDown(frequencySelect);
-    const weeklyOption = screen.getByRole("option", { name: "Week(s)" });
+    const weeklyOption = screen.getByRole("option", {
+      name: "event.repeat.frequency.weeks",
+    });
     fireEvent.click(weeklyOption);
 
     // Set interval to 3
@@ -297,9 +307,11 @@ describe("Repeat Event Integration Tests", () => {
     await setupEventPopover();
 
     // Select Month(s) frequency
-    const frequencySelect = screen.getByText("Day(s)");
+    const frequencySelect = screen.getByText("event.repeat.frequency.days");
     fireEvent.mouseDown(frequencySelect);
-    const monthlyOption = screen.getByRole("option", { name: "Month(s)" });
+    const monthlyOption = screen.getByRole("option", {
+      name: "event.repeat.frequency.months",
+    });
     fireEvent.click(monthlyOption);
 
     await expectRRule({ freq: "monthly", interval: 1 });
@@ -310,9 +322,11 @@ describe("Repeat Event Integration Tests", () => {
     await setupEventPopover();
 
     // Select Month(s) frequency
-    const frequencySelect = screen.getByText("Day(s)");
+    const frequencySelect = screen.getByText("event.repeat.frequency.days");
     fireEvent.mouseDown(frequencySelect);
-    const monthlyOption = screen.getByRole("option", { name: "Month(s)" });
+    const monthlyOption = screen.getByRole("option", {
+      name: "event.repeat.frequency.months",
+    });
     fireEvent.click(monthlyOption);
 
     // Select "After" end option
@@ -331,9 +345,11 @@ describe("Repeat Event Integration Tests", () => {
     await setupEventPopover();
 
     // Select Year(s) frequency
-    const frequencySelect = screen.getByText("Day(s)");
+    const frequencySelect = screen.getByText("event.repeat.frequency.days");
     fireEvent.mouseDown(frequencySelect);
-    const yearlyOption = screen.getByRole("option", { name: "Year(s)" });
+    const yearlyOption = screen.getByRole("option", {
+      name: "event.repeat.frequency.years",
+    });
     fireEvent.click(yearlyOption);
 
     await expectRRule({ freq: "yearly", interval: 1 });
@@ -344,9 +360,11 @@ describe("Repeat Event Integration Tests", () => {
     await setupEventPopover();
 
     // Select Year(s) frequency
-    const frequencySelect = screen.getByText("Day(s)");
+    const frequencySelect = screen.getByText("event.repeat.frequency.days");
     fireEvent.mouseDown(frequencySelect);
-    const yearlyOption = screen.getByRole("option", { name: "Year(s)" });
+    const yearlyOption = screen.getByRole("option", {
+      name: "event.repeat.frequency.years",
+    });
     fireEvent.click(yearlyOption);
 
     // First choose "After" with 5 occurrences