@octopusdeploy/design-system-components
Version:
The design systems component library.
103 lines (102 loc) • 5.29 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 MenuItems_1 = require("../../MenuItems");
const MenuList_1 = require("../MenuList");
(0, vitest_1.describe)("MenuList", () => {
(0, vitest_1.describe)("keyboard interactions", () => {
// The first item will be automatically focused because we are using a SimpleMenu
const firstItem = { label: "first", onClick: vitest_1.vi.fn(), autoFocus: true };
const secondItem = { label: "second", onClick: vitest_1.vi.fn() };
const thirdItem = { label: "third", onClick: vitest_1.vi.fn() };
const items = [firstItem, secondItem, thirdItem];
(0, vitest_1.test)("keydown cycles through focused items", async () => {
const menuList = renderMenuList(items);
await menuList.pressDownKey();
await menuList.assertIsFocused(secondItem);
});
(0, vitest_1.test)("when focused at the bottom of the list, keydown causes focus to wrap around to the top", async () => {
const menuList = renderMenuList(items);
await menuList.pressDownKey(); // second item is focused
await menuList.pressDownKey(); // third item is focused
await menuList.pressDownKey(); // first item should be focused again
await menuList.assertIsFocused(firstItem);
});
(0, vitest_1.test)("when focused at the top of the list, keyup causes focus to wrap around to the bottom", async () => {
const menuList = renderMenuList(items);
await menuList.pressUpKey();
await menuList.assertIsFocused(thirdItem);
});
(0, vitest_1.test)("keyup cycles up through the focused items", async () => {
const menuList = renderMenuList(items);
await menuList.pressDownKey(); // second item is focused
await menuList.pressUpKey(); // first item is focused again
await menuList.assertIsFocused(firstItem);
});
(0, vitest_1.test)("home key focuses the first item", async () => {
const menuList = renderMenuList(items);
await menuList.pressDownKey(); // focus something else
await menuList.pressHomeKey();
await menuList.assertIsFocused(firstItem);
});
(0, vitest_1.test)("end key focuses the last item", async () => {
const menuList = renderMenuList(items);
await menuList.pressEndKey();
await menuList.assertIsFocused(thirdItem);
});
(0, vitest_1.test)("typing an items name will focus that item", async () => {
const menuList = renderMenuList(items);
await menuList.type(thirdItem.label.substr(0, 2));
await menuList.assertIsFocused(thirdItem);
});
});
(0, vitest_1.test)("item with autoFocus is focused by default", async () => {
const secondItem = { label: "second", onClick: vitest_1.vi.fn(), autoFocus: true };
const items = [{ label: "first", onClick: vitest_1.vi.fn() }, secondItem, { label: "third", onClick: vitest_1.vi.fn() }];
const menuList = renderMenuList(items);
await menuList.assertIsFocused(secondItem);
});
(0, vitest_1.test)("fragments supported as children", async () => {
const onClick = vitest_1.vi.fn();
(0, react_1.render)((0, jsx_runtime_1.jsx)(MenuList_1.MenuList, { accessibleName: "Test menu", children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(MenuItems_1.MenuItemButton, { onClick: onClick, children: "Some Button" }) }) }));
await menuInteractions.clickMenuItem("Some Button");
(0, vitest_1.expect)(onClick).toHaveBeenCalled();
});
});
function renderMenuList(items) {
(0, react_1.render)((0, jsx_runtime_1.jsx)(MenuList_1.MenuList, { accessibleName: "Test menu", children: items.map((i) => ((0, jsx_runtime_1.jsx)(MenuItems_1.MenuItemButton, { onClick: i.onClick, autoFocus: i.autoFocus, children: i.label }, i.label))) }));
return menuInteractions;
}
const menuInteractions = {
assertIsFocused: async (item) => {
await testing_library_1.domQueries.getActiveElement().click();
(0, vitest_1.expect)(item.onClick).toHaveBeenCalledTimes(1);
},
async type(textToType) {
await testing_library_1.domQueries.getActiveElement().type(textToType, { skipClick: true });
},
async pressUpKey() {
await pressSpecialKey("ArrowUp");
},
async pressDownKey() {
await pressSpecialKey("ArrowDown");
},
async pressHomeKey() {
await pressSpecialKey("Home");
},
async pressEndKey() {
await pressSpecialKey("End");
},
async pressEscape() {
await pressSpecialKey("Escape");
},
clickMenuItem: async (itemLabel) => {
await testing_library_1.domQueries.getMenu("Test menu").getMenuItem(itemLabel).click();
},
};
async function pressSpecialKey(key) {
await testing_library_1.domQueries.getActiveElement().type(`{${key}}`, { skipClick: true });
}