@terreno/ui 0.9.3 → 0.11.0

package/src/Toast.test.tsx

@@ -1,8 +1,20 @@
-import {describe, expect, it, mock} from "bun:test";
+import {beforeAll, describe, expect, it, mock} from "bun:test";
+import {render} from "@testing-library/react-native";
+import {Text as RNText} from "react-native";
 
-import {Toast} from "./Toast";
+import {Toast, useToast} from "./Toast";
+import {ToastProvider} from "./ToastNotifications";
 import {renderWithTheme} from "./test-utils";
 
+beforeAll(() => {
+  (global as any).requestAnimationFrame = (callback: FrameRequestCallback) => {
+    return setTimeout(() => callback(Date.now()), 0) as unknown as number;
+  };
+  (global as any).cancelAnimationFrame = (id: number) => {
+    clearTimeout(id);
+  };
+});
+
 describe("Toast", () => {
   it("renders correctly with default props", () => {
     const {toJSON} = renderWithTheme(<Toast title="Test message" />);
@@ -80,3 +92,84 @@ describe("Toast", () => {
     });
   });
 });
+
+describe("useToast", () => {
+  const renderHookWithProvider = (callback: (toast: ReturnType<typeof useToast>) => void) => {
+    let hookResult: ReturnType<typeof useToast> | null = null;
+    const Harness = () => {
+      const toast = useToast();
+      hookResult = toast;
+      return <RNText>harness</RNText>;
+    };
+    render(
+      <ToastProvider>
+        <Harness />
+      </ToastProvider>
+    );
+    if (hookResult) {
+      callback(hookResult);
+    }
+    return hookResult!;
+  };
+
+  it("returns an object with expected methods", () => {
+    const hook = renderHookWithProvider(() => {});
+    expect(typeof hook.show).toBe("function");
+    expect(typeof hook.success).toBe("function");
+    expect(typeof hook.info).toBe("function");
+    expect(typeof hook.warn).toBe("function");
+    expect(typeof hook.error).toBe("function");
+    expect(typeof hook.catch).toBe("function");
+    expect(typeof hook.hide).toBe("function");
+  });
+
+  it("returns empty string from show when provider is not ready", () => {
+    const originalWarn = console.warn;
+    console.warn = mock(() => {});
+    const Harness = () => {
+      const toast = useToast();
+      const result = toast.show("No provider");
+      return <RNText>{result}</RNText>;
+    };
+    // Render without ToastProvider, so useToastNotifications returns no ref
+    const {getByText} = renderWithTheme(<Harness />);
+    expect(getByText("")).toBeTruthy();
+    console.warn = originalWarn;
+  });
+
+  it("calls success, info, warn, error, show via hook without throwing", () => {
+    const hook = renderHookWithProvider(() => {});
+    expect(() => hook.success("success!")).not.toThrow();
+    expect(() => hook.info("info!")).not.toThrow();
+    expect(() => hook.warn("warn!")).not.toThrow();
+    expect(() => hook.error("error!")).not.toThrow();
+    expect(() => hook.show("plain", {variant: "info"})).not.toThrow();
+    expect(() => hook.show("persistent", {persistent: true})).not.toThrow();
+  });
+
+  it("catch handles plain errors by printing the message", () => {
+    const originalError = console.error;
+    console.error = mock(() => {});
+    const hook = renderHookWithProvider(() => {});
+    expect(() => hook.catch(new Error("boom"), "Failed")).not.toThrow();
+    expect(() => hook.catch("string error", "Failed")).not.toThrow();
+    expect(() => hook.catch({error: "something"}, "Failed")).not.toThrow();
+    console.error = originalError;
+  });
+
+  it("catch handles APIError by calling printAPIError", () => {
+    const originalError = console.error;
+    console.error = mock(() => {});
+    const hook = renderHookWithProvider(() => {});
+    const apiError = {
+      errors: [{detail: "Something bad", status: "500", title: "API Error"}],
+    };
+    expect(() => hook.catch(apiError, "Request failed")).not.toThrow();
+    console.error = originalError;
+  });
+
+  it("hide does not throw when id is valid", () => {
+    const hook = renderHookWithProvider(() => {});
+    expect(() => hook.hide("some-id")).not.toThrow();
+  });
+});

package/src/Toast.tsx

@@ -21,7 +21,7 @@ type UseToastVariantOptions = {
 
 type UseToastOptions = {variant?: ToastProps["variant"]} & UseToastVariantOptions;
 
-export function useToast(): {
+export const useToast = (): {
   hide: (id: string) => void;
   success: (title: string, options?: UseToastVariantOptions) => string;
   info: (title: string, options?: UseToastVariantOptions) => string;
@@ -29,7 +29,7 @@ export function useToast(): {
   error: (title: string, options?: UseToastVariantOptions) => string;
   show: (title: string, options?: UseToastOptions) => string;
   catch: (error: any, message?: string, options?: UseToastVariantOptions) => void;
-} {
+} => {
   const toast = useToastNotifications();
   const show = (title: string, options?: UseToastOptions): string => {
     if (!toast?.show) {
@@ -78,7 +78,7 @@ export function useToast(): {
       return show(title, {...options, variant: "warning"});
     },
   };
-}
+};
 
 // TODO: Support secondary version of Toast.
 // TODO: Support dismissible version of Toast. Currently only persistent are dismissible.

package/src/Tooltip.test.tsx

@@ -1,9 +1,26 @@
-import {describe, expect, it} from "bun:test";
+import {beforeAll, describe, expect, it, mock} from "bun:test";
+import {act} from "@testing-library/react-native";
+import {View} from "react-native";
 
 import {Text} from "./Text";
 import {Tooltip} from "./Tooltip";
 import {renderWithTheme} from "./test-utils";
 
+// Mock react-native-portalize so Portal renders inline in tests
+mock.module("react-native-portalize", () => ({
+  Host: ({children}: {children: React.ReactNode}) => <View testID="portal-host">{children}</View>,
+  Portal: ({children}: {children: React.ReactNode}) => <View testID="portal">{children}</View>,
+}));
+
+beforeAll(() => {
+  (global as any).requestAnimationFrame = (callback: FrameRequestCallback) => {
+    return setTimeout(() => callback(Date.now()), 0) as unknown as number;
+  };
+  (global as any).cancelAnimationFrame = (id: number) => {
+    clearTimeout(id);
+  };
+});
+
 describe("Tooltip", () => {
   it("renders children correctly", () => {
     const {getByText} = renderWithTheme(
@@ -86,4 +103,190 @@ describe("Tooltip", () => {
     );
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it("shows tooltip after hover in delay", async () => {
+    const {queryByTestId, toJSON} = renderWithTheme(
+      <Tooltip text="Hover reveals">
+        <Text>Hover me</Text>
+      </Tooltip>
+    );
+
+    const wrapper = toJSON() as any;
+    expect(wrapper).toBeTruthy();
+    expect(queryByTestId("tooltip-container")).toBeNull();
+
+    const tree = toJSON();
+    await act(async () => {
+      // Trigger pointer enter on the wrapper
+      const root = (tree as any).children?.[0];
+      if (root?.props?.onPointerEnter) {
+        root.props.onPointerEnter();
+      }
+    });
+
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 900));
+    });
+
+    expect(queryByTestId("tooltip-container")).toBeTruthy();
+  });
+
+  it("shows tooltip on touch and hides on second touch", async () => {
+    const {queryByTestId, toJSON} = renderWithTheme(
+      <Tooltip text="Touch reveals">
+        <Text>Touch me</Text>
+      </Tooltip>
+    );
+
+    const tree = toJSON() as any;
+    const root = tree.children?.[0];
+
+    await act(async () => {
+      root.props.onTouchStart?.({nativeEvent: {}});
+    });
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 150));
+    });
+
+    expect(queryByTestId("tooltip-container")).toBeTruthy();
+
+    // Second touch should hide
+    const treeAfterShow = toJSON() as any;
+    const updatedRoot = treeAfterShow.children?.[treeAfterShow.children.length - 1];
+    await act(async () => {
+      updatedRoot.props.onTouchStart?.({nativeEvent: {}});
+    });
+
+    expect(queryByTestId("tooltip-container")).toBeNull();
+  });
+
+  it("hides tooltip when onPointerLeave is triggered", async () => {
+    const {queryByTestId, toJSON} = renderWithTheme(
+      <Tooltip text="Hover reveals">
+        <Text>Hover me</Text>
+      </Tooltip>
+    );
+
+    const tree = toJSON() as any;
+    const root = tree.children?.[0];
+
+    await act(async () => {
+      root.props.onPointerEnter?.();
+    });
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 900));
+    });
+
+    expect(queryByTestId("tooltip-container")).toBeTruthy();
+
+    const treeAfter = toJSON() as any;
+    const wrapper = treeAfter.children?.[treeAfter.children.length - 1];
+    await act(async () => {
+      wrapper.props.onPointerLeave?.();
+    });
+
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    });
+
+    expect(queryByTestId("tooltip-container")).toBeNull();
+  });
+
+  it("calls onHoverIn/onHoverOut handlers from children props", async () => {
+    const onHoverIn = mock(() => {});
+    const onHoverOut = mock(() => {});
+    const TestChild: React.FC<{onHoverIn?: () => void; onHoverOut?: () => void}> = ({
+      onHoverIn: _in,
+      onHoverOut: _out,
+    }) => <Text>Child</Text>;
+
+    const {toJSON} = renderWithTheme(
+      <Tooltip text="Hover handlers">
+        <TestChild onHoverIn={onHoverIn} onHoverOut={onHoverOut} />
+      </Tooltip>
+    );
+
+    const tree = toJSON() as any;
+    const root = tree.children?.[0];
+
+    await act(async () => {
+      root.props.onPointerEnter?.();
+    });
+    expect(onHoverIn).toHaveBeenCalled();
+
+    await act(async () => {
+      root.props.onPointerLeave?.();
+    });
+    expect(onHoverOut).toHaveBeenCalled();
+  });
+
+  it("triggers onLayout and exercises getTooltipPosition with overflow cases", async () => {
+    const {queryByTestId, UNSAFE_getAllByType, toJSON} = renderWithTheme(
+      <Tooltip idealPosition="bottom" includeArrow text="Layout test">
+        <Text>Trigger</Text>
+      </Tooltip>
+    );
+
+    const tree = toJSON() as any;
+    const root = tree.children?.[0];
+
+    // Show the tooltip
+    await act(async () => {
+      root.props.onTouchStart?.({nativeEvent: {}});
+    });
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 150));
+    });
+    expect(queryByTestId("tooltip-container")).toBeTruthy();
+
+    // Find any views with onLayout to simulate layout event
+    const {View: ViewComp} = await import("react-native");
+    const allViews = UNSAFE_getAllByType(ViewComp as any);
+    for (const v of allViews) {
+      if ((v.props as any).onLayout) {
+        await act(async () => {
+          (v.props as any).onLayout({
+            nativeEvent: {
+              layout: {height: 100, width: 200, x: 0, y: 0},
+            },
+          });
+        });
+      }
+    }
+  });
+
+  it("renders tooltip with arrow at all idealPositions", async () => {
+    const positions: Array<"top" | "bottom" | "left" | "right"> = [
+      "top",
+      "bottom",
+      "left",
+      "right",
+    ];
+
+    for (const position of positions) {
+      const {toJSON} = renderWithTheme(
+        <Tooltip idealPosition={position} includeArrow text={`${position} tooltip`}>
+          <Text>{position}</Text>
+        </Tooltip>
+      );
+      expect(toJSON()).toBeTruthy();
+    }
+  });
+
+  it("unmount hides tooltip and clears timers", async () => {
+    const {unmount, toJSON} = renderWithTheme(
+      <Tooltip text="Will unmount">
+        <Text>Unmount child</Text>
+      </Tooltip>
+    );
+
+    const tree = toJSON() as any;
+    const root = tree.children?.[0];
+    await act(async () => {
+      root.props.onPointerEnter?.();
+    });
+    unmount();
+    // No assertions needed - just ensuring no crashes on unmount.
+    expect(true).toBe(true);
+  });
 });

package/src/UnifiedAddressAutoComplete.test.tsx

@@ -1,18 +1,9 @@
 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 {renderWithTheme} from "./test-utils";
 import {UnifiedAddressAutoCompleteField} from "./UnifiedAddressAutoComplete";
 
-// Mock react-native-google-places-autocomplete (used by MobileAddressAutocomplete)
-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>
-  )),
-}));
-
 describe("UnifiedAddressAutoCompleteField", () => {
   const defaultProps = {
     handleAddressChange: () => {},
@@ -20,19 +11,24 @@ describe("UnifiedAddressAutoCompleteField", () => {
     inputValue: "",
   };
 
-  it("renders correctly without Google API key (fallback to TextField)", () => {
+  it("renders plain TextField when no API key provided", () => {
     const {toJSON} = renderWithTheme(<UnifiedAddressAutoCompleteField {...defaultProps} />);
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it("component is defined", () => {
-    expect(UnifiedAddressAutoCompleteField).toBeDefined();
-    expect(typeof UnifiedAddressAutoCompleteField).toBe("function");
+  it("renders plain TextField when API key is invalid", () => {
+    const {toJSON} = renderWithTheme(
+      <UnifiedAddressAutoCompleteField {...defaultProps} googleMapsApiKey="invalid!key" />
+    );
+    expect(toJSON()).toMatchSnapshot();
   });
 
-  it("renders with input value", () => {
+  it("renders WebAddressAutocomplete when valid API key provided on web", () => {
     const {toJSON} = renderWithTheme(
-      <UnifiedAddressAutoCompleteField {...defaultProps} inputValue="123 Main St" />
+      <UnifiedAddressAutoCompleteField
+        {...defaultProps}
+        googleMapsApiKey="test-dummy-key-not-real-0123456789"
+      />
     );
     expect(toJSON()).toMatchSnapshot();
   });
@@ -44,10 +40,33 @@ describe("UnifiedAddressAutoCompleteField", () => {
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it("renders with invalid Google API key (falls back to TextField)", () => {
+  it("renders with input value", () => {
     const {toJSON} = renderWithTheme(
-      <UnifiedAddressAutoCompleteField {...defaultProps} googleMapsApiKey="invalid" />
+      <UnifiedAddressAutoCompleteField {...defaultProps} inputValue="123 Main St" />
     );
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it("renders with testID", () => {
+    const {toJSON} = renderWithTheme(
+      <UnifiedAddressAutoCompleteField {...defaultProps} testID="address-field" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("forwards typing to handleAddressChange via the fallback TextField", () => {
+    const handleAddressChange = mock(() => {});
+    const {UNSAFE_getAllByType} = renderWithTheme(
+      <UnifiedAddressAutoCompleteField
+        handleAddressChange={handleAddressChange}
+        handleAutoCompleteChange={() => {}}
+        inputValue=""
+      />
+    );
+    const {TextInput} = require("react-native");
+    const inputs = UNSAFE_getAllByType(TextInput);
+    expect(inputs.length).toBeGreaterThan(0);
+    fireEvent.changeText(inputs[0], "1600 Amphitheatre Pkwy");
+    expect(handleAddressChange).toHaveBeenCalledWith("1600 Amphitheatre Pkwy");
+  });
 });

package/src/UserInactivity.test.tsx

@@ -1,5 +1,6 @@
-import {describe, expect, it, mock} from "bun:test";
+import {describe, expect, it, mock, spyOn} from "bun:test";
 import {act} from "@testing-library/react-native";
+import {Keyboard} from "react-native";
 
 import {Text} from "./Text";
 import {renderWithTheme} from "./test-utils";
@@ -93,4 +94,75 @@ describe("UserInactivity", () => {
     );
     expect(toJSON()).toBeTruthy();
   });
+
+  it("clears any pending timer when unmounted before the timeout fires", () => {
+    const onAction = mock((_active: boolean) => {});
+    const {unmount} = renderWithTheme(
+      <UserInactivity onAction={onAction} timeForInactivity={10_000}>
+        <Text>Test Content</Text>
+      </UserInactivity>
+    );
+
+    act(() => {
+      unmount();
+    });
+
+    expect(onAction).not.toHaveBeenCalled();
+  });
+
+  it("removes keyboard listeners on unmount", () => {
+    const onAction = mock((_active: boolean) => {});
+    const removeHide = mock(() => {});
+    const removeShow = mock(() => {});
+    const addListenerSpy = spyOn(Keyboard, "addListener")
+      .mockReturnValueOnce({remove: removeHide} as any)
+      .mockReturnValueOnce({remove: removeShow} as any);
+
+    const {unmount} = renderWithTheme(
+      <UserInactivity onAction={onAction}>
+        <Text>Test Content</Text>
+      </UserInactivity>
+    );
+
+    act(() => {
+      unmount();
+    });
+
+    expect(addListenerSpy).toHaveBeenCalled();
+    expect(removeHide).toHaveBeenCalled();
+    expect(removeShow).toHaveBeenCalled();
+    addListenerSpy.mockRestore();
+  });
+
+  it("calls onAction with true when activity occurs after inactivity", async () => {
+    const onAction = mock((_active: boolean) => {});
+    let capturedHideCallback: (() => void) | undefined;
+    const addListenerSpy = spyOn(Keyboard, "addListener").mockImplementation(
+      (event: string, callback: () => void) => {
+        if (event === "keyboardDidHide") {
+          capturedHideCallback = callback;
+        }
+        return {remove: mock(() => {})} as any;
+      }
+    );
+
+    renderWithTheme(
+      <UserInactivity onAction={onAction} timeForInactivity={30}>
+        <Text>Test Content</Text>
+      </UserInactivity>
+    );
+
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 80));
+    });
+
+    expect(onAction).toHaveBeenCalledWith(false);
+
+    await act(async () => {
+      capturedHideCallback?.();
+    });
+
+    expect(onAction).toHaveBeenCalledWith(true);
+    addListenerSpy.mockRestore();
+  });
 });