@octopusdeploy/design-system-components
Version:
The design systems component library.
89 lines (88 loc) • 4.56 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
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 user_event_1 = __importDefault(require("@testing-library/user-event"));
const vitest_1 = require("vitest");
const vitest_axe_1 = require("vitest-axe");
const renderComponentTest_1 = require("../../../testing/renderComponentTest");
const Select_1 = require("../../Form/Select/Select");
const Drawer_1 = require("../Drawer");
(0, vitest_1.describe)("Drawer", () => {
(0, vitest_1.test)("renders content when open", async () => {
const { interactions } = renderDrawer({ open: true });
interactions.assertContentIsVisible();
});
(0, vitest_1.test)("content is hidden when not open", async () => {
const { interactions } = renderDrawer({ open: false });
interactions.assertContentIsNotVisible();
});
(0, vitest_1.test)("onClose gets called when the Cancel button is clicked", async () => {
const { onClose } = renderDrawer({ open: true, title: "Change value" });
await testing_library_1.domQueries.getButton("cancel change value").click();
(0, vitest_1.expect)(onClose).toHaveBeenCalledTimes(1);
});
(0, vitest_1.test)("onOkClick gets called when Ok button is clicked", async () => {
const { onOkClick } = renderDrawer({ open: true, title: "Update name" });
await testing_library_1.domQueries.getButton("confirm update name").click();
(0, vitest_1.expect)(onOkClick).toHaveBeenCalledTimes(1);
});
(0, vitest_1.it)("is accessible", async () => {
const { interactions } = renderDrawer({ open: true, title: "Change value" });
await interactions.drawerShouldBeAccessible();
});
(0, vitest_1.test)("escape closes an open Select dropdown without also closing the drawer", async () => {
const { onClose, interactions } = renderDrawer({ open: true, content: (0, jsx_runtime_1.jsx)(SelectContent, {}) });
await interactions.openSelect();
interactions.assertSelectDropdownIsOpen();
await interactions.pressEscape();
interactions.assertSelectDropdownIsClosed();
(0, vitest_1.expect)(onClose).not.toHaveBeenCalled();
});
});
const drawerContent = "This is the content inside the drawer";
const selectLabel = "Fruit";
const selectItems = [
{ id: "1", name: "First option" },
{ id: "2", name: "Second option" },
];
function SelectContent() {
return (0, jsx_runtime_1.jsx)(Select_1.Select, { label: selectLabel, items: selectItems, getOption: (item) => ({ value: item.id, label: item.name }), value: undefined, onChange: vitest_1.vi.fn() });
}
function renderDrawer({ open, title = "", content = drawerContent }) {
const onClose = vitest_1.vi.fn();
const onOkClick = vitest_1.vi.fn();
const { container } = (0, renderComponentTest_1.renderComponentTest)((0, jsx_runtime_1.jsx)(Drawer_1.Drawer, { variant: "default", title: title, isOpen: open, onClose: onClose, onPrimaryActionClick: onOkClick, children: content }));
const interactions = getDrawerInteractions(container);
return { container, onClose, onOkClick, interactions };
}
function getDrawerInteractions(container) {
return {
drawerShouldBeAccessible: async () => {
const results = await (0, vitest_axe_1.axe)(container);
(0, vitest_1.expect)(results).toHaveNoViolations();
},
assertContentIsVisible: () => {
(0, vitest_1.expect)(react_1.screen.getByText(drawerContent)).toBeInTheDocument();
},
assertContentIsNotVisible: () => {
(0, vitest_1.expect)(react_1.screen.queryByText(drawerContent)).not.toBeInTheDocument();
},
openSelect: async () => {
await user_event_1.default.click(react_1.screen.getByRole("combobox", { name: new RegExp(selectLabel) }));
},
assertSelectDropdownIsOpen: () => {
(0, vitest_1.expect)(react_1.screen.getByRole("listbox")).toBeInTheDocument();
},
assertSelectDropdownIsClosed: () => {
(0, vitest_1.expect)(react_1.screen.queryByRole("listbox")).not.toBeInTheDocument();
},
pressEscape: async () => {
await user_event_1.default.keyboard("{Escape}");
},
};
}