@smileid/usesmileid 12.0.0-beta01

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

@@ -0,0 +1,252 @@
+import { describe, expect, it, vi, beforeEach } from "vitest";
+import * as React from "react";
+import {
+  create as createRenderer,
+  act,
+  type ReactTestInstance,
+} from "react-test-renderer";
+import { AccessibilityInfo } from "react-native";
+import {
+  UseSmileIDEnhancedSmartSelfieClip,
+  ENHANCED_SMART_SELFIE_ANIMATION_SIZE,
+} from "../use_smile_id_enhanced_smart_selfie_clip";
+import {
+  ENHANCED_SMART_SELFIE_ANIMATION_OPACITY,
+  ENHANCED_SMART_SELFIE_ANIMATION_SPEED,
+  ENHANCED_SMART_SELFIE_TOTAL_FRAMES,
+} from "../helpers/enhanced_smart_selfie_animation_frames";
+
+const BASE_CONTAINER_WIDTH = 400;
+const BASE_CONTAINER_HEIGHT = 800;
+// The left direction's grey "pending" span — any in-bounds range works
+// for the direction-agnostic clip.
+const LEFT_START = 1;
+const LEFT_END = 41;
+
+function findByTestID(
+  root: ReactTestInstance,
+  testID: string,
+): ReactTestInstance | null {
+  const matches = root.findAllByProps({ testID });
+  return matches[0] ?? null;
+}
+
+function findLottieView(root: ReactTestInstance): ReactTestInstance | null {
+  const matches = root.findAllByType(
+    "LottieView" as unknown as React.ComponentType,
+  );
+  return matches[0] ?? null;
+}
+
+function renderClip(
+  overrides: Partial<
+    React.ComponentProps<typeof UseSmileIDEnhancedSmartSelfieClip>
+  > = {},
+) {
+  const props = {
+    startFrame: LEFT_START,
+    endFrame: LEFT_END,
+    pingPong: false,
+    containerWidth: BASE_CONTAINER_WIDTH,
+    containerHeight: BASE_CONTAINER_HEIGHT,
+    testID: "si_ess_test",
+    ...overrides,
+  };
+  let tree!: ReturnType<typeof createRenderer>;
+  act(() => {
+    tree = createRenderer(<UseSmileIDEnhancedSmartSelfieClip {...props} />);
+  });
+  return tree;
+}
+
+describe("UseSmileIDEnhancedSmartSelfieClip", () => {
+  beforeEach(() => {
+    // Default: reduced motion OFF.
+    vi.spyOn(AccessibilityInfo, "isReduceMotionEnabled").mockResolvedValue(
+      false,
+    );
+  });
+
+  describe("reduced motion", () => {
+    it("renders a static LottieView with progress equal to endFrame / totalFrames and no autoPlay", async () => {
+      vi.spyOn(AccessibilityInfo, "isReduceMotionEnabled").mockResolvedValue(
+        true,
+      );
+      const tree = renderClip({
+        startFrame: LEFT_START,
+        endFrame: LEFT_END,
+        pingPong: true,
+      });
+      // Allow the useEffect / promise in useReducedMotion to resolve.
+      await act(async () => {
+        await Promise.resolve();
+      });
+      const lottie = findLottieView(tree.root);
+      expect(lottie).not.toBeNull();
+      const expectedProgress = LEFT_END / ENHANCED_SMART_SELFIE_TOTAL_FRAMES;
+      expect(lottie!.props.progress).toBeCloseTo(expectedProgress);
+      expect(lottie!.props.autoPlay).toBe(false);
+      expect(lottie!.props.loop).toBe(false);
+    });
+  });
+
+  describe("full primer (pingPong === false)", () => {
+    it("renders a LottieView with autoPlay and loop for the full composition", async () => {
+      const tree = renderClip({
+        startFrame: 0,
+        endFrame: ENHANCED_SMART_SELFIE_TOTAL_FRAMES,
+        pingPong: false,
+      });
+      await act(async () => {
+        await Promise.resolve();
+      });
+      const lottie = findLottieView(tree.root);
+      expect(lottie).not.toBeNull();
+      expect(lottie!.props.autoPlay).toBe(true);
+      expect(lottie!.props.loop).toBe(true);
+    });
+
+    it("renders the outer View with the testID", async () => {
+      const tree = renderClip({
+        pingPong: false,
+        testID: "si_ess_full_animation",
+      });
+      await act(async () => {
+        await Promise.resolve();
+      });
+      expect(findByTestID(tree.root, "si_ess_full_animation")).not.toBeNull();
+    });
+  });
+
+  describe("direction cue (pingPong === true)", () => {
+    it("renders a LottieView with loop=false and autoPlay=false for manual ping-pong", async () => {
+      const tree = renderClip({ pingPong: true });
+      await act(async () => {
+        await Promise.resolve();
+      });
+      const lottie = findLottieView(tree.root);
+      expect(lottie).not.toBeNull();
+      expect(lottie!.props.loop).toBe(false);
+      expect(lottie!.props.autoPlay).toBe(false);
+    });
+
+    it("does not re-trigger play when onAnimationFinish is called with isCancelled=true", async () => {
+      const tree = renderClip({ pingPong: true });
+      await act(async () => {
+        await Promise.resolve();
+      });
+      const lottie = findLottieView(tree.root);
+      expect(lottie).not.toBeNull();
+      const onFinish = lottie!.props.onAnimationFinish as
+        | ((isCancelled: boolean) => void)
+        | undefined;
+      expect(onFinish).toBeDefined();
+      act(() => {
+        onFinish!(true);
+      });
+      const lottieAfter = findLottieView(tree.root);
+      expect(lottieAfter!.props.loop).toBe(false);
+    });
+
+    it("attaches an onAnimationFinish handler that completes two cycles without crashing", async () => {
+      const tree = renderClip({
+        pingPong: true,
+        startFrame: LEFT_START,
+        endFrame: LEFT_END,
+        testID: "si_ess_direction_animation",
+      });
+      await act(async () => {
+        await Promise.resolve();
+      });
+      const lottie = findLottieView(tree.root);
+      expect(lottie).not.toBeNull();
+      const onFinish = lottie!.props.onAnimationFinish as
+        | ((isCancelled: boolean) => void)
+        | undefined;
+      expect(onFinish).toBeDefined();
+      // Two non-cancelled completions = one forward → backward toggle.
+      act(() => {
+        onFinish!(false);
+      });
+      act(() => {
+        onFinish!(false);
+      });
+      expect(
+        findByTestID(tree.root, "si_ess_direction_animation"),
+      ).not.toBeNull();
+    });
+  });
+
+  describe("size guard", () => {
+    it("renders null when containerWidth is 0", async () => {
+      const tree = renderClip({ containerWidth: 0 });
+      await act(async () => {
+        await Promise.resolve();
+      });
+      expect(tree.toJSON()).toBeNull();
+    });
+
+    it("renders null when containerHeight is 0", async () => {
+      const tree = renderClip({ containerHeight: 0 });
+      await act(async () => {
+        await Promise.resolve();
+      });
+      expect(tree.toJSON()).toBeNull();
+    });
+  });
+
+  describe("positioning", () => {
+    it("produces a container sized to ENHANCED_SMART_SELFIE_ANIMATION_SIZE", async () => {
+      const tree = renderClip({ pingPong: false });
+      await act(async () => {
+        await Promise.resolve();
+      });
+      // findAllByProps can match the stub wrapper too — assert on the
+      // first match that carries a style object.
+      const matches = tree.root.findAllByProps({ testID: "si_ess_test" });
+      const container = matches.find(
+        (match) =>
+          match.props.style !== undefined && match.props.style !== null,
+      );
+      expect(container).toBeDefined();
+      const style = container!.props.style as { width: number; height: number };
+      expect(style.width).toBe(ENHANCED_SMART_SELFIE_ANIMATION_SIZE);
+      expect(style.height).toBe(ENHANCED_SMART_SELFIE_ANIMATION_SIZE);
+    });
+  });
+
+  describe("tuning — opacity + speed", () => {
+    it("renders the cue at 0.75 opacity so the face stays the focal point", async () => {
+      const tree = renderClip({ pingPong: false });
+      await act(async () => {
+        await Promise.resolve();
+      });
+      const matches = tree.root.findAllByProps({ testID: "si_ess_test" });
+      const container = matches.find(
+        (match) =>
+          match.props.style !== undefined && match.props.style !== null,
+      );
+      expect(container).toBeDefined();
+      const style = container!.props.style as { opacity: number };
+      expect(style.opacity).toBe(ENHANCED_SMART_SELFIE_ANIMATION_OPACITY);
+    });
+
+    it("plays the full primer at 0.6x speed", async () => {
+      const tree = renderClip({ pingPong: false });
+      await act(async () => {
+        await Promise.resolve();
+      });
+      const lottie = findLottieView(tree.root);
+      expect(lottie!.props.speed).toBe(ENHANCED_SMART_SELFIE_ANIMATION_SPEED);
+    });
+
+    it("plays the ping-pong direction cue at 0.6x speed", async () => {
+      const tree = renderClip({ pingPong: true });
+      await act(async () => {
+        await Promise.resolve();
+      });
+      const lottie = findLottieView(tree.root);
+      expect(lottie!.props.speed).toBe(ENHANCED_SMART_SELFIE_ANIMATION_SPEED);
+    });
+  });
+});

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

@@ -0,0 +1,138 @@
+import { describe, expect, it, vi, beforeEach } from "vitest";
+import * as React from "react";
+import {
+  create as createRenderer,
+  act,
+  type ReactTestInstance,
+} from "react-test-renderer";
+import { AccessibilityInfo } from "react-native";
+import { UseSmileIDEnhancedSmartSelfieDirectionAnimation } from "../use_smile_id_enhanced_smart_selfie_direction_animation";
+import {
+  ENHANCED_SMART_SELFIE_TOTAL_FRAMES,
+  enhancedSmartSelfieFrameRange,
+} from "../helpers/enhanced_smart_selfie_animation_frames";
+
+const CONTAINER_WIDTH = 400;
+const CONTAINER_HEIGHT = 800;
+
+function findLottieView(root: ReactTestInstance): ReactTestInstance | null {
+  return (
+    root.findAllByType("LottieView" as unknown as React.ComponentType)[0] ??
+    null
+  );
+}
+
+function renderDirection(
+  direction: "left" | "right" | "up" | null,
+  poseMatched: boolean,
+) {
+  let tree!: ReturnType<typeof createRenderer>;
+  act(() => {
+    tree = createRenderer(
+      <UseSmileIDEnhancedSmartSelfieDirectionAnimation
+        direction={direction}
+        poseMatched={poseMatched}
+        containerWidth={CONTAINER_WIDTH}
+        containerHeight={CONTAINER_HEIGHT}
+      />,
+    );
+  });
+  return tree;
+}
+
+describe("UseSmileIDEnhancedSmartSelfieDirectionAnimation", () => {
+  it("renders nothing when there is no active direction", () => {
+    const tree = renderDirection(null, false);
+    expect(tree.toJSON()).toBeNull();
+  });
+
+  describe("grey → green selection (reduced motion holds the segment end)", () => {
+    beforeEach(() => {
+      // Reduced motion holds the clip's final frame as a static
+      // progress, which makes the selected segment observable.
+      vi.spyOn(AccessibilityInfo, "isReduceMotionEnabled").mockResolvedValue(
+        true,
+      );
+    });
+
+    it("holds the grey pending segment while the pose is not matched", async () => {
+      for (const direction of ["left", "right", "up"] as const) {
+        const tree = renderDirection(direction, false);
+        await act(async () => {
+          await Promise.resolve();
+        });
+        const lottie = findLottieView(tree.root);
+        const { endFrame } = enhancedSmartSelfieFrameRange(direction, false);
+        expect(lottie!.props.progress).toBeCloseTo(
+          endFrame / ENHANCED_SMART_SELFIE_TOTAL_FRAMES,
+        );
+      }
+    });
+
+    it("holds the green matched segment while the pose holds", async () => {
+      for (const direction of ["left", "right", "up"] as const) {
+        const tree = renderDirection(direction, true);
+        await act(async () => {
+          await Promise.resolve();
+        });
+        const lottie = findLottieView(tree.root);
+        const { endFrame } = enhancedSmartSelfieFrameRange(direction, true);
+        expect(lottie!.props.progress).toBeCloseTo(
+          endFrame / ENHANCED_SMART_SELFIE_TOTAL_FRAMES,
+        );
+      }
+    });
+  });
+
+  it("renders the direction cue with its testID for an active direction", async () => {
+    vi.spyOn(AccessibilityInfo, "isReduceMotionEnabled").mockResolvedValue(
+      false,
+    );
+    const tree = renderDirection("left", false);
+    await act(async () => {
+      await Promise.resolve();
+    });
+    expect(
+      tree.root.findAllByProps({ testID: "si_ess_direction_animation" })[0],
+    ).toBeDefined();
+  });
+
+  it("switches the pose-match segment in place — one cue, never a second view", async () => {
+    vi.spyOn(AccessibilityInfo, "isReduceMotionEnabled").mockResolvedValue(
+      false,
+    );
+    let tree!: ReturnType<typeof createRenderer>;
+    act(() => {
+      tree = createRenderer(
+        <UseSmileIDEnhancedSmartSelfieDirectionAnimation
+          direction="left"
+          poseMatched={false}
+          containerWidth={CONTAINER_WIDTH}
+          containerHeight={CONTAINER_HEIGHT}
+        />,
+      );
+    });
+    await act(async () => {
+      await Promise.resolve();
+    });
+    const lottieBefore = findLottieView(tree.root);
+    // Flip poseMatched — the same Lottie view must switch segments rather
+    // than unmount/remount.
+    act(() => {
+      tree.update(
+        <UseSmileIDEnhancedSmartSelfieDirectionAnimation
+          direction="left"
+          poseMatched={true}
+          containerWidth={CONTAINER_WIDTH}
+          containerHeight={CONTAINER_HEIGHT}
+        />,
+      );
+    });
+    const lottieViews = tree.root.findAllByType(
+      "LottieView" as unknown as React.ComponentType,
+    );
+    expect(lottieViews).toHaveLength(1);
+    // The same host instance persists across the pose-match flip.
+    expect(lottieViews[0]).toBe(lottieBefore);
+  });
+});

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

@@ -0,0 +1,211 @@
+import { describe, expect, it } from "vitest";
+import * as React from "react";
+import {
+  create as createRenderer,
+  act,
+  type ReactTestInstance,
+} from "react-test-renderer";
+import { UseSmileIDFaceOverlay } from "../use_smile_id_face_overlay";
+import { UseSmileIDOverlayState } from "../../state/use_smile_id_overlay_state";
+import { defaultLightTheme } from "../../theme/theme";
+
+// The SVG mock forwards props, so assertions probe stroke colors and
+// testIDs directly; animations resolve synchronously under the shim.
+
+const WIDTH = 400;
+const HEIGHT = 800;
+
+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 findEllipsesByStroke(
+  root: ReactTestInstance,
+  stroke: string,
+): ReactTestInstance[] {
+  return root.findAllByProps({ stroke });
+}
+
+describe("UseSmileIDFaceOverlay", () => {
+  it("renders nothing until the container has measured", () => {
+    const tree = render(
+      <UseSmileIDFaceOverlay
+        state={UseSmileIDOverlayState.IDLE}
+        containerWidth={0}
+        containerHeight={0}
+        testID="si_face_overlay"
+        theme={defaultLightTheme}
+      />,
+    );
+    expect(tree.toJSON()).toBeNull();
+  });
+
+  it("renders the neutral gray rim for IDLE and INSTRUCTION — no green flash", () => {
+    for (const state of [
+      UseSmileIDOverlayState.IDLE,
+      UseSmileIDOverlayState.INSTRUCTION,
+    ]) {
+      const { root } = render(
+        <UseSmileIDFaceOverlay
+          state={state}
+          containerWidth={WIDTH}
+          containerHeight={HEIGHT}
+          theme={defaultLightTheme}
+        />,
+      );
+      expect(
+        findEllipsesByStroke(root, defaultLightTheme.colors.ovalDefault).length,
+      ).toBeGreaterThan(0);
+      expect(
+        findEllipsesByStroke(root, defaultLightTheme.colors.ovalActive),
+      ).toHaveLength(0);
+    }
+  });
+
+  it("renders the green rim at READY", () => {
+    const { root } = render(
+      <UseSmileIDFaceOverlay
+        state={UseSmileIDOverlayState.READY}
+        containerWidth={WIDTH}
+        containerHeight={HEIGHT}
+        theme={defaultLightTheme}
+      />,
+    );
+    expect(
+      findEllipsesByStroke(root, defaultLightTheme.colors.ovalActive).length,
+    ).toBeGreaterThan(0);
+  });
+
+  it("draws the 6px stroke on the rim", () => {
+    const { root } = render(
+      <UseSmileIDFaceOverlay
+        state={UseSmileIDOverlayState.IDLE}
+        containerWidth={WIDTH}
+        containerHeight={HEIGHT}
+        theme={defaultLightTheme}
+      />,
+    );
+    const rim = findEllipsesByStroke(
+      root,
+      defaultLightTheme.colors.ovalDefault,
+    )[0];
+    expect(rim?.props.strokeWidth).toBe(4);
+  });
+
+  it("draws track + fill while progress > 0 on a non-directional state", () => {
+    const { root } = render(
+      <UseSmileIDFaceOverlay
+        state={UseSmileIDOverlayState.CAPTURING}
+        progress={0.5}
+        containerWidth={WIDTH}
+        containerHeight={HEIGHT}
+        theme={defaultLightTheme}
+      />,
+    );
+    expect(
+      findEllipsesByStroke(root, defaultLightTheme.colors.ovalDefault).length,
+    ).toBeGreaterThan(0);
+    expect(
+      findEllipsesByStroke(root, defaultLightTheme.colors.ovalActive).length,
+    ).toBeGreaterThan(0);
+  });
+
+  it("suppresses the progress ring and draws the red arc while directional", () => {
+    const { root } = render(
+      <UseSmileIDFaceOverlay
+        state={UseSmileIDOverlayState.MOVE_LEFT}
+        progress={0.5}
+        containerWidth={WIDTH}
+        containerHeight={HEIGHT}
+        theme={defaultLightTheme}
+      />,
+    );
+    expect(
+      findByTestID(root, "si_face_overlay_directional_arc"),
+    ).not.toBeNull();
+    expect(
+      findEllipsesByStroke(
+        root,
+        defaultLightTheme.colors.ovalDirectionalIndicator,
+      ).length,
+    ).toBeGreaterThan(0);
+    expect(
+      findEllipsesByStroke(root, defaultLightTheme.colors.ovalActive),
+    ).toHaveLength(0);
+  });
+
+  it("keeps the arc mounted after the directional state clears so the fade-out stays anchored", () => {
+    const tree = render(
+      <UseSmileIDFaceOverlay
+        state={UseSmileIDOverlayState.MOVE_RIGHT}
+        containerWidth={WIDTH}
+        containerHeight={HEIGHT}
+        theme={defaultLightTheme}
+      />,
+    );
+    act(() => {
+      tree.update(
+        <UseSmileIDFaceOverlay
+          state={UseSmileIDOverlayState.FACE_DETECTED}
+          containerWidth={WIDTH}
+          containerHeight={HEIGHT}
+          theme={defaultLightTheme}
+        />,
+      );
+    });
+    expect(
+      findByTestID(tree.root, "si_face_overlay_directional_arc"),
+    ).not.toBeNull();
+  });
+
+  it("never mounts the arc before any directional state was seen", () => {
+    const { root } = render(
+      <UseSmileIDFaceOverlay
+        state={UseSmileIDOverlayState.FACE_DETECTED}
+        containerWidth={WIDTH}
+        containerHeight={HEIGHT}
+        theme={defaultLightTheme}
+      />,
+    );
+    expect(findByTestID(root, "si_face_overlay_directional_arc")).toBeNull();
+  });
+
+  it("exposes the rising fill to assistive tech as a labelled percent", () => {
+    const { root } = render(
+      <UseSmileIDFaceOverlay
+        state={UseSmileIDOverlayState.CAPTURING}
+        progress={0.5}
+        containerWidth={WIDTH}
+        containerHeight={HEIGHT}
+        theme={defaultLightTheme}
+      />,
+    );
+    const node = findByTestID(root, "si_face_overlay_progress_semantics");
+    expect(node).not.toBeNull();
+    expect(node?.props.accessibilityLabel).toBe("Capture progress");
+    expect(node?.props.accessibilityValue).toEqual({ text: "50%" });
+  });
+
+  it("contributes no accessibility node at progress 0", () => {
+    const { root } = render(
+      <UseSmileIDFaceOverlay
+        state={UseSmileIDOverlayState.FACE_DETECTED}
+        containerWidth={WIDTH}
+        containerHeight={HEIGHT}
+        theme={defaultLightTheme}
+      />,
+    );
+    expect(findByTestID(root, "si_face_overlay_progress_semantics")).toBeNull();
+  });
+});

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

@@ -0,0 +1,79 @@
+import { describe, it, expect } from "vitest";
+import * as React from "react";
+import {
+  create as createRenderer,
+  act,
+  type ReactTestInstance,
+} from "react-test-renderer";
+import { Text } from "react-native";
+import { UseSmileIDGuidelineThumbnail } from "../use_smile_id_guideline_thumbnail";
+import { SELFIE_GUIDELINES } from "../../flow/model/instructions_defaults";
+
+function render(element: React.ReactElement) {
+  let tree!: ReturnType<typeof createRenderer>;
+  act(() => {
+    tree = createRenderer(element);
+  });
+  return tree;
+}
+
+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
+  );
+}
+
+// SELFIE_GUIDELINES order: [Good (allowed), Accessories, Multiple Faces, Poor Lighting].
+const allowedGuideline = SELFIE_GUIDELINES[0]!;
+const blockedGuideline = SELFIE_GUIDELINES[3]!;
+
+describe("UseSmileIDGuidelineThumbnail", () => {
+  it("renders the localized caption", () => {
+    const { root } = render(
+      <UseSmileIDGuidelineThumbnail guideline={allowedGuideline} />,
+    );
+    expect(findTextNode(root, "Good")).not.toBeNull();
+  });
+
+  it("exposes the allowed badge with the localized accessibility label", () => {
+    const { root } = render(
+      <UseSmileIDGuidelineThumbnail guideline={allowedGuideline} />,
+    );
+    expect(
+      root.findAllByProps({ accessibilityLabel: "Allowed" })[0],
+    ).toBeTruthy();
+    // The opposite (blocked) label must be absent for an allowed guideline.
+    expect(
+      root.findAllByProps({ accessibilityLabel: "Not allowed" }),
+    ).toHaveLength(0);
+  });
+
+  it("exposes the blocked badge and caption for a blocked guideline", () => {
+    const { root } = render(
+      <UseSmileIDGuidelineThumbnail guideline={blockedGuideline} />,
+    );
+    expect(findTextNode(root, "Poor Lighting")).not.toBeNull();
+    expect(
+      root.findAllByProps({ accessibilityLabel: "Not allowed" })[0],
+    ).toBeTruthy();
+    expect(root.findAllByProps({ accessibilityLabel: "Allowed" })).toHaveLength(
+      0,
+    );
+  });
+});