diff --git a/__test__/components/Menubar.test.tsx b/__test__/components/Menubar.test.tsx
index cefc344..82f136e 100644
--- a/__test__/components/Menubar.test.tsx
+++ b/__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(
+ ,
+ 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(
+ ,
+ 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(
+ ,
+ 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(
+ ,
+ 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(
+ ,
+ 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(
+ ,
+ 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(
+ ,
+ 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(
+ ,
+ 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(
+ ,
+ 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();
+ });
+});
diff --git a/__test__/utils/Renderwithproviders.tsx b/__test__/utils/Renderwithproviders.tsx
index bbe61c3..30db900 100644
--- a/__test__/utils/Renderwithproviders.tsx
+++ b/__test__/utils/Renderwithproviders.tsx
@@ -36,6 +36,7 @@ export function renderWithProviders(
return key;
},
f: (date: Date, formatStr: string) => date.toString(),
+ lang: "en",
}}
>
diff --git a/jest.config.ts b/jest.config.ts
index af586d0..ccc83c1 100644
--- a/jest.config.ts
+++ b/jest.config.ts
@@ -26,7 +26,8 @@ const config: Config = {
transform: {
"^.+\\.tsx?$": ["ts-jest", { tsconfig: "tsconfig.json" }],
"^.+\\.(js|jsx|mjs)$": "babel-jest",
- "^.+\\.(css|scss|sass|less)$": "jest-preview/transforms/css",
+ "^.+\\.(css|scss|sass|less|styl|stylus)$":
+ "jest-preview/transforms/css",
"^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)":
"jest-preview/transforms/file",
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
diff --git a/src/components/Dialog/ResponsiveDialog.tsx b/src/components/Dialog/ResponsiveDialog.tsx
index 1b58c84..43dfa5c 100644
--- a/src/components/Dialog/ResponsiveDialog.tsx
+++ b/src/components/Dialog/ResponsiveDialog.tsx
@@ -116,6 +116,7 @@ function ResponsiveDialog({
"& .MuiBackdrop-root": {
opacity: isExpanded ? "0 !important" : undefined,
transition: isExpanded ? "none !important" : undefined,
+ pointerEvents: isExpanded ? "none" : undefined,
},
"& .MuiDialog-paper": {
maxWidth: isExpanded ? "100%" : normalMaxWidth,
@@ -124,6 +125,7 @@ function ResponsiveDialog({
margin: isExpanded ? `${headerHeight} 0 0 0` : "32px",
boxShadow: isExpanded ? "none !important" : undefined,
transition: isExpanded ? "none !important" : undefined,
+ zIndex: isExpanded ? 1200 : 1300,
},
"& .MuiDialogActions-root .MuiBox-root": {
maxWidth: isExpanded ? expandedContentMaxWidth : undefined,
@@ -145,16 +147,35 @@ function ResponsiveDialog({
width: "100%",
};
+ React.useEffect(() => {
+ if (isExpanded) {
+ document.body.classList.add("dialog-expanded");
+ } else {
+ document.body.classList.remove("dialog-expanded");
+ }
+ }, [isExpanded]);
+
+ const handleClose = (
+ event: {},
+ reason: "backdropClick" | "escapeKeyDown"
+ ) => {
+ if (isExpanded && reason === "backdropClick") {
+ return;
+ }
+ onClose();
+ };
+
const currentSpacing = isExpanded ? expandedSpacing : normalSpacing;
return (