@octopusdeploy/design-system-components
Version:
The design systems component library.
36 lines (35 loc) • 2 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 Drawer_1 = require("../../../Drawer/Drawer");
const TestDesignSystemProvider_1 = require("../../../TestDesignSystemProvider");
const Select_1 = require("../Select");
// A Select renders its dropdown in a portal outside the drawer. The drawer's focus trap would pull focus back and close
// the dropdown before an option could be chosen. TestDesignSystemProvider disables the drawer's focus-trap enforcement in
// tests (MuiDrawer disableEnforceFocus), so a Select inside a drawer stays operable. This test guards that.
const items = [
{ label: "Apple", value: "apple" },
{ label: "Banana", value: "banana" },
];
(0, vitest_1.describe)("<Select /> inside a <Drawer />", () => {
(0, vitest_1.test)("an option can be selected", async () => {
const { selectOption, assertSelectedValue } = renderSelectInDrawer();
await selectOption("Banana");
assertSelectedValue("banana");
});
});
function renderSelectInDrawer() {
const onChange = vitest_1.vi.fn();
(0, react_1.render)((0, jsx_runtime_1.jsx)(TestDesignSystemProvider_1.TestDesignSystemProvider, { children: (0, jsx_runtime_1.jsx)(Drawer_1.Drawer, { variant: "default", isOpen: true, onClose: () => { }, title: "Drawer", onPrimaryActionClick: () => { }, children: (0, jsx_runtime_1.jsx)(Select_1.Select, { label: "Fruit", items: items, getOption: (option) => option, value: undefined, onChange: onChange }) }) }));
return {
selectOption: async (optionLabel) => {
await testing_library_1.domQueries.getSelect("Fruit").selectOption(optionLabel);
},
assertSelectedValue: (value) => {
(0, vitest_1.expect)(onChange).toHaveBeenCalledWith(value);
},
};
}