@fpkit/acss 2.2.0 → 3.1.0

package/src/components/flexbox/flex.test.tsx

@@ -0,0 +1,689 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Flex from "./flex";
+
+describe("Flex", () => {
+  describe("Rendering", () => {
+    it("should render flex container with children", () => {
+      render(
+        <Flex data-testid="flex">
+          <div>Item 1</div>
+          <div>Item 2</div>
+        </Flex>
+      );
+
+      const flex = screen.getByTestId("flex");
+      expect(flex).toBeInTheDocument();
+      expect(flex).toHaveClass("flex");
+    });
+
+    it("should render as div by default", () => {
+      render(<Flex data-testid="flex">Content</Flex>);
+
+      const flex = screen.getByTestId("flex");
+      expect(flex.tagName).toBe("DIV");
+    });
+
+    it("should render as custom element with 'as' prop", () => {
+      render(
+        <Flex as="section" data-testid="flex">
+          Content
+        </Flex>
+      );
+
+      const flex = screen.getByTestId("flex");
+      expect(flex.tagName).toBe("SECTION");
+    });
+
+    it("should apply inline flex class when inline prop is true", () => {
+      render(
+        <Flex inline data-testid="flex">
+          Content
+        </Flex>
+      );
+
+      const flex = screen.getByTestId("flex");
+      expect(flex).toHaveClass("flex-inline");
+      expect(flex).not.toHaveClass("flex");
+    });
+
+    it("should merge custom className with generated classes", () => {
+      render(
+        <Flex className="custom-class" direction="row" data-testid="flex">
+          Content
+        </Flex>
+      );
+
+      const flex = screen.getByTestId("flex");
+      expect(flex).toHaveClass("flex", "flex-row", "custom-class");
+    });
+
+    it("should apply custom styles", () => {
+      render(
+        <Flex
+          styles={{ "--flex-gap": "2rem" } as React.CSSProperties}
+          data-testid="flex"
+        >
+          Content
+        </Flex>
+      );
+
+      const flex = screen.getByTestId("flex");
+      expect(flex).toHaveStyle({ "--flex-gap": "2rem" });
+    });
+  });
+
+  describe("Direction Props", () => {
+    it("should apply flex-row class for row direction", () => {
+      render(
+        <Flex direction="row" data-testid="flex">
+          Content
+        </Flex>
+      );
+
+      expect(screen.getByTestId("flex")).toHaveClass("flex-row");
+    });
+
+    it("should apply flex-col class for column direction", () => {
+      render(
+        <Flex direction="column" data-testid="flex">
+          Content
+        </Flex>
+      );
+
+      expect(screen.getByTestId("flex")).toHaveClass("flex-col");
+    });
+
+    it("should apply flex-row-reverse class for row-reverse direction", () => {
+      render(
+        <Flex direction="row-reverse" data-testid="flex">
+          Content
+        </Flex>
+      );
+
+      expect(screen.getByTestId("flex")).toHaveClass("flex-row-reverse");
+    });
+
+    it("should apply flex-col-reverse class for column-reverse direction", () => {
+      render(
+        <Flex direction="column-reverse" data-testid="flex">
+          Content
+        </Flex>
+      );
+
+      expect(screen.getByTestId("flex")).toHaveClass("flex-col-reverse");
+    });
+  });
+
+  describe("Wrap Props", () => {
+    it("should apply flex-wrap class", () => {
+      render(
+        <Flex wrap="wrap" data-testid="flex">
+          Content
+        </Flex>
+      );
+
+      expect(screen.getByTestId("flex")).toHaveClass("flex-wrap");
+    });
+
+    it("should apply flex-nowrap class", () => {
+      render(
+        <Flex wrap="nowrap" data-testid="flex">
+          Content
+        </Flex>
+      );
+
+      expect(screen.getByTestId("flex")).toHaveClass("flex-nowrap");
+    });
+
+    it("should apply flex-wrap-reverse class", () => {
+      render(
+        <Flex wrap="wrap-reverse" data-testid="flex">
+          Content
+        </Flex>
+      );
+
+      expect(screen.getByTestId("flex")).toHaveClass("flex-wrap-reverse");
+    });
+  });
+
+  describe("Gap Props", () => {
+    it("should apply gap-md class", () => {
+      render(
+        <Flex gap="md" data-testid="flex">
+          Content
+        </Flex>
+      );
+
+      expect(screen.getByTestId("flex")).toHaveClass("gap-md");
+    });
+
+    it("should apply row-gap class", () => {
+      render(
+        <Flex rowGap="lg" data-testid="flex">
+          Content
+        </Flex>
+      );
+
+      expect(screen.getByTestId("flex")).toHaveClass("row-gap-lg");
+    });
+
+    it("should apply col-gap class", () => {
+      render(
+        <Flex colGap="sm" data-testid="flex">
+          Content
+        </Flex>
+      );
+
+      expect(screen.getByTestId("flex")).toHaveClass("col-gap-sm");
+    });
+  });
+
+  describe("Justify Props", () => {
+    it("should apply justify-start class", () => {
+      render(
+        <Flex justify="start" data-testid="flex">
+          Content
+        </Flex>
+      );
+
+      expect(screen.getByTestId("flex")).toHaveClass("justify-start");
+    });
+
+    it("should apply justify-center class", () => {
+      render(
+        <Flex justify="center" data-testid="flex">
+          Content
+        </Flex>
+      );
+
+      expect(screen.getByTestId("flex")).toHaveClass("justify-center");
+    });
+
+    it("should apply justify-between class", () => {
+      render(
+        <Flex justify="between" data-testid="flex">
+          Content
+        </Flex>
+      );
+
+      expect(screen.getByTestId("flex")).toHaveClass("justify-between");
+    });
+
+    it("should apply justify-around class", () => {
+      render(
+        <Flex justify="around" data-testid="flex">
+          Content
+        </Flex>
+      );
+
+      expect(screen.getByTestId("flex")).toHaveClass("justify-around");
+    });
+
+    it("should apply justify-evenly class", () => {
+      render(
+        <Flex justify="evenly" data-testid="flex">
+          Content
+        </Flex>
+      );
+
+      expect(screen.getByTestId("flex")).toHaveClass("justify-evenly");
+    });
+  });
+
+  describe("Align Props", () => {
+    it("should apply items-start class", () => {
+      render(
+        <Flex align="start" data-testid="flex">
+          Content
+        </Flex>
+      );
+
+      expect(screen.getByTestId("flex")).toHaveClass("items-start");
+    });
+
+    it("should apply items-center class", () => {
+      render(
+        <Flex align="center" data-testid="flex">
+          Content
+        </Flex>
+      );
+
+      expect(screen.getByTestId("flex")).toHaveClass("items-center");
+    });
+
+    it("should apply items-stretch class", () => {
+      render(
+        <Flex align="stretch" data-testid="flex">
+          Content
+        </Flex>
+      );
+
+      expect(screen.getByTestId("flex")).toHaveClass("items-stretch");
+    });
+
+    it("should apply items-baseline class", () => {
+      render(
+        <Flex align="baseline" data-testid="flex">
+          Content
+        </Flex>
+      );
+
+      expect(screen.getByTestId("flex")).toHaveClass("items-baseline");
+    });
+  });
+
+  describe("Align Content Props", () => {
+    it("should apply content-start class", () => {
+      render(
+        <Flex alignContent="start" data-testid="flex">
+          Content
+        </Flex>
+      );
+
+      expect(screen.getByTestId("flex")).toHaveClass("content-start");
+    });
+
+    it("should apply content-between class", () => {
+      render(
+        <Flex alignContent="between" data-testid="flex">
+          Content
+        </Flex>
+      );
+
+      expect(screen.getByTestId("flex")).toHaveClass("content-between");
+    });
+
+    it("should apply content-stretch class", () => {
+      render(
+        <Flex alignContent="stretch" data-testid="flex">
+          Content
+        </Flex>
+      );
+
+      expect(screen.getByTestId("flex")).toHaveClass("content-stretch");
+    });
+  });
+
+  describe("Preset Variants", () => {
+    it("should apply flex-center class for center variant", () => {
+      render(
+        <Flex variant="center" data-testid="flex">
+          Content
+        </Flex>
+      );
+
+      expect(screen.getByTestId("flex")).toHaveClass("flex-center");
+    });
+
+    it("should apply flex-between class for between variant", () => {
+      render(
+        <Flex variant="between" data-testid="flex">
+          Content
+        </Flex>
+      );
+
+      expect(screen.getByTestId("flex")).toHaveClass("flex-between");
+    });
+
+    it("should apply flex-around class for around variant", () => {
+      render(
+        <Flex variant="around" data-testid="flex">
+          Content
+        </Flex>
+      );
+
+      expect(screen.getByTestId("flex")).toHaveClass("flex-around");
+    });
+
+    it("should apply flex-stack class for stack variant", () => {
+      render(
+        <Flex variant="stack" data-testid="flex">
+          Content
+        </Flex>
+      );
+
+      expect(screen.getByTestId("flex")).toHaveClass("flex-stack");
+    });
+
+    it("should apply flex-spread class for spread variant", () => {
+      render(
+        <Flex variant="spread" data-testid="flex">
+          Content
+        </Flex>
+      );
+
+      expect(screen.getByTestId("flex")).toHaveClass("flex-spread");
+    });
+  });
+
+  describe("Responsive Props", () => {
+    it("should apply sm responsive classes", () => {
+      render(
+        <Flex sm={{ direction: "row", gap: "md" }} data-testid="flex">
+          Content
+        </Flex>
+      );
+
+      const flex = screen.getByTestId("flex");
+      expect(flex).toHaveClass("sm:flex-row", "sm:gap-md");
+    });
+
+    it("should apply md responsive classes", () => {
+      render(
+        <Flex md={{ justify: "between", align: "center" }} data-testid="flex">
+          Content
+        </Flex>
+      );
+
+      const flex = screen.getByTestId("flex");
+      expect(flex).toHaveClass("md:justify-between", "md:items-center");
+    });
+
+    it("should apply lg responsive classes", () => {
+      render(
+        <Flex lg={{ direction: "column", wrap: "wrap" }} data-testid="flex">
+          Content
+        </Flex>
+      );
+
+      const flex = screen.getByTestId("flex");
+      expect(flex).toHaveClass("lg:flex-col", "lg:flex-wrap");
+    });
+
+    it("should apply xl responsive classes", () => {
+      render(
+        <Flex xl={{ gap: "xl", justify: "evenly" }} data-testid="flex">
+          Content
+        </Flex>
+      );
+
+      const flex = screen.getByTestId("flex");
+      expect(flex).toHaveClass("xl:gap-xl", "xl:justify-evenly");
+    });
+
+    it("should combine base and responsive classes", () => {
+      render(
+        <Flex
+          direction="column"
+          gap="sm"
+          md={{ direction: "row", gap: "lg" }}
+          data-testid="flex"
+        >
+          Content
+        </Flex>
+      );
+
+      const flex = screen.getByTestId("flex");
+      expect(flex).toHaveClass(
+        "flex",
+        "flex-col",
+        "gap-sm",
+        "md:flex-row",
+        "md:gap-lg"
+      );
+    });
+  });
+
+  describe("Flex.Item", () => {
+    it("should render Flex.Item component", () => {
+      render(<Flex.Item data-testid="flex-item">Item content</Flex.Item>);
+
+      const item = screen.getByTestId("flex-item");
+      expect(item).toBeInTheDocument();
+      expect(item.tagName).toBe("DIV");
+    });
+
+    it("should apply flex-1 class", () => {
+      render(
+        <Flex.Item flex="1" data-testid="flex-item">
+          Item
+        </Flex.Item>
+      );
+
+      expect(screen.getByTestId("flex-item")).toHaveClass("flex-1");
+    });
+
+    it("should apply flex-auto class", () => {
+      render(
+        <Flex.Item flex="auto" data-testid="flex-item">
+          Item
+        </Flex.Item>
+      );
+
+      expect(screen.getByTestId("flex-item")).toHaveClass("flex-auto");
+    });
+
+    it("should apply flex-none class", () => {
+      render(
+        <Flex.Item flex="none" data-testid="flex-item">
+          Item
+        </Flex.Item>
+      );
+
+      expect(screen.getByTestId("flex-item")).toHaveClass("flex-none");
+    });
+
+    it("should apply flex-initial class", () => {
+      render(
+        <Flex.Item flex="initial" data-testid="flex-item">
+          Item
+        </Flex.Item>
+      );
+
+      expect(screen.getByTestId("flex-item")).toHaveClass("flex-initial");
+    });
+
+    it("should apply flex-grow class", () => {
+      render(
+        <Flex.Item grow={1} data-testid="flex-item">
+          Item
+        </Flex.Item>
+      );
+
+      expect(screen.getByTestId("flex-item")).toHaveClass("flex-grow-1");
+    });
+
+    it("should apply flex-shrink class", () => {
+      render(
+        <Flex.Item shrink={0} data-testid="flex-item">
+          Item
+        </Flex.Item>
+      );
+
+      expect(screen.getByTestId("flex-item")).toHaveClass("flex-shrink-0");
+    });
+
+    it("should apply flex-basis class", () => {
+      render(
+        <Flex.Item basis="auto" data-testid="flex-item">
+          Item
+        </Flex.Item>
+      );
+
+      expect(screen.getByTestId("flex-item")).toHaveClass("flex-basis-auto");
+    });
+
+    it("should apply align-self class", () => {
+      render(
+        <Flex.Item alignSelf="end" data-testid="flex-item">
+          Item
+        </Flex.Item>
+      );
+
+      expect(screen.getByTestId("flex-item")).toHaveClass("self-end");
+    });
+
+    it("should apply order class", () => {
+      render(
+        <Flex.Item order="first" data-testid="flex-item">
+          Item
+        </Flex.Item>
+      );
+
+      expect(screen.getByTestId("flex-item")).toHaveClass("order-first");
+    });
+
+    it("should apply responsive flex classes", () => {
+      render(
+        <Flex.Item
+          flex="none"
+          md={{ flex: "1" }}
+          lg={{ flex: "auto" }}
+          data-testid="flex-item"
+        >
+          Item
+        </Flex.Item>
+      );
+
+      const item = screen.getByTestId("flex-item");
+      expect(item).toHaveClass("flex-none", "md:flex-1", "lg:flex-auto");
+    });
+
+    it("should render as custom element", () => {
+      render(
+        <Flex.Item as="article" data-testid="flex-item">
+          Item
+        </Flex.Item>
+      );
+
+      const item = screen.getByTestId("flex-item");
+      expect(item.tagName).toBe("ARTICLE");
+    });
+  });
+
+  describe("Flex.Spacer", () => {
+    it("should render Flex.Spacer component", () => {
+      render(<Flex.Spacer data-testid="flex-spacer" />);
+
+      const spacer = screen.getByTestId("flex-spacer");
+      expect(spacer).toBeInTheDocument();
+      expect(spacer.tagName).toBe("DIV");
+    });
+
+    it("should apply flex-1 class by default", () => {
+      render(<Flex.Spacer data-testid="flex-spacer" />);
+
+      expect(screen.getByTestId("flex-spacer")).toHaveClass("flex-1");
+    });
+
+    it("should render as custom element", () => {
+      render(<Flex.Spacer as="section" data-testid="flex-spacer" />);
+
+      const spacer = screen.getByTestId("flex-spacer");
+      expect(spacer.tagName).toBe("SECTION");
+    });
+
+    it("should merge custom className", () => {
+      render(<Flex.Spacer className="custom-spacer" data-testid="flex-spacer" />);
+
+      const spacer = screen.getByTestId("flex-spacer");
+      expect(spacer).toHaveClass("flex-1", "custom-spacer");
+    });
+  });
+
+  describe("Composition", () => {
+    it("should render Flex with Flex.Item children", () => {
+      render(
+        <Flex data-testid="flex">
+          <Flex.Item flex="1" data-testid="item-1">
+            Item 1
+          </Flex.Item>
+          <Flex.Item flex="1" data-testid="item-2">
+            Item 2
+          </Flex.Item>
+        </Flex>
+      );
+
+      expect(screen.getByTestId("flex")).toBeInTheDocument();
+      expect(screen.getByTestId("item-1")).toBeInTheDocument();
+      expect(screen.getByTestId("item-2")).toBeInTheDocument();
+    });
+
+    it("should render Flex with Flex.Spacer", () => {
+      render(
+        <Flex data-testid="flex">
+          <div data-testid="left">Left</div>
+          <Flex.Spacer data-testid="spacer" />
+          <div data-testid="right">Right</div>
+        </Flex>
+      );
+
+      expect(screen.getByTestId("flex")).toBeInTheDocument();
+      expect(screen.getByTestId("spacer")).toBeInTheDocument();
+      expect(screen.getByTestId("left")).toBeInTheDocument();
+      expect(screen.getByTestId("right")).toBeInTheDocument();
+    });
+
+    it("should support nested Flex containers", () => {
+      render(
+        <Flex data-testid="outer">
+          <Flex data-testid="inner">
+            <div>Nested content</div>
+          </Flex>
+        </Flex>
+      );
+
+      expect(screen.getByTestId("outer")).toBeInTheDocument();
+      expect(screen.getByTestId("inner")).toBeInTheDocument();
+    });
+  });
+
+  describe("Accessibility", () => {
+    it("should forward ARIA attributes", () => {
+      render(
+        <Flex aria-label="Main navigation" role="navigation" data-testid="flex">
+          Content
+        </Flex>
+      );
+
+      const flex = screen.getByTestId("flex");
+      expect(flex).toHaveAttribute("aria-label", "Main navigation");
+      expect(flex).toHaveAttribute("role", "navigation");
+    });
+
+    it("should forward data attributes", () => {
+      render(
+        <Flex data-testid="flex" data-custom="value">
+          Content
+        </Flex>
+      );
+
+      const flex = screen.getByTestId("flex");
+      expect(flex).toHaveAttribute("data-custom", "value");
+    });
+
+    it("should support ref forwarding", () => {
+      const ref = React.createRef<HTMLDivElement>();
+
+      render(
+        <Flex ref={ref} data-testid="flex">
+          Content
+        </Flex>
+      );
+
+      expect(ref.current).toBe(screen.getByTestId("flex"));
+    });
+
+    it("should support Flex.Item ref forwarding", () => {
+      const ref = React.createRef<HTMLDivElement>();
+
+      render(
+        <Flex.Item ref={ref} data-testid="flex-item">
+          Item
+        </Flex.Item>
+      );
+
+      expect(ref.current).toBe(screen.getByTestId("flex-item"));
+    });
+
+    it("should support Flex.Spacer ref forwarding", () => {
+      const ref = React.createRef<HTMLDivElement>();
+
+      render(<Flex.Spacer ref={ref} data-testid="flex-spacer" />);
+
+      expect(ref.current).toBe(screen.getByTestId("flex-spacer"));
+    });
+  });
+});