@sitecore/sc-contenthub-blok
Version:
A UI library for [Sitecore Content Hub](https://doc.sitecore.com/ch/).
93 lines • 4.77 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("@testing-library/react");
const Foundations_1 = require("../../Foundations");
const BlokButtonGroup_1 = require("./BlokButtonGroup");
// Mock the useIsDarkTheme hook
jest.mock("../../useIsDarkTheme", () => ({
useIsDarkTheme: jest.fn().mockReturnValue(false),
}));
// Mock @emotion/css to return predictable class names
jest.mock("@emotion/css", () => ({
css: jest.fn().mockImplementation((styles) => {
// Check for specific style patterns to match class names
if (styles.display === "inline-flex" && styles.gap === "0.25rem") {
return "normal";
}
if (styles.border && styles.borderRadius === Foundations_1.borderRadiusFull) {
return "rounded";
}
if (styles.border && styles.borderRadius === Foundations_1.borderRadiusMd) {
return "square";
}
if (styles.flexDirection === "column") {
return "stacked";
}
if (styles.display === "flex" && styles.button) {
return "fullWidth";
}
if (styles.borderColor === Foundations_1.semanticTokens.borderColor.dark) {
return "darkVariant";
}
return "unknown-class";
}),
cx: jest.fn().mockImplementation((...args) => {
// Filter out falsy values and return space-separated class names
return args.filter(Boolean).join(" ");
}),
}));
describe("BlokButtonGroup", () => {
test("renders with default props", () => {
const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(BlokButtonGroup_1.BlokButtonGroup, { children: "Test Content" }));
const group = container.querySelector('div[role="group"]');
expect(group).toBeInTheDocument();
expect(group).toHaveTextContent("Test Content");
expect(group).toHaveClass("normal");
expect(group).not.toHaveClass("rounded");
expect(group).not.toHaveClass("square");
expect(group).not.toHaveClass("stacked");
expect(group).not.toHaveClass("fullWidth");
});
test("applies rounded variant class", () => {
const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(BlokButtonGroup_1.BlokButtonGroup, { variant: "rounded", children: "Test Content" }));
const group = container.querySelector('div[role="group"]');
expect(group).toHaveClass("normal");
expect(group).toHaveClass("rounded");
});
test("applies square variant class", () => {
const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(BlokButtonGroup_1.BlokButtonGroup, { variant: "square", children: "Test Content" }));
const group = container.querySelector('div[role="group"]');
expect(group).toHaveClass("normal");
expect(group).toHaveClass("square");
});
test("applies vertical orientation class", () => {
const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(BlokButtonGroup_1.BlokButtonGroup, { orientation: "vertical", children: "Test Content" }));
const group = container.querySelector('div[role="group"]');
expect(group).toHaveClass("normal");
expect(group).toHaveClass("stacked");
});
test("applies fullWidth class", () => {
const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(BlokButtonGroup_1.BlokButtonGroup, { fullWidth: true, children: "Test Content" }));
const group = container.querySelector('div[role="group"]');
expect(group).toHaveClass("normal");
expect(group).toHaveClass("fullWidth");
});
test("applies custom className", () => {
const customClass = "custom-class";
const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(BlokButtonGroup_1.BlokButtonGroup, { className: customClass, children: "Test Content" }));
const group = container.querySelector('div[role="group"]');
expect(group).toHaveClass("normal");
expect(group).toHaveClass(customClass);
});
test("combines multiple prop variations correctly", () => {
const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(BlokButtonGroup_1.BlokButtonGroup, { variant: "rounded", orientation: "vertical", fullWidth: true, className: "custom-class", children: "Test Content" }));
const group = container.querySelector('div[role="group"]');
expect(group).toHaveClass("normal");
expect(group).toHaveClass("rounded");
expect(group).toHaveClass("stacked");
expect(group).toHaveClass("fullWidth");
expect(group).toHaveClass("custom-class");
});
});
//# sourceMappingURL=BlokButtonGroup.spec.js.map