[#179] functionnal topbar when dialog expanded (#292)

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

__test__/components/Menubar.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, screen } from "@testing-library/react";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import { Menubar } from "../../src/components/Menubar/Menubar";
 import { renderWithProviders } from "../utils/Renderwithproviders";
@@ -383,3 +383,236 @@ describe("Calendar App Component Display Tests", () => {
     expect(testLink).toHaveAttribute("href", "test");
   });
 });
+
+describe("Menubar interaction with expanded Dialog", () => {
+  const preloadedState = {
+    user: {
+      userData: {
+        sub: "test",
+        email: "test@test.com",
+        family_name: "Doe",
+        name: "John",
+        sid: "mockSid",
+        openpaasId: "667037022b752d0026472254",
+      },
+    },
+    settings: {
+      language: "en",
+    },
+  };
+
+  beforeEach(() => {
+    (window as any).appList = [
+      { name: "Twake", link: "/twake", icon: "twake.svg" },
+      { name: "Calendar", link: "/calendar", icon: "calendar.svg" },
+    ];
+  });
+
+  afterEach(() => {
+    document.body.classList.remove("dialog-expanded");
+  });
+
+  it("has navigation controls element with correct class", () => {
+    const mockCalendarRef = { current: null };
+    const mockOnRefresh = jest.fn();
+    const mockCurrentDate = new Date("2024-04-15");
+
+    const { container } = renderWithProviders(
+      <Menubar
+        calendarRef={mockCalendarRef}
+        onRefresh={mockOnRefresh}
+        currentDate={mockCurrentDate}
+        currentView="dayGridMonth"
+      />,
+      preloadedState
+    );
+
+    const navigationControls = container.querySelector(".navigation-controls");
+    expect(navigationControls).toBeInTheDocument();
+    expect(navigationControls).toHaveClass("navigation-controls");
+  });
+
+  it("has current date time element with correct class", () => {
+    const mockCalendarRef = { current: null };
+    const mockOnRefresh = jest.fn();
+    const mockCurrentDate = new Date("2024-04-15");
+
+    const { container } = renderWithProviders(
+      <Menubar
+        calendarRef={mockCalendarRef}
+        onRefresh={mockOnRefresh}
+        currentDate={mockCurrentDate}
+        currentView="dayGridMonth"
+      />,
+      preloadedState
+    );
+
+    const dateTimeDisplay = container.querySelector(".current-date-time");
+    expect(dateTimeDisplay).toBeInTheDocument();
+    expect(dateTimeDisplay).toHaveClass("current-date-time");
+  });
+
+  it("has refresh button element with correct class", () => {
+    const mockCalendarRef = { current: null };
+    const mockOnRefresh = jest.fn();
+    const mockCurrentDate = new Date("2024-04-15");
+
+    const { container } = renderWithProviders(
+      <Menubar
+        calendarRef={mockCalendarRef}
+        onRefresh={mockOnRefresh}
+        currentDate={mockCurrentDate}
+        currentView="dayGridMonth"
+      />,
+      preloadedState
+    );
+
+    const refreshButton = container.querySelector(".refresh-button");
+    expect(refreshButton).toBeInTheDocument();
+    expect(refreshButton).toHaveClass("refresh-button");
+  });
+
+  it("has view selector element with correct class", () => {
+    const mockCalendarRef = { current: null };
+    const mockOnRefresh = jest.fn();
+    const mockCurrentDate = new Date("2024-04-15");
+
+    const { container } = renderWithProviders(
+      <Menubar
+        calendarRef={mockCalendarRef}
+        onRefresh={mockOnRefresh}
+        currentDate={mockCurrentDate}
+        currentView="dayGridMonth"
+      />,
+      preloadedState
+    );
+
+    const selectDisplay = container.querySelector(".select-display");
+    expect(selectDisplay).toBeInTheDocument();
+    expect(selectDisplay).toHaveClass("select-display");
+  });
+
+  it("keeps logo visible when dialog is expanded", () => {
+    const mockCalendarRef = { current: null };
+    const mockOnRefresh = jest.fn();
+    const mockCurrentDate = new Date("2024-04-15");
+
+    document.body.classList.add("dialog-expanded");
+
+    renderWithProviders(
+      <Menubar
+        calendarRef={mockCalendarRef}
+        onRefresh={mockOnRefresh}
+        currentDate={mockCurrentDate}
+        currentView="dayGridMonth"
+      />,
+      preloadedState
+    );
+
+    const logoElement = screen.getByAltText("menubar.logoAlt");
+    expect(logoElement).toBeInTheDocument();
+    expect(logoElement).toBeVisible();
+  });
+
+  it("keeps apps icon clickable when dialog is expanded", () => {
+    const mockCalendarRef = { current: null };
+    const mockOnRefresh = jest.fn();
+    const mockCurrentDate = new Date("2024-04-15");
+
+    document.body.classList.add("dialog-expanded");
+
+    renderWithProviders(
+      <Menubar
+        calendarRef={mockCalendarRef}
+        onRefresh={mockOnRefresh}
+        currentDate={mockCurrentDate}
+        currentView="dayGridMonth"
+      />,
+      preloadedState
+    );
+
+    const appsButton = screen.getByTestId("AppsIcon");
+    expect(appsButton).toBeVisible();
+
+    fireEvent.click(appsButton);
+    expect(screen.getByText("Twake")).toBeInTheDocument();
+  });
+
+  it("keeps avatar clickable when dialog is expanded", async () => {
+    const mockCalendarRef = { current: null };
+    const mockOnRefresh = jest.fn();
+    const mockCurrentDate = new Date("2024-04-15");
+
+    document.body.classList.add("dialog-expanded");
+
+    renderWithProviders(
+      <Menubar
+        calendarRef={mockCalendarRef}
+        onRefresh={mockOnRefresh}
+        currentDate={mockCurrentDate}
+        currentView="dayGridMonth"
+      />,
+      preloadedState
+    );
+
+    const avatar = screen.getByText("JD");
+    expect(avatar).toBeVisible();
+
+    fireEvent.click(avatar.closest("button")!);
+
+    await waitFor(() => {
+      const languageSelector = screen.getByLabelText(
+        "menubar.languageSelector"
+      );
+      expect(languageSelector).toBeInTheDocument();
+    });
+  });
+
+  it("shows all elements in normal mode (not expanded)", () => {
+    const mockCalendarRef = { current: null };
+    const mockOnRefresh = jest.fn();
+    const mockCurrentDate = new Date("2024-04-15");
+
+    const { container } = renderWithProviders(
+      <Menubar
+        calendarRef={mockCalendarRef}
+        onRefresh={mockOnRefresh}
+        currentDate={mockCurrentDate}
+        currentView="dayGridMonth"
+      />,
+      preloadedState
+    );
+
+    const navigationControls = container.querySelector(".navigation-controls");
+    const dateTimeDisplay = container.querySelector(".current-date-time");
+    const refreshButton = container.querySelector(".refresh-button");
+    const selectDisplay = container.querySelector(".select-display");
+
+    expect(navigationControls).toBeVisible();
+    expect(dateTimeDisplay).toBeVisible();
+    expect(refreshButton).toBeVisible();
+    expect(selectDisplay).toBeVisible();
+  });
+
+  it("verifies CSS classes are correctly applied to elements", () => {
+    const mockCalendarRef = { current: null };
+    const mockOnRefresh = jest.fn();
+    const mockCurrentDate = new Date("2024-04-15");
+
+    const { container } = renderWithProviders(
+      <Menubar
+        calendarRef={mockCalendarRef}
+        onRefresh={mockOnRefresh}
+        currentDate={mockCurrentDate}
+        currentView="dayGridMonth"
+      />,
+      preloadedState
+    );
+
+    expect(container.querySelector(".menubar")).toBeInTheDocument();
+    expect(container.querySelector(".navigation-controls")).toBeInTheDocument();
+    expect(container.querySelector(".current-date-time")).toBeInTheDocument();
+    expect(container.querySelector(".refresh-button")).toBeInTheDocument();
+    expect(container.querySelector(".select-display")).toBeInTheDocument();
+  });
+});