@smileid/usesmileid 12.0.2 → 12.1.1

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

@@ -1,256 +0,0 @@
-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_ARROW_FIT,
-} from "../use_smile_id_enhanced_smart_selfie_clip";
-import { FaceOvalDefaults } from "../face_oval_defaults";
-import {
-  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("sizes the container to the oval width times the arrow-fit factor", 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 };
-      const expectedSize =
-        BASE_CONTAINER_WIDTH *
-        FaceOvalDefaults.ovalWidthRatio *
-        ENHANCED_SMART_SELFIE_ARROW_FIT;
-      expect(style.width).toBe(expectedSize);
-      expect(style.height).toBe(expectedSize);
-    });
-  });
-
-  describe("tuning — opacity + speed", () => {
-    it("renders the cue at full opacity (no translucency over the animation)", 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).toBeUndefined();
-    });
-
-    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

@@ -1,138 +0,0 @@
-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_oval_image.test.tsx

@@ -1,190 +0,0 @@
-import { describe, it, expect, vi } from "vitest";
-import * as React from "react";
-import {
-  create as createRenderer,
-  act,
-  type ReactTestInstance,
-} from "react-test-renderer";
-
-// The shared setup's `react-native-svg` stub omits `Image`, which this
-// component needs. Re-stub locally (same host-forwarding shape) so the SVG
-// tree is inspectable without touching the workspace-wide setup.
-vi.mock("react-native-svg", async () => {
-  const React = await import("react");
-  function SvgHost(props: Record<string, unknown>) {
-    const { children, ...rest } = props as {
-      children?: React.ReactNode;
-    } & Record<string, unknown>;
-    return React.createElement("Svg", rest, children);
-  }
-  return {
-    __esModule: true,
-    default: SvgHost,
-    Svg: SvgHost,
-    Defs: SvgHost,
-    ClipPath: SvgHost,
-    Ellipse: SvgHost,
-    Image: SvgHost,
-  };
-});
-
-import { UseSmileIDFaceOvalImage } from "../use_smile_id_face_oval_image";
-import { computeFaceOvalGeometry } from "../face_oval_defaults";
-
-function render(element: React.ReactElement) {
-  let tree!: ReturnType<typeof createRenderer>;
-  act(() => {
-    tree = createRenderer(element);
-  });
-  return tree;
-}
-
-/** The host (string-typed) instance carrying `testID`, not the composite. */
-function host(
-  tree: ReturnType<typeof createRenderer>,
-  testID: string,
-): ReactTestInstance {
-  const match = tree.root
-    .findAllByProps({ testID })
-    .find((instance) => typeof instance.type === "string");
-  if (!match) throw new Error(`no host element with testID ${testID}`);
-  return match;
-}
-
-function flatStyle(instance: ReactTestInstance): Record<string, unknown> {
-  const style = instance.props.style as unknown;
-  const parts = Array.isArray(style) ? style : [style];
-  return Object.assign(
-    {},
-    ...parts.filter((part): part is Record<string, unknown> => Boolean(part)),
-  ) as Record<string, unknown>;
-}
-
-const URI = "file:///selfie.jpg";
-
-describe("UseSmileIDFaceOvalImage", () => {
-  it("renders nothing until the canvas has measured", () => {
-    const tree = render(
-      <UseSmileIDFaceOvalImage
-        uri={URI}
-        containerWidth={0}
-        containerHeight={0}
-      />,
-    );
-
-    expect(tree.toJSON()).toBeNull();
-  });
-
-  it("renders nothing when only one dimension has measured", () => {
-    const tree = render(
-      <UseSmileIDFaceOvalImage
-        uri={URI}
-        containerWidth={320}
-        containerHeight={0}
-      />,
-    );
-
-    expect(tree.toJSON()).toBeNull();
-  });
-
-  it("renders nothing when there is no captured file yet", () => {
-    const tree = render(
-      <UseSmileIDFaceOvalImage
-        uri=""
-        containerWidth={320}
-        containerHeight={480}
-      />,
-    );
-
-    expect(tree.toJSON()).toBeNull();
-  });
-
-  it("positions the oval at the canonical face-oval rect", () => {
-    const geometry = computeFaceOvalGeometry(320, 480);
-    const tree = render(
-      <UseSmileIDFaceOvalImage
-        uri={URI}
-        containerWidth={320}
-        containerHeight={480}
-        testID="si_face_oval_image"
-      />,
-    );
-
-    const style = flatStyle(host(tree, "si_face_oval_image"));
-    expect(style.width).toBeCloseTo(geometry.ovalWidth, 5);
-    expect(style.height).toBeCloseTo(geometry.ovalHeight, 5);
-    expect(style.left).toBeCloseTo(geometry.ovalLeft, 5);
-    expect(style.top).toBeCloseTo(geometry.ovalTop, 5);
-    expect(style.position).toBe("absolute");
-  });
-
-  it("draws the captured file clipped to the ellipse", () => {
-    const geometry = computeFaceOvalGeometry(320, 480);
-    const tree = render(
-      <UseSmileIDFaceOvalImage
-        uri={URI}
-        containerWidth={320}
-        containerHeight={480}
-      />,
-    );
-
-    const json = JSON.stringify(tree.toJSON());
-    expect(json).toContain(URI);
-    // The clip id ties the <Image> to the <ClipPath><Ellipse>; a mismatch
-    // renders an unclipped rectangle over the preview.
-    expect(json).toContain("url(#si_face_oval_image_clip)");
-    expect(json).toContain(`0 0 ${geometry.ovalWidth} ${geometry.ovalHeight}`);
-  });
-
-  it("sizes the ellipse to the full oval so the crop is not inset", () => {
-    const geometry = computeFaceOvalGeometry(320, 480);
-    const tree = render(
-      <UseSmileIDFaceOvalImage
-        uri={URI}
-        containerWidth={320}
-        containerHeight={480}
-      />,
-    );
-
-    const ellipse = tree.root
-      .findAllByType("Svg" as unknown as React.ComponentType)
-      .find((instance) => instance.props.rx !== undefined);
-    expect(ellipse?.props.rx).toBeCloseTo(geometry.ovalWidth / 2, 5);
-    expect(ellipse?.props.ry).toBeCloseTo(geometry.ovalHeight / 2, 5);
-    expect(ellipse?.props.cx).toBeCloseTo(geometry.ovalWidth / 2, 5);
-    expect(ellipse?.props.cy).toBeCloseTo(geometry.ovalHeight / 2, 5);
-  });
-
-  it("rescales the oval when the canvas resizes", () => {
-    const small = flatStyle(
-      host(
-        render(
-          <UseSmileIDFaceOvalImage
-            uri={URI}
-            containerWidth={320}
-            containerHeight={480}
-            testID="si_face_oval_image"
-          />,
-        ),
-        "si_face_oval_image",
-      ),
-    );
-    const large = flatStyle(
-      host(
-        render(
-          <UseSmileIDFaceOvalImage
-            uri={URI}
-            containerWidth={640}
-            containerHeight={960}
-            testID="si_face_oval_image"
-          />,
-        ),
-        "si_face_oval_image",
-      ),
-    );
-
-    expect(large.width as number).toBeCloseTo((small.width as number) * 2, 5);
-    expect(large.height as number).toBeCloseTo((small.height as number) * 2, 5);
-    expect(large.top as number).toBeCloseTo((small.top as number) * 2, 5);
-  });
-});