@sitecore/sc-contenthub-blok
Version:
A UI library for [Sitecore Content Hub](https://doc.sitecore.com/ch/).
61 lines • 3.61 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 react_1 = require("@testing-library/react");
const user_event_1 = __importDefault(require("@testing-library/user-event"));
const BlokAlert_1 = require("./BlokAlert");
describe("BlokAlert", () => {
test("renders with default severity", () => {
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { children: "Default Alert" }));
expect(react_1.screen.getByText("Default Alert")).toBeInTheDocument();
});
test("renders with custom severity", () => {
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "neutral", children: "Neutral Alert" }));
expect(react_1.screen.getByText("Neutral Alert")).toBeInTheDocument();
});
test("renders with alert title", () => {
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { alertTitle: "Alert Title", children: "Alert with Title" }));
expect(react_1.screen.getByText("Alert Title")).toBeInTheDocument();
});
test("calls onClose when dismiss button is clicked", async () => {
const user = user_event_1.default.setup();
const onClose = jest.fn();
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { dismissible: true, onClose: onClose, children: "Dismissible Alert" }));
await user.click(react_1.screen.getByRole("button", { name: "Close" }));
expect(onClose).toHaveBeenCalledTimes(1);
});
test("toggles collapse state when collapse button is clicked", async () => {
const user = user_event_1.default.setup();
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { isCollapsible: true, children: "Collapsible Alert" }));
const toggleButton = react_1.screen.getByRole("button", {
name: "Toggle",
});
expect(react_1.screen.getByText("Collapsible Alert")).toBeInTheDocument();
await user.click(toggleButton);
expect(react_1.screen.queryByText("Collapsible Alert")).not.toBeInTheDocument();
});
test("does not render children when collapsed", () => {
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { isCollapsible: true, isCollapsed: true, children: "Collapsible Alert" }));
expect(react_1.screen.queryByText("Collapsible Alert")).not.toBeInTheDocument();
});
test("renders children when not collapsed", () => {
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { isCollapsible: true, children: "Collapsible Alert" }));
expect(react_1.screen.getByText("Collapsible Alert")).toBeInTheDocument();
});
Object.keys(BlokAlert_1.alertIconMap).forEach((severity) => {
test(`renders correct icon for ${severity} severity`, () => {
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: severity, children: "Alert" }));
const icon = react_1.screen.getByTestId(BlokAlert_1.alertIconMap[severity]);
expect(icon).toBeInTheDocument();
});
});
test("renders custom icon", () => {
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { iconName: "trash", children: "Custom Icon Alert" }));
const icon = react_1.screen.getByTestId("m-icon-trash");
expect(icon).toBeInTheDocument();
});
});
//# sourceMappingURL=BlokAlert.spec.js.map