@terreno/ui 0.9.3 → 0.11.0

package/src/InfoModalIcon.test.tsx

@@ -51,4 +51,20 @@ describe("InfoModalIcon", () => {
     fireEvent.press(infoIcon);
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it("invokes primary Close button handler without throwing", () => {
+    const {getByTestId, getByText} = renderWithTheme(
+      <InfoModalIcon infoModalText="Dismissable text" infoModalTitle="Dismissable Title" />
+    );
+    fireEvent.press(getByTestId("info-icon"));
+    expect(() => fireEvent.press(getByText("Close"))).not.toThrow();
+  });
+
+  it("invokes onDismiss when the close (x) icon is pressed", () => {
+    const {getByTestId, getByLabelText} = renderWithTheme(
+      <InfoModalIcon infoModalText="Body" infoModalTitle="Close Me" />
+    );
+    fireEvent.press(getByTestId("info-icon"));
+    expect(() => fireEvent.press(getByLabelText("Close modal"))).not.toThrow();
+  });
 });

package/src/InfoTooltipButton.test.tsx

@@ -1,4 +1,38 @@
-import {describe, expect, it} from "bun:test";
+import {afterAll, describe, expect, it, mock} from "bun:test";
+import {fireEvent} from "@testing-library/react-native";
+import {Pressable, Text as RNText} from "react-native";
+
+// Override the IconButton mock so the inline onClick arrow fires when pressed.
+mock.module("./IconButton", () => ({
+  IconButton: ({
+    accessibilityLabel,
+    accessibilityHint,
+    iconName,
+    onClick,
+    tooltipText,
+  }: {
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+    iconName: string;
+    onClick?: () => void;
+    tooltipText?: string;
+  }) => (
+    <Pressable
+      accessibilityHint={accessibilityHint}
+      accessibilityLabel={accessibilityLabel}
+      onPress={onClick}
+      testID={`icon-button-${iconName}`}
+    >
+      <RNText>{tooltipText}</RNText>
+    </Pressable>
+  ),
+}));
+
+afterAll(() => {
+  mock.module("./IconButton", () => ({
+    IconButton: mock(() => null),
+  }));
+});
 
 import {InfoTooltipButton} from "./InfoTooltipButton";
 import {renderWithTheme} from "./test-utils";
@@ -19,4 +53,22 @@ describe("InfoTooltipButton", () => {
     // The component renders an IconButton with exclamation icon
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it("is defined and is a function component", () => {
+    expect(InfoTooltipButton).toBeDefined();
+    expect(typeof InfoTooltipButton).toBe("function");
+  });
+
+  it("accepts a text prop without throwing", () => {
+    expect(() =>
+      renderWithTheme(<InfoTooltipButton text="Some details that explain the field" />)
+    ).not.toThrow();
+  });
+
+  it("fires the inline onClick handler when the IconButton is pressed", () => {
+    const {getByTestId} = renderWithTheme(
+      <InfoTooltipButton text="Some details that explain the field" />
+    );
+    expect(() => fireEvent.press(getByTestId("icon-button-exclamation"))).not.toThrow();
+  });
 });

package/src/MobileAddressAutoComplete.test.tsx

@@ -1,17 +1,79 @@
 import {describe, expect, it, mock} from "bun:test";
-import {forwardRef} from "react";
-import {Text, View} from "react-native";
+import {fireEvent} from "@testing-library/react-native";
+import {forwardRef, useImperativeHandle, useRef} from "react";
+import {Pressable, Text, View} from "react-native";
 
 import {MobileAddressAutocomplete} from "./MobileAddressAutoComplete";
 import {renderWithTheme} from "./test-utils";
 
+// Capture the props passed to GooglePlacesAutocomplete so we can exercise the inline
+// callbacks (onPress, onFocus, onBlur, onChange, textInputProps, etc.)
+interface CapturedGooglePlacesProps {
+  placeholder?: string;
+  textInputProps?: {
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onChange?: (event: {nativeEvent: {text: string}}) => void;
+  };
+  onPress?: (
+    data: {description: string},
+    details: {
+      address_components: {
+        long_name: string;
+        short_name: string;
+        types: string[];
+      }[];
+    }
+  ) => void;
+}
+
+let lastGooglePlacesProps: CapturedGooglePlacesProps | null = null;
+const setAddressTextSpy = mock(() => {});
+
 // Mock react-native-google-places-autocomplete
 mock.module("react-native-google-places-autocomplete", () => ({
-  GooglePlacesAutocomplete: forwardRef(({placeholder}: any, ref) => (
-    <View ref={ref as any} testID="google-places-autocomplete">
-      <Text>{placeholder}</Text>
-    </View>
-  )),
+  GooglePlacesAutocomplete: forwardRef((props: CapturedGooglePlacesProps, ref) => {
+    lastGooglePlacesProps = props;
+    const innerRef = useRef<Record<string, unknown>>({});
+    useImperativeHandle(ref, () => ({
+      setAddressText: setAddressTextSpy,
+      ...innerRef.current,
+    }));
+    return (
+      <View testID="google-places-autocomplete">
+        <Text>{props.placeholder}</Text>
+        <Pressable
+          onPress={() =>
+            props.onPress?.(
+              {description: "123 Main St"},
+              {
+                address_components: [
+                  {long_name: "123", short_name: "123", types: ["street_number"]},
+                  {long_name: "Main St", short_name: "Main St", types: ["route"]},
+                  {long_name: "San Francisco", short_name: "SF", types: ["locality"]},
+                  {
+                    long_name: "California",
+                    short_name: "CA",
+                    types: ["administrative_area_level_1"],
+                  },
+                  {
+                    long_name: "San Francisco County",
+                    short_name: "SF County",
+                    types: ["administrative_area_level_2"],
+                  },
+                  {long_name: "United States", short_name: "US", types: ["country"]},
+                  {long_name: "94105", short_name: "94105", types: ["postal_code"]},
+                ],
+              }
+            )
+          }
+          testID="mock-google-places-select"
+        >
+          <Text>Select</Text>
+        </Pressable>
+      </View>
+    );
+  }),
 }));
 
 describe("MobileAddressAutocomplete", () => {
@@ -55,4 +117,72 @@ describe("MobileAddressAutocomplete", () => {
     );
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it("invokes handleAutoCompleteChange with processed address components", () => {
+    const handleAutoCompleteChange = mock(() => {});
+    const handleAddressChange = mock(() => {});
+    setAddressTextSpy.mockClear();
+    const {getByTestId} = renderWithTheme(
+      <MobileAddressAutocomplete
+        googleMapsApiKey="test-api-key"
+        handleAddressChange={handleAddressChange}
+        handleAutoCompleteChange={handleAutoCompleteChange}
+        includeCounty
+        inputValue=""
+      />
+    );
+    fireEvent.press(getByTestId("mock-google-places-select"));
+    expect(handleAutoCompleteChange).toHaveBeenCalled();
+    const payload = handleAutoCompleteChange.mock.calls[0][0] as {address1?: string};
+    expect(payload.address1).toContain("Main St");
+    expect(setAddressTextSpy).toHaveBeenCalled();
+  });
+
+  it("fires onFocus, onBlur and onChange via textInputProps callbacks", () => {
+    const handleAddressChange = mock(() => {});
+    renderWithTheme(
+      <MobileAddressAutocomplete
+        googleMapsApiKey="test-api-key"
+        handleAddressChange={handleAddressChange}
+        handleAutoCompleteChange={() => {}}
+        inputValue=""
+      />
+    );
+    const tip = lastGooglePlacesProps?.textInputProps;
+    expect(typeof tip?.onFocus).toBe("function");
+    expect(typeof tip?.onBlur).toBe("function");
+    expect(typeof tip?.onChange).toBe("function");
+    tip?.onFocus?.();
+    tip?.onBlur?.();
+    tip?.onChange?.({nativeEvent: {text: "456 Oak Ave"}});
+    expect(handleAddressChange).toHaveBeenCalledWith("456 Oak Ave");
+  });
+
+  it("falls back to the TextField and propagates its onChange without an API key", () => {
+    const handleAddressChange = mock(() => {});
+    const {UNSAFE_root} = renderWithTheme(
+      <MobileAddressAutocomplete
+        handleAddressChange={handleAddressChange}
+        handleAutoCompleteChange={() => {}}
+        inputValue=""
+        testID="mobile-fallback"
+      />
+    );
+    expect(UNSAFE_root).toBeTruthy();
+  });
+
+  it("wrapping TouchableOpacity clears focus when pressed", () => {
+    const {UNSAFE_getAllByType} = renderWithTheme(
+      <MobileAddressAutocomplete
+        googleMapsApiKey="test-api-key"
+        handleAddressChange={() => {}}
+        handleAutoCompleteChange={() => {}}
+        inputValue=""
+      />
+    );
+    const {TouchableOpacity} = require("react-native");
+    const [wrapper] = UNSAFE_getAllByType(TouchableOpacity);
+    expect(wrapper).toBeTruthy();
+    expect(() => wrapper.props.onPress?.()).not.toThrow();
+  });
 });

package/src/Modal.test.tsx

@@ -5,6 +5,16 @@ import {Modal} from "./Modal";
 import {Text} from "./Text";
 import {renderWithTheme} from "./test-utils";
 
+// Minimal shape of a test instance returned by UNSAFE_getAllByType that we rely on here.
+interface PressableTestInstance {
+  props: {
+    style?:
+      | {backgroundColor?: string; cursor?: string}
+      | {backgroundColor?: string; cursor?: string}[];
+    onPress?: (event?: {stopPropagation?: () => void}) => void;
+  };
+}
+
 describe("Modal", () => {
   it("renders correctly when visible", () => {
     const {toJSON} = renderWithTheme(
@@ -166,4 +176,182 @@ describe("Modal", () => {
     );
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it("renders primary button with click handler", () => {
+    const handlePrimary = mock(() => {});
+    const {getByText} = renderWithTheme(
+      <Modal
+        onDismiss={() => {}}
+        primaryButtonOnClick={handlePrimary}
+        primaryButtonText="Confirm"
+        title="Title"
+        visible
+      >
+        <Text>Content</Text>
+      </Modal>
+    );
+    expect(getByText("Confirm")).toBeTruthy();
+  });
+
+  it("renders secondary button with click handler", () => {
+    const handleSecondary = mock(() => {});
+    const {getByText} = renderWithTheme(
+      <Modal
+        onDismiss={() => {}}
+        secondaryButtonOnClick={handleSecondary}
+        secondaryButtonText="Cancel"
+        title="Title"
+        visible
+      >
+        <Text>Content</Text>
+      </Modal>
+    );
+    expect(getByText("Cancel")).toBeTruthy();
+  });
+
+  it("does not call primaryButtonOnClick when not visible", () => {
+    const handlePrimary = mock(() => {});
+    renderWithTheme(
+      <Modal
+        onDismiss={() => {}}
+        primaryButtonOnClick={handlePrimary}
+        primaryButtonText="Confirm"
+        title="Title"
+        visible={false}
+      >
+        <Text>Content</Text>
+      </Modal>
+    );
+    expect(handlePrimary).not.toHaveBeenCalled();
+  });
+
+  it("renders with persistOnBackgroundClick", () => {
+    const {toJSON} = renderWithTheme(
+      <Modal onDismiss={() => {}} persistOnBackgroundClick title="Persistent" visible>
+        <Text>Content</Text>
+      </Modal>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("does not call onDismiss when visible is false and close is pressed", () => {
+    const handleDismiss = mock(() => {});
+    renderWithTheme(
+      <Modal onDismiss={handleDismiss} title="Hidden" visible={false}>
+        <Text>Content</Text>
+      </Modal>
+    );
+    expect(handleDismiss).not.toHaveBeenCalled();
+  });
+
+  it("renders transitioning from hidden to visible", () => {
+    const {rerender, toJSON} = renderWithTheme(
+      <Modal onDismiss={() => {}} title="Toggle" visible={false}>
+        <Text>Content</Text>
+      </Modal>
+    );
+    rerender(
+      <Modal onDismiss={() => {}} title="Toggle" visible>
+        <Text>Content</Text>
+      </Modal>
+    );
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it("invokes primaryButtonOnClick when primary button pressed while visible", async () => {
+    const handlePrimary = mock(() => {});
+    const {getByText} = renderWithTheme(
+      <Modal
+        onDismiss={() => {}}
+        primaryButtonOnClick={handlePrimary}
+        primaryButtonText="Submit"
+        title="Title"
+        visible
+      >
+        <Text>Content</Text>
+      </Modal>
+    );
+
+    await new Promise((resolve) => {
+      fireEvent.press(getByText("Submit"));
+      setTimeout(resolve, 600);
+    });
+
+    expect(handlePrimary).toHaveBeenCalled();
+  });
+
+  it("invokes secondaryButtonOnClick when secondary button pressed while visible", async () => {
+    const handleSecondary = mock(() => {});
+    const {getByText} = renderWithTheme(
+      <Modal
+        onDismiss={() => {}}
+        secondaryButtonOnClick={handleSecondary}
+        secondaryButtonText="Cancel"
+        title="Title"
+        visible
+      >
+        <Text>Content</Text>
+      </Modal>
+    );
+
+    await new Promise((resolve) => {
+      fireEvent.press(getByText("Cancel"));
+      setTimeout(resolve, 600);
+    });
+
+    expect(handleSecondary).toHaveBeenCalled();
+  });
+
+  it("dismisses when the backdrop is pressed and persistOnBackgroundClick is false", () => {
+    const handleDismiss = mock(() => {});
+    const {UNSAFE_getAllByType} = renderWithTheme(
+      <Modal onDismiss={handleDismiss} title="Title" visible>
+        <Text>Content</Text>
+      </Modal>
+    );
+    // Find the backdrop Pressable (first Pressable in tree with a style that includes backgroundColor).
+    const {Pressable} = require("react-native");
+    const pressables: PressableTestInstance[] = UNSAFE_getAllByType(Pressable);
+    const backdrop = pressables.find((node) => {
+      const style = node.props.style;
+      if (Array.isArray(style)) {
+        return style.some((s) => s?.backgroundColor?.includes?.("rgba"));
+      }
+      return style?.backgroundColor?.includes?.("rgba");
+    });
+    expect(backdrop).toBeTruthy();
+    backdrop?.props.onPress?.();
+    expect(handleDismiss).toHaveBeenCalled();
+  });
+
+  it("stops propagation on the inner backdrop wrapper press", () => {
+    const stopPropagation = mock(() => {});
+    const {UNSAFE_getAllByType} = renderWithTheme(
+      <Modal onDismiss={() => {}} title="Title" visible>
+        <Text>Content</Text>
+      </Modal>
+    );
+    const {Pressable} = require("react-native");
+    const pressables: PressableTestInstance[] = UNSAFE_getAllByType(Pressable);
+    // Inner wrapper is the pressable with style {cursor: "auto"}.
+    const inner = pressables.find((node) => node.props.style?.cursor === "auto");
+    expect(inner).toBeTruthy();
+    inner?.props.onPress?.({stopPropagation});
+    expect(stopPropagation).toHaveBeenCalled();
+  });
+
+  it("does not stop propagation on the inner wrapper when persistOnBackgroundClick is true", () => {
+    const stopPropagation = mock(() => {});
+    const {UNSAFE_getAllByType} = renderWithTheme(
+      <Modal onDismiss={() => {}} persistOnBackgroundClick title="Title" visible>
+        <Text>Content</Text>
+      </Modal>
+    );
+    const {Pressable} = require("react-native");
+    const pressables: PressableTestInstance[] = UNSAFE_getAllByType(Pressable);
+    const inner = pressables.find((node) => node.props.style?.cursor === "auto");
+    expect(inner).toBeTruthy();
+    inner?.props.onPress?.({stopPropagation});
+    expect(stopPropagation).not.toHaveBeenCalled();
+  });
 });

package/src/NumberPickerActionSheet.test.tsx

@@ -1,6 +1,7 @@
-import {describe, expect, it} from "bun:test";
-import {render} from "@testing-library/react-native";
+import {describe, expect, it, mock} from "bun:test";
+import {act, render} from "@testing-library/react-native";
 import {createRef} from "react";
+import type {ReactTestInstance} from "react-test-renderer";
 
 import type {ActionSheet} from "./ActionSheet";
 import {NumberPickerActionSheet} from "./NumberPickerActionSheet";
@@ -43,4 +44,60 @@ describe("NumberPickerActionSheet", () => {
     );
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it("invokes onChange when picker value changes", () => {
+    const actionSheetRef = createRef<ActionSheet>();
+    const handleChange = mock((_val: string) => {});
+    const {UNSAFE_getAllByProps} = render(
+      <ThemeProvider>
+        <NumberPickerActionSheet
+          actionSheetRef={actionSheetRef}
+          max={10}
+          min={0}
+          onChange={handleChange}
+          value="5"
+        />
+      </ThemeProvider>
+    );
+    const pickers = UNSAFE_getAllByProps({selectedValue: "5"});
+    const picker = pickers.find(
+      (p: ReactTestInstance) => typeof p.props.onValueChange === "function"
+    );
+    act(() => {
+      if (picker) {
+        picker.props.onValueChange(7);
+      }
+    });
+    expect(handleChange).toHaveBeenCalledWith("7");
+  });
+
+  it("closes the action sheet when Close button is pressed", () => {
+    const setModalVisible = mock((_v: boolean) => {});
+    const actionSheetRef = createRef<ActionSheet>();
+    const {UNSAFE_getAllByProps} = render(
+      <ThemeProvider>
+        <NumberPickerActionSheet
+          actionSheetRef={actionSheetRef}
+          max={10}
+          min={0}
+          onChange={() => {}}
+          value="5"
+        />
+      </ThemeProvider>
+    );
+    // Replace the ref target with a mock after mount so the Button's onClick
+    // invokes our spy instead of the real ActionSheet instance.
+    (actionSheetRef as {current: {setModalVisible: typeof setModalVisible}}).current = {
+      setModalVisible,
+    };
+    const closeButtons = UNSAFE_getAllByProps({text: "Close"});
+    const closeButton = closeButtons.find(
+      (b: ReactTestInstance) => typeof b.props.onClick === "function"
+    );
+    expect(closeButton).toBeDefined();
+    act(() => {
+      closeButton?.props.onClick();
+    });
+    expect(setModalVisible).toHaveBeenCalledWith(false);
+  });
 });