@crossed/ui
Version:
A universal & performant styling library for React Native, Next.js & React
54 lines (53 loc) • 3.4 kB
JavaScript
var import_jsx_runtime = require("react/jsx-runtime");
var import_test = require("@crossed/test");
var import_Group = require("../Group");
var import__ = require("../index");
describe.skip("ButtonGroup", () => {
it("renders correctly with default props", () => {
(0, import_test.render)(
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Group.ButtonGroup, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Button, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Button.Text, { children: "Button 1" }) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Button, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Button.Text, { children: "Button 2" }) })
] })
);
const buttons = import_test.screen.getAllByRole("button");
expect(buttons).toHaveLength(2);
expect(buttons[0]).toHaveTextContent("Button 1");
expect(buttons[1]).toHaveTextContent("Button 2");
});
it("applies the correct orientation", () => {
const { rerender } = (0, import_test.render)(
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Group.ButtonGroup, { orientation: "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Button, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Button.Text, { children: "Button 1" }) }) })
);
const group = import_test.screen.getByRole("group");
expect(group).toHaveAttribute("data-orientation", "horizontal");
rerender(
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Group.ButtonGroup, { orientation: "vertical", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Button, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Button.Text, { children: "Button 1" }) }) })
);
expect(group).toHaveAttribute("data-orientation", "vertical");
});
it("renders children correctly", () => {
(0, import_test.render)(
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Group.ButtonGroup, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Button, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Button.Text, { children: "Button 1" }) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Button, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Button.Text, { children: "Button 2" }) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Button, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Button.Text, { children: "Button 3" }) })
] })
);
const buttons = import_test.screen.getAllByRole("button");
expect(buttons).toHaveLength(3);
expect(buttons.map((button) => button.textContent)).toEqual([
"Button 1",
"Button 2",
"Button 3"
]);
});
it("renders nested components correctly", () => {
(0, import_test.render)(
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Group.ButtonGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Button, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Button.Text, { children: "Nested Button" }) }) }) })
);
const button = import_test.screen.getByRole("button", { name: "Nested Button" });
expect(button).toBeTruthy();
});
});
//# sourceMappingURL=Group.spec.js.map