workavia-calendar-front/__test__/features/Settings/WorkingDays.test.tsx

import SettingsPage from "@/features/Settings/SettingsPage";
import settingsReducer from "@/features/Settings/SettingsSlice";
import userReducer, {
  getOpenPaasUserDataAsync,
} from "@/features/User/userSlice";
import { api } from "@/utils/apiUtils";
import { configureStore } from "@reduxjs/toolkit";
import "@testing-library/jest-dom";
import { fireEvent, screen, waitFor } from "@testing-library/react";
import { renderWithProviders } from "../../utils/Renderwithproviders";

jest.mock("@/utils/apiUtils");

const basePreloadedState = {
  user: {
    userData: {
      sub: "test",
      email: "test@test.com",
      family_name: "Doe",
      name: "John",
      sid: "mockSid",
      openpaasId: "667037022b752d0026472254",
    },
    organiserData: null,
    tokens: null,
    coreConfig: {
      language: "en",
      datetime: { timeZone: "UTC" },
    },
    alarmEmailsEnabled: false,
    loading: false,
    error: null,
  },
  settings: {
    language: "en",
    timeZone: "UTC",
    isBrowserDefaultTimeZone: false,
    view: "settings",
    businessHours: {
      start: "8:0",
      end: "19:0",
      daysOfWeek: [1, 2, 3, 4, 5],
    },
    workingDays: false,
  },
};

describe("Working Days and Business Hours Settings", () => {
  beforeEach(() => {
    jest.clearAllMocks();
    (api.patch as jest.Mock).mockResolvedValue({ status: 204 });
  });

  describe("Initial rendering", () => {
    it("renders the working days section with day selector", () => {
      renderWithProviders(<SettingsPage />, basePreloadedState);

      expect(
        screen.getByText("settings.chooseWorkingDays")
      ).toBeInTheDocument();
    });

    it("renders the show only working days toggle", () => {
      renderWithProviders(<SettingsPage />, basePreloadedState);

      expect(
        screen.getByRole("switch", { name: /settings.showOnlyWorkingDays/i })
      ).toBeInTheDocument();
    });

    it("shows working days toggle as unchecked when workingDays is false", () => {
      renderWithProviders(<SettingsPage />, basePreloadedState);

      const toggle = screen.getByRole("switch", {
        name: /settings.showOnlyWorkingDays/i,
      }) as HTMLInputElement;
      expect(toggle.checked).toBe(false);
    });

    it("shows working days toggle as checked when workingDays is true", () => {
      renderWithProviders(<SettingsPage />, {
        ...basePreloadedState,
        settings: { ...basePreloadedState.settings, workingDays: true },
      });

      const toggle = screen.getByRole("switch", {
        name: /settings.showOnlyWorkingDays/i,
      }) as HTMLInputElement;
      expect(toggle.checked).toBe(true);
    });

    it("shows working days toggle as unchecked when workingDays is null", () => {
      renderWithProviders(<SettingsPage />, {
        ...basePreloadedState,
        settings: { ...basePreloadedState.settings, workingDays: null },
      });

      const toggle = screen.getByRole("switch", {
        name: /settings.showOnlyWorkingDays/i,
      }) as HTMLInputElement;
      expect(toggle.checked).toBe(false);
    });
  });

  describe("workingDays toggle", () => {
    it("updates workingDays immediately (optimistic update) and calls API", async () => {
      const { store } = renderWithProviders(
        <SettingsPage />,
        basePreloadedState
      );

      const toggle = screen.getByRole("switch", {
        name: /settings.showOnlyWorkingDays/i,
      });
      fireEvent.click(toggle);

      await waitFor(() => {
        expect(store.getState().settings.workingDays).toBe(true);
      });

      await waitFor(() => {
        expect(api.patch).toHaveBeenCalledWith(
          "api/configurations?scope=user",
          expect.objectContaining({
            json: expect.arrayContaining([
              expect.objectContaining({
                name: "linagora.esn.calendar",
                configurations: expect.arrayContaining([
                  expect.objectContaining({
                    name: "workingDays",
                    value: true,
                  }),
                ]),
              }),
            ]),
          })
        );
      });
    });

    it("rolls back workingDays if API call fails", async () => {
      (api.patch as jest.Mock).mockRejectedValue(new Error("API Error"));

      const { store } = renderWithProviders(
        <SettingsPage />,
        basePreloadedState
      );

      const toggle = screen.getByRole("switch", {
        name: /settings.showOnlyWorkingDays/i,
      });
      fireEvent.click(toggle);

      await waitFor(
        () => {
          expect(store.getState().settings.workingDays).toBe(false);
        },
        { timeout: 3000 }
      );

      await waitFor(() => {
        expect(
          screen.getByText("settings.workingDaysUpdateError")
        ).toBeInTheDocument();
      });
    });

    it("toggles workingDays from true to false", async () => {
      const { store } = renderWithProviders(<SettingsPage />, {
        ...basePreloadedState,
        settings: { ...basePreloadedState.settings, workingDays: true },
      });

      const toggle = screen.getByRole("switch", {
        name: /settings.showOnlyWorkingDays/i,
      });
      fireEvent.click(toggle);

      await waitFor(() => {
        expect(store.getState().settings.workingDays).toBe(false);
      });

      await waitFor(() => {
        expect(api.patch).toHaveBeenCalledWith(
          "api/configurations?scope=user",
          expect.objectContaining({
            json: expect.arrayContaining([
              expect.objectContaining({
                name: "linagora.esn.calendar",
                configurations: expect.arrayContaining([
                  expect.objectContaining({
                    name: "workingDays",
                    value: false,
                  }),
                ]),
              }),
            ]),
          })
        );
      });
    });
  });

  describe("businessHours day selector", () => {
    it("updates businessHours in Redux immediately when a day is clicked", async () => {
      const { store } = renderWithProviders(
        <SettingsPage />,
        basePreloadedState
      );

      // Sunday (0) is not in initial daysOfWeek [1,2,3,4,5], click it to add
      const sundayButton = screen.getByRole("button", {
        name: /sunday/i,
      });
      fireEvent.click(sundayButton);

      await waitFor(() => {
        expect(store.getState().settings.businessHours?.daysOfWeek).toContain(
          0
        );
      });
    });

    it("removes a day from businessHours when an already selected day is clicked", async () => {
      const { store } = renderWithProviders(
        <SettingsPage />,
        basePreloadedState
      );

      // Monday (1) is in initial daysOfWeek, click to remove
      const mondayButton = screen.getByRole("button", { name: /monday/i });
      fireEvent.click(mondayButton);

      await waitFor(() => {
        expect(
          store.getState().settings.businessHours?.daysOfWeek
        ).not.toContain(1);
      });
    });

    it("debounces API call when multiple days are clicked rapidly", async () => {
      jest.useFakeTimers();

      renderWithProviders(<SettingsPage />, basePreloadedState);

      const sundayButton = screen.getByRole("button", { name: /sunday/i });
      const saturdayButton = screen.getByRole("button", { name: /saturday/i });

      fireEvent.click(sundayButton);
      fireEvent.click(saturdayButton);
      fireEvent.click(sundayButton);

      // API should not have been called yet
      expect(api.patch).not.toHaveBeenCalled();

      // Advance timers past debounce threshold
      jest.runAllTimers();

      await waitFor(() => {
        expect(api.patch).toHaveBeenCalledTimes(1);
      });

      jest.useRealTimers();
    });

    it("sends businessHours as array to API", async () => {
      jest.useFakeTimers();

      renderWithProviders(<SettingsPage />, basePreloadedState);

      const sundayButton = screen.getByRole("button", { name: /sunday/i });
      fireEvent.click(sundayButton);

      jest.runAllTimers();

      await waitFor(() => {
        expect(api.patch).toHaveBeenCalledWith(
          "api/configurations?scope=user",
          expect.objectContaining({
            json: expect.arrayContaining([
              expect.objectContaining({
                name: "core",
                configurations: expect.arrayContaining([
                  expect.objectContaining({
                    name: "businessHours",
                    value: expect.arrayContaining([
                      expect.objectContaining({
                        start: "8:0",
                        end: "19:0",
                        daysOfWeek: expect.arrayContaining([0]),
                      }),
                    ]),
                  }),
                ]),
              }),
            ]),
          })
        );
      });

      jest.useRealTimers();
    });

    it("rolls back businessHours if API call fails", async () => {
      jest.useFakeTimers();
      (api.patch as jest.Mock).mockRejectedValue(new Error("API Error"));

      const { store } = renderWithProviders(
        <SettingsPage />,
        basePreloadedState
      );

      const sundayButton = screen.getByRole("button", { name: /sunday/i });
      fireEvent.click(sundayButton);

      jest.runAllTimers();

      await waitFor(
        () => {
          expect(
            store.getState().settings.businessHours?.daysOfWeek
          ).not.toContain(0);
        },
        { timeout: 3000 }
      );

      await waitFor(() => {
        expect(
          screen.getByText("settings.workingDaysUpdateError")
        ).toBeInTheDocument();
      });

      jest.useRealTimers();
    });
  });

  describe("getOpenPaasUserDataAsync integration", () => {
    it("populates businessHours from core module configurations", async () => {
      const store = configureStore({
        reducer: { user: userReducer, settings: settingsReducer },
        preloadedState: {
          user: {
            userData: {
              sub: "test",
              email: "test@test.com",
              family_name: "Doe",
              name: "John",
              sid: "mockSid",
              openpaasId: "667037022b752d0026472254",
            },
            organiserData: null,
            tokens: null,
            coreConfig: { language: "en", datetime: { timeZone: "UTC" } },
            alarmEmailsEnabled: null,
            loading: false,
            error: null,
          },
          settings: {
            language: "en",
            timeZone: "UTC",
            isBrowserDefaultTimeZone: false,
            view: "calendar",
            businessHours: null,
            workingDays: null,
          },
        },
      });

      const mockResponse = {
        id: "667037022b752d0026472254",
        firstname: "John",
        lastname: "Doe",
        preferredEmail: "test@test.com",
        configurations: {
          modules: [
            {
              name: "core",
              configurations: [
                {
                  name: "businessHours",
                  value: [
                    { start: "8:0", end: "19:0", daysOfWeek: [1, 2, 3, 4, 5] },
                  ],
                },
              ],
            },
            {
              name: "linagora.esn.calendar",
              configurations: [{ name: "workingDays", value: true }],
            },
          ],
        },
      };

      await store.dispatch(
        getOpenPaasUserDataAsync.fulfilled(mockResponse, "", undefined)
      );

      const state = store.getState();
      expect(state.settings.businessHours).toEqual({
        start: "8:0",
        end: "19:0",
        daysOfWeek: [1, 2, 3, 4, 5],
      });
      expect(state.settings.workingDays).toBe(true);
    });

    it("sets businessHours to null when not present in API response", async () => {
      const store = configureStore({
        reducer: { user: userReducer, settings: settingsReducer },
        preloadedState: {
          user: {
            userData: {
              sub: "test",
              email: "test@test.com",
              family_name: "Doe",
              name: "John",
              sid: "mockSid",
              openpaasId: "667037022b752d0026472254",
            },
            organiserData: null,
            tokens: null,
            coreConfig: { language: "en", datetime: { timeZone: "UTC" } },
            alarmEmailsEnabled: null,
            loading: false,
            error: null,
          },
          settings: {
            language: "en",
            timeZone: "UTC",
            isBrowserDefaultTimeZone: false,
            view: "calendar",
            businessHours: null,
            workingDays: null,
          },
        },
      });

      const mockResponse = {
        id: "667037022b752d0026472254",
        firstname: "John",
        lastname: "Doe",
        preferredEmail: "test@test.com",
        configurations: {
          modules: [
            {
              name: "core",
              configurations: [],
            },
            {
              name: "linagora.esn.calendar",
              configurations: [{ name: "workingDays", value: null }],
            },
          ],
        },
      };

      await store.dispatch(
        getOpenPaasUserDataAsync.fulfilled(mockResponse, "", undefined)
      );

      const state = store.getState();
      expect(state.settings.businessHours).toBeNull();
      expect(state.settings.workingDays).toBeNull();
    });
  });
});