@terreno/ui 0.0.15 → 0.0.16

package/src/table/TableRow.test.tsx

@@ -0,0 +1,83 @@
+import {describe, expect, it} from "bun:test";
+import {Text} from "../Text";
+import {renderWithTheme} from "../test-utils";
+import {Table} from "./Table";
+import {TableHeader} from "./TableHeader";
+import {TableHeaderCell} from "./TableHeaderCell";
+import {TableRow} from "./TableRow";
+import {TableText} from "./TableText";
+
+describe("TableRow", () => {
+  it("renders correctly with children", () => {
+    const {toJSON} = renderWithTheme(
+      <Table columns={[100, 100]}>
+        <TableHeader>
+          <TableHeaderCell index={0} title="Col 1" />
+          <TableHeaderCell index={1} title="Col 2" />
+        </TableHeader>
+        <TableRow>
+          <TableText value="Cell 1" />
+          <TableText value="Cell 2" />
+        </TableRow>
+      </Table>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders header row with thicker border", () => {
+    const {toJSON} = renderWithTheme(
+      <Table columns={[100]}>
+        <TableRow headerRow>
+          <TableText value="Header" />
+        </TableRow>
+        <TableRow>
+          <TableText value="Data" />
+        </TableRow>
+      </Table>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with drawer contents", () => {
+    const {toJSON} = renderWithTheme(
+      <Table columns={[100]}>
+        <TableHeader>
+          <TableHeaderCell index={0} title="Name" />
+        </TableHeader>
+        <TableRow drawerContents={<Text>Expanded content</Text>}>
+          <TableText value="Click to expand" />
+        </TableRow>
+      </Table>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders drawer with expand button", () => {
+    const {toJSON} = renderWithTheme(
+      <Table columns={[100]}>
+        <TableHeader>
+          <TableHeaderCell index={0} title="Name" />
+        </TableHeader>
+        <TableRow drawerContents={<Text>Expanded content</Text>}>
+          <TableText value="Click to expand" />
+        </TableRow>
+      </Table>
+    );
+    // Drawer contents are hidden by default, expand button is rendered
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with custom color", () => {
+    const {toJSON} = renderWithTheme(
+      <Table columns={[100]}>
+        <TableHeader>
+          <TableHeaderCell index={0} title="Column" />
+        </TableHeader>
+        <TableRow color="neutralLight">
+          <TableText value="Light row" />
+        </TableRow>
+      </Table>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/table/TableText.test.tsx

@@ -0,0 +1,30 @@
+import {describe, expect, it} from "bun:test";
+import {renderWithTheme} from "../test-utils";
+import {TableText} from "./TableText";
+
+describe("TableText", () => {
+  it("renders correctly with value", () => {
+    const {toJSON} = renderWithTheme(<TableText value="Test Value" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with left alignment (default)", () => {
+    const {getByText} = renderWithTheme(<TableText value="Left aligned" />);
+    expect(getByText("Left aligned")).toBeTruthy();
+  });
+
+  it("renders with center alignment", () => {
+    const {toJSON} = renderWithTheme(<TableText align="center" value="Centered" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with right alignment", () => {
+    const {toJSON} = renderWithTheme(<TableText align="right" value="Right aligned" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with isEditing prop (shows warning)", () => {
+    const {toJSON} = renderWithTheme(<TableText isEditing value="Editing" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/table/TableTitle.test.tsx

@@ -0,0 +1,30 @@
+import {describe, expect, it} from "bun:test";
+import {renderWithTheme} from "../test-utils";
+import {TableTitle} from "./TableTitle";
+
+describe("TableTitle", () => {
+  it("renders correctly with title", () => {
+    const {toJSON} = renderWithTheme(<TableTitle title="Column Header" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders title text", () => {
+    const {getByText} = renderWithTheme(<TableTitle title="Name" />);
+    expect(getByText("Name")).toBeTruthy();
+  });
+
+  it("renders with left alignment (default)", () => {
+    const {toJSON} = renderWithTheme(<TableTitle title="Left Title" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with center alignment", () => {
+    const {toJSON} = renderWithTheme(<TableTitle align="center" title="Centered Title" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with right alignment", () => {
+    const {toJSON} = renderWithTheme(<TableTitle align="right" title="Right Title" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});