@crossed/ui
Version:
A universal & performant styling library for React Native, Next.js & React
54 lines (53 loc) • 2.54 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { render, screen } from "@crossed/test";
import { ButtonGroup } from "../Group";
import { Button } from "../index";
describe.skip("ButtonGroup", () => {
it("renders correctly with default props", () => {
render(
/* @__PURE__ */ jsxs(ButtonGroup, { children: [
/* @__PURE__ */ jsx(Button, { children: /* @__PURE__ */ jsx(Button.Text, { children: "Button 1" }) }),
/* @__PURE__ */ jsx(Button, { children: /* @__PURE__ */ jsx(Button.Text, { children: "Button 2" }) })
] })
);
const buttons = 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 } = render(
/* @__PURE__ */ jsx(ButtonGroup, { orientation: "horizontal", children: /* @__PURE__ */ jsx(Button, { children: /* @__PURE__ */ jsx(Button.Text, { children: "Button 1" }) }) })
);
const group = screen.getByRole("group");
expect(group).toHaveAttribute("data-orientation", "horizontal");
rerender(
/* @__PURE__ */ jsx(ButtonGroup, { orientation: "vertical", children: /* @__PURE__ */ jsx(Button, { children: /* @__PURE__ */ jsx(Button.Text, { children: "Button 1" }) }) })
);
expect(group).toHaveAttribute("data-orientation", "vertical");
});
it("renders children correctly", () => {
render(
/* @__PURE__ */ jsxs(ButtonGroup, { children: [
/* @__PURE__ */ jsx(Button, { children: /* @__PURE__ */ jsx(Button.Text, { children: "Button 1" }) }),
/* @__PURE__ */ jsx(Button, { children: /* @__PURE__ */ jsx(Button.Text, { children: "Button 2" }) }),
/* @__PURE__ */ jsx(Button, { children: /* @__PURE__ */ jsx(Button.Text, { children: "Button 3" }) })
] })
);
const buttons = 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", () => {
render(
/* @__PURE__ */ jsx(ButtonGroup, { children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { children: /* @__PURE__ */ jsx(Button.Text, { children: "Nested Button" }) }) }) })
);
const button = screen.getByRole("button", { name: "Nested Button" });
expect(button).toBeTruthy();
});
});
//# sourceMappingURL=Group.spec.js.map