@octopusdeploy/design-system-components
Version:
The design systems component library.
136 lines (135 loc) • 8.21 kB
JavaScript
"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 user_event_1 = __importDefault(require("@testing-library/user-event"));
const vitest_1 = require("vitest");
const renderComponentTest_1 = require("../../../testing/renderComponentTest");
const DialogBase_1 = require("../DialogBase");
const dialogAccessibleName = "Test Dialog";
(0, vitest_1.describe)("DialogBase", () => {
(0, vitest_1.test)("renders the given content", () => {
const dialogContent = "Dialog content";
const { assertHasDialogContent } = renderDialogBase({ open: true, content: dialogContent });
assertHasDialogContent(dialogContent);
});
(0, vitest_1.test)("does not render when open is false", () => {
renderDialogBase({ open: false, content: "Hidden content" });
testing_library_1.domQueries.queryDialog(dialogAccessibleName).assertIsNotInTheDocument();
});
(0, vitest_1.describe)("aria attributes", () => {
(0, vitest_1.test)("has role dialog", () => {
renderDialogBase({ open: true });
const dialog = testing_library_1.domQueries.getDialog(dialogAccessibleName).innerElement;
(0, vitest_1.expect)(dialog).toHaveAttribute("role", "dialog");
});
(0, vitest_1.test)("has aria-modal set to true", () => {
renderDialogBase({ open: true });
const dialog = testing_library_1.domQueries.getDialog(dialogAccessibleName).innerElement;
(0, vitest_1.expect)(dialog).toHaveAttribute("aria-modal", "true");
});
(0, vitest_1.test)("has aria-label matching the accessible name", () => {
renderDialogBase({ open: true });
const dialog = testing_library_1.domQueries.getDialog(dialogAccessibleName).innerElement;
(0, vitest_1.expect)(dialog).toHaveAttribute("aria-label", dialogAccessibleName);
});
});
(0, vitest_1.describe)("focus functionality", () => {
const firstButtonLabel = "First Button";
const secondButtonLabel = "Second Button";
const lastButtonLabel = "Last Button";
const focusableElementsContent = ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("button", { children: firstButtonLabel }), (0, jsx_runtime_1.jsx)("button", { children: secondButtonLabel }), (0, jsx_runtime_1.jsx)("button", { children: lastButtonLabel })] }));
(0, vitest_1.describe)("when autoFocusFirstElement is true", () => {
(0, vitest_1.test)("focuses the first focusable element when dialog opens", () => {
const { assertButtonHasFocus } = renderDialogBase({ open: true, content: focusableElementsContent });
assertButtonHasFocus(firstButtonLabel);
});
(0, vitest_1.test)("tab moves focus to next focusable element", async () => {
const { assertButtonHasFocus, pressTab } = renderDialogBase({ open: true, content: focusableElementsContent });
assertButtonHasFocus(firstButtonLabel);
await pressTab();
assertButtonHasFocus(secondButtonLabel);
});
(0, vitest_1.test)("tab from last element wraps to first element", async () => {
const { assertButtonHasFocus, pressTab } = renderDialogBase({ open: true, content: focusableElementsContent });
assertButtonHasFocus(firstButtonLabel);
// Tab to last button
await pressTab();
await pressTab();
assertButtonHasFocus(lastButtonLabel);
// Tab from last wraps to first
await pressTab();
assertButtonHasFocus(firstButtonLabel);
});
(0, vitest_1.test)("shift+tab from first element wraps to last element", async () => {
const { assertButtonHasFocus, pressShiftTab } = renderDialogBase({ open: true, content: focusableElementsContent });
assertButtonHasFocus(firstButtonLabel);
await pressShiftTab();
assertButtonHasFocus(lastButtonLabel);
});
});
(0, vitest_1.describe)("when autoFocusFirstElement is false", () => {
(0, vitest_1.test)("focuses the dialog container instead of first focusable element when dialog opens", () => {
const { assertDialogContainerHasFocus } = renderDialogBase({ open: true, autoFocusFirstElement: false, content: focusableElementsContent });
assertDialogContainerHasFocus();
});
(0, vitest_1.test)("tab moves focus from container to first focusable element", async () => {
const { assertDialogContainerHasFocus, assertButtonHasFocus, pressTab } = renderDialogBase({ open: true, autoFocusFirstElement: false, content: focusableElementsContent });
assertDialogContainerHasFocus();
await pressTab();
assertButtonHasFocus(firstButtonLabel);
});
(0, vitest_1.test)("shift+tab moves focus from container to last focusable element", async () => {
const { assertDialogContainerHasFocus, assertButtonHasFocus, pressShiftTab } = renderDialogBase({ open: true, autoFocusFirstElement: false, content: focusableElementsContent });
assertDialogContainerHasFocus();
await pressShiftTab();
assertButtonHasFocus(lastButtonLabel);
});
(0, vitest_1.test)("tab wraps from last to first element without returning to container", async () => {
const { assertDialogContainerHasFocus, assertButtonHasFocus, pressTab, pressShiftTab } = renderDialogBase({ open: true, autoFocusFirstElement: false, content: focusableElementsContent });
assertDialogContainerHasFocus();
await pressShiftTab();
assertButtonHasFocus(lastButtonLabel);
// Tab from last wraps to first, not back to container
await pressTab();
assertButtonHasFocus(firstButtonLabel);
});
(0, vitest_1.test)("shift+tab wraps from first to last element without returning to container", async () => {
const { assertDialogContainerHasFocus, assertButtonHasFocus, pressTab, pressShiftTab } = renderDialogBase({ open: true, autoFocusFirstElement: false, content: focusableElementsContent });
assertDialogContainerHasFocus();
await pressTab();
assertButtonHasFocus(firstButtonLabel);
// Shift+Tab from first wraps to last, not back to container
await pressShiftTab();
assertButtonHasFocus(lastButtonLabel);
});
});
});
});
function renderDialogBase({ open, content, autoFocusFirstElement }) {
(0, renderComponentTest_1.renderComponentTest)((0, jsx_runtime_1.jsx)(DialogBase_1.DialogBase, { open: open, onClose: vitest_1.vi.fn(), accessibleName: dialogAccessibleName, autoFocusFirstElement: autoFocusFirstElement, children: content }));
return getInteractions();
}
function getInteractions() {
return {
assertHasDialogContent: (content) => {
testing_library_1.domQueries.getText(content).assertIsInTheDocument();
},
assertDialogContainerHasFocus: () => {
const dialogContainer = testing_library_1.domQueries.getDialog(dialogAccessibleName).innerElement;
(0, vitest_1.expect)(dialogContainer).toHaveFocus();
},
assertButtonHasFocus: (accessibleName) => {
testing_library_1.domQueries.getButton(accessibleName).assertHasFocus();
},
pressTab: async () => {
await user_event_1.default.keyboard("{Tab}");
},
pressShiftTab: async () => {
await user_event_1.default.keyboard("{Shift>}{Tab}{/Shift}");
},
};
}