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