test(column): add unit tests

tests/AspectRatioColumns.test.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-  import { Grid, Row, Column } from "carbon-components-svelte";
-</script>
-
-<Grid>
-  <Row>
-    <Column
-      aspectRatio="2x1"
-      style="outline: 1px solid var(--cds-interactive-04)"
-    >
-      2x1
-    </Column>
-    <Column
-      aspectRatio="2x1"
-      style="outline: 1px solid var(--cds-interactive-04)"
-    >
-      2x1
-    </Column>
-  </Row>
-</Grid>

tests/Column/Column.test.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { Column } from "carbon-components-svelte";
+  import type { ComponentProps } from "svelte";
+
+  export let as = false;
+  export let noGutter = false;
+  export let noGutterLeft = false;
+  export let noGutterRight = false;
+  export let padding = false;
+  export let aspectRatio: ComponentProps<Column>["aspectRatio"] = undefined;
+  export let sm: ComponentProps<Column>["sm"] = undefined;
+  export let md: ComponentProps<Column>["md"] = undefined;
+  export let lg: ComponentProps<Column>["lg"] = undefined;
+  export let xlg: ComponentProps<Column>["xlg"] = undefined;
+  export let max: ComponentProps<Column>["max"] = undefined;
+</script>
+
+<Column
+  {as}
+  {noGutter}
+  {noGutterLeft}
+  {noGutterRight}
+  {padding}
+  {aspectRatio}
+  {sm}
+  {md}
+  {lg}
+  {xlg}
+  {max}
+>
+  <div data-testid="content">Column Content</div>
+</Column>

tests/Column/Column.test.ts

@@ -0,0 +1,114 @@
+import { render, screen } from "@testing-library/svelte";
+import Column from "./Column.test.svelte";
+
+describe("Column", () => {
+  it("should render with default props", () => {
+    render(Column);
+    const column = screen.getByTestId("content").parentElement!;
+    expect(column).toHaveClass("bx--col");
+  });
+
+  it("should render with custom element when as is true", () => {
+    render(Column, { props: { as: true } });
+    const column = screen.getByTestId("content").parentElement!;
+    expect(column.tagName).toBe("DIV");
+  });
+
+  describe("Gutter modifiers", () => {
+    it("should remove all gutters", () => {
+      render(Column, { props: { noGutter: true } });
+      const column = screen.getByTestId("content").parentElement!;
+      expect(column).toHaveClass("bx--no-gutter");
+    });
+
+    it("should remove left gutter", () => {
+      render(Column, { props: { noGutterLeft: true } });
+      const column = screen.getByTestId("content").parentElement!;
+      expect(column).toHaveClass("bx--no-gutter--left");
+    });
+
+    it("should remove right gutter", () => {
+      render(Column, { props: { noGutterRight: true } });
+      const column = screen.getByTestId("content").parentElement!;
+      expect(column).toHaveClass("bx--no-gutter--right");
+    });
+  });
+
+  it("should add padding", () => {
+    render(Column, { props: { padding: true } });
+    const column = screen.getByTestId("content").parentElement!;
+    expect(column).toHaveClass("bx--col-padding");
+  });
+
+  describe("Aspect ratio", () => {
+    const ratios = ["2x1", "16x9", "9x16", "1x2", "4x3", "3x4", "1x1"] as const;
+
+    ratios.forEach((ratio) => {
+      it(`should apply ${ratio} aspect ratio`, () => {
+        render(Column, {
+          props: { aspectRatio: ratio },
+        });
+        const column = screen.getByTestId("content").parentElement!;
+        expect(column).toHaveClass(
+          `bx--aspect-ratio`,
+          `bx--aspect-ratio--${ratio}`,
+        );
+      });
+    });
+  });
+
+  describe("Breakpoints", () => {
+    const breakpoints = ["sm", "md", "lg", "xlg", "max"] as const;
+
+    breakpoints.forEach((bp) => {
+      it(`should handle boolean ${bp} breakpoint`, () => {
+        render(Column, {
+          props: { [bp]: true },
+        });
+        const column = screen.getByTestId("content").parentElement!;
+        expect(column).toHaveClass(`bx--col-${bp}`);
+      });
+
+      it(`should handle numeric ${bp} breakpoint`, () => {
+        render(Column, {
+          props: { [bp]: 4 },
+        });
+        const column = screen.getByTestId("content").parentElement!;
+        expect(column).toHaveClass(`bx--col-${bp}-4`);
+      });
+
+      it(`should handle object ${bp} breakpoint with span`, () => {
+        render(Column, {
+          props: { [bp]: { span: 4, offset: 2 } },
+        });
+        const column = screen.getByTestId("content").parentElement!;
+        expect(column).toHaveClass(`bx--col-${bp}-4`, `bx--offset-${bp}-2`);
+      });
+
+      it(`should handle object ${bp} breakpoint with boolean span`, () => {
+        render(Column, {
+          props: { [bp]: { span: true, offset: 2 } },
+        });
+        const column = screen.getByTestId("content").parentElement!;
+        expect(column).toHaveClass(`bx--col-${bp}`, `bx--offset-${bp}-2`);
+      });
+    });
+  });
+
+  it("should combine multiple breakpoint classes", () => {
+    render(Column, {
+      props: {
+        sm: 4,
+        md: { span: 6, offset: 2 },
+        lg: true,
+      },
+    });
+    const column = screen.getByTestId("content").parentElement!;
+    expect(column).toHaveClass(
+      "bx--col-sm-4",
+      "bx--col-md-6",
+      "bx--offset-md-2",
+      "bx--col-lg",
+    );
+  });
+});

tests/OffsetColumns.test.svelte

@@ -1,32 +0,0 @@
-<script lang="ts">
-  import { Grid, Row, Column } from "carbon-components-svelte";
-</script>
-
-<Grid>
-  <Row>
-    <Column
-      sm={{ span: 1, offset: 3 }}
-      style="outline: 1px solid var(--cds-interactive-04)"
-    >
-      Offset 3
-    </Column>
-    <Column
-      sm={{ span: 2, offset: 2 }}
-      style="outline: 1px solid var(--cds-interactive-04)"
-    >
-      Offset 2
-    </Column>
-    <Column
-      sm={{ span: 3, offset: 1 }}
-      style="outline: 1px solid var(--cds-interactive-04)"
-    >
-      Offset 1
-    </Column>
-    <Column
-      sm={{ span: 4, offset: 0 }}
-      style="outline: 1px solid var(--cds-interactive-04)"
-    >
-      Offset 0
-    </Column>
-  </Row>
-</Grid>