@terreno/ui 0.10.0 → 0.11.1

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

package/src/Common.ts

@@ -1447,8 +1447,10 @@ export interface BannerButtonProps {
 export interface BannerPropsBase {
   /**
    * Used to identify if banner has been dismissed by the user.
+   * When provided, dismissal state is persisted to AsyncStorage.
+   * When omitted, dismissal is ephemeral (resets on remount).
    */
-  id: string;
+  id?: string;
   /**
    * The text to display in the main body of the banner.
    */

package/src/ConsentFormScreen.test.tsx

@@ -0,0 +1,167 @@
+import {afterAll, describe, expect, it, mock} from "bun:test";
+import {act, fireEvent} from "@testing-library/react-native";
+import {Text as RNText} from "react-native";
+
+// Capture the real MarkdownView export before mocking so we can restore it in
+// afterAll and avoid leaking a test-only mock to sibling test files.
+const RealMarkdownViewModule = require("./MarkdownView");
+
+// Mock MarkdownView with a simple Text passthrough so we can assert on the
+// rendered (variable-substituted) content without depending on
+// react-native-markdown-display's tokenization.
+mock.module("./MarkdownView", () => ({
+  MarkdownView: ({children}: {children: string}) => (
+    <RNText testID="markdown-view">{children}</RNText>
+  ),
+}));
+
+import {ConsentFormScreen} from "./ConsentFormScreen";
+import {renderWithTheme} from "./test-utils";
+import type {ConsentFormPublic} from "./useConsentForms";
+
+// Restore the real MarkdownView so downstream test files (e.g.
+// MarkdownView.test.tsx) see the un-mocked module regardless of test order.
+afterAll(() => {
+  mock.module("./MarkdownView", () => RealMarkdownViewModule);
+});
+
+const baseForm: ConsentFormPublic = {
+  active: true,
+  agreeButtonText: "I agree",
+  allowDecline: true,
+  captureSignature: false,
+  checkboxes: [],
+  content: {en: "Consent body", es: "Cuerpo de consentimiento"},
+  declineButtonText: "Decline",
+  defaultLocale: "en",
+  id: "consent-1",
+  order: 0,
+  required: true,
+  requireScrollToBottom: false,
+  slug: "consent",
+  title: "Consent",
+  type: "tos",
+  version: 1,
+};
+
+describe("ConsentFormScreen", () => {
+  it("renders with default state and a locale fallback", () => {
+    const onAgree = mock(() => {});
+    const {getByTestId, getByText} = renderWithTheme(
+      <ConsentFormScreen
+        form={{...baseForm, content: {en: "Hello"}}}
+        locale="fr"
+        onAgree={onAgree}
+      />
+    );
+    expect(getByTestId("consent-form-scroll-view")).toBeTruthy();
+    expect(getByText("I agree")).toBeTruthy();
+  });
+
+  it("substitutes variables in content and preserves unknown placeholders", () => {
+    const {getByTestId} = renderWithTheme(
+      <ConsentFormScreen
+        form={{...baseForm, content: {en: "Hello {{name}}, {{missing}} stays"}}}
+        locale="en"
+        onAgree={() => {}}
+        variables={{name: "Ada"}}
+      />
+    );
+    expect(getByTestId("markdown-view").props.children).toBe("Hello Ada, {{missing}} stays");
+  });
+
+  it("invokes onAgree with signature and checkbox values", () => {
+    const onAgree = mock(() => {});
+    const form: ConsentFormPublic = {
+      ...baseForm,
+      captureSignature: false,
+      checkboxes: [
+        {label: "Required box", required: true},
+        {label: "Optional box", required: false},
+      ],
+    };
+    const {getByTestId} = renderWithTheme(
+      <ConsentFormScreen form={form} locale="en" onAgree={onAgree} />
+    );
+    // Toggle the required checkbox on and the optional one off/on
+    act(() => {
+      fireEvent.press(getByTestId("consent-form-checkbox-0"));
+      fireEvent.press(getByTestId("consent-form-checkbox-1"));
+      fireEvent.press(getByTestId("consent-form-checkbox-1"));
+    });
+    act(() => {
+      fireEvent.press(getByTestId("consent-form-agree-button"));
+    });
+    // Button has a debounce; wait briefly.
+    return new Promise<void>((resolve) => {
+      setTimeout(() => {
+        expect(onAgree).toHaveBeenCalledTimes(1);
+        const call = onAgree.mock.calls[0]?.[0] as {
+          checkboxValues: Record<string, boolean>;
+          signature?: string;
+        };
+        expect(call.checkboxValues["0"]).toBe(true);
+        expect(call.signature).toBeUndefined();
+        resolve();
+      }, 600);
+    });
+  });
+
+  it("opens and confirms the confirmation modal before toggling checkbox on", () => {
+    const form: ConsentFormPublic = {
+      ...baseForm,
+      checkboxes: [{confirmationPrompt: "Really?", label: "Tricky", required: true}],
+    };
+    const {getByTestId, queryByText} = renderWithTheme(
+      <ConsentFormScreen form={form} locale="en" onAgree={() => {}} />
+    );
+    act(() => {
+      fireEvent.press(getByTestId("consent-form-checkbox-0"));
+    });
+    expect(queryByText("Really?")).toBeTruthy();
+  });
+
+  it("fires onDecline when decline is pressed", () => {
+    const onDecline = mock(() => {});
+    const {getByTestId} = renderWithTheme(
+      <ConsentFormScreen form={baseForm} locale="en" onAgree={() => {}} onDecline={onDecline} />
+    );
+    act(() => {
+      fireEvent.press(getByTestId("consent-form-decline-button"));
+    });
+    return new Promise<void>((resolve) => {
+      setTimeout(() => {
+        expect(onDecline).toHaveBeenCalled();
+        resolve();
+      }, 600);
+    });
+  });
+
+  it("fires scroll handlers without crashing", () => {
+    const form = {...baseForm, requireScrollToBottom: true};
+    const {getByTestId} = renderWithTheme(
+      <ConsentFormScreen form={form} locale="en" onAgree={() => {}} />
+    );
+    const scroll = getByTestId("consent-form-scroll-view");
+    act(() => {
+      fireEvent(scroll, "contentSizeChange", 0, 300);
+      fireEvent(scroll, "layout", {nativeEvent: {layout: {height: 400}}});
+      fireEvent(scroll, "scroll", {
+        nativeEvent: {
+          contentOffset: {y: 100},
+          contentSize: {height: 300},
+          layoutMeasurement: {height: 210},
+        },
+      });
+    });
+    expect(scroll).toBeTruthy();
+  });
+
+  it("shows the scroll hint when content is still scrollable", () => {
+    const form = {...baseForm, requireScrollToBottom: true};
+    const {getByTestId} = renderWithTheme(
+      <ConsentFormScreen form={form} locale="en" onAgree={() => {}} />
+    );
+    expect(getByTestId("consent-form-scroll-hint")).toBeTruthy();
+  });
+});

package/src/ConsentNavigator.test.tsx

@@ -164,4 +164,210 @@ describe("ConsentNavigator", () => {
     // The extra screen should have a working next button (onNext was injected)
     expect(getByTestId("extra-screen-next")).toBeTruthy();
   });
+
+  it("renders children when error is auth (401)", () => {
+    const api = {
+      enhanceEndpoints: mock(() => ({
+        injectEndpoints: mock(() => ({
+          useGetPendingConsentsQuery: mock(() => ({
+            data: undefined,
+            error: {status: 401},
+            isLoading: false,
+            refetch: mock(() => {}),
+          })),
+          useSubmitConsentResponseMutation: mock(() => [
+            mock(() => ({unwrap: mock(() => Promise.resolve({}))})),
+            {error: undefined, isLoading: false},
+          ]),
+        })),
+      })),
+    };
+
+    const {getByText} = renderWithTheme(
+      <ConsentNavigator api={api as any}>
+        <Text>App Content</Text>
+      </ConsentNavigator>
+    );
+    expect(getByText("App Content")).toBeTruthy();
+  });
+
+  it("renders children when error is auth (403)", () => {
+    const api = {
+      enhanceEndpoints: mock(() => ({
+        injectEndpoints: mock(() => ({
+          useGetPendingConsentsQuery: mock(() => ({
+            data: undefined,
+            error: {originalStatus: 403},
+            isLoading: false,
+            refetch: mock(() => {}),
+          })),
+          useSubmitConsentResponseMutation: mock(() => [
+            mock(() => ({unwrap: mock(() => Promise.resolve({}))})),
+            {error: undefined, isLoading: false},
+          ]),
+        })),
+      })),
+    };
+
+    const {getByText} = renderWithTheme(
+      <ConsentNavigator api={api as any}>
+        <Text>App Content</Text>
+      </ConsentNavigator>
+    );
+    expect(getByText("App Content")).toBeTruthy();
+  });
+
+  it("renders error screen with retry button for non-auth errors", () => {
+    const onError = mock(() => {});
+    const api = {
+      enhanceEndpoints: mock(() => ({
+        injectEndpoints: mock(() => ({
+          useGetPendingConsentsQuery: mock(() => ({
+            data: undefined,
+            error: {message: "Server error", status: 500},
+            isLoading: false,
+            refetch: mock(() => {}),
+          })),
+          useSubmitConsentResponseMutation: mock(() => [
+            mock(() => ({unwrap: mock(() => Promise.resolve({}))})),
+            {error: undefined, isLoading: false},
+          ]),
+        })),
+      })),
+    };
+
+    const {getByTestId, getByText} = renderWithTheme(
+      <ConsentNavigator api={api as any} onError={onError}>
+        <Text>App Content</Text>
+      </ConsentNavigator>
+    );
+    expect(getByTestId("consent-navigator-error")).toBeTruthy();
+    expect(getByText("Failed to load consent forms")).toBeTruthy();
+    expect(onError).toHaveBeenCalled();
+  });
+
+  it("renders without error when no extra screens provided", () => {
+    const api = createMockApi([]);
+
+    const {getByText} = renderWithTheme(
+      <ConsentNavigator api={api}>
+        <Text>App Content</Text>
+      </ConsentNavigator>
+    );
+
+    expect(getByText("App Content")).toBeTruthy();
+  });
+
+  it("calls submit and refetch when user agrees to a consent form", async () => {
+    const {act, fireEvent} = await import("@testing-library/react-native");
+    const form = makeForm();
+    const unwrap = mock(() => Promise.resolve({agreed: true, id: "r-1"}));
+    const submitMutation = mock(() => ({unwrap}));
+    const refetch = mock(() => Promise.resolve());
+    const api = {
+      enhanceEndpoints: mock(() => ({
+        injectEndpoints: mock(() => ({
+          useGetPendingConsentsQuery: mock(() => ({
+            data: {data: [form]},
+            error: undefined,
+            isLoading: false,
+            refetch,
+          })),
+          useSubmitConsentResponseMutation: mock(() => [
+            submitMutation,
+            {error: undefined, isLoading: false},
+          ]),
+        })),
+      })),
+    };
+
+    const {getByTestId} = renderWithTheme(
+      <ConsentNavigator api={api as any}>
+        <Text>App Content</Text>
+      </ConsentNavigator>
+    );
+
+    await act(async () => {
+      fireEvent.press(getByTestId("consent-form-agree-button"));
+    });
+
+    expect(submitMutation).toHaveBeenCalled();
+  });
+
+  it("invokes onError when consent submission fails on agree", async () => {
+    const {act, fireEvent} = await import("@testing-library/react-native");
+    const form = makeForm();
+    const onError = mock(() => {});
+    const unwrap = mock(() => Promise.reject(new Error("submit failed")));
+    const submitMutation = mock(() => ({unwrap}));
+    const refetch = mock(() => Promise.resolve());
+    const api = {
+      enhanceEndpoints: mock(() => ({
+        injectEndpoints: mock(() => ({
+          useGetPendingConsentsQuery: mock(() => ({
+            data: {data: [form]},
+            error: undefined,
+            isLoading: false,
+            refetch,
+          })),
+          useSubmitConsentResponseMutation: mock(() => [
+            submitMutation,
+            {error: undefined, isLoading: false},
+          ]),
+        })),
+      })),
+    };
+
+    const {getByTestId} = renderWithTheme(
+      <ConsentNavigator api={api as any} onError={onError}>
+        <Text>App Content</Text>
+      </ConsentNavigator>
+    );
+
+    await act(async () => {
+      fireEvent.press(getByTestId("consent-form-agree-button"));
+    });
+
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 0));
+    });
+
+    expect(onError).toHaveBeenCalled();
+  });
+
+  it("calls submit with agreed=false when user declines an optional consent form", async () => {
+    const {act, fireEvent} = await import("@testing-library/react-native");
+    const form = makeForm({allowDecline: true, required: false});
+    const unwrap = mock(() => Promise.resolve({agreed: false, id: "r-2"}));
+    const submitMutation = mock(() => ({unwrap}));
+    const refetch = mock(() => Promise.resolve());
+    const api = {
+      enhanceEndpoints: mock(() => ({
+        injectEndpoints: mock(() => ({
+          useGetPendingConsentsQuery: mock(() => ({
+            data: {data: [form]},
+            error: undefined,
+            isLoading: false,
+            refetch,
+          })),
+          useSubmitConsentResponseMutation: mock(() => [
+            submitMutation,
+            {error: undefined, isLoading: false},
+          ]),
+        })),
+      })),
+    };
+
+    const {getByTestId} = renderWithTheme(
+      <ConsentNavigator api={api as any}>
+        <Text>App Content</Text>
+      </ConsentNavigator>
+    );
+
+    const declineBtn = getByTestId("consent-form-decline-button");
+    await act(async () => {
+      fireEvent.press(declineBtn);
+    });
+    expect(submitMutation).toHaveBeenCalled();
+  });
 });