test: Adds tests for Fields

Author: jbottigliero

__tests__/components/Fields/BytesField.test.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { render } from "../../../test-utils";
+import BytesField from "../../../src/components/Fields/BytesField";
+
+describe("BytesField", () => {
+  it("renders readable bytes for number", () => {
+    const { getByText } = render(<BytesField value={1024} />);
+    expect(getByText(/1.02 KB/i)).toBeInTheDocument();
+  });
+
+  it("renders readable bytes for string number", () => {
+    const { getByText } = render(<BytesField value="2048" />);
+    expect(getByText(/2.04 KB/i)).toBeInTheDocument();
+  });
+
+  it("renders nothing for invalid value", () => {
+    const { container } = render(<BytesField value={{}} />);
+    expect(container.firstChild).toBeNull();
+  });
+});

__tests__/components/Fields/DateField.test.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { render } from "../../../test-utils";
+import DateField from "../../../src/components/Fields/DateField";
+
+describe("DateField", () => {
+  it("renders formatted date for string", () => {
+    const date = new Date("2023-01-01T12:34:56Z").toISOString();
+    const { getByText } = render(<DateField value={date} />);
+    expect(getByText(/2023|01|12|34/i)).toBeInTheDocument();
+  });
+
+  it("renders nothing for invalid value", () => {
+    const { container } = render(<DateField value={{}} />);
+    expect(container.firstChild).toBeNull();
+  });
+});

__tests__/components/Fields/FallbackField.test.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { render } from "../../../test-utils";
+import FallbackField from "../../../src/components/Fields/FallbackField";
+
+describe("FallbackField", () => {
+  it("renders dash for null/undefined", () => {
+    const { getByText } = render(<FallbackField value={null} />);
+    expect(getByText(/—/)).toBeInTheDocument();
+  });
+
+  it("renders primitive values", () => {
+    const { getByText } = render(<FallbackField value={42} />);
+    expect(getByText("42")).toBeInTheDocument();
+    expect(render(<FallbackField value="foo" />).getByText("foo")).toBeInTheDocument();
+    // Boolean values are rendered as strings, but may not be found directly
+    const { container } = render(<FallbackField value={true} />);
+    expect(container.textContent).toContain("true");
+  });
+
+  it("renders arrays recursively", () => {
+    const { getAllByText } = render(<FallbackField value={[1, 2]} />);
+    expect(getAllByText(/1|2/).length).toBeGreaterThan(1);
+  });
+
+  it("renders objects as JSONTree", () => {
+    const { getByText } = render(<FallbackField value={{ foo: "bar" }} />);
+    expect(getByText(/foo/)).toBeInTheDocument();
+    expect(getByText(/bar/)).toBeInTheDocument();
+  });
+});

__tests__/components/Fields/ImageField.test.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { render } from "../../../test-utils";
+import ImageField from "../../../src/components/Fields/ImageField";
+
+describe("ImageField", () => {
+  it("renders for string src", () => {
+    const { container } = render(<ImageField value="/test.png" />);
+    expect(container.querySelector("img")).toBeInTheDocument();
+  });
+
+  it("renders for object src", () => {
+    const { container } = render(<ImageField value={{ src: "/test2.png", alt: "desc" }} />);
+    expect(container.querySelector("img")).toBeInTheDocument();
+  });
+
+  it("renders nothing for invalid value", () => {
+    const { container } = render(<ImageField value={42} />);
+    expect(container.firstChild).toBeNull();
+  });
+});

__tests__/components/Fields/RgbaField.test.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { render } from "../../../test-utils";
+import RgbaField from "../../../src/components/Fields/RgbaField";
+
+describe("RgbaField", () => {
+  it("renders RGBA color", () => {
+    const { getByText, container } = render(<RgbaField value={[255,0,0,1]} />);
+    expect(getByText("[255,0,0,1]")).toBeInTheDocument();
+
+  });
+
+  it("renders nothing for invalid value", () => {
+    const { container } = render(<RgbaField value={42} />);
+    expect(container.firstChild).toBeNull();
+  });
+});

__tests__/components/Fields/TableField.test.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { render } from "../../../test-utils";
+import TableField from "../../../src/components/Fields/TableField";
+
+describe("TableField", () => {
+  it("renders table for object", () => {
+    const { getByText } = render(<TableField value={{ foo: "bar" }} />);
+    expect(getByText("foo")).toBeInTheDocument();
+    expect(getByText("bar")).toBeInTheDocument();
+  });
+
+  it("renders nothing for invalid value", () => {
+    const { container } = render(<TableField value={42} />);
+    expect(container.firstChild).toBeNull();
+  });
+});

src/components/Fields/FallbackField.tsx

@@ -16,7 +16,7 @@ export default function FallbackField({ value }: { value: Value }) {
     typeof value === "number" ||
     typeof value === "boolean"
   ) {
-    return <Text>{value}</Text>;
+    return <Text>{String(value)}</Text>;
   }
   if (Array.isArray(value)) {
     return value.map((v, i) => (