@terreno/ui 0.9.3 → 0.11.0

package/src/ActionSheet.test.tsx

@@ -1,11 +1,20 @@
-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 {createRef} from "react";
 import {Text} from "react-native";
 
-import {ActionSheet, getDeviceHeight, getElevation} from "./ActionSheet";
+import {ActionSheet, getDeviceHeight, getElevation, waitAsync} from "./ActionSheet";
 import {ThemeProvider} from "./Theme";
 
+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("ActionSheet", () => {
   it("component is defined", () => {
     expect(ActionSheet).toBeDefined();
@@ -48,6 +57,249 @@ describe("ActionSheet", () => {
     expect(toJSON()).toMatchSnapshot();
   });
 
+  it("show() sets modalVisible to true", () => {
+    const ref = createRef<ActionSheet>();
+    render(
+      <ThemeProvider>
+        <ActionSheet ref={ref}>
+          <Text>Content</Text>
+        </ActionSheet>
+      </ThemeProvider>
+    );
+    act(() => {
+      ref.current?.show();
+    });
+    expect(ref.current?.state.modalVisible).toBe(true);
+  });
+
+  it("show() followed by hide() calls hide animation path", () => {
+    const ref = createRef<ActionSheet>();
+    render(
+      <ThemeProvider>
+        <ActionSheet closeAnimationDuration={1} ref={ref}>
+          <Text>Content</Text>
+        </ActionSheet>
+      </ThemeProvider>
+    );
+    act(() => {
+      ref.current?.show();
+    });
+    expect(ref.current?.state.modalVisible).toBe(true);
+    act(() => {
+      ref.current?.hide();
+    });
+    // hide() does not immediately flip modalVisible (it animates first)
+    expect(ref.current).toBeTruthy();
+  });
+
+  it("setModalVisible does nothing when state already matches", () => {
+    const ref = createRef<ActionSheet>();
+    render(
+      <ThemeProvider>
+        <ActionSheet ref={ref}>
+          <Text>Content</Text>
+        </ActionSheet>
+      </ThemeProvider>
+    );
+    // modal starts hidden, call hide again (setModalVisible(false)) - state stays hidden
+    act(() => {
+      ref.current?.hide();
+    });
+    expect(ref.current?.state.modalVisible).toBe(false);
+  });
+
+  it("snapToOffset does not throw when called before layout", () => {
+    const ref = createRef<ActionSheet>();
+    render(
+      <ThemeProvider>
+        <ActionSheet ref={ref}>
+          <Text>Content</Text>
+        </ActionSheet>
+      </ThemeProvider>
+    );
+    expect(() => ref.current?.snapToOffset(100)).not.toThrow();
+  });
+
+  it("renders with elevation prop", () => {
+    const ref = createRef<ActionSheet>();
+    const {toJSON} = render(
+      <ThemeProvider>
+        <ActionSheet elevation={10} ref={ref}>
+          <Text>Elevated</Text>
+        </ActionSheet>
+      </ThemeProvider>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with indicator color", () => {
+    const ref = createRef<ActionSheet>();
+    const {toJSON} = render(
+      <ThemeProvider>
+        <ActionSheet indicatorColor="red" ref={ref}>
+          <Text>Indicator</Text>
+        </ActionSheet>
+      </ThemeProvider>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with initialOffsetFromBottom", () => {
+    const ref = createRef<ActionSheet>();
+    const {toJSON} = render(
+      <ThemeProvider>
+        <ActionSheet initialOffsetFromBottom={0.5} ref={ref}>
+          <Text>Offset</Text>
+        </ActionSheet>
+      </ThemeProvider>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with bottomOffset", () => {
+    const ref = createRef<ActionSheet>();
+    const {toJSON} = render(
+      <ThemeProvider>
+        <ActionSheet bottomOffset={20} ref={ref}>
+          <Text>Bottom</Text>
+        </ActionSheet>
+      </ThemeProvider>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with closable=false and persistent", () => {
+    const ref = createRef<ActionSheet>();
+    const {toJSON} = render(
+      <ThemeProvider>
+        <ActionSheet closable={false} ref={ref}>
+          <Text>Persistent</Text>
+        </ActionSheet>
+      </ThemeProvider>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with custom containerStyle", () => {
+    const ref = createRef<ActionSheet>();
+    const {toJSON} = render(
+      <ThemeProvider>
+        <ActionSheet containerStyle={{backgroundColor: "blue"}} ref={ref}>
+          <Text>Styled</Text>
+        </ActionSheet>
+      </ThemeProvider>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("invokes onOpen when modal is shown", () => {
+    const ref = createRef<ActionSheet>();
+    const handleOpen = mock(() => {});
+    render(
+      <ThemeProvider>
+        <ActionSheet onOpen={handleOpen} ref={ref}>
+          <Text>Open</Text>
+        </ActionSheet>
+      </ThemeProvider>
+    );
+    act(() => {
+      ref.current?.show();
+    });
+    expect(ref.current?.state.modalVisible).toBe(true);
+  });
+
+  it("_onRequestClose hides modal when closeOnPressBack is true", () => {
+    const ref = createRef<ActionSheet>();
+    render(
+      <ThemeProvider>
+        <ActionSheet closeAnimationDuration={1} closeOnPressBack ref={ref}>
+          <Text>Close</Text>
+        </ActionSheet>
+      </ThemeProvider>
+    );
+    act(() => {
+      ref.current?.show();
+    });
+    expect(() => (ref.current as any)._onRequestClose()).not.toThrow();
+  });
+
+  it("_onTouchBackdrop hides modal when closeOnTouchBackdrop is true", () => {
+    const ref = createRef<ActionSheet>();
+    render(
+      <ThemeProvider>
+        <ActionSheet closeAnimationDuration={1} closeOnTouchBackdrop ref={ref}>
+          <Text>Backdrop</Text>
+        </ActionSheet>
+      </ThemeProvider>
+    );
+    act(() => {
+      ref.current?.show();
+    });
+    expect(() => (ref.current as any)._onTouchBackdrop()).not.toThrow();
+  });
+
+  it("_onRequestClose does not hide when closeOnPressBack is false", () => {
+    const ref = createRef<ActionSheet>();
+    render(
+      <ThemeProvider>
+        <ActionSheet closeOnPressBack={false} ref={ref}>
+          <Text>NoClose</Text>
+        </ActionSheet>
+      </ThemeProvider>
+    );
+    act(() => {
+      ref.current?.show();
+    });
+    (ref.current as any)._onRequestClose();
+    expect(ref.current?.state.modalVisible).toBe(true);
+  });
+
+  it("_onTouchBackdrop does not hide when closeOnTouchBackdrop is false", () => {
+    const ref = createRef<ActionSheet>();
+    render(
+      <ThemeProvider>
+        <ActionSheet closeOnTouchBackdrop={false} ref={ref}>
+          <Text>NoBackdrop</Text>
+        </ActionSheet>
+      </ThemeProvider>
+    );
+    act(() => {
+      ref.current?.show();
+    });
+    (ref.current as any)._onTouchBackdrop();
+    expect(ref.current?.state.modalVisible).toBe(true);
+  });
+
+  it("_onScroll does not throw", () => {
+    const ref = createRef<ActionSheet>();
+    render(
+      <ThemeProvider>
+        <ActionSheet ref={ref}>
+          <Text>Scroll</Text>
+        </ActionSheet>
+      </ThemeProvider>
+    );
+    expect(() =>
+      (ref.current as any)._onScroll({
+        nativeEvent: {contentOffset: {x: 0, y: 10}},
+      })
+    ).not.toThrow();
+  });
+
+  it("_onTouchStart and _onTouchMove do not throw", () => {
+    const ref = createRef<ActionSheet>();
+    render(
+      <ThemeProvider>
+        <ActionSheet ref={ref}>
+          <Text>Touch</Text>
+        </ActionSheet>
+      </ThemeProvider>
+    );
+    expect(() => (ref.current as any)._onTouchStart()).not.toThrow();
+    expect(() => (ref.current as any)._onTouchMove()).not.toThrow();
+    expect(() => (ref.current as any)._onTouchEnd()).not.toThrow();
+  });
+
   describe("getDeviceHeight", () => {
     it("returns a number", () => {
       const height = getDeviceHeight(false);
@@ -74,4 +326,11 @@ describe("ActionSheet", () => {
       expect(result).toHaveProperty("boxShadow");
     });
   });
+
+  describe("waitAsync", () => {
+    it("resolves after the specified time", async () => {
+      const result = await waitAsync(1);
+      expect(result).toBeNull();
+    });
+  });
 });

package/src/AddressField.test.tsx

@@ -1,5 +1,6 @@
 import {afterEach, beforeEach, describe, expect, it, mock} from "bun:test";
 import {fireEvent} from "@testing-library/react-native";
+import type {ReactTestInstance} from "react-test-renderer";
 
 import {AddressField} from "./AddressField";
 import {renderWithTheme} from "./test-utils";
@@ -117,4 +118,53 @@ describe("AddressField", () => {
     expect(address1Input.props.accessibilityState.disabled).toBe(true);
     expect(cityInput.props.accessibilityState.disabled).toBe(true);
   });
+
+  it("calls onChange when address2 changes", () => {
+    const {getByTestId} = renderWithTheme(
+      <AddressField {...defaultProps} onBlur={mockOnBlur} onChange={mockOnChange} />
+    );
+    fireEvent.changeText(getByTestId("test-address-address2"), "Suite 500");
+    expect(mockOnChange).toHaveBeenCalledWith({...defaultValue, address2: "Suite 500"});
+  });
+
+  it("calls onChange when countyName and countyCode change", () => {
+    const {getByTestId} = renderWithTheme(
+      <AddressField {...defaultProps} includeCounty onBlur={mockOnBlur} onChange={mockOnChange} />
+    );
+    fireEvent.changeText(getByTestId("test-address-county"), "Clark");
+    expect(mockOnChange).toHaveBeenCalledWith({...defaultValue, countyName: "Clark"});
+    fireEvent.changeText(getByTestId("test-address-county-code"), "999");
+    expect(mockOnChange).toHaveBeenCalledWith({...defaultValue, countyCode: "999"});
+  });
+
+  it("renders without throwing when value is undefined", () => {
+    expect(() =>
+      renderWithTheme(
+        <AddressField onBlur={mockOnBlur} onChange={mockOnChange} testID="no-value" />
+      )
+    ).not.toThrow();
+  });
+
+  it("invokes autocomplete callbacks with merged values", () => {
+    const {UNSAFE_getAllByProps} = renderWithTheme(
+      <AddressField {...defaultProps} onBlur={mockOnBlur} onChange={mockOnChange} />
+    );
+    const autocompletes = UNSAFE_getAllByProps({}).filter(
+      (el: ReactTestInstance) =>
+        typeof el.props?.handleAutoCompleteChange === "function" &&
+        typeof el.props?.handleAddressChange === "function"
+    );
+    expect(autocompletes.length).toBeGreaterThan(0);
+    const ac = autocompletes[0];
+    // Trigger handleAddressChange for address1
+    ac.props.handleAddressChange("456 Oak Ave");
+    expect(mockOnChange).toHaveBeenCalledWith({...defaultValue, address1: "456 Oak Ave"});
+    // Trigger handleAutoCompleteChange with a new address object
+    ac.props.handleAutoCompleteChange({city: "Chicago", state: "IL"});
+    expect(mockOnChange).toHaveBeenCalledWith({
+      ...defaultValue,
+      city: "Chicago",
+      state: "IL",
+    });
+  });
 });

package/src/Banner.test.tsx

@@ -103,4 +103,26 @@ describe("Banner", () => {
       expect(handleClick).toHaveBeenCalled();
     });
   });
+
+  it("invokes buttonOnClick when icon button is pressed", async () => {
+    const handleClick = mock(() => Promise.resolve());
+    const {getByText} = renderWithTheme(
+      <Banner
+        buttonIconName="arrow-right"
+        buttonOnClick={handleClick}
+        buttonText="Go"
+        id="test-icon-banner"
+        text="Banner"
+      />
+    );
+
+    await act(async () => {
+      fireEvent.press(getByText("Go"));
+      await new Promise((resolve) => setTimeout(resolve, 100));
+    });
+
+    await waitFor(() => {
+      expect(handleClick).toHaveBeenCalled();
+    });
+  });
 });

package/src/Banner.tsx

@@ -86,9 +86,9 @@ const BannerButton = ({
   );
 };
 
-function getKey(id: string): string {
+const getKey = (id: string): string => {
   return `@TerrenoUI:${id}`;
-}
+};
 
 export const hideBanner = (id: string): Promise<void> => {
   console.debug(`[banner] Hiding ${getKey(id)} `);

package/src/Box.test.tsx

@@ -659,4 +659,222 @@ describe("Box", () => {
       expect(component.toJSON()).toMatchSnapshot();
     });
   });
+
+  describe("edge case warnings and fallbacks", () => {
+    it("returns empty style when border prop is falsy", () => {
+      const {root} = renderWithTheme(<Box border={undefined as any} />);
+      expect(root).toBeTruthy();
+    });
+
+    it("returns empty style when borderBottom prop is falsy", () => {
+      const {root} = renderWithTheme(<Box borderBottom={undefined as any} />);
+      expect(root).toBeTruthy();
+    });
+
+    it("returns empty style when borderLeft prop is falsy", () => {
+      const {root} = renderWithTheme(<Box borderLeft={undefined as any} />);
+      expect(root).toBeTruthy();
+    });
+
+    it("returns empty style when borderRight prop is falsy", () => {
+      const {root} = renderWithTheme(<Box borderRight={undefined as any} />);
+      expect(root).toBeTruthy();
+    });
+
+    it("returns empty style when borderTop prop is falsy", () => {
+      const {root} = renderWithTheme(<Box borderTop={undefined as any} />);
+      expect(root).toBeTruthy();
+    });
+
+    it("warns when invalid height value is provided", () => {
+      const warnSpy = spyOn(console, "warn").mockImplementation(() => {});
+      renderWithTheme(<Box height={"abc" as any} />);
+      expect(warnSpy).toHaveBeenCalled();
+      warnSpy.mockRestore();
+    });
+
+    it("warns when invalid maxHeight value is provided", () => {
+      const warnSpy = spyOn(console, "warn").mockImplementation(() => {});
+      renderWithTheme(<Box maxHeight={"xyz" as any} />);
+      expect(warnSpy).toHaveBeenCalled();
+      warnSpy.mockRestore();
+    });
+
+    it("warns when invalid maxWidth value is provided", () => {
+      const warnSpy = spyOn(console, "warn").mockImplementation(() => {});
+      renderWithTheme(<Box maxWidth={"abc" as any} />);
+      expect(warnSpy).toHaveBeenCalled();
+      warnSpy.mockRestore();
+    });
+
+    it("warns when invalid minHeight value is provided", () => {
+      const warnSpy = spyOn(console, "warn").mockImplementation(() => {});
+      renderWithTheme(<Box minHeight={"abc" as any} />);
+      expect(warnSpy).toHaveBeenCalled();
+      warnSpy.mockRestore();
+    });
+
+    it("warns when invalid minWidth value is provided", () => {
+      const warnSpy = spyOn(console, "warn").mockImplementation(() => {});
+      renderWithTheme(<Box minWidth={"abc" as any} />);
+      expect(warnSpy).toHaveBeenCalled();
+      warnSpy.mockRestore();
+    });
+
+    it("warns when invalid width value is provided", () => {
+      const warnSpy = spyOn(console, "warn").mockImplementation(() => {});
+      renderWithTheme(<Box width={"abc" as any} />);
+      expect(warnSpy).toHaveBeenCalled();
+      warnSpy.mockRestore();
+    });
+
+    it("applies mdDirection only when mediaQuery is md+", () => {
+      const {root} = renderWithTheme(<Box mdDirection="row" />);
+      expect(root).toBeTruthy();
+    });
+
+    it("applies lgDirection only when mediaQuery is lg", () => {
+      const {root} = renderWithTheme(<Box lgDirection="column" />);
+      expect(root).toBeTruthy();
+    });
+
+    it("applies width with border adds 4 pixels", () => {
+      const {root} = renderWithTheme(<Box border="default" width={100} />);
+      const view = root.findByType("View");
+      expect(view.props.style.width).toBe(104);
+    });
+
+    it("applies height with border adds 4 pixels", () => {
+      const {root} = renderWithTheme(<Box border="default" height={80} />);
+      const view = root.findByType("View");
+      expect(view.props.style.height).toBe(84);
+    });
+
+    it("warns when wrap is combined with alignItems on native", () => {
+      const warnSpy = spyOn(console, "warn").mockImplementation(() => {});
+      renderWithTheme(<Box alignItems="center" wrap />);
+      expect(warnSpy).toHaveBeenCalled();
+      warnSpy.mockRestore();
+    });
+
+    it("applies dangerouslySetInlineStyle overrides", () => {
+      const {root} = renderWithTheme(
+        <Box dangerouslySetInlineStyle={{__style: {backgroundColor: "red"}}} />
+      );
+      const view = root.findByType("View");
+      expect(view.props.style.backgroundColor).toBe("red");
+    });
+
+    it("handles rounding='circle' with width/height", () => {
+      const {root} = renderWithTheme(<Box height={40} rounding="circle" width={40} />);
+      const view = root.findByType("View");
+      expect(view.props.style.borderRadius).toBe(40);
+    });
+
+    it("warns when rounding='circle' without width/height", () => {
+      const warnSpy = spyOn(console, "warn").mockImplementation(() => {});
+      renderWithTheme(<Box rounding="circle" />);
+      expect(warnSpy).toHaveBeenCalled();
+      warnSpy.mockRestore();
+    });
+
+    it("applies shadow on ios/web", () => {
+      const {root} = renderWithTheme(<Box shadow />);
+      const view = root.findByType("View");
+      expect(view.props.style.boxShadow).toBeDefined();
+    });
+
+    it("applies overflow='scroll'", () => {
+      const {root} = renderWithTheme(<Box overflow="scroll" />);
+      const view = root.findByType("View");
+      expect(view.props.style.overflow).toBe("scroll");
+    });
+
+    it("applies overflow='scrollY'", () => {
+      const {root} = renderWithTheme(<Box overflow="scrollY" />);
+      const view = root.findByType("View");
+      expect(view.props.style.overflow).toBe("scroll");
+    });
+
+    it("applies position='absolute'", () => {
+      const {root} = renderWithTheme(<Box position="absolute" />);
+      const view = root.findByType("View");
+      expect(view.props.style.position).toBe("absolute");
+    });
+
+    it("applies zIndex", () => {
+      const {root} = renderWithTheme(<Box zIndex={10} />);
+      const view = root.findByType("View");
+      expect(view.props.style.zIndex).toBe(10);
+    });
+
+    it("applies top/left/right/bottom offsets", () => {
+      const {root} = renderWithTheme(<Box bottom left position="absolute" right top />);
+      const view = root.findByType("View");
+      expect(view.props.style.top).toBe(0);
+      expect(view.props.style.left).toBe(0);
+      expect(view.props.style.right).toBe(0);
+      expect(view.props.style.bottom).toBe(0);
+    });
+
+    it("fires onScroll when scroll is enabled", async () => {
+      const onScroll = mock(() => {});
+      const {root} = renderWithTheme(
+        <Box onScroll={onScroll} scroll>
+          <Text>Scrollable</Text>
+        </Box>
+      );
+      const scrollView = root.findByType("ScrollView" as any);
+      await act(async () => {
+        scrollView.props.onScroll?.({nativeEvent: {contentOffset: {y: 100}}});
+      });
+      expect(onScroll).toHaveBeenCalledWith(100);
+    });
+
+    it("invokes onHoverStart/onHoverEnd callbacks", async () => {
+      const onHoverStart = mock(() => {});
+      const onHoverEnd = mock(() => {});
+      const {root} = renderWithTheme(
+        <Box onHoverEnd={onHoverEnd} onHoverStart={onHoverStart}>
+          <Text>Hover</Text>
+        </Box>
+      );
+      const view = root.findByType("View");
+      await act(async () => {
+        await view.props.onPointerEnter?.();
+      });
+      await act(async () => {
+        await view.props.onPointerLeave?.();
+      });
+      expect(onHoverStart).toHaveBeenCalled();
+      expect(onHoverEnd).toHaveBeenCalled();
+    });
+
+    it("exposes scrollTo and scrollToEnd through ref", () => {
+      const ref = React.createRef<any>();
+      renderWithTheme(
+        <Box ref={ref} scroll>
+          <Text>Content</Text>
+        </Box>
+      );
+      expect(typeof ref.current?.scrollTo).toBe("function");
+      expect(typeof ref.current?.scrollToEnd).toBe("function");
+      // Call them to cover the function bodies
+      ref.current?.scrollTo(100);
+      ref.current?.scrollToEnd();
+    });
+
+    it("invokes onClick with haptic feedback", async () => {
+      const onClick = mock(() => Promise.resolve());
+      const {getByLabelText} = renderWithTheme(
+        <Box accessibilityHint="" accessibilityLabel="Press" onClick={onClick}>
+          <Text>Click</Text>
+        </Box>
+      );
+      await act(async () => {
+        fireEvent.press(getByLabelText("Press"));
+      });
+      expect(onClick).toHaveBeenCalled();
+    });
+  });
 });

package/src/Button.test.tsx

@@ -157,4 +157,75 @@ describe("Button", () => {
     const {getByLabelText} = renderWithTheme(<Button onClick={() => {}} text="Accessible" />);
     expect(getByLabelText("Accessible")).toBeTruthy();
   });
+
+  it("invokes onClick when confirmation primary button is pressed", async () => {
+    const handleClick = mock(() => Promise.resolve());
+    const {getByText, queryByText} = renderWithTheme(
+      <Button
+        confirmationText="Confirm action?"
+        modalTitle="Confirm Title"
+        onClick={handleClick}
+        text="Press Me"
+        withConfirmation
+      />
+    );
+
+    await act(async () => {
+      fireEvent.press(getByText("Press Me"));
+      await new Promise((resolve) => setTimeout(resolve, 600));
+    });
+
+    // Wait for confirmation modal
+    await waitFor(
+      () => {
+        expect(queryByText("Confirm Title")).toBeTruthy();
+      },
+      {timeout: 2000}
+    );
+
+    await act(async () => {
+      fireEvent.press(getByText("Confirm"));
+      await new Promise((resolve) => setTimeout(resolve, 100));
+    });
+
+    await waitFor(() => {
+      expect(handleClick).toHaveBeenCalled();
+    });
+  });
+
+  it("dismisses confirmation modal when secondary button is pressed", async () => {
+    const handleClick = mock(() => Promise.resolve());
+    const {getByText, queryByText} = renderWithTheme(
+      <Button
+        confirmationText="Confirm action?"
+        modalTitle="Confirm Title"
+        onClick={handleClick}
+        text="Press Me"
+        withConfirmation
+      />
+    );
+
+    await act(async () => {
+      fireEvent.press(getByText("Press Me"));
+      await new Promise((resolve) => setTimeout(resolve, 600));
+    });
+
+    await waitFor(
+      () => {
+        expect(queryByText("Cancel")).toBeTruthy();
+      },
+      {timeout: 2000}
+    );
+
+    // Cancel does not throw and does not invoke onClick
+    expect(() => fireEvent.press(getByText("Cancel"))).not.toThrow();
+    expect(handleClick).not.toHaveBeenCalled();
+  });
+
+  it("renders with tooltip on desktop (wrapped in Tooltip)", () => {
+    const {toJSON} = renderWithTheme(
+      <Button onClick={() => {}} text="Hover me" tooltipText="Tooltip text" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
 });