@terreno/ui 0.9.3 → 0.11.0

package/src/SplitPage.test.tsx

@@ -1,5 +1,6 @@
-import {describe, expect, it, mock} from "bun:test";
-import {View} from "react-native";
+import {afterAll, beforeAll, describe, expect, it, mock} from "bun:test";
+import {act} from "@testing-library/react-native";
+import {Dimensions, View} from "react-native";
 
 import {SplitPage} from "./SplitPage";
 import {renderWithTheme} from "./test-utils";
@@ -79,4 +80,229 @@ describe("SplitPage", () => {
     );
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it("returns null when no children and no renderContent", () => {
+    const {toJSON} = renderWithTheme(
+      <SplitPage listViewData={[]} renderListViewItem={() => null} />
+    );
+    expect(toJSON()).toBeNull();
+  });
+
+  it("returns null when tabs count does not match children count", () => {
+    const {toJSON} = renderWithTheme(
+      <SplitPage {...defaultProps} tabs={["Tab 1"]}>
+        <View testID="child-1" />
+        <View testID="child-2" />
+        <View testID="child-3" />
+      </SplitPage>
+    );
+    expect(toJSON()).toBeNull();
+  });
+
+  it("renders with list view header", () => {
+    const {toJSON} = renderWithTheme(
+      <SplitPage
+        {...defaultProps}
+        renderContent={(selectedId) => <View testID={`content-${selectedId}`} />}
+        renderListViewHeader={() => <View testID="list-header" />}
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with custom list view width and max width", () => {
+    const {toJSON} = renderWithTheme(
+      <SplitPage
+        {...defaultProps}
+        listViewMaxWidth={500}
+        listViewWidth={400}
+        renderContent={(selectedId) => <View testID={`content-${selectedId}`} />}
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with listViewExtraData", () => {
+    const {toJSON} = renderWithTheme(
+      <SplitPage
+        {...defaultProps}
+        listViewExtraData={{counter: 1}}
+        renderContent={(selectedId) => <View testID={`content-${selectedId}`} />}
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with keyboard offset", () => {
+    const {toJSON} = renderWithTheme(
+      <SplitPage
+        {...defaultProps}
+        keyboardOffset={100}
+        renderContent={(selectedId) => <View testID={`content-${selectedId}`} />}
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("filters out null children", () => {
+    const {toJSON} = renderWithTheme(
+      <SplitPage {...defaultProps}>
+        <View testID="child-1" />
+        {null}
+        <View testID="child-2" />
+      </SplitPage>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with showItemList true to reset selection", () => {
+    const onSelectionChange = mock(() => {});
+    const {toJSON} = renderWithTheme(
+      <SplitPage
+        {...defaultProps}
+        onSelectionChange={onSelectionChange}
+        renderContent={(selectedId) => <View testID={`content-${selectedId}`} />}
+        showItemList
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with bottomNavBarHeight", () => {
+    const {toJSON} = renderWithTheme(
+      <SplitPage {...defaultProps} bottomNavBarHeight={60}>
+        <View testID="child-1" />
+      </SplitPage>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  describe("desktop viewport (mediaQueryLargerThan('sm') true)", () => {
+    const desktopImpl = () => ({fontScale: 1, height: 1000, scale: 2, width: 1400}) as any;
+    const mobileImpl = () => ({fontScale: 1, height: 812, scale: 2, width: 375}) as any;
+    let originalGet: typeof Dimensions.get;
+    beforeAll(() => {
+      originalGet = Dimensions.get;
+      if (typeof (Dimensions.get as any).mockImplementation === "function") {
+        (Dimensions.get as any).mockImplementation(desktopImpl);
+      } else {
+        (Dimensions.get as any) = desktopImpl;
+      }
+    });
+    afterAll(() => {
+      if (typeof (Dimensions.get as any).mockImplementation === "function") {
+        (Dimensions.get as any).mockImplementation(mobileImpl);
+      } else {
+        (Dimensions.get as any) = originalGet;
+      }
+    });
+
+    it("verifies Dimensions mock is overridden", () => {
+      expect(Dimensions.get("window").width).toBe(1400);
+    });
+
+    it("renders renderList/renderContent on desktop", () => {
+      const {toJSON} = renderWithTheme(
+        <SplitPage
+          {...defaultProps}
+          renderContent={(selectedId) => <View testID={`content-${selectedId}`} />}
+        />
+      );
+      expect(toJSON()).toBeTruthy();
+    });
+
+    it("renders renderList/renderChildrenContent on desktop with 2 children", () => {
+      const {toJSON} = renderWithTheme(
+        <SplitPage {...defaultProps}>
+          <View testID="child-1" />
+          <View testID="child-2" />
+        </SplitPage>
+      );
+      expect(toJSON()).toBeTruthy();
+    });
+
+    it("renders renderChildrenContent with >2 children and tabs on desktop", () => {
+      const {toJSON} = renderWithTheme(
+        <SplitPage {...defaultProps} tabs={["A", "B", "C"]}>
+          <View testID="child-1" />
+          <View testID="child-2" />
+          <View testID="child-3" />
+        </SplitPage>
+      );
+      expect(toJSON()).toBeTruthy();
+    });
+
+    it("renders with listViewWidth/listViewMaxWidth applied", () => {
+      const {toJSON} = renderWithTheme(
+        <SplitPage
+          {...defaultProps}
+          listViewMaxWidth={400}
+          listViewWidth={350}
+          renderContent={(id) => <View testID={`content-${id}`} />}
+        />
+      );
+      expect(toJSON()).toBeTruthy();
+    });
+  });
+
+  describe("item selection callbacks", () => {
+    it("onItemSelect runs onSelectionChange when item clicked via Box press", async () => {
+      const {fireEvent} = await import("@testing-library/react-native");
+      const onSelectionChange = mock(async (_arg: unknown) => {});
+      const {getAllByLabelText} = renderWithTheme(
+        <SplitPage
+          {...defaultProps}
+          onSelectionChange={onSelectionChange}
+          renderContent={(id) => <View testID={`content-${id}`} />}
+        />
+      );
+
+      const boxes = getAllByLabelText("Select");
+      expect(boxes.length).toBeGreaterThan(0);
+      await act(async () => {
+        fireEvent.press(boxes[0]);
+      });
+      expect(onSelectionChange).toHaveBeenCalled();
+    });
+
+    it("selecting an item shows mobile children content when no renderContent", async () => {
+      const {fireEvent} = await import("@testing-library/react-native");
+      const {getAllByLabelText, queryByTestId} = renderWithTheme(
+        <SplitPage {...defaultProps}>
+          <View testID="child-1" />
+          <View testID="child-2" />
+        </SplitPage>
+      );
+      const boxes = getAllByLabelText("Select");
+      await act(async () => {
+        fireEvent.press(boxes[0]);
+      });
+      expect(queryByTestId("swiper-flatlist")).toBeTruthy();
+    });
+
+    it("selection deselect when showItemList becomes true", async () => {
+      const onSelectionChange = mock(async () => {});
+      const {rerender} = renderWithTheme(
+        <SplitPage
+          {...defaultProps}
+          onSelectionChange={onSelectionChange}
+          renderContent={(id) => <View testID={`content-${id}`} />}
+        />
+      );
+
+      await act(async () => {
+        rerender(
+          <SplitPage
+            {...defaultProps}
+            onSelectionChange={onSelectionChange}
+            renderContent={(id) => <View testID={`content-${id}`} />}
+            showItemList
+          />
+        );
+      });
+
+      // showItemList=true triggers onItemDeselect -> onSelectionChange(undefined)
+      expect(onSelectionChange).toHaveBeenCalled();
+    });
+  });
 });

package/src/TapToEdit.test.tsx

@@ -1,4 +1,6 @@
-import {describe, expect, it} from "bun:test";
+import {describe, expect, it, mock} from "bun:test";
+import {act, fireEvent} from "@testing-library/react-native";
+import {Linking} from "react-native";
 
 import {formatAddress, TapToEdit} from "./TapToEdit";
 import {renderWithTheme} from "./test-utils";
@@ -90,6 +92,174 @@ describe("TapToEdit", () => {
     );
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it("renders multiselect type as comma-joined string", () => {
+    const {getByText} = renderWithTheme(
+      <TapToEdit editable={false} title="Tags" type="multiselect" value={["a", "b", "c"]} />
+    );
+    expect(getByText("a, b, c")).toBeTruthy();
+  });
+
+  it("renders url type showing hostname for a valid URL", () => {
+    const {getByText} = renderWithTheme(
+      <TapToEdit editable={false} title="Website" type="url" value="https://example.com/foo" />
+    );
+    expect(getByText("example.com")).toBeTruthy();
+  });
+
+  it("renders url type falling back to raw value for invalid URL", () => {
+    const {getByText} = renderWithTheme(
+      <TapToEdit editable={false} title="Website" type="url" value="not-a-url" />
+    );
+    expect(getByText("not-a-url")).toBeTruthy();
+  });
+
+  it("renders url type with empty value without logging error", () => {
+    const {toJSON} = renderWithTheme(
+      <TapToEdit editable={false} title="Website" type="url" value="" />
+    );
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it("renders address type using formatAddress", () => {
+    const {getByText} = renderWithTheme(
+      <TapToEdit
+        editable={false}
+        title="Home"
+        type="address"
+        value={{
+          address1: "123 Main St",
+          city: "Boston",
+          state: "MA",
+          zipcode: "02101",
+        }}
+      />
+    );
+    expect(getByText(/123 Main St/)).toBeTruthy();
+  });
+
+  it("invokes Linking.openURL for url type when clicked", async () => {
+    const originalOpen = Linking.openURL;
+    const openMock = mock(() => Promise.resolve(true));
+    (Linking as any).openURL = openMock;
+
+    const {getByLabelText} = renderWithTheme(
+      <TapToEdit editable={false} title="Site" type="url" value="https://example.com" />
+    );
+
+    await act(async () => {
+      fireEvent.press(getByLabelText("Link"));
+    });
+    expect(openMock).toHaveBeenCalled();
+
+    (Linking as any).openURL = originalOpen;
+  });
+
+  it("invokes Linking.openURL with google maps for address type when clicked", async () => {
+    const originalOpen = Linking.openURL;
+    const openMock = mock(() => Promise.resolve(true));
+    (Linking as any).openURL = openMock;
+
+    const {getByLabelText} = renderWithTheme(
+      <TapToEdit
+        editable={false}
+        title="Home"
+        type="address"
+        value={{address1: "1 Market St", city: "SF", state: "CA", zipcode: "94105"}}
+      />
+    );
+
+    await act(async () => {
+      fireEvent.press(getByLabelText("Link"));
+    });
+    expect(openMock).toHaveBeenCalled();
+    const arg = openMock.mock.calls[0][0];
+    expect(arg).toContain("google.com/maps");
+
+    (Linking as any).openURL = originalOpen;
+  });
+
+  it("throws when editable is true and setValue is not provided", () => {
+    expect(() =>
+      renderWithTheme(<TapToEdit editable title="Required Save" value="foo" />)
+    ).toThrow();
+  });
+
+  it("enters editing mode when Edit button is pressed", async () => {
+    const setValue = mock(() => {});
+    const {getByLabelText, queryByText} = renderWithTheme(
+      <TapToEdit setValue={setValue} title="Name" value="Jane" />
+    );
+    await act(async () => {
+      fireEvent.press(getByLabelText("Edit"));
+    });
+    expect(queryByText("Cancel")).toBeTruthy();
+    expect(queryByText("Save")).toBeTruthy();
+  });
+
+  it("calls setValue with initial value and exits editing on Cancel", async () => {
+    const setValue = mock(() => {});
+    const {getByLabelText, getByText} = renderWithTheme(
+      <TapToEdit setValue={setValue} title="Name" value="Jane" />
+    );
+    await act(async () => {
+      fireEvent.press(getByLabelText("Edit"));
+    });
+    await act(async () => {
+      fireEvent.press(getByText("Cancel"));
+    });
+    expect(setValue).toHaveBeenCalled();
+  });
+
+  it("clears value when Clear button is pressed", async () => {
+    const setValue = mock(() => {});
+    const onSave = mock(() => Promise.resolve());
+    const {getByLabelText, getByText} = renderWithTheme(
+      <TapToEdit onSave={onSave} setValue={setValue} showClearButton title="Name" value="Jane" />
+    );
+    await act(async () => {
+      fireEvent.press(getByLabelText("Edit"));
+    });
+    await act(async () => {
+      fireEvent.press(getByText("Clear"));
+    });
+    expect(setValue).toHaveBeenCalledWith("");
+    expect(onSave).toHaveBeenCalledWith("");
+  });
+
+  it("calls onSave when Save is pressed", async () => {
+    const setValue = mock(() => {});
+    const onSave = mock(() => Promise.resolve());
+    const {getByLabelText, getByText} = renderWithTheme(
+      <TapToEdit onSave={onSave} setValue={setValue} title="Name" value="Jane" />
+    );
+    await act(async () => {
+      fireEvent.press(getByLabelText("Edit"));
+    });
+    await act(async () => {
+      fireEvent.press(getByText("Save"));
+    });
+    expect(onSave).toHaveBeenCalledWith("Jane");
+  });
+
+  it("logs error when saving without onSave", async () => {
+    const setValue = mock(() => {});
+    const originalError = console.error;
+    const errorMock = mock(() => {});
+    console.error = errorMock;
+
+    const {getByLabelText, getByText} = renderWithTheme(
+      <TapToEdit setValue={setValue} title="Name" value="Jane" />
+    );
+    await act(async () => {
+      fireEvent.press(getByLabelText("Edit"));
+    });
+    await act(async () => {
+      fireEvent.press(getByText("Save"));
+    });
+    expect(errorMock).toHaveBeenCalled();
+    console.error = originalError;
+  });
 });
 
 describe("formatAddress", () => {

package/src/TerrenoProvider.test.tsx

@@ -1,8 +1,23 @@
-import {describe, expect, it} from "bun:test";
-import {render} from "@testing-library/react-native";
+import {beforeAll, describe, expect, it, mock} from "bun:test";
+import {act, render} from "@testing-library/react-native";
 import {Text, View} from "react-native";
 
 import {TerrenoProvider} from "./TerrenoProvider";
+import {useToast} from "./Toast";
+
+interface RafGlobal {
+  requestAnimationFrame?: (callback: FrameRequestCallback) => number;
+  cancelAnimationFrame?: (id: number) => void;
+}
+
+beforeAll(() => {
+  const g = globalThis as RafGlobal;
+  if (!g.requestAnimationFrame) {
+    g.requestAnimationFrame = (callback) =>
+      setTimeout(() => callback(Date.now()), 0) as unknown as number;
+    g.cancelAnimationFrame = (id) => clearTimeout(id);
+  }
+});
 
 describe("TerrenoProvider", () => {
   it("renders children correctly", () => {
@@ -33,4 +48,29 @@ describe("TerrenoProvider", () => {
     );
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it("renders a toast via the configured renderToast prop", async () => {
+    const dismissSpy = mock(() => {});
+    let toastApi: ReturnType<typeof useToast> | null = null;
+
+    const ToastCaller = () => {
+      toastApi = useToast();
+      return <Text>App</Text>;
+    };
+
+    const {queryByText} = render(
+      <TerrenoProvider>
+        <ToastCaller />
+      </TerrenoProvider>
+    );
+
+    expect(toastApi).not.toBeNull();
+
+    await act(async () => {
+      toastApi?.info("Hello from toast", {onDismiss: dismissSpy});
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+
+    expect(queryByText("Hello from toast")).toBeTruthy();
+  });
 });

package/src/TextFieldNumberActionSheet.tsx

@@ -12,7 +12,7 @@ export class NumberPickerActionSheet extends React.Component<
   TextFieldPickerActionSheetProps,
   NumberPickerActionSheetState
 > {
-  render() {
+  render(): React.ReactElement {
     return (
       <ActionSheet bounceOnOpen gestureEnabled ref={this.props.actionSheetRef}>
         <Box marginBottom={8} paddingX={4} width="100%">

package/src/Theme.test.tsx

@@ -1,9 +1,12 @@
 import {describe, expect, it} from "bun:test";
-import {render} from "@testing-library/react-native";
+import {act, render} from "@testing-library/react-native";
 import {Text, View} from "react-native";
 
 import {ThemeProvider, useTheme} from "./Theme";
 
+type ThemeContextValue = ReturnType<typeof useTheme>;
+type ThemeValue = ThemeContextValue["theme"];
+
 const ThemeConsumer = () => {
   const {theme} = useTheme();
   return (
@@ -40,7 +43,7 @@ describe("Theme", () => {
 
   describe("useTheme", () => {
     it("returns theme object", () => {
-      let capturedTheme: any;
+      let capturedTheme: ThemeContextValue | undefined;
       const Capture = () => {
         capturedTheme = useTheme();
         return null;
@@ -52,14 +55,14 @@ describe("Theme", () => {
         </ThemeProvider>
       );
 
-      expect(capturedTheme.theme).toBeDefined();
-      expect(capturedTheme.setTheme).toBeDefined();
-      expect(capturedTheme.setPrimitives).toBeDefined();
-      expect(capturedTheme.resetTheme).toBeDefined();
+      expect(capturedTheme?.theme).toBeDefined();
+      expect(capturedTheme?.setTheme).toBeDefined();
+      expect(capturedTheme?.setPrimitives).toBeDefined();
+      expect(capturedTheme?.resetTheme).toBeDefined();
     });
 
     it("provides surface colors", () => {
-      let theme: any;
+      let theme: ThemeValue | undefined;
       const Capture = () => {
         theme = useTheme().theme;
         return null;
@@ -71,14 +74,14 @@ describe("Theme", () => {
         </ThemeProvider>
       );
 
-      expect(theme.surface).toBeDefined();
-      expect(theme.surface.base).toBeDefined();
-      expect(theme.surface.primary).toBeDefined();
-      expect(theme.surface.error).toBeDefined();
+      expect(theme?.surface).toBeDefined();
+      expect(theme?.surface?.base).toBeDefined();
+      expect(theme?.surface?.primary).toBeDefined();
+      expect(theme?.surface?.error).toBeDefined();
     });
 
     it("provides text colors", () => {
-      let theme: any;
+      let theme: ThemeValue | undefined;
       const Capture = () => {
         theme = useTheme().theme;
         return null;
@@ -90,14 +93,14 @@ describe("Theme", () => {
         </ThemeProvider>
       );
 
-      expect(theme.text).toBeDefined();
-      expect(theme.text.primary).toBeDefined();
-      expect(theme.text.inverted).toBeDefined();
-      expect(theme.text.error).toBeDefined();
+      expect(theme?.text).toBeDefined();
+      expect(theme?.text?.primary).toBeDefined();
+      expect(theme?.text?.inverted).toBeDefined();
+      expect(theme?.text?.error).toBeDefined();
     });
 
     it("provides border colors", () => {
-      let theme: any;
+      let theme: ThemeValue | undefined;
       const Capture = () => {
         theme = useTheme().theme;
         return null;
@@ -109,12 +112,12 @@ describe("Theme", () => {
         </ThemeProvider>
       );
 
-      expect(theme.border).toBeDefined();
-      expect(theme.border.default).toBeDefined();
+      expect(theme?.border).toBeDefined();
+      expect(theme?.border?.default).toBeDefined();
     });
 
     it("provides spacing values", () => {
-      let theme: any;
+      let theme: ThemeValue | undefined;
       const Capture = () => {
         theme = useTheme().theme;
         return null;
@@ -126,14 +129,14 @@ describe("Theme", () => {
         </ThemeProvider>
       );
 
-      expect(theme.spacing).toBeDefined();
-      expect(theme.spacing.sm).toBeDefined();
-      expect(theme.spacing.md).toBeDefined();
-      expect(theme.spacing.lg).toBeDefined();
+      expect(theme?.spacing).toBeDefined();
+      expect(theme?.spacing?.sm).toBeDefined();
+      expect(theme?.spacing?.md).toBeDefined();
+      expect(theme?.spacing?.lg).toBeDefined();
     });
 
     it("provides radius values", () => {
-      let theme: any;
+      let theme: ThemeValue | undefined;
       const Capture = () => {
         theme = useTheme().theme;
         return null;
@@ -145,9 +148,96 @@ describe("Theme", () => {
         </ThemeProvider>
       );
 
-      expect(theme.radius).toBeDefined();
-      expect(theme.radius.default).toBeDefined();
-      expect(theme.radius.rounded).toBeDefined();
+      expect(theme?.radius).toBeDefined();
+      expect(theme?.radius?.default).toBeDefined();
+      expect(theme?.radius?.rounded).toBeDefined();
+    });
+
+    it("updates theme when setTheme is called", () => {
+      let captured: ThemeContextValue | undefined;
+      const Capture = () => {
+        captured = useTheme();
+        return null;
+      };
+      render(
+        <ThemeProvider>
+          <Capture />
+        </ThemeProvider>
+      );
+      act(() => {
+        captured?.setTheme({surface: {base: "error100"}});
+      });
+      expect(captured?.theme.surface.base).toBe("#D33232");
+    });
+
+    it("updates primitives when setPrimitives is called", () => {
+      let captured: ThemeContextValue | undefined;
+      const Capture = () => {
+        captured = useTheme();
+        return null;
+      };
+      render(
+        <ThemeProvider>
+          <Capture />
+        </ThemeProvider>
+      );
+      act(() => {
+        captured?.setPrimitives({neutral000: "#AABBCC"});
+      });
+      expect(captured?.theme.surface.base).toBe("#AABBCC");
+    });
+
+    it("resets theme to default when resetTheme is called", () => {
+      let captured: ThemeContextValue | undefined;
+      const Capture = () => {
+        captured = useTheme();
+        return null;
+      };
+      render(
+        <ThemeProvider>
+          <Capture />
+        </ThemeProvider>
+      );
+      act(() => {
+        captured?.setTheme({surface: {base: "error100"}});
+        captured?.setPrimitives({neutral000: "#123456"});
+      });
+      act(() => {
+        captured?.resetTheme();
+      });
+      expect(captured?.theme.surface.base).toBe("#FFFFFF");
+    });
+
+    it("supports non-object top-level values when setTheme is called", () => {
+      let captured: ThemeContextValue | undefined;
+      const Capture = () => {
+        captured = useTheme();
+        return null;
+      };
+      render(
+        <ThemeProvider>
+          <Capture />
+        </ThemeProvider>
+      );
+      act(() => {
+        captured?.setTheme({primitives: undefined});
+      });
+      expect(captured?.theme).toBeDefined();
+    });
+
+    it("invokes the no-op default context setters when rendered without a provider", () => {
+      let captured: ThemeContextValue | undefined;
+      const Capture = () => {
+        captured = useTheme();
+        return null;
+      };
+      render(<Capture />);
+      // Exercise the default no-op callbacks on the context.
+      expect(() => {
+        captured?.resetTheme();
+        captured?.setPrimitives({neutral000: "#000000"});
+        captured?.setTheme({surface: {base: "neutral000"}});
+      }).not.toThrow();
     });
   });
 });