@fpkit/acss 3.1.1 → 3.2.1

package/src/components/grid/grid.test.tsx

@@ -0,0 +1,981 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Grid, GridItem } from "./grid";
+import type { GridProps, GridItemProps } from "./grid.types";
+
+describe("Grid Component", () => {
+  describe("Rendering", () => {
+    it("should render with default props", () => {
+      render(<Grid data-testid="grid">Content</Grid>);
+      const grid = screen.getByTestId("grid");
+      expect(grid).toBeInTheDocument();
+      expect(grid.tagName).toBe("DIV");
+      expect(grid).toHaveClass("grid");
+    });
+
+    it("should render children correctly", () => {
+      render(
+        <Grid>
+          <div>Item 1</div>
+          <div>Item 2</div>
+          <div>Item 3</div>
+        </Grid>
+      );
+      expect(screen.getByText("Item 1")).toBeInTheDocument();
+      expect(screen.getByText("Item 2")).toBeInTheDocument();
+      expect(screen.getByText("Item 3")).toBeInTheDocument();
+    });
+
+    it("should render with text content", () => {
+      render(<Grid>Plain text content</Grid>);
+      expect(screen.getByText("Plain text content")).toBeInTheDocument();
+    });
+
+    it("should render with Grid.Item children", () => {
+      render(
+        <Grid>
+          <GridItem>Item 1</GridItem>
+          <GridItem>Item 2</GridItem>
+        </Grid>
+      );
+      expect(screen.getByText("Item 1")).toBeInTheDocument();
+      expect(screen.getByText("Item 2")).toBeInTheDocument();
+    });
+  });
+
+  describe("Polymorphic Rendering (as prop)", () => {
+    it("should render as div by default", () => {
+      render(<Grid data-testid="grid">Content</Grid>);
+      expect(screen.getByTestId("grid").tagName).toBe("DIV");
+    });
+
+    it("should render as section when as='section'", () => {
+      render(
+        <Grid as="section" data-testid="grid">
+          Content
+        </Grid>
+      );
+      expect(screen.getByTestId("grid").tagName).toBe("SECTION");
+    });
+
+    it("should render as article when as='article'", () => {
+      render(
+        <Grid as="article" data-testid="grid">
+          Content
+        </Grid>
+      );
+      expect(screen.getByTestId("grid").tagName).toBe("ARTICLE");
+    });
+
+    it("should render as ul when as='ul'", () => {
+      render(
+        <Grid as="ul" data-testid="grid">
+          <li>Item 1</li>
+        </Grid>
+      );
+      expect(screen.getByTestId("grid").tagName).toBe("UL");
+    });
+
+    it("should render as ol when as='ol'", () => {
+      render(
+        <Grid as="ol" data-testid="grid">
+          <li>Item 1</li>
+        </Grid>
+      );
+      expect(screen.getByTestId("grid").tagName).toBe("OL");
+    });
+  });
+
+  describe("Columns Prop", () => {
+    it("should apply columns=1 class", () => {
+      render(
+        <Grid columns={1} data-testid="grid">
+          Content
+        </Grid>
+      );
+      expect(screen.getByTestId("grid")).toHaveClass("grid-cols-1");
+    });
+
+    it("should apply columns=2 class", () => {
+      render(
+        <Grid columns={2} data-testid="grid">
+          Content
+        </Grid>
+      );
+      expect(screen.getByTestId("grid")).toHaveClass("grid-cols-2");
+    });
+
+    it("should apply columns=3 class", () => {
+      render(
+        <Grid columns={3} data-testid="grid">
+          Content
+        </Grid>
+      );
+      expect(screen.getByTestId("grid")).toHaveClass("grid-cols-3");
+    });
+
+    it("should apply columns=4 class", () => {
+      render(
+        <Grid columns={4} data-testid="grid">
+          Content
+        </Grid>
+      );
+      expect(screen.getByTestId("grid")).toHaveClass("grid-cols-4");
+    });
+
+    it("should apply columns=6 class", () => {
+      render(
+        <Grid columns={6} data-testid="grid">
+          Content
+        </Grid>
+      );
+      expect(screen.getByTestId("grid")).toHaveClass("grid-cols-6");
+    });
+
+    it("should apply columns=12 class", () => {
+      render(
+        <Grid columns={12} data-testid="grid">
+          Content
+        </Grid>
+      );
+      expect(screen.getByTestId("grid")).toHaveClass("grid-cols-12");
+    });
+
+    it("should work without columns prop", () => {
+      render(<Grid data-testid="grid">Content</Grid>);
+      const grid = screen.getByTestId("grid");
+      expect(grid).toHaveClass("grid");
+      expect(grid).not.toHaveClass("grid-cols-1");
+    });
+  });
+
+  describe("Auto Prop (Auto-Fit/Auto-Fill)", () => {
+    it("should apply auto='fit' class", () => {
+      render(
+        <Grid auto="fit" minColumnWidth="15rem" data-testid="grid">
+          Content
+        </Grid>
+      );
+      expect(screen.getByTestId("grid")).toHaveClass("grid-auto-fit");
+    });
+
+    it("should apply auto='fill' class", () => {
+      render(
+        <Grid auto="fill" minColumnWidth="15rem" data-testid="grid">
+          Content
+        </Grid>
+      );
+      expect(screen.getByTestId("grid")).toHaveClass("grid-auto-fill");
+    });
+
+    it("should apply inline style with auto='fit'", () => {
+      render(
+        <Grid auto="fit" minColumnWidth="15rem" data-testid="grid">
+          Content
+        </Grid>
+      );
+      const grid = screen.getByTestId("grid");
+      expect(grid).toHaveStyle({
+        gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))",
+      });
+    });
+
+    it("should apply inline style with auto='fill'", () => {
+      render(
+        <Grid auto="fill" minColumnWidth="20rem" data-testid="grid">
+          Content
+        </Grid>
+      );
+      const grid = screen.getByTestId("grid");
+      expect(grid).toHaveStyle({
+        gridTemplateColumns: "repeat(auto-fill, minmax(20rem, 1fr))",
+      });
+    });
+  });
+
+  describe("Gap Prop", () => {
+    it("should apply gap='0' class", () => {
+      render(
+        <Grid gap="0" data-testid="grid">
+          Content
+        </Grid>
+      );
+      expect(screen.getByTestId("grid")).toHaveClass("grid-gap-0");
+    });
+
+    it("should apply gap='xs' class", () => {
+      render(
+        <Grid gap="xs" data-testid="grid">
+          Content
+        </Grid>
+      );
+      expect(screen.getByTestId("grid")).toHaveClass("grid-gap-xs");
+    });
+
+    it("should apply gap='sm' class", () => {
+      render(
+        <Grid gap="sm" data-testid="grid">
+          Content
+        </Grid>
+      );
+      expect(screen.getByTestId("grid")).toHaveClass("grid-gap-sm");
+    });
+
+    it("should apply gap='md' class", () => {
+      render(
+        <Grid gap="md" data-testid="grid">
+          Content
+        </Grid>
+      );
+      expect(screen.getByTestId("grid")).toHaveClass("grid-gap-md");
+    });
+
+    it("should apply gap='lg' class", () => {
+      render(
+        <Grid gap="lg" data-testid="grid">
+          Content
+        </Grid>
+      );
+      expect(screen.getByTestId("grid")).toHaveClass("grid-gap-lg");
+    });
+
+    it("should apply gap='xl' class", () => {
+      render(
+        <Grid gap="xl" data-testid="grid">
+          Content
+        </Grid>
+      );
+      expect(screen.getByTestId("grid")).toHaveClass("grid-gap-xl");
+    });
+  });
+
+  describe("GapX and GapY Props", () => {
+    it("should apply gapX='md' class", () => {
+      render(
+        <Grid gapX="md" data-testid="grid">
+          Content
+        </Grid>
+      );
+      expect(screen.getByTestId("grid")).toHaveClass("grid-gap-x-md");
+    });
+
+    it("should apply gapY='lg' class", () => {
+      render(
+        <Grid gapY="lg" data-testid="grid">
+          Content
+        </Grid>
+      );
+      expect(screen.getByTestId("grid")).toHaveClass("grid-gap-y-lg");
+    });
+
+    it("should apply both gapX and gapY together", () => {
+      render(
+        <Grid gapX="xl" gapY="xs" data-testid="grid">
+          Content
+        </Grid>
+      );
+      const grid = screen.getByTestId("grid");
+      expect(grid).toHaveClass("grid-gap-x-xl");
+      expect(grid).toHaveClass("grid-gap-y-xs");
+    });
+
+    it("should work with gap and gapX/gapY together", () => {
+      render(
+        <Grid gap="md" gapX="lg" data-testid="grid">
+          Content
+        </Grid>
+      );
+      const grid = screen.getByTestId("grid");
+      expect(grid).toHaveClass("grid-gap-md");
+      expect(grid).toHaveClass("grid-gap-x-lg");
+    });
+  });
+
+  describe("JustifyItems Prop", () => {
+    it("should apply justifyItems='start' class", () => {
+      render(
+        <Grid justifyItems="start" data-testid="grid">
+          Content
+        </Grid>
+      );
+      expect(screen.getByTestId("grid")).toHaveClass("grid-justify-items-start");
+    });
+
+    it("should apply justifyItems='center' class", () => {
+      render(
+        <Grid justifyItems="center" data-testid="grid">
+          Content
+        </Grid>
+      );
+      expect(screen.getByTestId("grid")).toHaveClass("grid-justify-items-center");
+    });
+
+    it("should apply justifyItems='end' class", () => {
+      render(
+        <Grid justifyItems="end" data-testid="grid">
+          Content
+        </Grid>
+      );
+      expect(screen.getByTestId("grid")).toHaveClass("grid-justify-items-end");
+    });
+
+    it("should apply justifyItems='stretch' class", () => {
+      render(
+        <Grid justifyItems="stretch" data-testid="grid">
+          Content
+        </Grid>
+      );
+      expect(screen.getByTestId("grid")).toHaveClass("grid-justify-items-stretch");
+    });
+  });
+
+  describe("AlignItems Prop", () => {
+    it("should apply alignItems='start' class", () => {
+      render(
+        <Grid alignItems="start" data-testid="grid">
+          Content
+        </Grid>
+      );
+      expect(screen.getByTestId("grid")).toHaveClass("grid-align-items-start");
+    });
+
+    it("should apply alignItems='center' class", () => {
+      render(
+        <Grid alignItems="center" data-testid="grid">
+          Content
+        </Grid>
+      );
+      expect(screen.getByTestId("grid")).toHaveClass("grid-align-items-center");
+    });
+
+    it("should apply alignItems='end' class", () => {
+      render(
+        <Grid alignItems="end" data-testid="grid">
+          Content
+        </Grid>
+      );
+      expect(screen.getByTestId("grid")).toHaveClass("grid-align-items-end");
+    });
+
+    it("should apply alignItems='stretch' class", () => {
+      render(
+        <Grid alignItems="stretch" data-testid="grid">
+          Content
+        </Grid>
+      );
+      expect(screen.getByTestId("grid")).toHaveClass("grid-align-items-stretch");
+    });
+  });
+
+  describe("Combined Props", () => {
+    it("should apply columns and gap together", () => {
+      render(
+        <Grid columns={3} gap="md" data-testid="grid">
+          Content
+        </Grid>
+      );
+      const grid = screen.getByTestId("grid");
+      expect(grid).toHaveClass("grid");
+      expect(grid).toHaveClass("grid-cols-3");
+      expect(grid).toHaveClass("grid-gap-md");
+    });
+
+    it("should apply all alignment props together", () => {
+      render(
+        <Grid columns={4} gap="lg" justifyItems="center" alignItems="center" data-testid="grid">
+          Content
+        </Grid>
+      );
+      const grid = screen.getByTestId("grid");
+      expect(grid).toHaveClass("grid-cols-4");
+      expect(grid).toHaveClass("grid-gap-lg");
+      expect(grid).toHaveClass("grid-justify-items-center");
+      expect(grid).toHaveClass("grid-align-items-center");
+    });
+
+    it("should combine all props with polymorphic as prop", () => {
+      render(
+        <Grid
+          as="section"
+          columns={2}
+          gap="md"
+          justifyItems="start"
+          alignItems="stretch"
+          data-testid="grid"
+        >
+          Content
+        </Grid>
+      );
+      const grid = screen.getByTestId("grid");
+      expect(grid.tagName).toBe("SECTION");
+      expect(grid).toHaveClass("grid");
+      expect(grid).toHaveClass("grid-cols-2");
+      expect(grid).toHaveClass("grid-gap-md");
+      expect(grid).toHaveClass("grid-justify-items-start");
+      expect(grid).toHaveClass("grid-align-items-stretch");
+    });
+  });
+
+  describe("ClassName and Classes Props", () => {
+    it("should merge className prop with utility classes", () => {
+      render(
+        <Grid className="custom-class" data-testid="grid">
+          Content
+        </Grid>
+      );
+      const grid = screen.getByTestId("grid");
+      expect(grid).toHaveClass("grid");
+      expect(grid).toHaveClass("custom-class");
+    });
+
+    it("should merge classes prop with utility classes", () => {
+      render(
+        <Grid classes="another-class" data-testid="grid">
+          Content
+        </Grid>
+      );
+      const grid = screen.getByTestId("grid");
+      expect(grid).toHaveClass("grid");
+      expect(grid).toHaveClass("another-class");
+    });
+
+    it("should merge both className and classes", () => {
+      render(
+        <Grid className="custom" classes="another" data-testid="grid">
+          Content
+        </Grid>
+      );
+      const grid = screen.getByTestId("grid");
+      expect(grid).toHaveClass("grid");
+      expect(grid).toHaveClass("custom");
+      expect(grid).toHaveClass("another");
+    });
+
+    it("should merge custom classes with all utility classes", () => {
+      render(
+        <Grid
+          columns={3}
+          gap="md"
+          justifyItems="center"
+          className="custom"
+          classes="utility"
+          data-testid="grid"
+        >
+          Content
+        </Grid>
+      );
+      const grid = screen.getByTestId("grid");
+      expect(grid).toHaveClass("grid");
+      expect(grid).toHaveClass("grid-cols-3");
+      expect(grid).toHaveClass("grid-gap-md");
+      expect(grid).toHaveClass("grid-justify-items-center");
+      expect(grid).toHaveClass("custom");
+      expect(grid).toHaveClass("utility");
+    });
+  });
+
+  describe("Inline Styles", () => {
+    it("should apply inline styles via styles prop", () => {
+      render(
+        <Grid styles={{ maxWidth: "1200px" }} data-testid="grid">
+          Content
+        </Grid>
+      );
+      const grid = screen.getByTestId("grid");
+      expect(grid).toHaveStyle({ maxWidth: "1200px" });
+    });
+
+    it("should apply inline styles via style prop", () => {
+      render(
+        <Grid style={{ border: "1px solid red" }} data-testid="grid">
+          Content
+        </Grid>
+      );
+      const grid = screen.getByTestId("grid");
+      expect(grid).toHaveStyle({ border: "1px solid red" });
+    });
+
+    it("should merge style and styles props", () => {
+      render(
+        <Grid
+          style={{ border: "1px solid red" }}
+          styles={{ maxWidth: "1200px" }}
+          data-testid="grid"
+        >
+          Content
+        </Grid>
+      );
+      const grid = screen.getByTestId("grid");
+      expect(grid).toHaveStyle({
+        border: "1px solid red",
+        maxWidth: "1200px",
+      });
+    });
+  });
+
+  describe("Ref Forwarding", () => {
+    it("should forward ref to the underlying element", () => {
+      const ref = { current: null as HTMLDivElement | null };
+      render(
+        <Grid ref={ref} data-testid="grid">
+          Content
+        </Grid>
+      );
+      expect(ref.current).toBeInstanceOf(HTMLDivElement);
+      expect(ref.current).toBe(screen.getByTestId("grid"));
+    });
+
+    it("should forward ref with polymorphic as prop", () => {
+      const ref = { current: null as HTMLElement | null };
+      render(
+        <Grid as="section" ref={ref} data-testid="grid">
+          Content
+        </Grid>
+      );
+      expect(ref.current).toBeInstanceOf(HTMLElement);
+      expect(ref.current?.tagName).toBe("SECTION");
+    });
+  });
+
+  describe("ARIA and Accessibility Attributes", () => {
+    it("should accept aria-label", () => {
+      render(
+        <Grid aria-label="Product grid" data-testid="grid">
+          Content
+        </Grid>
+      );
+      expect(screen.getByTestId("grid")).toHaveAttribute("aria-label", "Product grid");
+    });
+
+    it("should accept aria-labelledby", () => {
+      render(
+        <>
+          <h2 id="grid-title">Products</h2>
+          <Grid aria-labelledby="grid-title" data-testid="grid">
+            <div>Product 1</div>
+          </Grid>
+        </>
+      );
+      expect(screen.getByTestId("grid")).toHaveAttribute("aria-labelledby", "grid-title");
+    });
+
+    it("should accept role attribute", () => {
+      render(
+        <Grid role="list" data-testid="grid">
+          Content
+        </Grid>
+      );
+      expect(screen.getByTestId("grid")).toHaveAttribute("role", "list");
+    });
+
+    it("should accept data attributes", () => {
+      render(
+        <Grid data-testid="grid" data-component="product-grid">
+          Content
+        </Grid>
+      );
+      expect(screen.getByTestId("grid")).toHaveAttribute("data-component", "product-grid");
+    });
+
+    it("should accept id attribute", () => {
+      render(
+        <Grid id="main-grid" data-testid="grid">
+          Content
+        </Grid>
+      );
+      expect(screen.getByTestId("grid")).toHaveAttribute("id", "main-grid");
+    });
+  });
+
+  describe("Edge Cases", () => {
+    it("should handle empty children", () => {
+      render(<Grid data-testid="grid" />);
+      expect(screen.getByTestId("grid")).toBeInTheDocument();
+      expect(screen.getByTestId("grid")).toBeEmptyDOMElement();
+    });
+
+    it("should handle null children", () => {
+      render(<Grid data-testid="grid">{null}</Grid>);
+      expect(screen.getByTestId("grid")).toBeInTheDocument();
+    });
+
+    it("should handle undefined children", () => {
+      render(<Grid data-testid="grid">{undefined}</Grid>);
+      expect(screen.getByTestId("grid")).toBeInTheDocument();
+    });
+
+    it("should handle false children (conditional rendering)", () => {
+      const shouldShow = false;
+      render(<Grid data-testid="grid">{shouldShow && <div>Hidden</div>}</Grid>);
+      expect(screen.getByTestId("grid")).toBeInTheDocument();
+      expect(screen.queryByText("Hidden")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Real-World Usage Patterns", () => {
+    it("should render 3-column card grid correctly", () => {
+      render(
+        <Grid columns={3} gap="md" data-testid="grid">
+          {[...Array(6)].map((_, i) => (
+            <div key={i} className="card">
+              Card {i + 1}
+            </div>
+          ))}
+        </Grid>
+      );
+      const grid = screen.getByTestId("grid");
+      expect(grid).toHaveClass("grid-cols-3");
+      expect(grid).toHaveClass("grid-gap-md");
+      expect(screen.getByText("Card 1")).toBeInTheDocument();
+      expect(screen.getByText("Card 6")).toBeInTheDocument();
+    });
+
+    it("should render auto-fit responsive grid correctly", () => {
+      render(
+        <Grid auto="fit" minColumnWidth="15rem" gap="lg" data-testid="grid">
+          <div>Item 1</div>
+          <div>Item 2</div>
+          <div>Item 3</div>
+        </Grid>
+      );
+      const grid = screen.getByTestId("grid");
+      expect(grid).toHaveClass("grid-auto-fit");
+      expect(grid).toHaveStyle({
+        gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))",
+      });
+    });
+
+    it("should render form layout correctly", () => {
+      render(
+        <Grid columns={2} gap="md" data-testid="grid">
+          <label htmlFor="name">Name</label>
+          <input id="name" type="text" />
+          <label htmlFor="email">Email</label>
+          <input id="email" type="email" />
+        </Grid>
+      );
+      expect(screen.getByTestId("grid")).toHaveClass("grid-cols-2");
+      expect(screen.getByLabelText("Name")).toBeInTheDocument();
+      expect(screen.getByLabelText("Email")).toBeInTheDocument();
+    });
+  });
+
+  describe("TypeScript Type Safety", () => {
+    it("should accept valid GridProps", () => {
+      const props: GridProps = {
+        columns: 3,
+        gap: "md",
+        justifyItems: "center",
+        alignItems: "center",
+        as: "section",
+        className: "custom",
+        children: <div>Content</div>,
+      };
+      render(<Grid {...props} data-testid="grid" />);
+      expect(screen.getByTestId("grid")).toBeInTheDocument();
+    });
+
+    it("should accept all column values (1-12)", () => {
+      const columns: GridProps["columns"][] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+      columns.forEach((col, index) => {
+        render(
+          <Grid columns={col} data-testid={`grid-${index}`}>
+            Content
+          </Grid>
+        );
+        expect(screen.getByTestId(`grid-${index}`)).toHaveClass(`grid-cols-${col}`);
+      });
+    });
+  });
+});
+
+describe("GridItem Component", () => {
+  describe("Rendering", () => {
+    it("should render with default props", () => {
+      render(<GridItem data-testid="grid-item">Content</GridItem>);
+      const item = screen.getByTestId("grid-item");
+      expect(item).toBeInTheDocument();
+      expect(item.tagName).toBe("DIV");
+    });
+
+    it("should render children correctly", () => {
+      render(<GridItem>Item content</GridItem>);
+      expect(screen.getByText("Item content")).toBeInTheDocument();
+    });
+  });
+
+  describe("Polymorphic Rendering (as prop)", () => {
+    it("should render as div by default", () => {
+      render(<GridItem data-testid="grid-item">Content</GridItem>);
+      expect(screen.getByTestId("grid-item").tagName).toBe("DIV");
+    });
+
+    it("should render as li when as='li'", () => {
+      render(
+        <GridItem as="li" data-testid="grid-item">
+          Content
+        </GridItem>
+      );
+      expect(screen.getByTestId("grid-item").tagName).toBe("LI");
+    });
+
+    it("should render as section when as='section'", () => {
+      render(
+        <GridItem as="section" data-testid="grid-item">
+          Content
+        </GridItem>
+      );
+      expect(screen.getByTestId("grid-item").tagName).toBe("SECTION");
+    });
+
+    it("should render as article when as='article'", () => {
+      render(
+        <GridItem as="article" data-testid="grid-item">
+          Content
+        </GridItem>
+      );
+      expect(screen.getByTestId("grid-item").tagName).toBe("ARTICLE");
+    });
+  });
+
+  describe("Span Prop (Column Span)", () => {
+    it("should apply span=1 class", () => {
+      render(
+        <GridItem span={1} data-testid="grid-item">
+          Content
+        </GridItem>
+      );
+      expect(screen.getByTestId("grid-item")).toHaveClass("grid-col-span-1");
+    });
+
+    it("should apply span=2 class", () => {
+      render(
+        <GridItem span={2} data-testid="grid-item">
+          Content
+        </GridItem>
+      );
+      expect(screen.getByTestId("grid-item")).toHaveClass("grid-col-span-2");
+    });
+
+    it("should apply span=4 class", () => {
+      render(
+        <GridItem span={4} data-testid="grid-item">
+          Content
+        </GridItem>
+      );
+      expect(screen.getByTestId("grid-item")).toHaveClass("grid-col-span-4");
+    });
+
+    it("should apply span=6 class", () => {
+      render(
+        <GridItem span={6} data-testid="grid-item">
+          Content
+        </GridItem>
+      );
+      expect(screen.getByTestId("grid-item")).toHaveClass("grid-col-span-6");
+    });
+
+    it("should apply span=8 class", () => {
+      render(
+        <GridItem span={8} data-testid="grid-item">
+          Content
+        </GridItem>
+      );
+      expect(screen.getByTestId("grid-item")).toHaveClass("grid-col-span-8");
+    });
+
+    it("should apply span=12 class", () => {
+      render(
+        <GridItem span={12} data-testid="grid-item">
+          Content
+        </GridItem>
+      );
+      expect(screen.getByTestId("grid-item")).toHaveClass("grid-col-span-12");
+    });
+
+    it("should work without span prop", () => {
+      render(<GridItem data-testid="grid-item">Content</GridItem>);
+      const item = screen.getByTestId("grid-item");
+      expect(item).not.toHaveClass("grid-col-span-1");
+    });
+  });
+
+  describe("RowSpan Prop", () => {
+    it("should apply rowSpan=1 class", () => {
+      render(
+        <GridItem rowSpan={1} data-testid="grid-item">
+          Content
+        </GridItem>
+      );
+      expect(screen.getByTestId("grid-item")).toHaveClass("grid-row-span-1");
+    });
+
+    it("should apply rowSpan=2 class", () => {
+      render(
+        <GridItem rowSpan={2} data-testid="grid-item">
+          Content
+        </GridItem>
+      );
+      expect(screen.getByTestId("grid-item")).toHaveClass("grid-row-span-2");
+    });
+
+    it("should apply rowSpan=3 class", () => {
+      render(
+        <GridItem rowSpan={3} data-testid="grid-item">
+          Content
+        </GridItem>
+      );
+      expect(screen.getByTestId("grid-item")).toHaveClass("grid-row-span-3");
+    });
+
+    it("should work without rowSpan prop", () => {
+      render(<GridItem data-testid="grid-item">Content</GridItem>);
+      const item = screen.getByTestId("grid-item");
+      expect(item).not.toHaveClass("grid-row-span-1");
+    });
+  });
+
+  describe("Combined Span Props", () => {
+    it("should apply both span and rowSpan together", () => {
+      render(
+        <GridItem span={4} rowSpan={2} data-testid="grid-item">
+          Content
+        </GridItem>
+      );
+      const item = screen.getByTestId("grid-item");
+      expect(item).toHaveClass("grid-col-span-4");
+      expect(item).toHaveClass("grid-row-span-2");
+    });
+
+    it("should combine span with polymorphic as prop", () => {
+      render(
+        <GridItem as="article" span={6} data-testid="grid-item">
+          Content
+        </GridItem>
+      );
+      const item = screen.getByTestId("grid-item");
+      expect(item.tagName).toBe("ARTICLE");
+      expect(item).toHaveClass("grid-col-span-6");
+    });
+  });
+
+  describe("ClassName and Classes Props", () => {
+    it("should merge className prop with utility classes", () => {
+      render(
+        <GridItem className="custom-class" data-testid="grid-item">
+          Content
+        </GridItem>
+      );
+      const item = screen.getByTestId("grid-item");
+      expect(item).toHaveClass("custom-class");
+    });
+
+    it("should merge classes prop with utility classes", () => {
+      render(
+        <GridItem classes="another-class" data-testid="grid-item">
+          Content
+        </GridItem>
+      );
+      const item = screen.getByTestId("grid-item");
+      expect(item).toHaveClass("another-class");
+    });
+
+    it("should merge custom classes with span classes", () => {
+      render(
+        <GridItem span={4} className="custom" classes="utility" data-testid="grid-item">
+          Content
+        </GridItem>
+      );
+      const item = screen.getByTestId("grid-item");
+      expect(item).toHaveClass("grid-col-span-4");
+      expect(item).toHaveClass("custom");
+      expect(item).toHaveClass("utility");
+    });
+  });
+
+  describe("Ref Forwarding", () => {
+    it("should forward ref to the underlying element", () => {
+      const ref = { current: null as HTMLDivElement | null };
+      render(
+        <GridItem ref={ref} data-testid="grid-item">
+          Content
+        </GridItem>
+      );
+      expect(ref.current).toBeInstanceOf(HTMLDivElement);
+      expect(ref.current).toBe(screen.getByTestId("grid-item"));
+    });
+
+    it("should forward ref with polymorphic as prop", () => {
+      const ref = { current: null as HTMLElement | null };
+      render(
+        <GridItem as="article" ref={ref} data-testid="grid-item">
+          Content
+        </GridItem>
+      );
+      expect(ref.current).toBeInstanceOf(HTMLElement);
+      expect(ref.current?.tagName).toBe("ARTICLE");
+    });
+  });
+
+  describe("Grid with Grid.Item Integration", () => {
+    it("should render Grid with Grid.Item children", () => {
+      render(
+        <Grid columns={12} gap="md" data-testid="grid">
+          <GridItem span={8} data-testid="main">
+            Main content
+          </GridItem>
+          <GridItem span={4} data-testid="sidebar">
+            Sidebar
+          </GridItem>
+        </Grid>
+      );
+
+      const grid = screen.getByTestId("grid");
+      const main = screen.getByTestId("main");
+      const sidebar = screen.getByTestId("sidebar");
+
+      expect(grid).toHaveClass("grid-cols-12");
+      expect(main).toHaveClass("grid-col-span-8");
+      expect(sidebar).toHaveClass("grid-col-span-4");
+    });
+
+    it("should handle mixed Grid.Item and regular children", () => {
+      render(
+        <Grid columns={3} gap="md">
+          <GridItem span={2}>Spans 2 columns</GridItem>
+          <div>Regular div</div>
+        </Grid>
+      );
+
+      expect(screen.getByText("Spans 2 columns")).toBeInTheDocument();
+      expect(screen.getByText("Regular div")).toBeInTheDocument();
+    });
+  });
+
+  describe("TypeScript Type Safety", () => {
+    it("should accept valid GridItemProps", () => {
+      const props: GridItemProps = {
+        span: 4,
+        rowSpan: 2,
+        as: "article",
+        className: "custom",
+        children: <div>Content</div>,
+      };
+      render(<GridItem {...props} data-testid="grid-item" />);
+      expect(screen.getByTestId("grid-item")).toBeInTheDocument();
+    });
+
+    it("should accept all span values (1-12)", () => {
+      const spans: GridItemProps["span"][] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+      spans.forEach((span, index) => {
+        render(
+          <GridItem span={span} data-testid={`item-${index}`}>
+            Content
+          </GridItem>
+        );
+        expect(screen.getByTestId(`item-${index}`)).toHaveClass(`grid-col-span-${span}`);
+      });
+    });
+  });
+});