@octopusdeploy/design-system-components
Version:
The design systems component library.
56 lines (55 loc) • 2.84 kB
JavaScript
"use strict";
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 vitest_axe_1 = require("vitest-axe");
const renderComponentTest_1 = require("../../../testing/renderComponentTest");
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();
});
});
const drawerContent = "This is the content inside the drawer";
function renderDrawer({ open, title = "" }) {
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: drawerContent }));
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();
},
};
}