@octopusdeploy/design-system-components
Version:
The design systems component library.
114 lines (113 loc) • 5.35 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 renderComponentTest_1 = require("../../../testing/renderComponentTest");
const Menu_1 = require("../../Menu");
(0, vitest_1.describe)("Menu", () => {
(0, vitest_1.describe)("keyboard interactions", () => {
// The first item will be automatically focused because we are using a SimpleMenu
const firstItem = { type: "button", label: "first", onClick: vitest_1.vi.fn() };
const secondItem = { type: "button", label: "second", onClick: vitest_1.vi.fn() };
const thirdItem = { type: "button", label: "third", onClick: vitest_1.vi.fn() };
const items = [firstItem, secondItem, thirdItem];
(0, vitest_1.test)("keydown cycles through focused items", async () => {
const menu = await renderMenu(items);
await menu.pressDownKey();
await menu.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 menu = await renderMenu(items);
await menu.pressDownKey(); // second item is focused
await menu.pressDownKey(); // third item is focused
await menu.pressDownKey(); // first item should be focused again
await menu.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 menu = await renderMenu(items);
await menu.pressUpKey();
await menu.assertIsFocused(thirdItem);
});
(0, vitest_1.test)("keyup cycles up through the focused items", async () => {
const menu = await renderMenu(items);
await menu.pressDownKey(); // second item is focused
await menu.pressUpKey(); // first item is focused again
await menu.assertIsFocused(firstItem);
});
(0, vitest_1.test)("home key focuses the first item", async () => {
const menu = await renderMenu(items);
await menu.pressDownKey(); // focus something else
await menu.pressHomeKey();
await menu.assertIsFocused(firstItem);
});
(0, vitest_1.test)("end key focuses the last item", async () => {
const menu = await renderMenu(items);
await menu.pressEndKey();
await menu.assertIsFocused(thirdItem);
});
(0, vitest_1.test)("typing an items name will focus that item", async () => {
const menu = await renderMenu(items);
await menu.type(thirdItem.label.substr(0, 2));
await menu.assertIsFocused(thirdItem);
});
(0, vitest_1.test)("Escape closes the menu", async () => {
const menu = await renderMenu(items);
menu.assertIsOpen();
await menu.pressEscape();
await menu.assertMenuIsNotVisible();
});
});
});
async function renderMenu(items) {
(0, renderComponentTest_1.renderComponentTest)((0, jsx_runtime_1.jsx)(MenuWithButtonTrigger, { items: items }));
await menuInteractions.openMenu();
return menuInteractions;
}
function MenuWithButtonTrigger({ items }) {
const [openMenu, menuState, buttonAriaAttributes] = (0, Menu_1.useMenuState)();
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { tabIndex: 0, onClick: openMenu, ...buttonAriaAttributes, children: "Open Menu" }), (0, jsx_runtime_1.jsx)(Menu_1.SimpleMenu, { menuState: menuState, items: items, accessibleName: "test menu" })] }));
}
const menuInteractions = {
openMenu: async () => {
await testing_library_1.domQueries.getButton("open menu").click();
},
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");
},
assertIsOpen: () => {
getMenu().assertIsInTheDocument();
},
assertMenuIsNotVisible: async () => {
const menu = queryMenu();
if (menu.innerElement) {
await (0, react_1.waitForElementToBeRemoved)(menu.innerElement);
}
menu.assertIsNotInTheDocument();
},
};
const getMenu = () => testing_library_1.domQueries.getMenu("test menu");
const queryMenu = () => testing_library_1.domQueries.queryMenu("test menu");
async function pressSpecialKey(key) {
await testing_library_1.domQueries.getActiveElement().type(`{${key}}`, { skipClick: true });
}