@terreno/ui 0.10.0 → 0.11.0

package/src/DecimalRangeActionSheet.test.tsx

@@ -1,5 +1,5 @@
-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 {ActionSheet} from "./ActionSheet";
@@ -43,4 +43,55 @@ describe("DecimalRangeActionSheet", () => {
     );
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it("invokes onChange when whole picker changes", () => {
+    const actionSheetRef = createRef<ActionSheet>();
+    const handleChange = mock((_val: string) => {});
+    const {UNSAFE_getAllByProps} = render(
+      <ThemeProvider>
+        <DecimalRangeActionSheet
+          actionSheetRef={actionSheetRef}
+          max={10}
+          min={0}
+          onChange={handleChange}
+          value="5.5"
+        />
+      </ThemeProvider>
+    );
+    // The first Picker is the whole number one (selectedValue: "5")
+    const wholePickers = UNSAFE_getAllByProps({selectedValue: "5"});
+    const whole = wholePickers.find((p) => typeof p.props.onValueChange === "function");
+    act(() => {
+      if (whole) {
+        whole.props.onValueChange(7);
+      }
+    });
+    expect(handleChange).toHaveBeenCalled();
+  });
+
+  it("invokes onChange when decimal picker changes", () => {
+    const actionSheetRef = createRef<ActionSheet>();
+    const handleChange = mock((_val: string) => {});
+    const {UNSAFE_getAllByProps} = render(
+      <ThemeProvider>
+        <DecimalRangeActionSheet
+          actionSheetRef={actionSheetRef}
+          max={10}
+          min={0}
+          onChange={handleChange}
+          value="5.5"
+        />
+      </ThemeProvider>
+    );
+    // The second Picker is the decimal one (selectedValue: "5")
+    const decimalPickers = UNSAFE_getAllByProps({selectedValue: "5"});
+    // Use the last one (second picker)
+    const decimal = decimalPickers[decimalPickers.length - 1];
+    act(() => {
+      if (decimal && typeof decimal.props.onValueChange === "function") {
+        decimal.props.onValueChange(3);
+      }
+    });
+    expect(handleChange).toHaveBeenCalled();
+  });
 });

package/src/EmailField.test.tsx

@@ -103,4 +103,85 @@ describe("EmailField", () => {
     );
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it("calls onBlur with valid email", async () => {
+    const handleBlur = mock((_value: string) => {});
+    const {getByDisplayValue} = renderWithTheme(
+      <EmailField label="Email" onBlur={handleBlur} onChange={() => {}} value="valid@email.com" />
+    );
+
+    const input = getByDisplayValue("valid@email.com");
+    await act(async () => {
+      fireEvent(input, "blur", {nativeEvent: {text: "valid@email.com"}});
+    });
+
+    await waitFor(() => {
+      expect(handleBlur).toHaveBeenCalledWith("valid@email.com");
+    });
+  });
+
+  it("does not call onBlur with invalid email", async () => {
+    const handleBlur = mock((_value: string) => {});
+    const {getByDisplayValue} = renderWithTheme(
+      <EmailField label="Email" onBlur={handleBlur} onChange={() => {}} value="" />
+    );
+
+    const input = getByDisplayValue("");
+    await act(async () => {
+      fireEvent.changeText(input, "invalid-email");
+    });
+    await act(async () => {
+      fireEvent(input, "blur", {nativeEvent: {text: "invalid-email"}});
+    });
+
+    expect(handleBlur).not.toHaveBeenCalled();
+  });
+
+  it("clears local error when typing a valid email after invalid", async () => {
+    const handleChange = mock((_value: string) => {});
+    const {getByDisplayValue, queryByText} = renderWithTheme(
+      <EmailField label="Email" onChange={handleChange} value="" />
+    );
+
+    const input = getByDisplayValue("");
+
+    // Type invalid email first
+    await act(async () => {
+      fireEvent.changeText(input, "bad");
+    });
+    // Trigger blur to set the error
+    await act(async () => {
+      fireEvent(input, "blur", {nativeEvent: {text: "bad"}});
+    });
+
+    await waitFor(() => {
+      expect(queryByText("Invalid email address format")).toBeTruthy();
+    });
+
+    // Now type a valid email to clear the error
+    await act(async () => {
+      fireEvent.changeText(input, "good@email.com");
+    });
+
+    await waitFor(() => {
+      expect(queryByText("Invalid email address format")).toBeFalsy();
+      expect(handleChange).toHaveBeenCalledWith("good@email.com");
+    });
+  });
+
+  it("validates empty string as valid on blur", async () => {
+    const handleBlur = mock((_value: string) => {});
+    const {getByDisplayValue} = renderWithTheme(
+      <EmailField label="Email" onBlur={handleBlur} onChange={() => {}} value="" />
+    );
+
+    const input = getByDisplayValue("");
+    await act(async () => {
+      fireEvent(input, "blur", {nativeEvent: {text: ""}});
+    });
+
+    await waitFor(() => {
+      expect(handleBlur).toHaveBeenCalledWith("");
+    });
+  });
 });

package/src/EmojiSelector.test.tsx

@@ -1,8 +1,21 @@
 import {describe, expect, it, mock} from "bun:test";
+import {act, fireEvent} from "@testing-library/react-native";
 
-import EmojiSelector, {Categories} from "./EmojiSelector";
+import EmojiSelector, {Categories, charFromEmojiObject} from "./EmojiSelector";
 import {renderWithTheme} from "./test-utils";
 
+interface LayoutEvent {
+  nativeEvent: {layout: {height: number; width: number; x: number; y: number}};
+}
+
+interface LayoutRoot {
+  props: {onLayout?: (event: LayoutEvent) => void};
+}
+
+interface RenderItemCell {
+  props: {onPress?: () => void};
+}
+
 describe("EmojiSelector", () => {
   it("renders search bar when showSearchBar is true", () => {
     const {getByPlaceholderText} = renderWithTheme(
@@ -58,4 +71,252 @@ describe("EmojiSelector", () => {
 
     expect(tree.toJSON()).toMatchSnapshot();
   });
+
+  it("renders without tabs", () => {
+    const {toJSON} = renderWithTheme(
+      <EmojiSelector
+        category={Categories.people}
+        columns={6}
+        onEmojiSelected={mock(() => {})}
+        placeholder="Search emojis"
+        showHistory={false}
+        showSearchBar
+        showSectionTitles={false}
+        showTabs={false}
+        theme="#007AFF"
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders without search bar", () => {
+    const {queryByPlaceholderText} = renderWithTheme(
+      <EmojiSelector
+        category={Categories.people}
+        columns={6}
+        onEmojiSelected={mock(() => {})}
+        placeholder="Search emojis"
+        showHistory={false}
+        showSearchBar={false}
+        showSectionTitles
+        showTabs
+        theme="#007AFF"
+      />
+    );
+    expect(queryByPlaceholderText("Search emojis")).toBeNull();
+  });
+
+  it("renders with history enabled", () => {
+    const {toJSON} = renderWithTheme(
+      <EmojiSelector
+        category={Categories.people}
+        columns={6}
+        onEmojiSelected={mock(() => {})}
+        placeholder="Search emojis"
+        showHistory
+        showSearchBar
+        showSectionTitles
+        showTabs
+        theme="#007AFF"
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with all category and shouldInclude filter", () => {
+    const {toJSON} = renderWithTheme(
+      <EmojiSelector
+        category={Categories.all}
+        columns={8}
+        onEmojiSelected={mock(() => {})}
+        placeholder="Search"
+        shouldInclude={(emoji) => emoji.category === "Smileys & Emotion"}
+        showHistory={false}
+        showSearchBar
+        showSectionTitles
+        showTabs
+        theme="#007AFF"
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with history category", () => {
+    const {toJSON} = renderWithTheme(
+      <EmojiSelector
+        category={Categories.history}
+        columns={6}
+        onEmojiSelected={mock(() => {})}
+        placeholder="Search"
+        showHistory
+        showSearchBar
+        showSectionTitles
+        showTabs
+        theme="#007AFF"
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("updates search query when user types in search bar", async () => {
+    const {getByPlaceholderText} = renderWithTheme(
+      <EmojiSelector
+        category={Categories.all}
+        columns={6}
+        onEmojiSelected={mock(() => {})}
+        placeholder="Search emojis"
+        showHistory={false}
+        showSearchBar
+        showSectionTitles
+        showTabs
+        theme="#007AFF"
+      />
+    );
+    const input = getByPlaceholderText("Search emojis");
+    await act(async () => {
+      fireEvent.changeText(input, "smile");
+    });
+    expect(input.props.value).toBe("smile");
+  });
+
+  it("charFromEmojiObject returns a string for a valid emoji", () => {
+    const smiley = {
+      category: "Smileys & Emotion",
+      short_names: ["smiley"],
+      sort_order: 1,
+      unified: "1F603",
+    };
+    expect(charFromEmojiObject(smiley)).toBe("😃");
+  });
+
+  it("exports Categories object with all expected keys", () => {
+    expect(Categories.all).toBeDefined();
+    expect(Categories.emotion).toBeDefined();
+    expect(Categories.people).toBeDefined();
+    expect(Categories.history).toBeDefined();
+    expect(Categories.nature).toBeDefined();
+    expect(Categories.food).toBeDefined();
+    expect(Categories.activities).toBeDefined();
+    expect(Categories.places).toBeDefined();
+    expect(Categories.objects).toBeDefined();
+    expect(Categories.symbols).toBeDefined();
+    expect(Categories.flags).toBeDefined();
+  });
+
+  it("handles layout event to compute emoji list and set ready state", async () => {
+    const {toJSON, root} = renderWithTheme(
+      <EmojiSelector
+        category={Categories.people}
+        columns={6}
+        onEmojiSelected={mock(() => {})}
+        placeholder="Search"
+        showHistory={false}
+        showSearchBar
+        showSectionTitles
+        showTabs
+        theme="#007AFF"
+      />
+    );
+    // Trigger the onLayout callback so state moves to ready.
+    await act(async () => {
+      (root as LayoutRoot).props.onLayout?.({
+        nativeEvent: {layout: {height: 600, width: 360, x: 0, y: 0}},
+      });
+    });
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it("switches categories when a tab is pressed after layout", async () => {
+    const {root, UNSAFE_getAllByType} = renderWithTheme(
+      <EmojiSelector
+        category={Categories.people}
+        columns={6}
+        onEmojiSelected={mock(() => {})}
+        placeholder="Search"
+        showHistory={false}
+        showSearchBar
+        showSectionTitles
+        showTabs
+        theme="#007AFF"
+      />
+    );
+    await act(async () => {
+      (root as LayoutRoot).props.onLayout?.({
+        nativeEvent: {layout: {height: 600, width: 360, x: 0, y: 0}},
+      });
+    });
+    const {TouchableOpacity} = require("react-native");
+    const tabs = UNSAFE_getAllByType(TouchableOpacity);
+    expect(tabs.length).toBeGreaterThan(0);
+    // Press the first tab (e.g., "Smileys & Emotion") to exercise handleTabSelect.
+    await act(async () => {
+      tabs[0].props.onPress?.();
+    });
+  });
+
+  it("invokes onEmojiSelected when an emoji cell is pressed", async () => {
+    const onEmojiSelected = mock(() => {});
+    const {root, UNSAFE_getAllByType} = renderWithTheme(
+      <EmojiSelector
+        category={Categories.emotion}
+        columns={6}
+        onEmojiSelected={onEmojiSelected}
+        placeholder="Search"
+        showHistory
+        showSearchBar={false}
+        showSectionTitles
+        showTabs={false}
+        theme="#007AFF"
+      />
+    );
+    await act(async () => {
+      (root as LayoutRoot).props.onLayout?.({
+        nativeEvent: {layout: {height: 600, width: 360, x: 0, y: 0}},
+      });
+    });
+
+    const {FlatList} = require("react-native");
+    const [list] = UNSAFE_getAllByType(FlatList);
+    expect(list).toBeTruthy();
+    const data = list.props.data ?? [];
+    expect(data.length).toBeGreaterThan(0);
+    const first = data[0];
+    const cell = list.props.renderItem({index: 0, item: first});
+    // Invoke the emoji cell onPress to exercise handleEmojiSelect + addToHistoryAsync.
+    (cell.props as RenderItemCell["props"]).onPress?.();
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 20));
+    });
+    expect(onEmojiSelected).toHaveBeenCalled();
+  });
+
+  it("filters the emoji list when a search query is entered", async () => {
+    const {getByPlaceholderText, UNSAFE_getAllByType, root} = renderWithTheme(
+      <EmojiSelector
+        category={Categories.all}
+        columns={6}
+        onEmojiSelected={mock(() => {})}
+        placeholder="Search emojis"
+        showHistory={false}
+        showSearchBar
+        showSectionTitles
+        showTabs
+        theme="#007AFF"
+      />
+    );
+    await act(async () => {
+      (root as LayoutRoot).props.onLayout?.({
+        nativeEvent: {layout: {height: 600, width: 360, x: 0, y: 0}},
+      });
+    });
+
+    const input = getByPlaceholderText("Search emojis");
+    await act(async () => {
+      fireEvent.changeText(input, "smile");
+    });
+
+    const {FlatList} = require("react-native");
+    const [list] = UNSAFE_getAllByType(FlatList);
+    expect(list.props.data.length).toBeGreaterThan(0);
+  });
 });

package/src/HeightActionSheet.test.tsx

@@ -1,5 +1,5 @@
-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 {ActionSheet} from "./ActionSheet";
@@ -31,4 +31,59 @@ describe("HeightActionSheet", () => {
     );
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it("renders with title and min/max values", () => {
+    const actionSheetRef = createRef<ActionSheet>();
+    const {getByText} = render(
+      <ThemeProvider>
+        <HeightActionSheet
+          actionSheetRef={actionSheetRef}
+          max={84}
+          min={36}
+          onChange={() => {}}
+          title="Select Height"
+          value="60"
+        />
+      </ThemeProvider>
+    );
+    expect(getByText("Select Height")).toBeTruthy();
+  });
+
+  it("invokes onChange when feet picker changes", () => {
+    const actionSheetRef = createRef<ActionSheet>();
+    const handleChange = mock((_val: string) => {});
+    const {UNSAFE_getAllByProps} = render(
+      <ThemeProvider>
+        <HeightActionSheet actionSheetRef={actionSheetRef} onChange={handleChange} value="72" />
+      </ThemeProvider>
+    );
+    // feet picker has selectedValue "6" (72 / 12)
+    const feetPickers = UNSAFE_getAllByProps({selectedValue: "6"});
+    const feetPicker = feetPickers.find((p) => typeof p.props.onValueChange === "function");
+    act(() => {
+      if (feetPicker) {
+        feetPicker.props.onValueChange(5);
+      }
+    });
+    expect(handleChange).toHaveBeenCalled();
+  });
+
+  it("invokes onChange when inches picker changes", () => {
+    const actionSheetRef = createRef<ActionSheet>();
+    const handleChange = mock((_val: string) => {});
+    const {UNSAFE_getAllByProps} = render(
+      <ThemeProvider>
+        <HeightActionSheet actionSheetRef={actionSheetRef} onChange={handleChange} value="73" />
+      </ThemeProvider>
+    );
+    // inches picker has selectedValue "1" (73 % 12)
+    const inchPickers = UNSAFE_getAllByProps({selectedValue: "1"});
+    const inchPicker = inchPickers.find((p) => typeof p.props.onValueChange === "function");
+    act(() => {
+      if (inchPicker) {
+        inchPicker.props.onValueChange(5);
+      }
+    });
+    expect(handleChange).toHaveBeenCalled();
+  });
 });

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