@terreno/ui 0.10.0 → 0.11.0

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);
+  });
 });

package/src/Page.test.tsx

@@ -1,9 +1,97 @@
-import {describe, expect, it, mock} from "bun:test";
+import {afterAll, describe, expect, it, mock} from "bun:test";
+import {act, fireEvent, waitFor} from "@testing-library/react-native";
+import React, {type ReactNode} from "react";
+import {Pressable, Text as RNText} from "react-native";
+
+// Override the IconButton mock so the inline onClick arrows fire when pressed.
+mock.module("./IconButton", () => ({
+  IconButton: ({
+    accessibilityLabel,
+    accessibilityHint,
+    iconName,
+    onClick,
+  }: {
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+    iconName: string;
+    onClick?: () => void;
+  }) => (
+    <Pressable
+      accessibilityHint={accessibilityHint}
+      accessibilityLabel={accessibilityLabel}
+      onPress={onClick}
+      testID={`icon-button-${iconName}`}
+    >
+      <RNText>{iconName}</RNText>
+    </Pressable>
+  ),
+}));
+
+// Override the expo-router mock so we can observe router.back() calls, but
+// preserve the full shape provided by bunSetup.ts (Link, Stack, Tabs, hooks,
+// and the rest of the router object) so other components that import from
+// "expo-router" don't see `undefined` for those exports.
+const routerBack = mock(() => {});
+interface MockChildrenProps {
+  children?: ReactNode;
+}
+mock.module("expo-router", () => ({
+  Link: ({children, ...props}: MockChildrenProps) => React.createElement("Link", props, children),
+  router: {
+    back: routerBack,
+    canGoBack: mock(() => true),
+    navigate: mock(() => {}),
+    push: mock(() => {}),
+    replace: mock(() => {}),
+  },
+  Stack: ({children, ...props}: MockChildrenProps) => React.createElement("Stack", props, children),
+  Tabs: ({children, ...props}: MockChildrenProps) => React.createElement("Tabs", props, children),
+  useLocalSearchParams: mock(() => ({})),
+  useRouter: mock(() => ({
+    back: mock(() => {}),
+    canGoBack: mock(() => true),
+    navigate: mock(() => {}),
+    push: mock(() => {}),
+    replace: mock(() => {}),
+  })),
+  useSegments: mock(() => []),
+}));
 
 import {Page} from "./Page";
 import {Text} from "./Text";
 import {renderWithTheme} from "./test-utils";
 
+// Restore the global mocks set up by bunSetup.ts after this file finishes so
+// that other test files (e.g. IconButton.test.tsx, ConsentFormScreen.test.tsx)
+// are not affected by the overrides above.
+afterAll(() => {
+  mock.module("./IconButton", () => ({
+    IconButton: mock(() => null),
+  }));
+  mock.module("expo-router", () => ({
+    Link: ({children, ...props}: MockChildrenProps) => React.createElement("Link", props, children),
+    router: {
+      back: mock(() => {}),
+      canGoBack: mock(() => true),
+      navigate: mock(() => {}),
+      push: mock(() => {}),
+      replace: mock(() => {}),
+    },
+    Stack: ({children, ...props}: MockChildrenProps) =>
+      React.createElement("Stack", props, children),
+    Tabs: ({children, ...props}: MockChildrenProps) => React.createElement("Tabs", props, children),
+    useLocalSearchParams: mock(() => ({})),
+    useRouter: mock(() => ({
+      back: mock(() => {}),
+      canGoBack: mock(() => true),
+      navigate: mock(() => {}),
+      push: mock(() => {}),
+      replace: mock(() => {}),
+    })),
+    useSegments: mock(() => []),
+  }));
+});
+
 describe("Page", () => {
   const mockNavigation = {
     goBack: mock(() => {}),
@@ -125,4 +213,77 @@ describe("Page", () => {
     );
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it("invokes rightButtonOnClick when right button is pressed", async () => {
+    const handleRightClick = mock(() => {});
+    const {getByText} = renderWithTheme(
+      <Page
+        navigation={mockNavigation}
+        rightButton="Save"
+        rightButtonOnClick={handleRightClick}
+        title="Page"
+      >
+        <Text>Content</Text>
+      </Page>
+    );
+    await act(async () => {
+      fireEvent.press(getByText("Save"));
+      await new Promise((resolve) => setTimeout(resolve, 600));
+    });
+    await waitFor(() => expect(handleRightClick).toHaveBeenCalled());
+  });
+
+  it("renders without header when title and backButton are both absent", () => {
+    const {queryByText} = renderWithTheme(
+      <Page navigation={mockNavigation}>
+        <Text>Plain page</Text>
+      </Page>
+    );
+    expect(queryByText("Plain page")).toBeTruthy();
+  });
+
+  it("renders loading state with loadingText", () => {
+    const {getByText} = renderWithTheme(
+      <Page loading loadingText="Loading data..." navigation={mockNavigation}>
+        <Text>Content</Text>
+      </Page>
+    );
+    expect(getByText("Loading data...")).toBeTruthy();
+  });
+
+  it("invokes router.back when the back button is pressed", () => {
+    routerBack.mockClear();
+    const {getByTestId} = renderWithTheme(
+      <Page backButton navigation={mockNavigation} title="Page">
+        <Text>Content</Text>
+      </Page>
+    );
+    fireEvent.press(getByTestId("icon-button-chevron-left"));
+    expect(routerBack).toHaveBeenCalled();
+  });
+
+  it("invokes router.back when the close button is pressed", () => {
+    routerBack.mockClear();
+    const {getByTestId} = renderWithTheme(
+      <Page closeButton navigation={mockNavigation} title="Page">
+        <Text>Content</Text>
+      </Page>
+    );
+    fireEvent.press(getByTestId("icon-button-xmark"));
+    expect(routerBack).toHaveBeenCalled();
+  });
+
+  it("safely handles a missing rightButtonOnClick callback", async () => {
+    const {getByText} = renderWithTheme(
+      <Page navigation={mockNavigation} rightButton="Go" title="Page">
+        <Text>Content</Text>
+      </Page>
+    );
+    await act(async () => {
+      fireEvent.press(getByText("Go"));
+      await new Promise((resolve) => setTimeout(resolve, 600));
+    });
+    // No crash; the optional-chained call handles the missing prop.
+    expect(getByText("Go")).toBeTruthy();
+  });
 });

package/src/Pagination.test.tsx

@@ -83,4 +83,20 @@ describe("Pagination", () => {
     const {toJSON} = renderWithTheme(<Pagination page={2} setPage={() => {}} totalPages={20} />);
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it("renders 'more' button for large page sets without throwing when pressed", () => {
+    const handleSetPage = mock((_page: number) => {});
+    const {UNSAFE_getAllByProps} = renderWithTheme(
+      <Pagination page={10} setPage={handleSetPage} totalPages={20} />
+    );
+    // Find the "more" pagination buttons (they have iconName="ellipsis")
+    const moreIcons = UNSAFE_getAllByProps({iconName: "ellipsis"});
+    expect(moreIcons.length).toBeGreaterThan(0);
+    const morePressable = moreIcons[0].parent;
+    if (morePressable) {
+      expect(() => fireEvent.press(morePressable)).not.toThrow();
+    }
+    // Pressing "more" does nothing (onClick is no-op)
+    expect(handleSetPage).not.toHaveBeenCalled();
+  });
 });

package/src/PhoneNumberField.test.tsx

@@ -1,4 +1,5 @@
 import {describe, expect, it, mock} from "bun:test";
+import {act, fireEvent} from "@testing-library/react-native";
 
 import {PhoneNumberField} from "./PhoneNumberField";
 import {renderWithTheme} from "./test-utils";
@@ -30,15 +31,6 @@ describe("PhoneNumberField", () => {
     expect(getByDisplayValue("(555) 123-4567")).toBeTruthy();
   });
 
-  it("formats phone number as user types", () => {
-    const handleChange = mock((_value: string) => {});
-    const {toJSON} = renderWithTheme(
-      <PhoneNumberField label="Phone" onChange={handleChange} value="5551234567" />
-    );
-    // Snapshot captures the formatted phone number display
-    expect(toJSON()).toMatchSnapshot();
-  });
-
   it("renders with custom errorText", () => {
     const {getByText} = renderWithTheme(
       <PhoneNumberField
@@ -76,4 +68,49 @@ describe("PhoneNumberField", () => {
     );
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it("calls onBlur callback when provided", async () => {
+    const handleBlur = mock((_value: string) => {});
+    const handleChange = mock((_value: string) => {});
+    const {getByDisplayValue} = renderWithTheme(
+      <PhoneNumberField
+        label="Phone"
+        onBlur={handleBlur}
+        onChange={handleChange}
+        value="(555) 123-4567"
+      />
+    );
+    const input = getByDisplayValue("(555) 123-4567");
+    await act(async () => {
+      fireEvent(input, "blur", {nativeEvent: {text: "(555) 123-4567"}});
+    });
+    expect(handleBlur).toHaveBeenCalled();
+  });
+
+  it("calls onBlur with invalid number and sets an error state", async () => {
+    const handleBlur = mock((_value: string) => {});
+    const handleChange = mock((_value: string) => {});
+    const {getByDisplayValue} = renderWithTheme(
+      <PhoneNumberField label="Phone" onBlur={handleBlur} onChange={handleChange} value="" />
+    );
+    const input = getByDisplayValue("");
+    await act(async () => {
+      fireEvent.changeText(input, "123");
+      fireEvent(input, "blur", {nativeEvent: {text: "123"}});
+    });
+    expect(handleBlur).toHaveBeenCalled();
+  });
+
+  it("handles empty input on blur without error", async () => {
+    const handleBlur = mock((_value: string) => {});
+    const handleChange = mock((_value: string) => {});
+    const {getByDisplayValue} = renderWithTheme(
+      <PhoneNumberField label="Phone" onBlur={handleBlur} onChange={handleChange} value="" />
+    );
+    const input = getByDisplayValue("");
+    await act(async () => {
+      fireEvent(input, "blur", {nativeEvent: {text: ""}});
+    });
+    expect(handleBlur).toHaveBeenCalled();
+  });
 });