@octopusdeploy/design-system-components
Version:
The design systems component library.
79 lines (78 loc) • 4.07 kB
JavaScript
;
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 vitest_1 = require("vitest");
const MenuList_1 = require("../../../MenuList/MenuList");
const TestDesignSystemProvider_1 = require("../../../TestDesignSystemProvider");
const MenuItemInternalLink_1 = require("../../MenuItemInternalLink/MenuItemInternalLink");
(0, vitest_1.describe)("MenuItemInternalLink", () => {
(0, vitest_1.test)("focuses the element with autofocus enabled", () => {
const focusedLink = { path: "/bar", label: "Bar", autoFocus: true };
const links = [{ path: "/foo", label: "Foo" }, focusedLink, { path: "/baz", label: "Baz" }];
const menu = renderMenu(links);
menu.assertItemIsFocused(focusedLink);
});
(0, vitest_1.describe)("MenuList keyboard interactions", () => {
// Check that the keyboard interactions provided by MenuList work with this component
const firstLink = { path: "/foo", label: "Foo" };
const initiallyFocusedLink = { path: "/bar", label: "Bar", autoFocus: true };
const lastLink = { path: "/baz", label: "Baz" };
const links = [firstLink, initiallyFocusedLink, lastLink];
(0, vitest_1.test)("Arrow down focuses the next item", async () => {
const menu = renderMenu(links);
await menu.pressDownKey();
menu.assertItemIsFocused(lastLink);
});
(0, vitest_1.test)("Arrow up focuses the previous item", async () => {
const menu = renderMenu(links);
await menu.pressUpKey();
menu.assertItemIsFocused(firstLink);
});
(0, vitest_1.test)("Home key focuses the first item", async () => {
const menu = renderMenu(links);
await menu.pressHomeKey();
menu.assertItemIsFocused(firstLink);
});
(0, vitest_1.test)("End key focuses the last item", async () => {
const menu = renderMenu(links);
await menu.pressEndKey();
menu.assertItemIsFocused(lastLink);
});
});
// This is really important for accessibility by opting into anchor tag specific browser behaviour
(0, vitest_1.test)("The element is an anchor tag", () => {
const link = { path: "/foo", label: "Foo" };
const menu = renderMenu([link]);
menu.assertLinkIsAnchorTag(link);
});
});
function renderMenu(menuItems) {
(0, react_1.render)((0, jsx_runtime_1.jsx)(TestDesignSystemProvider_1.TestDesignSystemProvider, { children: (0, jsx_runtime_1.jsx)(MenuList_1.MenuList, { accessibleName: "test menu", children: menuItems.map((i) => ((0, jsx_runtime_1.jsx)(MenuItemInternalLink_1.MenuItemInternalLink, { path: i.path, label: i.label, autoFocus: i.autoFocus }, i.label))) }) }));
return new MenuInteractions();
}
class MenuInteractions {
assertItemIsFocused = (item) => {
const activeElement = testing_library_1.domQueries.getActiveElement().innerElement;
assertElementIsAnchor(activeElement);
(0, vitest_1.expect)(activeElement).toHaveAttribute("aria-label", item.label);
(0, vitest_1.expect)(activeElement).toHaveAttribute("href", item.path);
};
assertLinkIsAnchorTag = (item) => {
this.getMenu().getMenuItem(item.label).assertIsAnchorElement();
};
getMenu = () => testing_library_1.domQueries.getMenu("test menu");
pressUpKey = () => pressSpecialKey("ArrowUp");
pressDownKey = () => pressSpecialKey("ArrowDown");
pressHomeKey = () => pressSpecialKey("Home");
pressEndKey = () => pressSpecialKey("End");
pressEnterKey = () => pressSpecialKey("Enter");
}
function assertElementIsAnchor(element) {
(0, vitest_1.expect)(element).toBeInstanceOf(HTMLAnchorElement);
return true;
}
async function pressSpecialKey(key) {
await testing_library_1.domQueries.getActiveElement().type(`{${key}}`, { skipClick: true });
}