@terreno/ui 0.10.0 → 0.11.0

package/src/PickerSelect.test.tsx

@@ -1,4 +1,5 @@
 import {describe, expect, it, mock} from "bun:test";
+import {act, fireEvent} from "@testing-library/react-native";
 
 import {RNPickerSelect} from "./PickerSelect";
 import {renderWithTheme} from "./test-utils";
@@ -41,6 +42,50 @@ describe("PickerSelect", () => {
     expect(toJSON()).toMatchSnapshot();
   });
 
+  it("matches items by itemKey", () => {
+    const items = [
+      {key: "k1", label: "Option 1", value: "1"},
+      {key: "k2", label: "Option 2", value: "2"},
+    ];
+    const {toJSON} = renderWithTheme(
+      <RNPickerSelect
+        {...defaultProps}
+        itemKey="k2"
+        items={items}
+        placeholder={{label: "Select", value: ""}}
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders children when provided", () => {
+    const {getByTestId} = renderWithTheme(
+      <RNPickerSelect {...defaultProps}>
+        <>Custom child content</>
+      </RNPickerSelect>
+    );
+    expect(getByTestId).toBeDefined();
+  });
+
+  it("renders custom InputAccessoryView", () => {
+    const CustomAccessory = () => null;
+    const {toJSON} = renderWithTheme(
+      <RNPickerSelect {...defaultProps} InputAccessoryView={CustomAccessory} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("passes textInputProps to TextInput", () => {
+    const {toJSON} = renderWithTheme(
+      <RNPickerSelect
+        {...defaultProps}
+        textInputProps={{placeholder: "Custom placeholder"}}
+        value="1"
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
   it("calls onValueChange when value changes", () => {
     const mockOnValueChange = mock(() => {});
     renderWithTheme(
@@ -49,4 +94,189 @@ describe("PickerSelect", () => {
     // The component is rendered, onValueChange would be called on user interaction
     expect(mockOnValueChange).toBeDefined();
   });
+
+  it("does not crash when value does not match any item", () => {
+    const {toJSON} = renderWithTheme(<RNPickerSelect {...defaultProps} value="nonexistent" />);
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it("accepts onOpen, onClose, onDonePress callbacks", () => {
+    const onOpen = mock(() => {});
+    const onClose = mock(() => {});
+    const onDonePress = mock(() => {});
+    const {toJSON} = renderWithTheme(
+      <RNPickerSelect
+        {...defaultProps}
+        onClose={onClose}
+        onDonePress={onDonePress}
+        onOpen={onOpen}
+      />
+    );
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it("accepts onUpArrow and onDownArrow callbacks", () => {
+    const onUpArrow = mock(() => {});
+    const onDownArrow = mock(() => {});
+    const {toJSON} = renderWithTheme(
+      <RNPickerSelect {...defaultProps} onDownArrow={onDownArrow} onUpArrow={onUpArrow} />
+    );
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it("forwards touchableDoneProps and touchableWrapperProps", () => {
+    const {toJSON} = renderWithTheme(
+      <RNPickerSelect
+        {...defaultProps}
+        touchableDoneProps={{testID: "custom_done"}}
+        touchableWrapperProps={{testID: "custom_wrapper"}}
+      />
+    );
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it("renders without crashing when fixAndroidTouchableBug is true", () => {
+    const {toJSON} = renderWithTheme(<RNPickerSelect {...defaultProps} fixAndroidTouchableBug />);
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it("renders without crashing when useNativeAndroidPickerStyle is false", () => {
+    const {toJSON} = renderWithTheme(
+      <RNPickerSelect {...defaultProps} useNativeAndroidPickerStyle={false} />
+    );
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it("renders with modalProps", () => {
+    const {toJSON} = renderWithTheme(
+      <RNPickerSelect {...defaultProps} modalProps={{animationType: "fade"}} />
+    );
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it("updates selected item when value prop changes", () => {
+    const {rerender, toJSON} = renderWithTheme(<RNPickerSelect {...defaultProps} value="1" />);
+    rerender(<RNPickerSelect {...defaultProps} value="3" />);
+    expect(toJSON()).toBeTruthy();
+  });
+
+  describe("interactions on iOS", () => {
+    it("fires onOpen when the iOS wrapper is pressed and onClose when Done is pressed", async () => {
+      const onOpen = mock(() => {});
+      const onClose = mock(() => {});
+      const onDonePress = mock(() => {});
+      const {getByTestId} = renderWithTheme(
+        <RNPickerSelect
+          {...defaultProps}
+          onClose={onClose}
+          onDonePress={onDonePress}
+          onOpen={onOpen}
+        />
+      );
+
+      await act(async () => {
+        fireEvent.press(getByTestId("ios_touchable_wrapper"));
+      });
+      expect(onOpen).toHaveBeenCalled();
+
+      await act(async () => {
+        fireEvent.press(getByTestId("done_button"));
+      });
+      expect(onClose).toHaveBeenCalled();
+      expect(onDonePress).toHaveBeenCalled();
+    });
+
+    it("invokes up/down arrow callbacks when their touchables are pressed", async () => {
+      const onUpArrow = mock(() => {});
+      const onDownArrow = mock(() => {});
+      const {getByTestId, UNSAFE_getAllByType} = renderWithTheme(
+        <RNPickerSelect {...defaultProps} onDownArrow={onDownArrow} onUpArrow={onUpArrow} />
+      );
+      // Open the modal so the accessory view is rendered.
+      await act(async () => {
+        fireEvent.press(getByTestId("ios_touchable_wrapper"));
+      });
+      const {TouchableOpacity} = require("react-native");
+      interface TouchableTestInstance {
+        props: {onPress?: () => void};
+      }
+      const touchables: TouchableTestInstance[] = UNSAFE_getAllByType(TouchableOpacity).filter(
+        (t: TouchableTestInstance) => typeof t.props.onPress === "function"
+      );
+      // The accessory view renders an up-arrow TouchableOpacity then a down-arrow one.
+      expect(touchables.length).toBeGreaterThanOrEqual(2);
+      await act(async () => {
+        touchables[0].props.onPress?.();
+      });
+      await act(async () => {
+        touchables[1].props.onPress?.();
+      });
+      expect(onUpArrow).toHaveBeenCalled();
+      expect(onDownArrow).toHaveBeenCalled();
+    });
+
+    it("toggles the done button press state when pressed in/out", async () => {
+      const {getByTestId} = renderWithTheme(<RNPickerSelect {...defaultProps} />);
+      await act(async () => {
+        fireEvent.press(getByTestId("ios_touchable_wrapper"));
+      });
+      const doneButton = getByTestId("done_button");
+      await act(async () => {
+        fireEvent(doneButton, "pressIn");
+      });
+      await act(async () => {
+        fireEvent(doneButton, "pressOut");
+      });
+    });
+
+    it("does not open when disabled", async () => {
+      const onOpen = mock(() => {});
+      const {getByTestId} = renderWithTheme(
+        <RNPickerSelect {...defaultProps} disabled onOpen={onOpen} />
+      );
+      await act(async () => {
+        fireEvent.press(getByTestId("ios_touchable_wrapper"));
+      });
+      expect(onOpen).not.toHaveBeenCalled();
+    });
+
+    it("calls onValueChange and updates selected item when the Picker emits a change", async () => {
+      const mockOnValueChange = mock(() => {});
+      const {getByTestId} = renderWithTheme(
+        <RNPickerSelect {...defaultProps} onValueChange={mockOnValueChange} />
+      );
+      await act(async () => {
+        fireEvent.press(getByTestId("ios_touchable_wrapper"));
+      });
+      const picker = getByTestId("ios_picker");
+      await act(async () => {
+        picker.props.onValueChange?.("2", 1);
+      });
+      expect(mockOnValueChange).toHaveBeenCalledWith("2", 1);
+    });
+
+    it("updates orientation state when the iOS modal rotates", async () => {
+      const {getByTestId, toJSON} = renderWithTheme(<RNPickerSelect {...defaultProps} />);
+      await act(async () => {
+        fireEvent.press(getByTestId("ios_touchable_wrapper"));
+      });
+      const modal = getByTestId("ios_modal");
+      await act(async () => {
+        modal.props.onOrientationChange?.({nativeEvent: {orientation: "landscape"}});
+      });
+      expect(toJSON()).toBeTruthy();
+    });
+
+    it("closes the modal when the top overlay is pressed", async () => {
+      const onClose = mock(() => {});
+      const {getByTestId} = renderWithTheme(<RNPickerSelect {...defaultProps} onClose={onClose} />);
+      await act(async () => {
+        fireEvent.press(getByTestId("ios_touchable_wrapper"));
+      });
+      await act(async () => {
+        fireEvent.press(getByTestId("ios_modal_top"));
+      });
+      expect(onClose).toHaveBeenCalled();
+    });
+  });
 });

package/src/SegmentedControl.test.tsx

@@ -81,4 +81,42 @@ describe("SegmentedControl", () => {
     expect(getByText("Tab 3")).toBeTruthy();
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it("invokes handleNext when next scroll button is pressed", () => {
+    const manyItems = ["Tab 1", "Tab 2", "Tab 3", "Tab 4", "Tab 5", "Tab 6"];
+    const {UNSAFE_getAllByProps, queryByText} = renderWithTheme(
+      <SegmentedControl items={manyItems} maxItems={3} selectedIndex={0} />
+    );
+    // Find the right chevron (next button) by its icon prop
+    const nextIcons = UNSAFE_getAllByProps({iconName: "chevron-right"});
+    expect(nextIcons.length).toBeGreaterThan(0);
+    const pressable = nextIcons[0].parent;
+    expect(pressable).toBeTruthy();
+    if (pressable) {
+      fireEvent.press(pressable);
+    }
+    // After pressing next, should display items starting at Tab 4
+    expect(queryByText("Tab 4")).toBeTruthy();
+    expect(queryByText("Tab 1")).toBeNull();
+  });
+
+  it("invokes handlePrevious when previous scroll button is pressed", () => {
+    const manyItems = ["Tab 1", "Tab 2", "Tab 3", "Tab 4", "Tab 5", "Tab 6"];
+    const {UNSAFE_getAllByProps, queryByText} = renderWithTheme(
+      <SegmentedControl items={manyItems} maxItems={3} selectedIndex={0} />
+    );
+    const nextIcons = UNSAFE_getAllByProps({iconName: "chevron-right"});
+    const nextPressable = nextIcons[0].parent;
+    if (nextPressable) {
+      fireEvent.press(nextPressable);
+    }
+    // Now scrolled forward; press previous to go back
+    const prevIcons = UNSAFE_getAllByProps({iconName: "chevron-left"});
+    const prevPressable = prevIcons[0].parent;
+    if (prevPressable) {
+      fireEvent.press(prevPressable);
+    }
+    // Should be back to Tab 1
+    expect(queryByText("Tab 1")).toBeTruthy();
+  });
 });

package/src/SelectBadge.test.tsx

@@ -1,4 +1,5 @@
-import {describe, expect, it} from "bun:test";
+import {describe, expect, it, mock} from "bun:test";
+import {act, fireEvent} from "@testing-library/react-native";
 
 import {SelectBadge} from "./SelectBadge";
 import {renderWithTheme} from "./test-utils";
@@ -100,4 +101,54 @@ describe("SelectBadge", () => {
     );
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it("toggles picker visibility when badge is pressed", () => {
+    const {getByLabelText} = renderWithTheme(
+      <SelectBadge onChange={() => {}} options={defaultOptions} value="a" />
+    );
+    const touchable = getByLabelText("Open select badge options");
+    expect(() => fireEvent.press(touchable)).not.toThrow();
+  });
+
+  it("invokes onChange when iOS picker value is changed and Save is pressed", () => {
+    const handleChange = mock((_val: string) => {});
+    const {getByLabelText, UNSAFE_getAllByProps} = renderWithTheme(
+      <SelectBadge onChange={handleChange} options={defaultOptions} value="a" />
+    );
+    // Open the iOS picker modal
+    act(() => {
+      fireEvent.press(getByLabelText("Open select badge options"));
+    });
+
+    // Change the picker's value via onValueChange
+    const pickers = UNSAFE_getAllByProps({selectedValue: "a"});
+    const picker = pickers.find((p) => typeof p.props.onValueChange === "function");
+    act(() => {
+      if (picker) {
+        picker.props.onValueChange("b");
+      }
+    });
+
+    // Tap Save to commit the change
+    act(() => {
+      fireEvent.press(getByLabelText("Save selected value"));
+    });
+    expect(handleChange).toHaveBeenCalledWith("b");
+  });
+
+  it("does not call onChange when iOS picker is dismissed", () => {
+    const handleChange = mock((_val: string) => {});
+    const {getByLabelText} = renderWithTheme(
+      <SelectBadge onChange={handleChange} options={defaultOptions} value="a" />
+    );
+    // Open the iOS picker modal
+    act(() => {
+      fireEvent.press(getByLabelText("Open select badge options"));
+    });
+    // Dismiss the picker by pressing the backdrop
+    act(() => {
+      fireEvent.press(getByLabelText("Dismiss picker modal"));
+    });
+    expect(handleChange).not.toHaveBeenCalled();
+  });
 });

package/src/SideDrawer.test.tsx

@@ -1,4 +1,33 @@
 import {describe, expect, it, mock} from "bun:test";
+import type {ReactNode} from "react";
+import {Pressable, Text as RNText, View} from "react-native";
+
+// Capture the props passed to Drawer so we can exercise the render callbacks.
+interface CapturedDrawerProps {
+  onOpen?: () => void;
+  onClose?: () => void;
+  renderDrawerContent?: () => ReactNode;
+  children?: ReactNode;
+}
+
+let lastDrawerProps: CapturedDrawerProps | null = null;
+mock.module("react-native-drawer-layout", () => ({
+  Drawer: (props: CapturedDrawerProps) => {
+    lastDrawerProps = props;
+    return (
+      <View testID="mock-drawer">
+        {props.renderDrawerContent ? props.renderDrawerContent() : null}
+        <Pressable onPress={props.onOpen} testID="mock-drawer-open">
+          <RNText>open</RNText>
+        </Pressable>
+        <Pressable onPress={props.onClose} testID="mock-drawer-close">
+          <RNText>close</RNText>
+        </Pressable>
+        {props.children}
+      </View>
+    );
+  },
+}));
 
 import {SideDrawer} from "./SideDrawer";
 import {Text} from "./Text";
@@ -96,4 +125,44 @@ describe("SideDrawer", () => {
     );
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it("invokes onOpen and onClose when Drawer triggers the callbacks", () => {
+    const handleOpen = mock(() => {});
+    const handleClose = mock(() => {});
+    renderWithTheme(
+      <SideDrawer
+        isOpen
+        onClose={handleClose}
+        onOpen={handleOpen}
+        renderContent={() => <Text>Drawer body</Text>}
+      >
+        <Text>Content</Text>
+      </SideDrawer>
+    );
+    lastDrawerProps?.onOpen?.();
+    lastDrawerProps?.onClose?.();
+    expect(handleOpen).toHaveBeenCalledTimes(1);
+    expect(handleClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders the drawer content via the render callback", () => {
+    const {getByText} = renderWithTheme(
+      <SideDrawer isOpen renderContent={() => <Text>Rendered drawer body</Text>}>
+        <Text>Main</Text>
+      </SideDrawer>
+    );
+    expect(getByText("Rendered drawer body")).toBeTruthy();
+  });
+
+  it("exercises the default no-op callbacks when onOpen/onClose are omitted", () => {
+    renderWithTheme(
+      <SideDrawer isOpen renderContent={() => <Text>Default callbacks</Text>}>
+        <Text>Content</Text>
+      </SideDrawer>
+    );
+    expect(() => {
+      lastDrawerProps?.onOpen?.();
+      lastDrawerProps?.onClose?.();
+    }).not.toThrow();
+  });
 });

package/src/Signature.test.tsx

@@ -1,15 +1,26 @@
 import {describe, expect, it, mock} from "bun:test";
-import {forwardRef} from "react";
+import {fireEvent} from "@testing-library/react-native";
+import {forwardRef, useImperativeHandle} from "react";
 import {View} from "react-native";
 
 import {Signature} from "./Signature";
 import {renderWithTheme} from "./test-utils";
 
-// Mock react-signature-canvas
+const clearMock = mock(() => {});
+let toDataURLReturn: string = "";
+const toDataURLMock = mock(() => toDataURLReturn);
+let lastOnEnd: (() => void) | undefined;
+
+// Mock react-signature-canvas so we can exercise the ref methods and onEnd callback.
 mock.module("react-signature-canvas", () => ({
-  default: forwardRef(({backgroundColor}: any, ref) => (
-    <View ref={ref as any} style={{backgroundColor}} testID="signature-canvas" />
-  )),
+  default: forwardRef(({backgroundColor, onEnd}: any, ref) => {
+    lastOnEnd = onEnd;
+    useImperativeHandle(ref, () => ({
+      clear: clearMock,
+      toDataURL: toDataURLMock,
+    }));
+    return <View style={{backgroundColor}} testID="signature-canvas" />;
+  }),
 }));
 
 describe("Signature", () => {
@@ -29,4 +40,30 @@ describe("Signature", () => {
     const {getByText} = renderWithTheme(<Signature onChange={mockOnChange} />);
     expect(getByText("Clear")).toBeTruthy();
   });
+
+  it("calls clear on the signature canvas when Clear is pressed", () => {
+    clearMock.mockClear();
+    const mockOnChange = mock(() => {});
+    const {getByText} = renderWithTheme(<Signature onChange={mockOnChange} />);
+    fireEvent.press(getByText("Clear"));
+    expect(clearMock).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls onChange with the data URL when a stroke ends", () => {
+    toDataURLReturn = "data:image/png;base64,abc";
+    const mockOnChange = mock(() => {});
+    renderWithTheme(<Signature onChange={mockOnChange} />);
+    expect(lastOnEnd).toBeDefined();
+    lastOnEnd?.();
+    expect(mockOnChange).toHaveBeenCalledWith("data:image/png;base64,abc");
+  });
+
+  it("does not call onChange when toDataURL returns an empty value", () => {
+    toDataURLReturn = "";
+    const mockOnChange = mock(() => {});
+    renderWithTheme(<Signature onChange={mockOnChange} />);
+    expect(lastOnEnd).toBeDefined();
+    lastOnEnd?.();
+    expect(mockOnChange).not.toHaveBeenCalled();
+  });
 });

package/src/SignatureField.test.tsx

@@ -1,6 +1,7 @@
 import {describe, expect, it, mock} from "bun:test";
 import {forwardRef} from "react";
 import {View} from "react-native";
+import type {ReactTestInstance} from "react-test-renderer";
 
 import {SignatureField} from "./SignatureField";
 import {renderWithTheme} from "./test-utils";
@@ -57,4 +58,38 @@ describe("SignatureField", () => {
     );
     expect(getByText("Signature is required")).toBeTruthy();
   });
+
+  it("invokes onStart and onEnd callbacks via the Signature component", () => {
+    const onStart = mock(() => {});
+    const onEnd = mock(() => {});
+    const onChange = mock((_v: string) => {});
+
+    const {UNSAFE_getAllByProps} = renderWithTheme(
+      <SignatureField onChange={onChange} onEnd={onEnd} onStart={onStart} />
+    );
+
+    // Find the inner Signature wrapper by looking for elements with onStart
+    const elementsWithOnStart = UNSAFE_getAllByProps({}).filter(
+      (el: ReactTestInstance) => typeof el.props?.onStart === "function"
+    );
+    expect(elementsWithOnStart.length).toBeGreaterThan(0);
+    const signatureEl = elementsWithOnStart[0];
+    signatureEl.props.onStart();
+    signatureEl.props.onEnd();
+    expect(onStart).toHaveBeenCalled();
+    expect(onEnd).toHaveBeenCalled();
+  });
+
+  it("does not crash when onStart/onEnd are not provided", () => {
+    const onChange = mock((_v: string) => {});
+    const {UNSAFE_getAllByProps} = renderWithTheme(<SignatureField onChange={onChange} />);
+
+    const elementsWithOnStart = UNSAFE_getAllByProps({}).filter(
+      (el: ReactTestInstance) => typeof el.props?.onStart === "function"
+    );
+    expect(elementsWithOnStart.length).toBeGreaterThan(0);
+    const signatureEl = elementsWithOnStart[0];
+    expect(() => signatureEl.props.onStart()).not.toThrow();
+    expect(() => signatureEl.props.onEnd()).not.toThrow();
+  });
 });

package/src/Slider.test.tsx

@@ -244,4 +244,63 @@ describe("Slider", () => {
       expect(toJSON()).toMatchSnapshot();
     });
   });
+
+  describe("advanced branches", () => {
+    it("renders icon-based value mapping when useIcons is true", () => {
+      const mockOnChange = mock(() => {});
+      const {toJSON} = renderWithTheme(
+        <Slider
+          maximumValue={2}
+          minimumValue={0}
+          onChange={mockOnChange}
+          showSelection
+          step={1}
+          useIcons
+          value={1}
+          valueMapping={[
+            {label: "face-frown", size: "md", value: 0},
+            {label: "face-meh", size: "lg", value: 1},
+            {label: "face-smile", size: "xl", value: 2},
+          ]}
+        />
+      );
+      expect(toJSON()).toBeTruthy();
+    });
+
+    it("renders custom labels alongside min and max labels", () => {
+      const mockOnChange = mock(() => {});
+      const {getByText} = renderWithTheme(
+        <Slider
+          labels={{
+            custom: [{label: "Middle", value: 50}],
+            max: "High",
+            min: "Low",
+          }}
+          maximumValue={100}
+          minimumValue={0}
+          onChange={mockOnChange}
+          value={50}
+        />
+      );
+      expect(getByText("Low")).toBeTruthy();
+      expect(getByText("Middle")).toBeTruthy();
+      expect(getByText("High")).toBeTruthy();
+    });
+
+    it("falls back to plain numeric formatter when valueMapping is empty", () => {
+      const mockOnChange = mock(() => {});
+      const {getByText} = renderWithTheme(
+        <Slider
+          maximumValue={10}
+          minimumValue={0}
+          onChange={mockOnChange}
+          showSelection
+          step={1}
+          value={7}
+          valueMapping={[]}
+        />
+      );
+      expect(getByText("7")).toBeTruthy();
+    });
+  });
 });

package/src/Spinner.test.tsx

@@ -71,4 +71,10 @@ describe("Spinner", () => {
 
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it("clears the delay timer on unmount", () => {
+    const {unmount, toJSON} = renderWithTheme(<Spinner />);
+    expect(toJSON()).toBeNull();
+    expect(() => unmount()).not.toThrow();
+  });
 });