@crossed/ui
Version:
A universal & performant styling library for React Native, Next.js & React
66 lines (65 loc) • 2.9 kB
JavaScript
import { jsx } from "react/jsx-runtime";
import { render, screen, fireEvent } from "@crossed/test";
import "@testing-library/jest-dom";
import { Box } from "../Box";
import { inlineStyle } from "@crossed/styled";
describe("Box component", () => {
it("renders correctly with default props", () => {
render(/* @__PURE__ */ jsx(Box, { testID: "box" }));
const boxElement = screen.getByTestId("box");
expect(boxElement).toBeInTheDocument();
expect(boxElement).toHaveClass("display-[flex]");
});
it('applies center styles when "center" is true', () => {
render(/* @__PURE__ */ jsx(Box, { center: true, testID: "box" }));
const boxElement = screen.getByTestId("box");
expect(boxElement).toHaveClass("align-items-[center]");
expect(boxElement).toHaveClass("justify-content-[center]");
});
it("applies custom gap styles", () => {
render(/* @__PURE__ */ jsx(Box, { space: "3xl", testID: "box" }));
const boxElement = screen.getByTestId("box");
expect(boxElement).toHaveClass("gap-[var(--space-3xl)]");
});
it("applies justify-content and align-items styles", () => {
render(/* @__PURE__ */ jsx(Box, { justifyContent: "between", alignItems: "flex-end", testID: "box" }));
const boxElement = screen.getByTestId("box");
expect(boxElement).toHaveClass("justify-content-[space-between]");
expect(boxElement).toHaveClass("align-items-[flex-end]");
});
it('applies custom styles via "style" prop', () => {
const customStyle = inlineStyle(() => ({
base: { backgroundColor: "blue" }
}));
render(/* @__PURE__ */ jsx(Box, { style: customStyle, testID: "box" }));
const boxElement = screen.getByTestId("box");
expect(boxElement).toHaveClass("background-color-[blue]");
});
it("applies align-self styles", () => {
render(/* @__PURE__ */ jsx(Box, { alignSelf: "center", testID: "box" }));
const boxElement = screen.getByTestId("box");
expect(boxElement).toHaveClass("align-self-[center]");
});
it("Pressable box event hover", () => {
const onPress = jest.fn();
render(/* @__PURE__ */ jsx(Box, { pressable: true, testID: "box", onPointerEnter: onPress }));
const boxElement = screen.getByTestId("box");
fireEvent.pointerEnter(boxElement);
expect(onPress).toBeCalledTimes(1);
});
it("Pressable box event onPress", () => {
const onPress = jest.fn();
render(/* @__PURE__ */ jsx(Box, { pressable: true, testID: "box", onPress }));
const boxElement = screen.getByTestId("box");
fireEvent.click(boxElement);
expect(onPress).toBeCalledTimes(1);
});
it("view box not event onPress", () => {
const onPress = jest.fn();
render(/* @__PURE__ */ jsx(Box, { testID: "box", onPress }));
const boxElement = screen.getByTestId("box");
fireEvent.click(boxElement);
expect(onPress).toBeCalledTimes(0);
});
});
//# sourceMappingURL=Box.spec.js.map