@sitecore/sc-contenthub-blok
Version:
A UI library for [Sitecore Content Hub](https://doc.sitecore.com/ch/).
57 lines • 3.79 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 Foundations_1 = require("../../Foundations");
const BlokBadge_1 = require("./BlokBadge");
describe("BlokBadge", () => {
test("renders children correctly", () => {
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "red", children: "Test Badge" }));
expect(react_1.screen.getByText("Test Badge")).toBeInTheDocument();
});
test("applies correct styles based on colorScheme", () => {
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "blue", children: "Styled Badge" }));
const badge = react_1.screen.getByText("Styled Badge").parentElement;
expect(badge).toHaveStyle(`background-color: ${Foundations_1.colorMap["blue"][100]}`);
expect(badge).toHaveStyle(`color: ${Foundations_1.colorMap["blue"][800]}`);
});
test("defaults to neutral colorScheme if none is provided", () => {
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { children: "Default Badge" }));
const badge = react_1.screen.getByText("Default Badge").parentElement;
expect(badge).toHaveStyle(`background-color: ${Foundations_1.colorMap["neutral"][100]}`);
expect(badge).toHaveStyle(`color: ${Foundations_1.colorMap["neutral"][800]}`);
});
test("renders with uppercase text", () => {
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "green", children: "Uppercase Badge" }));
const badge = react_1.screen.getByText("Uppercase Badge").parentElement;
expect(badge).toHaveStyle("text-transform: uppercase");
});
test("toggles expanded content when expand button is clicked", async () => {
const user = user_event_1.default.setup();
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { expandedContent: (0, jsx_runtime_1.jsx)("span", { children: "Expanded Content" }), children: "Collapsed Content" }));
await user.click(react_1.screen.getByLabelText("Expand"));
expect(react_1.screen.getByText("Expanded Content")).toBeInTheDocument();
await user.click(react_1.screen.getByLabelText("Collapse"));
expect(react_1.screen.getByText("Collapsed Content")).toBeInTheDocument();
});
test("should not crash when providing invalid colorScheme", () => {
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "invalid", children: "Invalid Badge" }));
const badge = react_1.screen.getByText("Invalid Badge").parentElement;
expect(badge).toHaveStyle(`background-color: ${Foundations_1.colorMap["neutral"][100]}`);
expect(badge).toHaveStyle(`color: ${Foundations_1.colorMap["neutral"][800]}`);
});
test("render the content in the slots", () => {
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "blue", slots: {
start: (0, jsx_runtime_1.jsx)("span", { children: "Start Slot" }),
end: (0, jsx_runtime_1.jsx)("span", { children: "End Slot" }),
}, children: "Content with Slots" }));
expect(react_1.screen.getByText("Start Slot")).toBeInTheDocument();
expect(react_1.screen.getByText("Content with Slots")).toBeInTheDocument();
expect(react_1.screen.getByText("End Slot")).toBeInTheDocument();
});
});
//# sourceMappingURL=BlokBadge.spec.js.map