@terreno/ui 0.9.3 → 0.11.0

package/src/OpenAPIContext.test.tsx

@@ -1,10 +1,76 @@
-import {describe, expect, it} from "bun:test";
-import {render} from "@testing-library/react-native";
+import {afterEach, beforeEach, describe, expect, it, mock} from "bun:test";
+import {render, waitFor} from "@testing-library/react-native";
 import {Text} from "react-native";
 
-import {OpenAPIProvider} from "./OpenAPIContext";
+import type {OpenAPIContextType, OpenAPISpec} from "./Common";
+import {OpenAPIProvider, useOpenAPISpec} from "./OpenAPIContext";
+
+const TEST_SPEC: OpenAPISpec = {
+  paths: {
+    "/todoItems/": {
+      get: {
+        responses: {
+          "200": {
+            content: {
+              "application/json": {
+                schema: {
+                  properties: {
+                    data: {
+                      items: {
+                        properties: {
+                          metadata: {
+                            properties: {
+                              color: {description: "Color metadata", type: "string"},
+                            },
+                            type: "object",
+                          },
+                          title: {description: "Title for the todo", type: "string"},
+                        },
+                        required: ["title"],
+                        type: "object",
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+};
+
+const ContextReader = ({onContext}: {onContext: (context: OpenAPIContextType) => void}) => {
+  const context = useOpenAPISpec();
+  onContext(context);
+  return <Text>Context reader</Text>;
+};
+
+const HookOutsideProvider = () => {
+  useOpenAPISpec();
+  return <Text>unreachable</Text>;
+};
 
 describe("OpenAPIContext", () => {
+  const originalFetch = globalThis.fetch;
+  const originalWarn = console.warn;
+  const originalError = console.error;
+
+  beforeEach(() => {
+    globalThis.fetch = mock(async () => ({
+      json: async () => TEST_SPEC,
+    })) as unknown as typeof globalThis.fetch;
+    console.warn = mock(() => {});
+    console.error = mock(() => {});
+  });
+
+  afterEach(() => {
+    globalThis.fetch = originalFetch;
+    console.warn = originalWarn;
+    console.error = originalError;
+  });
+
   describe("OpenAPIProvider", () => {
     it("renders children", () => {
       const {getByText} = render(
@@ -32,5 +98,120 @@ describe("OpenAPIContext", () => {
       );
       expect(toJSON()).toMatchSnapshot();
     });
+
+    it("fetches spec and resolves model fields", async () => {
+      let capturedContext: OpenAPIContextType | null = null;
+      render(
+        <OpenAPIProvider specUrl="https://api.example.com/openapi.json">
+          <ContextReader
+            onContext={(context) => {
+              capturedContext = context;
+            }}
+          />
+        </OpenAPIProvider>
+      );
+
+      await waitFor(() => {
+        expect(capturedContext?.spec).toEqual(TEST_SPEC);
+      });
+
+      const modelFields = capturedContext?.getModelFields("Todo Items");
+      expect(modelFields?.type).toBe("object");
+      expect(modelFields?.required).toEqual(["title"]);
+      expect(modelFields?.properties?.title).toEqual({
+        description: "Title for the todo",
+        type: "string",
+      });
+    });
+
+    it("resolves nested model fields using dot notation", async () => {
+      let capturedContext: OpenAPIContextType | null = null;
+      render(
+        <OpenAPIProvider specUrl="https://api.example.com/openapi.json">
+          <ContextReader
+            onContext={(context) => {
+              capturedContext = context;
+            }}
+          />
+        </OpenAPIProvider>
+      );
+
+      await waitFor(() => {
+        expect(capturedContext?.spec).toEqual(TEST_SPEC);
+      });
+
+      expect(capturedContext?.getModelField("Todo Items", "metadata.color")).toEqual({
+        description: "Color metadata",
+        type: "string",
+      });
+    });
+
+    it("warns when model path is missing", async () => {
+      let capturedContext: OpenAPIContextType | null = null;
+      render(
+        <OpenAPIProvider specUrl="https://api.example.com/openapi.json">
+          <ContextReader
+            onContext={(context) => {
+              capturedContext = context;
+            }}
+          />
+        </OpenAPIProvider>
+      );
+
+      await waitFor(() => {
+        expect(capturedContext?.spec).toEqual(TEST_SPEC);
+      });
+
+      expect(capturedContext?.getModelFields("Unknown Model")).toBeNull();
+      expect(console.warn).toHaveBeenCalledWith("No OpenAPI model found for Unknown Model");
+    });
+
+    it("warns when model field is missing", async () => {
+      let capturedContext: OpenAPIContextType | null = null;
+      render(
+        <OpenAPIProvider specUrl="https://api.example.com/openapi.json">
+          <ContextReader
+            onContext={(context) => {
+              capturedContext = context;
+            }}
+          />
+        </OpenAPIProvider>
+      );
+
+      await waitFor(() => {
+        expect(capturedContext?.spec).toEqual(TEST_SPEC);
+      });
+
+      expect(capturedContext?.getModelField("Todo Items", "missingField")).toBeUndefined();
+      expect(console.warn).toHaveBeenCalledWith(
+        "No OpenAPI field found for Todo Items:missingField"
+      );
+    });
+
+    it("logs an error when spec fetch fails", async () => {
+      globalThis.fetch = mock(async () => {
+        throw new Error("network down");
+      }) as unknown as typeof globalThis.fetch;
+
+      render(
+        <OpenAPIProvider specUrl="https://api.example.com/openapi.json">
+          <Text>Fetch failing</Text>
+        </OpenAPIProvider>
+      );
+
+      await waitFor(() => {
+        expect(console.error).toHaveBeenCalledWith(
+          "Error fetching OpenAPI spec: Error: network down"
+        );
+      });
+    });
+  });
+
+  describe("useOpenAPISpec", () => {
+    it("throws when used outside OpenAPIProvider", () => {
+      expect(() => render(<HookOutsideProvider />)).toThrow(
+        "useOpenAPISpec must be used within an OpenAPIProvider"
+      );
+    });
   });
 });

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/PasswordField.tsx

@@ -2,6 +2,6 @@ import type React from "react";
 
 import {Box} from "./Box";
 
-export const PasswordField = (): React.ReactElement => {
+export const PasswordField: React.FC = () => {
   return <Box />;
 };

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