diff --git a/src/components/auth/SessionExpiryDialog.test.tsx b/src/components/auth/SessionExpiryDialog.test.tsx new file mode 100644 index 0000000..ab1e778 --- /dev/null +++ b/src/components/auth/SessionExpiryDialog.test.tsx @@ -0,0 +1,39 @@ +import { createTheme, ThemeProvider } from "@mui/material/styles"; +import { act, render, screen } from "@testing-library/react"; + +import { useAuthStore } from "@/store/authStore"; +import { SessionExpiryDialog } from "./SessionExpiryDialog"; + +jest.mock("next-auth/react", () => ({ + signIn: jest.fn(), +})); + +describe("SessionExpiryDialog", () => { + beforeEach(() => { + useAuthStore.setState({ + accessToken: null, + sessionExpired: true, + sessionExpiryReason: "unauthorized", + }); + }); + + afterEach(() => { + act(() => useAuthStore.getState().clearSessionExpired()); + }); + + it("renders above every regular application overlay", () => { + const theme = createTheme(); + + render( + + + , + ); + + const dialogRoot = screen.getByRole("dialog").closest(".MuiModal-root"); + expect(dialogRoot).not.toBeNull(); + expect(dialogRoot).toHaveStyle({ + zIndex: theme.zIndex.tooltip + 1, + }); + }); +}); diff --git a/src/components/auth/SessionExpiryDialog.tsx b/src/components/auth/SessionExpiryDialog.tsx index 56bac19..c42ecd9 100644 --- a/src/components/auth/SessionExpiryDialog.tsx +++ b/src/components/auth/SessionExpiryDialog.tsx @@ -13,6 +13,7 @@ import { Stack, Typography, } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; import { useAuthStore } from "@/store/authStore"; @@ -25,6 +26,7 @@ type SessionExpiryDialogProps = { export const SessionExpiryDialog = ({ expiresAt, }: SessionExpiryDialogProps) => { + const theme = useTheme(); const sessionExpired = useAuthStore((state) => state.sessionExpired); const reason = useAuthStore((state) => state.sessionExpiryReason); const [now, setNow] = useState(() => Date.now()); @@ -61,6 +63,7 @@ export const SessionExpiryDialog = ({ return ( setWarningDismissed(true)} aria-labelledby="session-expiry-dialog-title"