@smileid/usesmileid 12.0.0-beta01

package/src/presentation/components/__tests__/enhanced_smart_selfie_animation_frames.test.ts

@@ -0,0 +1,91 @@
+import { describe, expect, it } from "vitest";
+import type { ScanHeadTurnDirection } from "@smileid/usesmileid_bridge";
+import {
+  ENHANCED_SMART_SELFIE_ANIMATION_OPACITY,
+  ENHANCED_SMART_SELFIE_ANIMATION_SPEED,
+  ENHANCED_SMART_SELFIE_FRAME_RATE,
+  ENHANCED_SMART_SELFIE_TOTAL_FRAMES,
+  EnhancedSmartSelfieAnimationFrames,
+  enhancedSmartSelfieFrameRange,
+} from "../helpers/enhanced_smart_selfie_animation_frames";
+
+describe("EnhancedSmartSelfieAnimationFrames", () => {
+  it("pins the cross-platform pending (grey) / matched (green) sub-ranges", () => {
+    expect(EnhancedSmartSelfieAnimationFrames.left).toEqual({
+      pending: { startFrame: 1, endFrame: 41 },
+      matched: { startFrame: 42, endFrame: 106 },
+    });
+    expect(EnhancedSmartSelfieAnimationFrames.right).toEqual({
+      pending: { startFrame: 139, endFrame: 179 },
+      matched: { startFrame: 180, endFrame: 241 },
+    });
+    expect(EnhancedSmartSelfieAnimationFrames.up).toEqual({
+      pending: { startFrame: 277, endFrame: 317 },
+      matched: { startFrame: 318, endFrame: 380 },
+    });
+  });
+
+  it("matches the bundled composition's frame count and rate", () => {
+    // A re-exported composition with a different op would silently
+    // desync every cue.
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const composition =
+      require("../../assets/si_ess_animation_all_directions.json") as {
+        ip: number;
+        op: number;
+        fr: number;
+      };
+    expect(composition.ip).toBe(0);
+    expect(composition.op).toBe(ENHANCED_SMART_SELFIE_TOTAL_FRAMES);
+    expect(composition.fr).toBe(ENHANCED_SMART_SELFIE_FRAME_RATE);
+  });
+
+  it("keeps every sub-range inside the composition and ordered grey→green", () => {
+    for (const direction of ["left", "right", "up"] as const) {
+      const { pending, matched } =
+        EnhancedSmartSelfieAnimationFrames[direction];
+      for (const range of [pending, matched]) {
+        expect(range.startFrame).toBeGreaterThanOrEqual(0);
+        expect(range.endFrame).toBeGreaterThan(range.startFrame);
+        expect(range.endFrame).toBeLessThanOrEqual(
+          ENHANCED_SMART_SELFIE_TOTAL_FRAMES,
+        );
+      }
+      // The green matched span follows the grey pending span for the
+      // same direction (no overlap).
+      expect(matched.startFrame).toBeGreaterThan(pending.endFrame);
+    }
+  });
+
+  it("pins the 0.6x speed and 0.75 opacity tuning constants", () => {
+    expect(ENHANCED_SMART_SELFIE_ANIMATION_SPEED).toBe(0.6);
+    expect(ENHANCED_SMART_SELFIE_ANIMATION_OPACITY).toBe(0.75);
+  });
+});
+
+describe("enhancedSmartSelfieFrameRange", () => {
+  it("returns the grey pending span while the pose is not matched", () => {
+    for (const direction of ["left", "right", "up"] as const) {
+      expect(enhancedSmartSelfieFrameRange(direction, false)).toEqual(
+        EnhancedSmartSelfieAnimationFrames[direction].pending,
+      );
+    }
+  });
+
+  it("returns the green matched span while the pose holds", () => {
+    for (const direction of ["left", "right", "up"] as const) {
+      expect(enhancedSmartSelfieFrameRange(direction, true)).toEqual(
+        EnhancedSmartSelfieAnimationFrames[direction].matched,
+      );
+    }
+  });
+
+  it("never derives the matched span from anything but poseMatched", () => {
+    // The pending↔matched flip is a pure function of poseMatched — the
+    // same direction returns different spans purely on the boolean.
+    const direction: ScanHeadTurnDirection = "right";
+    expect(enhancedSmartSelfieFrameRange(direction, true)).not.toEqual(
+      enhancedSmartSelfieFrameRange(direction, false),
+    );
+  });
+});

package/src/presentation/components/__tests__/use_smile_id_capture_content.test.tsx

@@ -0,0 +1,348 @@
+import { describe, expect, it } from "vitest";
+import * as React from "react";
+import {
+  create as createRenderer,
+  act,
+  type ReactTestInstance,
+} from "react-test-renderer";
+import { View } from "react-native";
+import {
+  UseSmileIDCaptureContent,
+  type UseSmileIDCaptureContentState,
+} from "../use_smile_id_capture_content";
+import { UseSmileIDOverlayState } from "../../state/use_smile_id_overlay_state";
+import { CaptureType } from "../../../core/models/ml_config";
+import { enStrings } from "../../../l10n/strings_en";
+
+/**
+ * Render-count probe for the `startButton` slot — the render prop runs
+ * inside the component body, so with a stable function reference its
+ * call count equals the memo'd component's render count. Activate the
+ * slot with `showCaptureButton: true`.
+ */
+function makeStartButtonProbe(): {
+  startButton: (slotProps: {
+    onClick: () => void;
+    enabled: boolean;
+  }) => React.ReactElement;
+  getRenderCount: () => number;
+} {
+  let renderCount = 0;
+  function startButton(_slotProps: { onClick: () => void; enabled: boolean }) {
+    renderCount += 1;
+    return React.createElement(View, { testID: "si_start_button_probe" });
+  }
+  return { startButton, getRenderCount: () => renderCount };
+}
+
+/**
+ * Drives the stateless renderer with a fake snapshot and an inert
+ * camera slot — the route/content split's testability contract.
+ */
+
+const baseState: UseSmileIDCaptureContentState = {
+  captureType: CaptureType.selfie,
+  overlayState: UseSmileIDOverlayState.FACE_DETECTED,
+  enableEnhancedLiveness: false,
+  animationDirection: null,
+  poseMatched: false,
+  feedbackKey: "si_capture_ready",
+  showCaptureButton: false,
+};
+
+function renderContent(state: UseSmileIDCaptureContentState) {
+  let tree!: ReturnType<typeof createRenderer>;
+  act(() => {
+    tree = createRenderer(
+      <UseSmileIDCaptureContent
+        state={state}
+        captureProgress={0}
+        cameraPreview={<View testID="si_inert_camera" />}
+        onStartCapture={() => {}}
+        startCaptureEnabled={true}
+        showAttribution={false}
+      />,
+    );
+  });
+  // Overlays only render once the canvas has a measured size.
+  const root = findByTestID(tree.root, "si_capture_screen")!;
+  act(() => {
+    (
+      root.props.onLayout as (event: {
+        nativeEvent: { layout: { width: number; height: number } };
+      }) => void
+    )({ nativeEvent: { layout: { width: 400, height: 800 } } });
+  });
+  return tree;
+}
+
+function findByTestID(
+  root: ReactTestInstance,
+  testID: string,
+): ReactTestInstance | null {
+  const matches = root.findAllByProps({ testID });
+  return matches[0] ?? null;
+}
+
+describe("UseSmileIDCaptureContent", () => {
+  it("renders the camera slot and overlay from fake state alone", () => {
+    const { root } = renderContent(baseState);
+    expect(findByTestID(root, "si_inert_camera")).not.toBeNull();
+    expect(findByTestID(root, "si_capture_feedback_text")).not.toBeNull();
+  });
+
+  it("shows the coaching animation for a coaching key on the standard selfie path", () => {
+    const { root } = renderContent({
+      ...baseState,
+      overlayState: UseSmileIDOverlayState.NOT_SMILING,
+      feedbackKey: "si_capture_smile",
+    });
+    expect(
+      findByTestID(root, "si_capture_instruction_animation"),
+    ).not.toBeNull();
+    expect(findByTestID(root, "si_ess_direction_animation")).toBeNull();
+  });
+
+  it("suppresses the coaching animation under Enhanced Smart Selfie", () => {
+    const { root } = renderContent({
+      ...baseState,
+      enableEnhancedLiveness: true,
+      overlayState: UseSmileIDOverlayState.NOT_SMILING,
+      feedbackKey: "si_capture_smile",
+    });
+    expect(findByTestID(root, "si_capture_instruction_animation")).toBeNull();
+  });
+
+  it("loops the all-directions primer on IDLE (Start Capture) under Enhanced Smart Selfie", () => {
+    // IDLE is the pre-capture / timeout-retry state — the Start Capture
+    // button is visible, so the demo plays.
+    const { root } = renderContent({
+      ...baseState,
+      enableEnhancedLiveness: true,
+      overlayState: UseSmileIDOverlayState.IDLE,
+      feedbackKey: "si_start_capture_instruction",
+    });
+    expect(findByTestID(root, "si_ess_full_animation")).not.toBeNull();
+    expect(findByTestID(root, "si_ess_direction_animation")).toBeNull();
+  });
+
+  it("shows no animation during INSTRUCTION positioning (post-Start, pre-turn)", () => {
+    // The positioning phase ("centre your face") shows nothing, so the
+    // direction arrows are the first in-capture cue.
+    const { root } = renderContent({
+      ...baseState,
+      enableEnhancedLiveness: true,
+      overlayState: UseSmileIDOverlayState.INSTRUCTION,
+      feedbackKey: "si_ess_capture_initial_instruction",
+    });
+    expect(findByTestID(root, "si_ess_full_animation")).toBeNull();
+    expect(findByTestID(root, "si_ess_direction_animation")).toBeNull();
+  });
+
+  it("shows the direction cue during a head turn", () => {
+    const { root } = renderContent({
+      ...baseState,
+      enableEnhancedLiveness: true,
+      overlayState: UseSmileIDOverlayState.HEAD_TURN,
+      animationDirection: "left",
+      feedbackKey: "si_ess_look_left",
+    });
+    expect(findByTestID(root, "si_ess_direction_animation")).not.toBeNull();
+    expect(findByTestID(root, "si_ess_full_animation")).toBeNull();
+  });
+
+  it("hides the direction arrow and shows coaching copy when too-far mid-turn", () => {
+    // animationDirection null + a coaching key ⇒ no arrow, coaching copy shows.
+    const { root } = renderContent({
+      ...baseState,
+      enableEnhancedLiveness: true,
+      overlayState: UseSmileIDOverlayState.HEAD_TURN,
+      animationDirection: null,
+      feedbackKey: "si_capture_too_far",
+    });
+    expect(findByTestID(root, "si_ess_direction_animation")).toBeNull();
+    expect(findByTestID(root, "si_ess_full_animation")).toBeNull();
+    const text = findByTestID(root, "si_capture_feedback_text")!;
+    expect(collectText(text)).toBe(enStrings.si_capture_too_far);
+  });
+
+  it("hides both ESS cues outside idle/instruction when no turn is active", () => {
+    const { root } = renderContent({
+      ...baseState,
+      enableEnhancedLiveness: true,
+      overlayState: UseSmileIDOverlayState.CAPTURING,
+      feedbackKey: "si_ess_hold_still",
+    });
+    expect(findByTestID(root, "si_ess_direction_animation")).toBeNull();
+    expect(findByTestID(root, "si_ess_full_animation")).toBeNull();
+  });
+
+  it("renders neither in-oval cue for document capture", () => {
+    const { root } = renderContent({
+      ...baseState,
+      captureType: CaptureType.document,
+      overlayState: UseSmileIDOverlayState.DOCUMENT_READY,
+      feedbackKey: "si_document_ready",
+    });
+    expect(findByTestID(root, "si_capture_instruction_animation")).toBeNull();
+    expect(findByTestID(root, "si_ess_direction_animation")).toBeNull();
+    expect(findByTestID(root, "si_ess_full_animation")).toBeNull();
+  });
+
+  it("resolves the feedback key to localized copy", () => {
+    const { root } = renderContent({
+      ...baseState,
+      enableEnhancedLiveness: true,
+      overlayState: UseSmileIDOverlayState.CAPTURING,
+      feedbackKey: "si_ess_hold_still",
+    });
+    const text = findByTestID(root, "si_capture_feedback_text")!;
+    expect(collectText(text)).toBe(enStrings.si_ess_hold_still);
+  });
+
+  it("hides the feedback bubble when the key is null", () => {
+    const { root } = renderContent({ ...baseState, feedbackKey: null });
+    expect(findByTestID(root, "si_capture_feedback_text")).toBeNull();
+  });
+});
+
+describe("UseSmileIDCaptureContent memo — render-count contract", () => {
+  it("does not re-render when state and all props are identical", () => {
+    const { startButton, getRenderCount } = makeStartButtonProbe();
+    const stateWithButton: UseSmileIDCaptureContentState = {
+      ...baseState,
+      showCaptureButton: true,
+    };
+    const cameraPreview = React.createElement(View, {
+      testID: "si_inert_camera",
+    });
+    const onStartCapture = () => {};
+    let tree!: ReturnType<typeof createRenderer>;
+    act(() => {
+      tree = createRenderer(
+        React.createElement(UseSmileIDCaptureContent, {
+          state: stateWithButton,
+          captureProgress: 0,
+          cameraPreview,
+          onStartCapture,
+          startCaptureEnabled: true,
+          showAttribution: false,
+          startButton,
+        }),
+      );
+    });
+    const countAfterMount = getRenderCount();
+    act(() => {
+      tree.update(
+        React.createElement(UseSmileIDCaptureContent, {
+          state: stateWithButton,
+          captureProgress: 0,
+          cameraPreview,
+          onStartCapture,
+          startCaptureEnabled: true,
+          showAttribution: false,
+          startButton,
+        }),
+      );
+    });
+    expect(getRenderCount()).toBe(countAfterMount);
+  });
+
+  it("re-renders when a snapshot field (feedbackKey) changes", () => {
+    const { startButton, getRenderCount } = makeStartButtonProbe();
+    const stateA: UseSmileIDCaptureContentState = {
+      ...baseState,
+      showCaptureButton: true,
+    };
+    const stateB: UseSmileIDCaptureContentState = {
+      ...stateA,
+      feedbackKey: "si_capture_smile",
+    };
+    const cameraPreview = React.createElement(View, {
+      testID: "si_inert_camera",
+    });
+    // Stable so the snapshot change is the only varying prop.
+    const onStartCapture = () => {};
+    let tree!: ReturnType<typeof createRenderer>;
+    act(() => {
+      tree = createRenderer(
+        React.createElement(UseSmileIDCaptureContent, {
+          state: stateA,
+          captureProgress: 0,
+          cameraPreview,
+          onStartCapture,
+          startCaptureEnabled: true,
+          showAttribution: false,
+          startButton,
+        }),
+      );
+    });
+    const countAfterMount = getRenderCount();
+    act(() => {
+      tree.update(
+        React.createElement(UseSmileIDCaptureContent, {
+          state: stateB,
+          captureProgress: 0,
+          cameraPreview,
+          onStartCapture,
+          startCaptureEnabled: true,
+          showAttribution: false,
+          startButton,
+        }),
+      );
+    });
+    expect(getRenderCount()).toBeGreaterThan(countAfterMount);
+  });
+
+  it("re-renders when only captureProgress changes (it is a direct prop)", () => {
+    const { startButton, getRenderCount } = makeStartButtonProbe();
+    const stateWithButton: UseSmileIDCaptureContentState = {
+      ...baseState,
+      showCaptureButton: true,
+    };
+    const cameraPreview = React.createElement(View, {
+      testID: "si_inert_camera",
+    });
+    // Stable so captureProgress is the only varying prop.
+    const onStartCapture = () => {};
+    let tree!: ReturnType<typeof createRenderer>;
+    act(() => {
+      tree = createRenderer(
+        React.createElement(UseSmileIDCaptureContent, {
+          state: stateWithButton,
+          captureProgress: 0,
+          cameraPreview,
+          onStartCapture,
+          startCaptureEnabled: true,
+          showAttribution: false,
+          startButton,
+        }),
+      );
+    });
+    const countAfterMount = getRenderCount();
+    act(() => {
+      tree.update(
+        React.createElement(UseSmileIDCaptureContent, {
+          state: stateWithButton,
+          captureProgress: 0.5,
+          cameraPreview,
+          onStartCapture,
+          startCaptureEnabled: true,
+          showAttribution: false,
+          startButton,
+        }),
+      );
+    });
+    expect(getRenderCount()).toBeGreaterThan(countAfterMount);
+  });
+});
+
+function collectText(node: ReactTestInstance): string {
+  return node.children
+    .map((child) =>
+      typeof child === "string"
+        ? child
+        : collectText(child as ReactTestInstance),
+    )
+    .join("");
+}

package/src/presentation/components/__tests__/use_smile_id_confirmation_buttons.test.tsx

@@ -0,0 +1,131 @@
+import { describe, it, expect, vi } from "vitest";
+import * as React from "react";
+import {
+  create as createRenderer,
+  act,
+  type ReactTestInstance,
+} from "react-test-renderer";
+import { Text } from "react-native";
+import { UseSmileIDConfirmationButtons } from "../use_smile_id_confirmation_buttons";
+
+/**
+ * Confirmation-button tests. The key accessibility contract: each
+ * tile's accessible name is its *visible* label ("Retake" / "Confirm"),
+ * not an internal "accept" / "reject" alias.
+ */
+
+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;
+}
+
+/** The tile carries both the testID and the accessible name. */
+function findTile(
+  root: ReactTestInstance,
+  testID: string,
+): ReactTestInstance | null {
+  return (
+    root.findAll(
+      (node) =>
+        node.props.testID === testID &&
+        typeof node.props.accessibilityLabel === "string",
+    )[0] ?? null
+  );
+}
+
+function collectText(node: ReactTestInstance): string {
+  return node.children
+    .map((child) =>
+      typeof child === "string"
+        ? child
+        : collectText(child as ReactTestInstance),
+    )
+    .join("");
+}
+
+function findTextNode(
+  root: ReactTestInstance,
+  expected: string,
+): ReactTestInstance | null {
+  return (
+    root.findAll(
+      (node) => node.type === Text && collectText(node).includes(expected),
+      { deep: true },
+    )[0] ?? null
+  );
+}
+
+describe("UseSmileIDConfirmationButtons", () => {
+  it("renders default 'Retake' and 'Confirm' tiles", () => {
+    const { root } = render(
+      <UseSmileIDConfirmationButtons onAccept={vi.fn()} onReject={vi.fn()} />,
+    );
+    expect(findByTestID(root, "si_preview_reject_button")).not.toBeNull();
+    expect(findByTestID(root, "si_preview_accept_button")).not.toBeNull();
+    expect(findTextNode(root, "Retake")).not.toBeNull();
+    expect(findTextNode(root, "Confirm")).not.toBeNull();
+  });
+
+  it("uses the visible label as the accessible name (not 'accept'/'reject')", () => {
+    const { root } = render(
+      <UseSmileIDConfirmationButtons onAccept={vi.fn()} onReject={vi.fn()} />,
+    );
+    const reject = findTile(root, "si_preview_reject_button")!;
+    const accept = findTile(root, "si_preview_accept_button")!;
+    expect(reject.props.accessibilityLabel).toBe("Retake");
+    expect(accept.props.accessibilityLabel).toBe("Confirm");
+  });
+
+  it("forwards taps to the matching handler", () => {
+    const onAccept = vi.fn();
+    const onReject = vi.fn();
+    const { root } = render(
+      <UseSmileIDConfirmationButtons onAccept={onAccept} onReject={onReject} />,
+    );
+    act(() => {
+      (
+        findByTestID(root, "si_preview_reject_button")!.props
+          .onPress as () => void
+      )();
+    });
+    expect(onReject).toHaveBeenCalledTimes(1);
+    expect(onAccept).not.toHaveBeenCalled();
+
+    act(() => {
+      (
+        findByTestID(root, "si_preview_accept_button")!.props
+          .onPress as () => void
+      )();
+    });
+    expect(onAccept).toHaveBeenCalledTimes(1);
+  });
+
+  it("honors custom labels and keeps name == visible label", () => {
+    const { root } = render(
+      <UseSmileIDConfirmationButtons
+        onAccept={vi.fn()}
+        onReject={vi.fn()}
+        acceptLabel="Yes"
+        rejectLabel="No"
+      />,
+    );
+    expect(
+      findTile(root, "si_preview_accept_button")!.props.accessibilityLabel,
+    ).toBe("Yes");
+    expect(
+      findTile(root, "si_preview_reject_button")!.props.accessibilityLabel,
+    ).toBe("No");
+    expect(findTextNode(root, "Yes")).not.toBeNull();
+    expect(findTextNode(root, "No")).not.toBeNull();
+  });
+});