@terreno/ui 0.0.14 → 0.0.16

package/src/SelectField.test.tsx

@@ -0,0 +1,84 @@
+import {describe, expect, it} from "bun:test";
+
+import {SelectField} from "./SelectField";
+import {renderWithTheme} from "./test-utils";
+
+describe("SelectField", () => {
+  const defaultOptions = [
+    {label: "Option 1", value: "opt1"},
+    {label: "Option 2", value: "opt2"},
+    {label: "Option 3", value: "opt3"},
+  ];
+
+  it("renders correctly with default props", () => {
+    const {toJSON} = renderWithTheme(
+      <SelectField onChange={() => {}} options={defaultOptions} value="" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with title", () => {
+    const {getByText, toJSON} = renderWithTheme(
+      <SelectField onChange={() => {}} options={defaultOptions} title="Select an option" value="" />
+    );
+    expect(getByText("Select an option")).toBeTruthy();
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with helper text", () => {
+    const {getByText} = renderWithTheme(
+      <SelectField
+        helperText="This is helper text"
+        onChange={() => {}}
+        options={defaultOptions}
+        value=""
+      />
+    );
+    expect(getByText("This is helper text")).toBeTruthy();
+  });
+
+  it("renders with error text", () => {
+    const {getByText} = renderWithTheme(
+      <SelectField
+        errorText="This field is required"
+        onChange={() => {}}
+        options={defaultOptions}
+        value=""
+      />
+    );
+    expect(getByText("This field is required")).toBeTruthy();
+  });
+
+  it("renders with selected value", () => {
+    const {toJSON} = renderWithTheme(
+      <SelectField onChange={() => {}} options={defaultOptions} value="opt2" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with custom placeholder", () => {
+    const {toJSON} = renderWithTheme(
+      <SelectField
+        onChange={() => {}}
+        options={defaultOptions}
+        placeholder="Choose one..."
+        value=""
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders disabled state", () => {
+    const {toJSON} = renderWithTheme(
+      <SelectField disabled onChange={() => {}} options={defaultOptions} value="" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with requireValue (no clear option)", () => {
+    const {toJSON} = renderWithTheme(
+      <SelectField onChange={() => {}} options={defaultOptions} requireValue value="opt1" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/SideDrawer.test.tsx

@@ -0,0 +1,99 @@
+import {describe, expect, it, mock} from "bun:test";
+
+import {SideDrawer} from "./SideDrawer";
+import {Text} from "./Text";
+import {renderWithTheme} from "./test-utils";
+
+describe("SideDrawer", () => {
+  it("renders correctly when closed", () => {
+    const {toJSON} = renderWithTheme(
+      <SideDrawer isOpen={false} renderContent={() => <Text>Drawer content</Text>}>
+        <Text>Main content</Text>
+      </SideDrawer>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders correctly when open", () => {
+    const {toJSON} = renderWithTheme(
+      <SideDrawer isOpen={true} renderContent={() => <Text>Drawer content</Text>}>
+        <Text>Main content</Text>
+      </SideDrawer>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with left position (default)", () => {
+    const {toJSON} = renderWithTheme(
+      <SideDrawer isOpen={true} position="left" renderContent={() => <Text>Left drawer</Text>}>
+        <Text>Content</Text>
+      </SideDrawer>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with right position", () => {
+    const {toJSON} = renderWithTheme(
+      <SideDrawer isOpen={true} position="right" renderContent={() => <Text>Right drawer</Text>}>
+        <Text>Content</Text>
+      </SideDrawer>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with front drawer type (default)", () => {
+    const {toJSON} = renderWithTheme(
+      <SideDrawer drawerType="front" isOpen={true} renderContent={() => <Text>Front drawer</Text>}>
+        <Text>Content</Text>
+      </SideDrawer>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with back drawer type", () => {
+    const {toJSON} = renderWithTheme(
+      <SideDrawer drawerType="back" isOpen={true} renderContent={() => <Text>Back drawer</Text>}>
+        <Text>Content</Text>
+      </SideDrawer>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with slide drawer type", () => {
+    const {toJSON} = renderWithTheme(
+      <SideDrawer drawerType="slide" isOpen={true} renderContent={() => <Text>Slide drawer</Text>}>
+        <Text>Content</Text>
+      </SideDrawer>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with custom drawer styles", () => {
+    const {toJSON} = renderWithTheme(
+      <SideDrawer
+        drawerStyles={{width: "50%"}}
+        isOpen={true}
+        renderContent={() => <Text>Styled drawer</Text>}
+      >
+        <Text>Content</Text>
+      </SideDrawer>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("accepts onOpen and onClose callbacks", () => {
+    const handleOpen = mock(() => {});
+    const handleClose = mock(() => {});
+    const {toJSON} = renderWithTheme(
+      <SideDrawer
+        isOpen={false}
+        onClose={handleClose}
+        onOpen={handleOpen}
+        renderContent={() => <Text>Drawer</Text>}
+      >
+        <Text>Content</Text>
+      </SideDrawer>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/Signature.test.tsx

@@ -0,0 +1,15 @@
+import {describe, expect, it} from "bun:test";
+
+import {Signature} from "./Signature";
+
+describe("Signature", () => {
+  // Signature uses react-signature-canvas which requires a canvas/DOM environment
+  it.skip("renders correctly (skipped - requires canvas environment)", () => {
+    expect(Signature).toBeDefined();
+  });
+
+  it("component is defined", () => {
+    expect(Signature).toBeDefined();
+    expect(typeof Signature).toBe("function");
+  });
+});

package/src/SignatureField.test.tsx

@@ -0,0 +1,16 @@
+import {describe, expect, it} from "bun:test";
+
+import {SignatureField} from "./SignatureField";
+
+describe("SignatureField", () => {
+  // SignatureField uses react-signature-canvas which requires a canvas/DOM environment
+  // that isn't available in the bun test environment
+  it.skip("renders correctly (skipped - requires canvas environment)", () => {
+    expect(SignatureField).toBeDefined();
+  });
+
+  it("component is defined", () => {
+    expect(SignatureField).toBeDefined();
+    expect(typeof SignatureField).toBe("function");
+  });
+});

package/src/Spinner.test.tsx

@@ -0,0 +1,74 @@
+import {describe, expect, it} from "bun:test";
+import {act} from "@testing-library/react-native";
+
+import {Spinner} from "./Spinner";
+import {renderWithTheme} from "./test-utils";
+
+describe("Spinner", () => {
+  it("does not render immediately due to delay", () => {
+    const {toJSON} = renderWithTheme(<Spinner />);
+    // Spinner has a 300ms delay before showing
+    expect(toJSON()).toBeNull();
+  });
+
+  it("renders after delay", async () => {
+    const {toJSON} = renderWithTheme(<Spinner />);
+
+    // Wait for the 300ms delay
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 350));
+    });
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with small size", async () => {
+    const {toJSON} = renderWithTheme(<Spinner size="sm" />);
+
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 350));
+    });
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with large size", async () => {
+    const {toJSON} = renderWithTheme(<Spinner size="md" />);
+
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 350));
+    });
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with dark color", async () => {
+    const {toJSON} = renderWithTheme(<Spinner color="dark" />);
+
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 350));
+    });
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with accent color", async () => {
+    const {toJSON} = renderWithTheme(<Spinner color="accent" />);
+
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 350));
+    });
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with secondary color", async () => {
+    const {toJSON} = renderWithTheme(<Spinner color="secondary" />);
+
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 350));
+    });
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/SplitPage.test.tsx

@@ -0,0 +1,15 @@
+import {describe, expect, it} from "bun:test";
+
+import {SplitPage} from "./SplitPage";
+
+describe("SplitPage", () => {
+  // SplitPage uses react-native-swiper-flatlist and complex FlatList interactions
+  it.skip("renders correctly (skipped - uses react-native-swiper-flatlist)", () => {
+    expect(SplitPage).toBeDefined();
+  });
+
+  it("component is defined", () => {
+    expect(SplitPage).toBeDefined();
+    expect(typeof SplitPage).toBe("function");
+  });
+});

package/src/TapToEdit.test.tsx

@@ -0,0 +1,147 @@
+import {describe, expect, it} from "bun:test";
+
+import {formatAddress, TapToEdit} from "./TapToEdit";
+import {renderWithTheme} from "./test-utils";
+
+describe("TapToEdit", () => {
+  it("renders correctly with text value", () => {
+    const {toJSON} = renderWithTheme(
+      <TapToEdit setValue={() => {}} title="Name" value="John Doe" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("displays title and value", () => {
+    const {getByText} = renderWithTheme(
+      <TapToEdit setValue={() => {}} title="Email" value="test@example.com" />
+    );
+    expect(getByText("Email")).toBeTruthy();
+    expect(getByText("test@example.com")).toBeTruthy();
+  });
+
+  it("renders non-editable when editable is false", () => {
+    const {toJSON} = renderWithTheme(
+      <TapToEdit editable={false} title="Read Only" value="Cannot edit this" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders edit icon when editable", () => {
+    const {toJSON} = renderWithTheme(
+      <TapToEdit editable setValue={() => {}} title="Editable Field" value="Click to edit" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("shows editing mode when isEditing is true", () => {
+    const {toJSON} = renderWithTheme(
+      <TapToEdit isEditing setValue={() => {}} title="Field" value="Editing..." />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("displays helper text when provided", () => {
+    const {toJSON} = renderWithTheme(
+      <TapToEdit
+        helperText="Enter your full name"
+        onlyShowHelperTextWhileEditing={false}
+        setValue={() => {}}
+        title="Name"
+        value=""
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with boolean type showing Yes/No", () => {
+    const {getByText} = renderWithTheme(
+      <TapToEdit editable={false} title="Active" type="boolean" value={true} />
+    );
+    expect(getByText("Yes")).toBeTruthy();
+  });
+
+  it("renders with boolean type showing No when false", () => {
+    const {getByText} = renderWithTheme(
+      <TapToEdit editable={false} title="Active" type="boolean" value={false} />
+    );
+    expect(getByText("No")).toBeTruthy();
+  });
+
+  it("renders with transform function", () => {
+    const {getByText} = renderWithTheme(
+      <TapToEdit
+        editable={false}
+        title="Custom"
+        transform={(val) => `Transformed: ${val}`}
+        value="data"
+      />
+    );
+    expect(getByText("Transformed: data")).toBeTruthy();
+  });
+
+  it("renders with textarea type", () => {
+    const {toJSON} = renderWithTheme(
+      <TapToEdit
+        editable={false}
+        title="Description"
+        type="textarea"
+        value="This is a long description that spans multiple lines."
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe("formatAddress", () => {
+  it("formats full address correctly", () => {
+    const address = {
+      address1: "123 Main St",
+      address2: "Apt 4",
+      city: "New York",
+      state: "NY",
+      zipcode: "10001",
+    };
+    const result = formatAddress(address);
+    expect(result).toContain("123 Main St");
+    expect(result).toContain("Apt 4");
+    expect(result).toContain("New York");
+    expect(result).toContain("NY");
+    expect(result).toContain("10001");
+  });
+
+  it("formats address as string when asString is true", () => {
+    const address = {
+      address1: "123 Main St",
+      city: "Boston",
+      state: "MA",
+      zipcode: "02101",
+    };
+    const result = formatAddress(address, true);
+    expect(result).toContain(",");
+    expect(result).not.toContain("\n");
+  });
+
+  it("handles partial address", () => {
+    const address = {
+      city: "Chicago",
+      state: "IL",
+    };
+    const result = formatAddress(address);
+    expect(result).toContain("Chicago");
+    expect(result).toContain("IL");
+  });
+
+  it("includes county information when provided", () => {
+    const address = {
+      address1: "100 County Rd",
+      city: "Rural Town",
+      countyCode: "113",
+      countyName: "Dallas County",
+      state: "TX",
+      zipcode: "75001",
+    };
+    const result = formatAddress(address);
+    expect(result).toContain("Dallas County");
+    expect(result).toContain("(113)");
+  });
+});

package/src/TerrenoProvider.test.tsx

@@ -0,0 +1,36 @@
+import {describe, expect, it} from "bun:test";
+import {render} from "@testing-library/react-native";
+import {Text, View} from "react-native";
+
+import {TerrenoProvider} from "./TerrenoProvider";
+
+describe("TerrenoProvider", () => {
+  it("renders children correctly", () => {
+    const {getByText} = render(
+      <TerrenoProvider>
+        <Text>Child content</Text>
+      </TerrenoProvider>
+    );
+    expect(getByText("Child content")).toBeTruthy();
+  });
+
+  it("renders correctly with default props", () => {
+    const {toJSON} = render(
+      <TerrenoProvider>
+        <View>
+          <Text>App content</Text>
+        </View>
+      </TerrenoProvider>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with openAPISpecUrl", () => {
+    const {toJSON} = render(
+      <TerrenoProvider openAPISpecUrl="https://api.example.com/openapi.json">
+        <Text>Content</Text>
+      </TerrenoProvider>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/Text.test.tsx

@@ -0,0 +1,147 @@
+import {describe, expect, it, spyOn} from "bun:test";
+
+import {Text} from "./Text";
+import {renderWithTheme} from "./test-utils";
+
+describe("Text", () => {
+  it("renders correctly with default props", () => {
+    const {toJSON} = renderWithTheme(<Text>Hello World</Text>);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders text content correctly", () => {
+    const {getByText} = renderWithTheme(<Text>Test content</Text>);
+    expect(getByText("Test content")).toBeTruthy();
+  });
+
+  // Size tests
+  it("renders with sm size", () => {
+    const {toJSON} = renderWithTheme(<Text size="sm">Small text</Text>);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with md size (default)", () => {
+    const {toJSON} = renderWithTheme(<Text size="md">Medium text</Text>);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with lg size", () => {
+    const {toJSON} = renderWithTheme(<Text size="lg">Large text</Text>);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with xl size", () => {
+    const {toJSON} = renderWithTheme(<Text size="xl">Extra large text</Text>);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with 2xl size", () => {
+    const {toJSON} = renderWithTheme(<Text size="2xl">2XL text</Text>);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  // Style tests
+  it("renders bold text", () => {
+    const {toJSON} = renderWithTheme(<Text bold>Bold text</Text>);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders italic text", () => {
+    const {toJSON} = renderWithTheme(<Text italic>Italic text</Text>);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders bold italic text", () => {
+    const {toJSON} = renderWithTheme(
+      <Text bold italic>
+        Bold italic text
+      </Text>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders underlined text", () => {
+    const {toJSON} = renderWithTheme(<Text underline>Underlined text</Text>);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  // Alignment tests
+  it("renders with left alignment (default)", () => {
+    const {toJSON} = renderWithTheme(<Text align="left">Left aligned</Text>);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with center alignment", () => {
+    const {toJSON} = renderWithTheme(<Text align="center">Centered</Text>);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with right alignment", () => {
+    const {toJSON} = renderWithTheme(<Text align="right">Right aligned</Text>);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  // Color tests
+  it("renders with secondary color", () => {
+    const {toJSON} = renderWithTheme(<Text color="secondary">Secondary color</Text>);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with accent color", () => {
+    const {toJSON} = renderWithTheme(<Text color="accent">Accent color</Text>);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with link color", () => {
+    const {toJSON} = renderWithTheme(<Text color="link">Link color</Text>);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  // Truncation tests
+  it("renders with truncate", () => {
+    const {toJSON} = renderWithTheme(
+      <Text truncate>This is a long text that should be truncated</Text>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with numberOfLines", () => {
+    const {toJSON} = renderWithTheme(<Text numberOfLines={2}>Multiple lines of text</Text>);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("logs error when truncate and numberOfLines > 1 are both set", () => {
+    const consoleErrorSpy = spyOn(console, "error").mockImplementation(() => {});
+
+    renderWithTheme(
+      <Text numberOfLines={3} truncate>
+        Invalid combination
+      </Text>
+    );
+
+    expect(consoleErrorSpy).toHaveBeenCalledWith("Cannot truncate Text and have 3 lines");
+
+    consoleErrorSpy.mockRestore();
+  });
+
+  // skipLinking tests
+  it("renders with skipLinking", () => {
+    const {toJSON} = renderWithTheme(<Text skipLinking>No hyperlinks</Text>);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with testID", () => {
+    const {getByTestId} = renderWithTheme(<Text testID="test-text">Test</Text>);
+    expect(getByTestId("test-text")).toBeTruthy();
+  });
+
+  // Combined style tests
+  it("renders with multiple style props", () => {
+    const {toJSON} = renderWithTheme(
+      <Text align="center" bold color="accent" size="lg" underline>
+        Styled text
+      </Text>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});