@octopusdeploy/design-system-components
Version:
The design systems component library.
51 lines (50 loc) • 2.99 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 vitest_1 = require("vitest");
const __1 = require("..");
const renderComponentTest_1 = require("../../../testing/renderComponentTest");
const MenuItems_1 = require("../../MenuItems");
(0, vitest_1.describe)("CustomMenu", () => {
(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 menu = renderMenu((menuProps) => ((0, jsx_runtime_1.jsx)(__1.CustomMenu, { ...menuProps, children: items.map((i) => ((0, jsx_runtime_1.jsx)(MenuItems_1.MenuItemButton, { onClick: i.onClick, autoFocus: i.autoFocus, children: i.label }, i.label))) })));
await menu.openMenu();
await menu.assertIsFocused(secondItem);
});
// material-ui doesn't allow fragments as children out of the box. We have added this support ourselves
(0, vitest_1.test)("Allows children to be fragments", async () => {
const onClick = vitest_1.vi.fn();
const menu = renderMenu((menuProps) => ((0, jsx_runtime_1.jsx)(__1.CustomMenu, { ...menuProps, children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(MenuItems_1.MenuItemButton, { onClick: onClick, children: "Some Button" }) }) })));
// assert menu is rendered and the normal interactions work
await menu.openMenu();
menu.assertMenuExists();
await menu.clickButton("Some button");
(0, vitest_1.expect)(onClick).toHaveBeenCalled();
});
});
function renderMenu(menu) {
(0, renderComponentTest_1.renderComponentTest)((0, jsx_runtime_1.jsx)(MenuWithButtonTrigger, { renderMenu: menu }));
return menuInteractions;
}
function MenuWithButtonTrigger({ renderMenu }) {
const [openMenu, menuState, buttonAriaAttributes] = (0, __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" }), renderMenu({ menuState, accessibleName: "test menu" })] }));
}
const menuInteractions = {
assertMenuExists() {
testing_library_1.domQueries.getMenu("test menu").assertIsInTheDocument();
},
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);
},
clickButton: async (buttonLabel) => {
await testing_library_1.domQueries.getMenu("test menu").getMenuItem(buttonLabel).click();
},
};