@smileid/usesmileid 12.0.0-beta01

package/src/presentation/screen/__tests__/use_smile_id_preview_screen.test.tsx

@@ -0,0 +1,223 @@
+import { describe, it, expect, vi } from "vitest";
+import * as React from "react";
+import {
+  create as createRenderer,
+  act,
+  type ReactTestInstance,
+} from "react-test-renderer";
+import { I18nManager, Pressable, StyleSheet, Text } from "react-native";
+import { UseSmileIDPreviewScreen } from "../use_smile_id_preview_screen";
+import { defaultLightTheme } from "../../theme/theme";
+
+/**
+ * Component-level tests for the preview screen. Covers:
+ *   - Image at the oval rect (not full-bleed)
+ *   - Title + confirmation buttons + optional attribution in card
+ *   - Accept / Retake gating from `resolvePreviewState`
+ *   - Slot contract (any slot replaces the entire row)
+ */
+
+function render(element: React.ReactElement) {
+  let tree!: ReturnType<typeof createRenderer>;
+  act(() => {
+    tree = createRenderer(element);
+  });
+  return tree;
+}
+
+function findByTestID(
+  root: ReactTestInstance,
+  testID: string,
+): ReactTestInstance | null {
+  return root.findAllByProps({ testID })[0] ?? null;
+}
+
+function findTextNode(
+  root: ReactTestInstance,
+  expected: string,
+): ReactTestInstance | null {
+  return (
+    root.findAll(
+      (node) => node.type === Text && collectText(node).includes(expected),
+      { deep: true },
+    )[0] ?? null
+  );
+}
+
+function collectText(node: ReactTestInstance): string {
+  return node.children
+    .map((c) =>
+      typeof c === "string" ? c : collectText(c as ReactTestInstance),
+    )
+    .join("");
+}
+
+const PATH = "file:///selfie.jpg";
+
+describe("UseSmileIDPreviewScreen", () => {
+  it("renders the screen container", () => {
+    const { root } = render(<UseSmileIDPreviewScreen />);
+    expect(findByTestID(root, "si_preview_screen")).not.toBeNull();
+  });
+
+  it("renders the title 'Confirm image quality'", () => {
+    const { root } = render(<UseSmileIDPreviewScreen />);
+    expect(findTextNode(root, "Confirm image quality")).not.toBeNull();
+  });
+
+  it("renders the caption 'Make sure that the image is clear.'", () => {
+    const { root } = render(<UseSmileIDPreviewScreen />);
+    expect(
+      findTextNode(root, "Make sure that the image is clear"),
+    ).not.toBeNull();
+  });
+
+  it("omits the image element when capturedSelfiePath is missing", () => {
+    const { root } = render(<UseSmileIDPreviewScreen />);
+    expect(findByTestID(root, "si_preview_image")).toBeNull();
+  });
+
+  it("renders the at-oval image element when a path is provided", () => {
+    const { root } = render(
+      <UseSmileIDPreviewScreen capturedSelfiePath={PATH} />,
+    );
+    expect(findByTestID(root, "si_preview_image")).not.toBeNull();
+  });
+
+  it("renders default confirmation buttons when no slots are supplied", () => {
+    const { root } = render(
+      <UseSmileIDPreviewScreen capturedSelfiePath={PATH} />,
+    );
+    expect(
+      findByTestID(root, "si_preview_confirmation_buttons"),
+    ).not.toBeNull();
+  });
+
+  it("forwards Accept tap to onAccept when an image is present", () => {
+    const onAccept = vi.fn();
+    const { root } = render(
+      <UseSmileIDPreviewScreen capturedSelfiePath={PATH} onAccept={onAccept} />,
+    );
+    const buttons = findByTestID(root, "si_preview_confirmation_buttons")!;
+    act(() => {
+      (buttons.props.onAccept as () => void)();
+    });
+    expect(onAccept).toHaveBeenCalledTimes(1);
+  });
+
+  it("invokes Accept without a per-press capture guard", () => {
+    // The preview is only reached once a capture exists, so the inner
+    // screen does not self-gate Accept — tapping it always fires.
+    const onAccept = vi.fn();
+    const { root } = render(
+      <UseSmileIDPreviewScreen capturedSelfiePath={PATH} onAccept={onAccept} />,
+    );
+    const buttons = findByTestID(root, "si_preview_confirmation_buttons")!;
+    act(() => {
+      (buttons.props.onAccept as () => void)();
+    });
+    expect(onAccept).toHaveBeenCalledTimes(1);
+  });
+
+  it("blocks Reject when allowRetake is false", () => {
+    const onReject = vi.fn();
+    const { root } = render(
+      <UseSmileIDPreviewScreen
+        capturedSelfiePath={PATH}
+        allowRetake={false}
+        onReject={onReject}
+      />,
+    );
+    const buttons = findByTestID(root, "si_preview_confirmation_buttons")!;
+    act(() => {
+      (buttons.props.onReject as () => void)();
+    });
+    expect(onReject).not.toHaveBeenCalled();
+  });
+
+  it("renders attribution by default and hides it when showAttribution=false", () => {
+    const { root: withAttr } = render(<UseSmileIDPreviewScreen />);
+    expect(
+      withAttr.findAllByProps({ accessibilityLabel: "Powered by Smile ID" })[0],
+    ).toBeTruthy();
+
+    const { root: withoutAttr } = render(
+      <UseSmileIDPreviewScreen showAttribution={false} />,
+    );
+    expect(
+      withoutAttr.findAllByProps({ accessibilityLabel: "Powered by Smile ID" }),
+    ).toHaveLength(0);
+  });
+
+  it("renders without throwing under RTL", () => {
+    // The capture overlay is intentionally not mirrored, but the screen
+    // must still mount cleanly when the layout direction is RTL.
+    I18nManager.isRTL = true;
+    try {
+      const { root } = render(
+        <UseSmileIDPreviewScreen capturedSelfiePath={PATH} />,
+      );
+      expect(findByTestID(root, "si_preview_screen")).not.toBeNull();
+      expect(findTextNode(root, "Confirm image quality")).not.toBeNull();
+    } finally {
+      I18nManager.isRTL = false;
+    }
+  });
+
+  it("replaces the entire row when any button slot is supplied", () => {
+    // Concrete scenario this test documents: the slot contract is
+    // "all-or-nothing" — providing only continueButton hides the
+    // default Retake. Partners must supply both slots to keep both
+    // affordances.
+    const onAccept = vi.fn();
+    const onReject = vi.fn();
+    const { root } = render(
+      <UseSmileIDPreviewScreen
+        capturedSelfiePath={PATH}
+        onAccept={onAccept}
+        onReject={onReject}
+        continueButton={({ onClick }) => (
+          <Pressable testID="si_custom_continue" onPress={onClick}>
+            <Text>Confirm</Text>
+          </Pressable>
+        )}
+        cancelButton={({ onClick }) => (
+          <Pressable testID="si_custom_cancel" onPress={onClick}>
+            <Text>Retake</Text>
+          </Pressable>
+        )}
+      />,
+    );
+
+    expect(findByTestID(root, "si_custom_continue")).not.toBeNull();
+    expect(findByTestID(root, "si_custom_cancel")).not.toBeNull();
+    // Default row must be gone — guards against a future refactor
+    // that double-renders the row alongside the slots.
+    expect(findByTestID(root, "si_preview_confirmation_buttons")).toBeNull();
+
+    act(() => {
+      (findByTestID(root, "si_custom_continue")!.props.onPress as () => void)();
+    });
+    expect(onAccept).toHaveBeenCalledTimes(1);
+
+    act(() => {
+      (findByTestID(root, "si_custom_cancel")!.props.onPress as () => void)();
+    });
+    expect(onReject).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders the card title in the theme primary color", () => {
+    const { root } = render(
+      <UseSmileIDPreviewScreen capturedSelfiePath={PATH} />,
+    );
+    const title = root.findAll(
+      (node) => node.type === Text && node.props.accessibilityRole === "header",
+      { deep: true },
+    )[0];
+    expect(title).toBeDefined();
+    const titleStyle = StyleSheet.flatten(title!.props.style) as {
+      color?: string;
+    };
+    expect(titleStyle.color).toBe(defaultLightTheme.colors.primary);
+  });
+});

package/src/presentation/screen/__tests__/use_smile_id_processing_screen.test.tsx

@@ -0,0 +1,333 @@
+import { describe, it, expect, vi } from "vitest";
+import * as React from "react";
+import {
+  create as createRenderer,
+  act,
+  type ReactTestInstance,
+} from "react-test-renderer";
+import {
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
+import { UseSmileIDProcessingScreen } from "../use_smile_id_processing_screen";
+import { defaultLightTheme } from "../../theme/theme";
+
+/**
+ * Component-level tests for the processing screen. Covers:
+ *   - Image at the oval rect (clipped) when present
+ *   - In-oval status indicator (loading / success / failed)
+ *   - State-branched card body
+ *   - Slot contract — individual button slots replace only their
+ *     own button; title + message body always renders
+ */
+
+function render(element: React.ReactElement) {
+  let tree!: ReturnType<typeof createRenderer>;
+  act(() => {
+    tree = createRenderer(element);
+  });
+  return tree;
+}
+
+function findByTestID(
+  root: ReactTestInstance,
+  testID: string,
+): ReactTestInstance | null {
+  return root.findAllByProps({ testID })[0] ?? null;
+}
+
+function findTextNode(
+  root: ReactTestInstance,
+  expected: string,
+): ReactTestInstance | null {
+  return (
+    root.findAll(
+      (node) => node.type === Text && collectText(node).includes(expected),
+      { deep: true },
+    )[0] ?? null
+  );
+}
+
+function collectText(node: ReactTestInstance): string {
+  return node.children
+    .map((c) =>
+      typeof c === "string" ? c : collectText(c as ReactTestInstance),
+    )
+    .join("");
+}
+
+describe("UseSmileIDProcessingScreen", () => {
+  it("renders the screen container", () => {
+    const { root } = render(
+      <UseSmileIDProcessingScreen state={{ kind: "loading" }} />,
+    );
+    expect(findByTestID(root, "si_processing_screen")).not.toBeNull();
+  });
+
+  it("renders the at-oval image when capturedSelfiePath is provided", () => {
+    const { root } = render(
+      <UseSmileIDProcessingScreen
+        state={{ kind: "loading" }}
+        capturedSelfiePath="file:///selfie.jpg"
+      />,
+    );
+    expect(findByTestID(root, "si_processing_image")).not.toBeNull();
+  });
+
+  it("omits the image when no path is supplied", () => {
+    const { root } = render(
+      <UseSmileIDProcessingScreen state={{ kind: "loading" }} />,
+    );
+    expect(findByTestID(root, "si_processing_image")).toBeNull();
+  });
+
+  it("drops the captured-image oval and centres the badge when showFaceOval=false", () => {
+    const { root } = render(
+      <UseSmileIDProcessingScreen
+        state={{ kind: "loading" }}
+        showFaceOval={false}
+        capturedSelfiePath="file:///selfie.jpg"
+      />,
+    );
+    expect(findByTestID(root, "si_processing_no_oval_region")).not.toBeNull();
+    expect(findByTestID(root, "si_processing_image")).toBeNull();
+    expect(findByTestID(root, "si_processing_center_indicator")).not.toBeNull();
+  });
+
+  it("keeps the captured-image oval when showFaceOval is omitted", () => {
+    const { root } = render(
+      <UseSmileIDProcessingScreen
+        state={{ kind: "loading" }}
+        capturedSelfiePath="file:///selfie.jpg"
+      />,
+    );
+    expect(findByTestID(root, "si_processing_no_oval_region")).toBeNull();
+    expect(findByTestID(root, "si_processing_image")).not.toBeNull();
+  });
+
+  it("branches the bottom-card body by lifecycle state", () => {
+    // The in-oval indicator itself is gated on canvas measurement
+    // (`onLayout` doesn't fire under `react-test-renderer`), so we
+    // assert the state-branched body instead — the body is the
+    // observable signal that the screen recognized the state.
+    for (const state of [
+      { kind: "loading" } as const,
+      { kind: "success", message: "ok" } as const,
+      { kind: "failed", errorMessage: "bad" } as const,
+    ]) {
+      const { root } = render(<UseSmileIDProcessingScreen state={state} />);
+      if (state.kind === "loading") {
+        expect(
+          findByTestID(root, "si_processing_loading_content"),
+        ).not.toBeNull();
+      }
+      if (state.kind === "success") {
+        expect(
+          findByTestID(root, "si_processing_success_content"),
+        ).not.toBeNull();
+      }
+      if (state.kind === "failed") {
+        expect(
+          findByTestID(root, "si_processing_failed_content"),
+        ).not.toBeNull();
+      }
+    }
+  });
+
+  it("shows 'Submitting…' on loading", () => {
+    const { root } = render(
+      <UseSmileIDProcessingScreen state={{ kind: "loading" }} />,
+    );
+    expect(findTextNode(root, "Submitting")).not.toBeNull();
+  });
+
+  it("shows the success title and message on success", () => {
+    const { root } = render(
+      <UseSmileIDProcessingScreen
+        state={{ kind: "success", message: "Your KYC is complete." }}
+      />,
+    );
+    expect(findTextNode(root, "Submission Complete")).not.toBeNull();
+    expect(findTextNode(root, "Your KYC is complete.")).not.toBeNull();
+  });
+
+  it("shows the failure title and error message on failed", () => {
+    const { root } = render(
+      <UseSmileIDProcessingScreen
+        state={{ kind: "failed", errorMessage: "Network unreachable" }}
+      />,
+    );
+    expect(findTextNode(root, "Submission Failed")).not.toBeNull();
+    expect(findTextNode(root, "Network unreachable")).not.toBeNull();
+  });
+
+  it("forwards onContinue from the default Continue button", () => {
+    const onContinue = vi.fn();
+    const { root } = render(
+      <UseSmileIDProcessingScreen
+        state={{ kind: "success" }}
+        onContinue={onContinue}
+      />,
+    );
+    const button = findByTestID(root, "si_processing_continue_button");
+    expect(button).not.toBeNull();
+    act(() => {
+      (button!.props.onClick as () => void)();
+    });
+    expect(onContinue).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders Retry and Exit buttons on failure when callbacks are supplied", () => {
+    const onRetry = vi.fn();
+    const onExit = vi.fn();
+    const { root } = render(
+      <UseSmileIDProcessingScreen
+        state={{ kind: "failed" }}
+        onRetry={onRetry}
+        onExit={onExit}
+      />,
+    );
+    expect(findByTestID(root, "si_processing_retry_button")).not.toBeNull();
+    expect(findByTestID(root, "si_processing_exit_button")).not.toBeNull();
+  });
+
+  it("hides attribution when showAttribution=false", () => {
+    const { root } = render(
+      <UseSmileIDProcessingScreen
+        state={{ kind: "loading" }}
+        showAttribution={false}
+      />,
+    );
+    expect(
+      root.findAllByProps({ accessibilityLabel: "Powered by Smile ID" }),
+    ).toHaveLength(0);
+  });
+
+  it("replaces only the Continue button when continueButton slot is supplied (success state)", () => {
+    // Concrete scenario this guards: partner overrides the Continue
+    // button and expects the title + message to remain. Title body
+    // must render regardless of slot presence.
+    const onContinue = vi.fn();
+    const { root } = render(
+      <UseSmileIDProcessingScreen
+        state={{ kind: "success", message: "All good" }}
+        onContinue={onContinue}
+        continueButton={({ onClick }) => (
+          <Pressable testID="si_custom_continue" onPress={onClick}>
+            <Text>Done</Text>
+          </Pressable>
+        )}
+      />,
+    );
+
+    // Title + message still visible.
+    expect(findTextNode(root, "Submission Complete")).not.toBeNull();
+    expect(findTextNode(root, "All good")).not.toBeNull();
+
+    // Default Continue button suppressed.
+    expect(findByTestID(root, "si_processing_continue_button")).toBeNull();
+
+    // Custom Continue button rendered and wired.
+    const slot = findByTestID(root, "si_custom_continue");
+    expect(slot).not.toBeNull();
+    act(() => {
+      (slot!.props.onPress as () => void)();
+    });
+    expect(onContinue).toHaveBeenCalledTimes(1);
+  });
+
+  it("replaces individual buttons on failure — Retry slot keeps default Exit", () => {
+    // Concrete scenario: partner customizes only the Retry button
+    // (e.g., adds analytics on tap). The default Exit button must
+    // still render so the user can dismiss the failure.
+    const onRetry = vi.fn();
+    const onExit = vi.fn();
+    const { root } = render(
+      <UseSmileIDProcessingScreen
+        state={{ kind: "failed", errorMessage: "Try again" }}
+        onRetry={onRetry}
+        onExit={onExit}
+        retryButton={({ onClick }) => (
+          <Pressable testID="si_custom_retry" onPress={onClick}>
+            <Text>Try Again</Text>
+          </Pressable>
+        )}
+      />,
+    );
+
+    // Title + message still visible.
+    expect(findTextNode(root, "Submission Failed")).not.toBeNull();
+    expect(findTextNode(root, "Try again")).not.toBeNull();
+
+    // Default Retry suppressed; default Exit remains.
+    expect(findByTestID(root, "si_processing_retry_button")).toBeNull();
+    expect(findByTestID(root, "si_processing_exit_button")).not.toBeNull();
+
+    // Custom Retry rendered and wired.
+    const slot = findByTestID(root, "si_custom_retry");
+    expect(slot).not.toBeNull();
+    act(() => {
+      (slot!.props.onPress as () => void)();
+    });
+    expect(onRetry).toHaveBeenCalledTimes(1);
+  });
+
+  it("stretches the success/failed card bodies so action buttons span the card", () => {
+    const cases = [
+      {
+        state: { kind: "success", message: "ok" } as const,
+        testID: "si_processing_success_content",
+      },
+      {
+        state: { kind: "failed", errorMessage: "bad" } as const,
+        testID: "si_processing_failed_content",
+      },
+    ];
+    for (const { state, testID } of cases) {
+      const { root } = render(<UseSmileIDProcessingScreen state={state} />);
+      // `findByTestID` would also match the composite element, whose
+      // `style` prop is undefined.
+      const content = root.findAll(
+        (node) => node.type === View && node.props.testID === testID,
+        { deep: true },
+      )[0];
+      expect(content).toBeDefined();
+      const style = StyleSheet.flatten(
+        content!.props.style as StyleProp<ViewStyle>,
+      ) as ViewStyle;
+      expect(style.alignSelf).toBe("stretch");
+    }
+  });
+
+  it("renders every card-state title in the theme primary color", () => {
+    const cases = [
+      {
+        state: { kind: "loading" } as const,
+        testID: "si_processing_loading_content",
+      },
+      {
+        state: { kind: "success", message: "ok" } as const,
+        testID: "si_processing_success_content",
+      },
+      {
+        state: { kind: "failed", errorMessage: "bad" } as const,
+        testID: "si_processing_failed_content",
+      },
+    ];
+    for (const { state, testID } of cases) {
+      const { root } = render(<UseSmileIDProcessingScreen state={state} />);
+      const content = findByTestID(root, testID);
+      expect(content).not.toBeNull();
+      const title = content!.findAllByType(Text)[0];
+      expect(title).toBeDefined();
+      const titleStyle = StyleSheet.flatten(
+        title!.props.style as StyleProp<ViewStyle>,
+      ) as { color?: string };
+      expect(titleStyle.color).toBe(defaultLightTheme.colors.primary);
+    }
+  });
+});