diff --git a/src/features/cookieConsent/ui/CookieConsentBanner.tsx b/src/features/cookieConsent/ui/CookieConsentBanner.tsx index 68cd5d02..b4365165 100644 --- a/src/features/cookieConsent/ui/CookieConsentBanner.tsx +++ b/src/features/cookieConsent/ui/CookieConsentBanner.tsx @@ -25,7 +25,7 @@ type CookieConsentBannerProps = { onAcceptAll: (event: React.MouseEvent) => void; onRejectNonEssential: (event: React.MouseEvent) => void; onClose: (event: React.MouseEvent) => void; - /** Visual surface used by optional dismiss effects (e.g. Thanos disintegrate). */ + /** Visual surface used by optional dismiss effects (e.g. DOM disintegrate). */ surfaceRef?: React.Ref; }; @@ -96,10 +96,15 @@ export const CookieConsentBanner: React.FC = ({ sx={{ alignItems: { xs: "stretch", sm: "center" }, justifyContent: "space-between", - pr: isSettingsView ? 4 : 0, }} > - + { diff --git a/src/features/cookieConsent/ui/__tests__/CookieConsentBannerWithDismissEffect.test.tsx b/src/features/cookieConsent/ui/__tests__/CookieConsentBannerWithDismissEffect.test.tsx index cb9f1c4f..a19f6826 100644 --- a/src/features/cookieConsent/ui/__tests__/CookieConsentBannerWithDismissEffect.test.tsx +++ b/src/features/cookieConsent/ui/__tests__/CookieConsentBannerWithDismissEffect.test.tsx @@ -3,6 +3,7 @@ import { render, screen, waitFor } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { SnackbarProvider } from "notistack"; import type * as Notistack from "notistack"; +import { useState } from "react"; import { describe, expect, it, vi } from "vitest"; import type * as SharedHooks from "#/shared/hooks"; @@ -127,6 +128,54 @@ describe("CookieConsentBannerWithDismissEffect", () => { expect(onCompleteDismiss).not.toHaveBeenCalled(); }); + it("keeps settings view frozen while close dismiss animation is pending", async () => { + disintegrateMock.mockClear(); + const user = userEvent.setup(); + + const SettingsCloseHarness = () => { + const [isSettingsView, setIsSettingsView] = useState(true); + + return ( + + + true)} + onRejectNonEssential={vi.fn()} + onClose={() => { + setIsSettingsView(false); + }} + onBeginDismiss={vi.fn()} + onCompleteDismiss={vi.fn()} + /> + + + ); + }; + + render(); + + await user.click( + screen.getByRole("button", { name: "COOKIE_SETTINGS_CLOSE" }), + ); + + expect(screen.getByText("COOKIE_SETTINGS_TITLE")).toBeInTheDocument(); + expect( + screen.getByRole("button", { name: "COOKIE_SETTINGS_CLOSE" }), + ).toBeInTheDocument(); + + await waitFor(() => { + expect(disintegrateMock).toHaveBeenCalledTimes(1); + }); + + resolveDisintegrate?.(); + await waitFor(() => { + expect( + screen.queryByText("COOKIE_SETTINGS_TITLE"), + ).not.toBeInTheDocument(); + }); + }); + it("still completes dismiss and shows a warning when the animation fails", async () => { disintegrateMock.mockClear(); enqueueSnackbarMock.mockClear();