@octopusdeploy/design-system-components/dist/src/components/Dialog/__testing__/Dialog.spec.js

The design systems component library.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const testing_library_1 = require("@octopusdeploy/testing-library");
const react_1 = require("@testing-library/react");
const user_event_1 = __importDefault(require("@testing-library/user-event"));
const react_2 = require("react");
const vitest_1 = require("vitest");
const renderComponentTest_1 = require("../../../testing/renderComponentTest");
const Dialog_1 = require("../Dialog");
const defaultDialogContent = "The dialog content";
(0, vitest_1.describe)("Dialog", () => {
    (0, vitest_1.test)("shows the dialog when it is open", () => {
        const title = "Dialog";
        const { assertDialogIsOpen } = renderDialog({ open: true, title });
        assertDialogIsOpen(title);
    });
    (0, vitest_1.test)("does not show the dialog when closed", () => {
        const title = "Dialog";
        renderDialog({ open: false, title });
        (0, vitest_1.expect)(react_1.screen.queryByRole("dialog", { name: title })).not.toBeInTheDocument();
    });
    (0, vitest_1.test)("will close the dialog when the close button is clicked", async () => {
        const title = "Dialog";
        const { clickCloseButton, assertOnCloseDialogCalled } = renderDialog({ open: true, title });
        await clickCloseButton();
        assertOnCloseDialogCalled();
    });
    (0, vitest_1.test)("will close the dialog when escape is pressed", async () => {
        const title = "Dialog";
        const { pressEscape, assertOnCloseDialogCalled } = renderDialog({ open: true, title });
        await pressEscape();
        assertOnCloseDialogCalled();
    });
    (0, vitest_1.test)("will close the dialog when the overlay is clicked", async () => {
        const title = "Dialog";
        const { clickOverlay, assertOnCloseDialogCalled } = renderDialog({ open: true, title });
        await clickOverlay();
        assertOnCloseDialogCalled();
    });
    (0, vitest_1.test)("shows the dialog title", () => {
        const title = "Dialog";
        const { assertHasDialogTitle } = renderDialog({ open: true, title });
        assertHasDialogTitle(title);
    });
    (0, vitest_1.test)("shows the dialog content", () => {
        const expectedContent = "Test Dialog Content";
        const { assertHasDialogContent } = renderDialog({ open: true, title: "Dialog", content: expectedContent });
        assertHasDialogContent(expectedContent);
    });
    (0, vitest_1.test)("can click primary button when provided", async () => {
        const onClick = vitest_1.vi.fn();
        const { clickButton } = renderDialog({ open: true, title: "Dialog", primaryActionOptions: { onClick, label: "Primary Button", importance: "loud" } });
        await clickButton("Primary Button");
        (0, vitest_1.expect)(onClick).toHaveBeenCalled();
    });
    (0, vitest_1.test)("can click secondary button when provided", async () => {
        const onClick = vitest_1.vi.fn();
        const { clickButton } = renderDialog({ open: true, title: "Dialog", secondaryActionOptions: { onClick, label: "Secondary Button", importance: "quiet" } });
        await clickButton("Secondary Button");
        (0, vitest_1.expect)(onClick).toHaveBeenCalled();
    });
    (0, vitest_1.test)("renders error panels when errors are provided", () => {
        const errorMessage = "Something went wrong";
        const errors = [{ message: errorMessage, details: [] }];
        const { assertHasDialogContent } = renderDialog({ open: true, title: "Dialog", errors });
        assertHasDialogContent(errorMessage);
    });
    (0, vitest_1.test)("hides the close button when showDismissButton is false", () => {
        const title = "Dialog";
        renderDialog({ open: true, title, showDismissButton: false });
        (0, vitest_1.expect)(react_1.screen.queryByRole("button", { name: "Close dialog" })).not.toBeInTheDocument();
    });
    (0, vitest_1.test)("does not close when the overlay is clicked when showDismissButton is false", async () => {
        const title = "Dialog";
        const { clickOverlay, assertOnCloseDialogNotCalled } = renderDialog({ open: true, title, showDismissButton: false });
        await clickOverlay();
        assertOnCloseDialogNotCalled();
    });
    (0, vitest_1.test)("renders progress tracker when provided", () => {
        const progressTracker = (0, jsx_runtime_1.jsx)("span", { children: "Progress tracker content" });
        renderDialog({ open: true, title: "Dialog", progressTracker });
        (0, vitest_1.expect)(react_1.screen.getByText("Progress tracker content")).toBeInTheDocument();
    });
    (0, vitest_1.describe)("with side panel", () => {
        (0, vitest_1.test)("renders side panel content when sidePanel prop is provided", () => {
            const sidePanelContent = "Side panel content";
            const { assertHasDialogContent } = renderDialog({
                open: true,
                title: "Dialog with side panel",
                sidePanel: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: sidePanelContent }),
            });
            assertHasDialogContent(sidePanelContent);
        });
        (0, vitest_1.test)("shows side panel toggle when side panel is provided", () => {
            const { assertHasSidePanelToggle } = renderDialog({
                open: true,
                title: "Dialog with side panel",
                sidePanel: (0, jsx_runtime_1.jsx)("p", { children: "Side panel" }),
            });
            assertHasSidePanelToggle();
        });
        (0, vitest_1.test)("does not show side panel toggle when no side panel", () => {
            renderDialog({
                open: true,
                title: "Dialog without side panel",
            });
            (0, vitest_1.expect)(react_1.screen.queryByRole("button", { name: "Open side panel", hidden: true })).not.toBeInTheDocument();
            (0, vitest_1.expect)(react_1.screen.queryByRole("button", { name: "Close side panel", hidden: true })).not.toBeInTheDocument();
        });
        (0, vitest_1.test)("renders dialog with title and content when side panel is present", () => {
            const title = "Side Panel Dialog";
            const content = "Side panel dialog body";
            const { assertHasDialogTitle, assertHasDialogContent } = renderDialog({
                open: true,
                title,
                content,
                sidePanel: (0, jsx_runtime_1.jsx)("p", { children: "Side panel" }),
            });
            assertHasDialogTitle(title);
            assertHasDialogContent(content);
        });
        (0, vitest_1.test)("side panel starts closed when defaultSidePanelOpen is false", () => {
            renderDialog({
                open: true,
                title: "Dialog with side panel",
                sidePanel: (0, jsx_runtime_1.jsx)("p", { children: "Side panel" }),
                defaultSidePanelOpen: false,
            });
            (0, vitest_1.expect)(react_1.screen.queryByRole("complementary")).not.toBeInTheDocument();
        });
        (0, vitest_1.test)("clicking 'Open side panel' opens the side panel", async () => {
            renderDialog({
                open: true,
                title: "Dialog with side panel",
                sidePanel: (0, jsx_runtime_1.jsx)("p", { children: "Side panel" }),
                defaultSidePanelOpen: false,
            });
            await user_event_1.default.click(react_1.screen.getByRole("button", { name: "Open side panel", hidden: true }));
            (0, vitest_1.expect)(react_1.screen.getByRole("complementary")).toBeInTheDocument();
        });
        (0, vitest_1.test)("clicking 'Close side panel' closes the side panel", async () => {
            renderDialog({
                open: true,
                title: "Dialog with side panel",
                sidePanel: (0, jsx_runtime_1.jsx)("p", { children: "Side panel" }),
            });
            (0, vitest_1.expect)(react_1.screen.getByRole("complementary")).toBeInTheDocument();
            await user_event_1.default.click(react_1.screen.getByRole("button", { name: "Close side panel", hidden: true }));
            (0, vitest_1.expect)(react_1.screen.queryByRole("complementary")).not.toBeInTheDocument();
        });
        (0, vitest_1.test)("does not show the dismiss button when a side panel is present", () => {
            renderDialog({
                open: true,
                title: "Dialog with side panel",
                sidePanel: (0, jsx_runtime_1.jsx)("p", { children: "Side panel" }),
            });
            (0, vitest_1.expect)(react_1.screen.queryByRole("button", { name: "Close dialog" })).not.toBeInTheDocument();
        });
        (0, vitest_1.test)("shows a cancel button in the footer when a side panel is present", () => {
            renderDialog({
                open: true,
                title: "Dialog with side panel",
                sidePanel: (0, jsx_runtime_1.jsx)("p", { children: "Side panel" }),
            });
            (0, vitest_1.expect)(react_1.screen.getByRole("button", { name: "Cancel" })).toBeInTheDocument();
        });
        (0, vitest_1.test)("cancel button calls onClose when a side panel is present", async () => {
            const { assertOnCloseDialogCalled } = renderDialog({
                open: true,
                title: "Dialog with side panel",
                sidePanel: (0, jsx_runtime_1.jsx)("p", { children: "Side panel" }),
            });
            await user_event_1.default.click(react_1.screen.getByRole("button", { name: "Cancel" }));
            assertOnCloseDialogCalled();
        });
    });
    (0, vitest_1.describe)("multi-step", () => {
        const defaultSteps = [{ content: (0, jsx_runtime_1.jsx)("p", { children: "Step 1 content" }) }, { content: (0, jsx_runtime_1.jsx)("p", { children: "Step 2 content" }) }, { content: (0, jsx_runtime_1.jsx)("p", { children: "Step 3 content" }) }];
        function renderMultiStep(options = {}) {
            const onClose = vitest_1.vi.fn();
            const { steps = defaultSteps, open = true, onComplete, completeButtonLabel, backButtonDisabled, nextButtonDisabled } = options;
            (0, renderComponentTest_1.renderComponentTest)((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { open: open, onClose: onClose, title: "Multi-step Dialog", width: "medium", steps: steps, onComplete: onComplete, completeButtonLabel: completeButtonLabel, backButtonDisabled: backButtonDisabled, nextButtonDisabled: nextButtonDisabled }));
            return { onClose, ...getInteractions(onClose) };
        }
        (0, vitest_1.test)("renders the first step content", () => {
            renderMultiStep();
            (0, vitest_1.expect)(react_1.screen.getByText("Step 1 content")).toBeInTheDocument();
        });
        (0, vitest_1.test)("shows a step indicator when there are multiple steps", () => {
            renderMultiStep();
            (0, vitest_1.expect)(react_1.screen.getByText("1 of 3")).toBeInTheDocument();
        });
        (0, vitest_1.test)("does not show a step indicator for a single step", () => {
            renderMultiStep({ steps: [{ content: (0, jsx_runtime_1.jsx)("p", { children: "Only step" }) }] });
            (0, vitest_1.expect)(react_1.screen.queryByRole("navigation", { name: "Step progress" })).not.toBeInTheDocument();
        });
        (0, vitest_1.test)("shows a Next button on non-final steps", () => {
            renderMultiStep();
            (0, vitest_1.expect)(react_1.screen.getByRole("button", { name: "Next" })).toBeInTheDocument();
        });
        (0, vitest_1.test)("does not show a Back button on the first step", () => {
            renderMultiStep();
            (0, vitest_1.expect)(react_1.screen.queryByRole("button", { name: "Back" })).not.toBeInTheDocument();
        });
        (0, vitest_1.test)("clicking Next moves to the next step", async () => {
            renderMultiStep();
            await user_event_1.default.click(react_1.screen.getByRole("button", { name: "Next" }));
            (0, vitest_1.expect)(react_1.screen.getByText("Step 2 content")).toBeInTheDocument();
        });
        (0, vitest_1.test)("shows a Back button after navigating forward", async () => {
            renderMultiStep();
            await user_event_1.default.click(react_1.screen.getByRole("button", { name: "Next" }));
            (0, vitest_1.expect)(react_1.screen.getByRole("button", { name: "Back" })).toBeInTheDocument();
        });
        (0, vitest_1.test)("clicking Back moves to the previous step", async () => {
            renderMultiStep();
            await user_event_1.default.click(react_1.screen.getByRole("button", { name: "Next" }));
            await user_event_1.default.click(react_1.screen.getByRole("button", { name: "Back" }));
            (0, vitest_1.expect)(react_1.screen.getByText("Step 1 content")).toBeInTheDocument();
        });
        (0, vitest_1.test)("shows 'Complete' button on the last step by default", async () => {
            renderMultiStep();
            await user_event_1.default.click(react_1.screen.getByRole("button", { name: "Next" }));
            await user_event_1.default.click(react_1.screen.getByRole("button", { name: "Next" }));
            (0, vitest_1.expect)(react_1.screen.getByRole("button", { name: "Complete" })).toBeInTheDocument();
        });
        (0, vitest_1.test)("shows custom completeButtonLabel on the last step", async () => {
            renderMultiStep({ completeButtonLabel: "Finish" });
            await user_event_1.default.click(react_1.screen.getByRole("button", { name: "Next" }));
            await user_event_1.default.click(react_1.screen.getByRole("button", { name: "Next" }));
            (0, vitest_1.expect)(react_1.screen.getByRole("button", { name: "Finish" })).toBeInTheDocument();
        });
        (0, vitest_1.test)("clicking the complete button calls onComplete", async () => {
            const onComplete = vitest_1.vi.fn();
            renderMultiStep({ onComplete });
            await user_event_1.default.click(react_1.screen.getByRole("button", { name: "Next" }));
            await user_event_1.default.click(react_1.screen.getByRole("button", { name: "Next" }));
            await user_event_1.default.click(react_1.screen.getByRole("button", { name: "Complete" }));
            (0, vitest_1.expect)(onComplete).toHaveBeenCalledTimes(1);
        });
        (0, vitest_1.test)("onBeforeNext returning false blocks navigation", async () => {
            const steps = [{ content: (0, jsx_runtime_1.jsx)("p", { children: "Step 1 content" }), onBeforeNext: () => false }, { content: (0, jsx_runtime_1.jsx)("p", { children: "Step 2 content" }) }];
            renderMultiStep({ steps });
            await user_event_1.default.click(react_1.screen.getByRole("button", { name: "Next" }));
            (0, vitest_1.expect)(react_1.screen.getByText("Step 1 content")).toBeInTheDocument();
        });
        (0, vitest_1.test)("onBeforeBack returning false blocks back navigation", async () => {
            const steps = [{ content: (0, jsx_runtime_1.jsx)("p", { children: "Step 1 content" }) }, { content: (0, jsx_runtime_1.jsx)("p", { children: "Step 2 content" }), onBeforeBack: () => false }];
            renderMultiStep({ steps });
            await user_event_1.default.click(react_1.screen.getByRole("button", { name: "Next" }));
            (0, vitest_1.expect)(react_1.screen.getByText("Step 2 content")).toBeInTheDocument();
            await user_event_1.default.click(react_1.screen.getByRole("button", { name: "Back" }));
            (0, vitest_1.expect)(react_1.screen.getByText("Step 2 content")).toBeInTheDocument();
        });
        (0, vitest_1.test)("onBeforeBack returning true allows back navigation", async () => {
            const steps = [{ content: (0, jsx_runtime_1.jsx)("p", { children: "Step 1 content" }) }, { content: (0, jsx_runtime_1.jsx)("p", { children: "Step 2 content" }), onBeforeBack: () => true }];
            renderMultiStep({ steps });
            await user_event_1.default.click(react_1.screen.getByRole("button", { name: "Next" }));
            await user_event_1.default.click(react_1.screen.getByRole("button", { name: "Back" }));
            (0, vitest_1.expect)(react_1.screen.getByText("Step 1 content")).toBeInTheDocument();
        });
        (0, vitest_1.test)("onEnter is called when navigating to a step", async () => {
            const onEnter = vitest_1.vi.fn();
            const steps = [{ content: (0, jsx_runtime_1.jsx)("p", { children: "Step 1 content" }) }, { content: (0, jsx_runtime_1.jsx)("p", { children: "Step 2 content" }), onEnter }];
            renderMultiStep({ steps });
            await user_event_1.default.click(react_1.screen.getByRole("button", { name: "Next" }));
            (0, vitest_1.expect)(onEnter).toHaveBeenCalledTimes(1);
        });
        (0, vitest_1.test)("onEnter is called when navigating back to a step", async () => {
            const onEnter = vitest_1.vi.fn();
            const steps = [{ content: (0, jsx_runtime_1.jsx)("p", { children: "Step 1 content" }), onEnter }, { content: (0, jsx_runtime_1.jsx)("p", { children: "Step 2 content" }) }, { content: (0, jsx_runtime_1.jsx)("p", { children: "Step 3 content" }) }];
            renderMultiStep({ steps });
            await user_event_1.default.click(react_1.screen.getByRole("button", { name: "Next" }));
            await user_event_1.default.click(react_1.screen.getByRole("button", { name: "Back" }));
            (0, vitest_1.expect)(onEnter).toHaveBeenCalledTimes(1);
        });
        (0, vitest_1.test)("async onBeforeNext is awaited before advancing to the next step", async () => {
            const onBeforeNext = vitest_1.vi.fn().mockResolvedValue(true);
            const steps = [{ content: (0, jsx_runtime_1.jsx)("p", { children: "Step 1 content" }), onBeforeNext }, { content: (0, jsx_runtime_1.jsx)("p", { children: "Step 2 content" }) }];
            renderMultiStep({ steps });
            await user_event_1.default.click(react_1.screen.getByRole("button", { name: "Next" }));
            (0, vitest_1.expect)(onBeforeNext).toHaveBeenCalledTimes(1);
            (0, vitest_1.expect)(react_1.screen.getByText("Step 2 content")).toBeInTheDocument();
        });
        (0, vitest_1.test)("clicking the cancel button calls onClose", async () => {
            const { onClose } = renderMultiStep();
            await user_event_1.default.click(react_1.screen.getByRole("button", { name: "Cancel" }));
            (0, vitest_1.expect)(onClose).toHaveBeenCalledTimes(1);
        });
        (0, vitest_1.test)("back button is disabled when backButtonDisabled is true", async () => {
            renderMultiStep({ backButtonDisabled: true });
            await user_event_1.default.click(react_1.screen.getByRole("button", { name: "Next" }));
            (0, vitest_1.expect)(react_1.screen.getByRole("button", { name: "Back" })).toBeDisabled();
        });
        (0, vitest_1.test)("next button is disabled when nextButtonDisabled is true", () => {
            renderMultiStep({ nextButtonDisabled: true });
            (0, vitest_1.expect)(react_1.screen.getByRole("button", { name: "Next" })).toBeDisabled();
        });
        (0, vitest_1.test)("per-step sidePanel overrides the dialog-level sidePanel", async () => {
            const steps = [{ content: (0, jsx_runtime_1.jsx)("p", { children: "Step 1" }), sidePanel: (0, jsx_runtime_1.jsx)("p", { children: "Step 1 panel" }) }, { content: (0, jsx_runtime_1.jsx)("p", { children: "Step 2" }) }];
            (0, renderComponentTest_1.renderComponentTest)((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { open: true, onClose: vitest_1.vi.fn(), title: "Test", width: "medium", steps: steps, sidePanel: (0, jsx_runtime_1.jsx)("p", { children: "Dialog panel" }) }));
            (0, vitest_1.expect)(react_1.screen.getByText("Step 1 panel")).toBeInTheDocument();
            (0, vitest_1.expect)(react_1.screen.queryByText("Dialog panel")).not.toBeInTheDocument();
            await user_event_1.default.click(react_1.screen.getByRole("button", { name: "Next" }));
            (0, vitest_1.expect)(react_1.screen.getByText("Dialog panel")).toBeInTheDocument();
            (0, vitest_1.expect)(react_1.screen.queryByText("Step 1 panel")).not.toBeInTheDocument();
        });
        (0, vitest_1.test)("resets to step 0 when the dialog closes and reopens", async () => {
            function TestWrapper() {
                const [open, setOpen] = (0, react_2.useState)(true);
                return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => setOpen(false), children: "close" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setOpen(true), children: "open" }), (0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { open: open, onClose: () => setOpen(false), title: "Test", width: "medium", steps: defaultSteps })] }));
            }
            (0, renderComponentTest_1.renderComponentTest)((0, jsx_runtime_1.jsx)(TestWrapper, {}));
            await user_event_1.default.click(react_1.screen.getByRole("button", { name: "Next" }));
            (0, vitest_1.expect)(react_1.screen.getByText("Step 2 content")).toBeInTheDocument();
            await user_event_1.default.click(react_1.screen.getByRole("button", { name: "close" }));
            await user_event_1.default.click(react_1.screen.getByRole("button", { name: "open" }));
            (0, vitest_1.expect)(react_1.screen.getByText("Step 1 content")).toBeInTheDocument();
        });
    });
    (0, vitest_1.describe)("extraLarge size", () => {
        (0, vitest_1.test)("renders content at the extraLarge width", () => {
            (0, renderComponentTest_1.renderComponentTest)((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { open: true, onClose: vitest_1.vi.fn(), title: "Extra Large Dialog", width: "extraLarge", primaryAction: { label: "Confirm", onClick: vitest_1.vi.fn(), importance: "primary" }, children: (0, jsx_runtime_1.jsx)("p", { children: "Extra large content" }) }));
            (0, vitest_1.expect)(react_1.screen.getByRole("dialog", { name: "Extra Large Dialog" })).toBeInTheDocument();
            (0, vitest_1.expect)(react_1.screen.getByText("Extra large content")).toBeInTheDocument();
        });
        (0, vitest_1.test)("never renders the side panel toggle", () => {
            (0, renderComponentTest_1.renderComponentTest)((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { open: true, onClose: vitest_1.vi.fn(), title: "Extra Large Dialog", width: "extraLarge", primaryAction: { label: "Confirm", onClick: vitest_1.vi.fn(), importance: "primary" }, children: (0, jsx_runtime_1.jsx)("p", { children: "Extra large content" }) }));
            (0, vitest_1.expect)(react_1.screen.queryByRole("button", { name: "Open side panel", hidden: true })).not.toBeInTheDocument();
            (0, vitest_1.expect)(react_1.screen.queryByRole("button", { name: "Close side panel", hidden: true })).not.toBeInTheDocument();
        });
        (0, vitest_1.test)("shows the dismiss button at extraLarge (since there is no side-panel toggle to replace it)", () => {
            (0, renderComponentTest_1.renderComponentTest)((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { open: true, onClose: vitest_1.vi.fn(), title: "Extra Large Dialog", width: "extraLarge", primaryAction: { label: "Confirm", onClick: vitest_1.vi.fn(), importance: "primary" }, children: (0, jsx_runtime_1.jsx)("p", { children: "Extra large content" }) }));
            (0, vitest_1.expect)(react_1.screen.getByRole("button", { name: "Close dialog" })).toBeInTheDocument();
        });
        (0, vitest_1.test)("rejects `sidePanel` at the type level, and the runtime clamp drops it too, when width is extraLarge", () => {
            // If the discriminated union regresses, these @ts-expect-error directives stop being errors and break the build.
            // The runtime assertion verifies the second layer: toSidePanelWidth() drops sidePanel content even if an `any`-typed caller bypasses the type-level rejection.
            (0, renderComponentTest_1.renderComponentTest)((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { open: true, onClose: vitest_1.vi.fn(), title: "Extra Large Dialog", width: "extraLarge", sidePanel: (0, jsx_runtime_1.jsx)("p", { children: "Should not compile" }), primaryAction: { label: "Confirm", onClick: vitest_1.vi.fn(), importance: "primary" }, children: (0, jsx_runtime_1.jsx)("p", { children: "Extra large content" }) }));
            (0, vitest_1.expect)(react_1.screen.queryByText("Should not compile")).not.toBeInTheDocument();
            (0, renderComponentTest_1.renderComponentTest)((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { open: true, onClose: vitest_1.vi.fn(), title: "Extra Large Dialog", width: "extraLarge", defaultSidePanelOpen: true, primaryAction: { label: "Confirm", onClick: vitest_1.vi.fn(), importance: "primary" }, children: (0, jsx_runtime_1.jsx)("p", { children: "Extra large content" }) }));
        });
        (0, vitest_1.test)("rejects step-level `sidePanel` at the type level, and the runtime clamp drops it too, when width is extraLarge", () => {
            (0, renderComponentTest_1.renderComponentTest)((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { open: true, onClose: vitest_1.vi.fn(), title: "Extra Large Dialog", width: "extraLarge", steps: [{ content: (0, jsx_runtime_1.jsx)("p", { children: "Step 1" }), sidePanel: (0, jsx_runtime_1.jsx)("p", { children: "Should not compile" }) }, { content: (0, jsx_runtime_1.jsx)("p", { children: "Step 2" }) }] }));
            (0, vitest_1.expect)(react_1.screen.queryByText("Should not compile")).not.toBeInTheDocument();
        });
    });
});
function getPrimaryActionPlaceholder() {
    return { label: "Primary", onClick: vitest_1.vi.fn(), importance: "loud" };
}
function renderDialog({ open, primaryActionOptions, title, content, secondaryActionOptions, errors, showDismissButton, sidePanel, progressTracker, defaultSidePanelOpen }) {
    const onClose = vitest_1.vi.fn();
    (0, renderComponentTest_1.renderComponentTest)((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { width: "medium", open: open, onClose: onClose, title: title, showDismissButton: showDismissButton, primaryAction: primaryActionOptions ?? getPrimaryActionPlaceholder(), secondaryAction: secondaryActionOptions, errors: errors, sidePanel: sidePanel, progressTracker: progressTracker, defaultSidePanelOpen: defaultSidePanelOpen, children: content ?? defaultDialogContent }));
    return getInteractions(onClose);
}
function dispatchDialogFadeOutAnimationEnd() {
    const dialogElement = react_1.screen.getByRole("dialog");
    const animationEndEvent = new Event("animationend", { bubbles: true });
    Object.defineProperty(animationEndEvent, "animationName", { value: "dialogFadeOut", writable: false });
    (0, react_2.act)(() => {
        dialogElement.dispatchEvent(animationEndEvent);
    });
}
function getInteractions(onClose) {
    return {
        clickOverlay: async () => {
            const overlay = react_1.screen.getByRole("presentation", { name: "overlay" });
            await user_event_1.default.click(overlay);
            dispatchDialogFadeOutAnimationEnd();
        },
        pressEscape: async () => {
            await user_event_1.default.keyboard("{Escape}");
            dispatchDialogFadeOutAnimationEnd();
        },
        clickCloseButton: async () => {
            return testing_library_1.domQueries.getButton("Close dialog").click();
        },
        clickButton: async (accessibleName) => {
            return testing_library_1.domQueries.getButton(accessibleName).click();
        },
        assertHasDialogContent: (content) => (0, vitest_1.expect)(react_1.screen.getByText(content)).toBeInTheDocument(),
        assertDialogIsOpen: (accessibleName) => testing_library_1.domQueries.getDialog(accessibleName).assertIsInTheDocument(),
        assertOnCloseDialogCalled: () => (0, vitest_1.expect)(onClose).toHaveBeenCalled(),
        assertOnCloseDialogNotCalled: () => (0, vitest_1.expect)(onClose).not.toHaveBeenCalled(),
        assertHasDialogTitle: (title) => (0, vitest_1.expect)(react_1.screen.getByText(title)).toBeInTheDocument(),
        assertHasSidePanelToggle: () => {
            const openButton = react_1.screen.queryByRole("button", { name: "Open side panel", hidden: true });
            const closeButton = react_1.screen.queryByRole("button", { name: "Close side panel", hidden: true });
            (0, vitest_1.expect)(openButton ?? closeButton).toBeInTheDocument();
        },
    };
}