@smileid/usesmileid 12.0.2 → 12.1.0

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

@@ -1,211 +0,0 @@
-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

@@ -1,112 +0,0 @@
-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 {
-  DOCUMENT_GUIDELINES_PASSPORT,
-  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,
-    );
-  });
-});
-
-// DOCUMENT_GUIDELINES_PASSPORT order: [Good (allowed), …, Not reflective]; these
-// carry a `card` size → the thumbnail renders the document-card layout.
-const documentAllowedGuideline = DOCUMENT_GUIDELINES_PASSPORT[0]!;
-const documentBlockedGuideline = DOCUMENT_GUIDELINES_PASSPORT[3]!;
-
-describe("UseSmileIDGuidelineThumbnail — document card", () => {
-  it("renders the caption and allowed badge for a document guideline", () => {
-    const { root } = render(
-      <UseSmileIDGuidelineThumbnail guideline={documentAllowedGuideline} />,
-    );
-    expect(findTextNode(root, "Good")).not.toBeNull();
-    expect(
-      root.findAllByProps({ accessibilityLabel: "Allowed" })[0],
-    ).toBeTruthy();
-    expect(
-      root.findAllByProps({ accessibilityLabel: "Not allowed" }),
-    ).toHaveLength(0);
-  });
-
-  it("renders the blocked badge and caption for a blocked document guideline", () => {
-    const { root } = render(
-      <UseSmileIDGuidelineThumbnail guideline={documentBlockedGuideline} />,
-    );
-    expect(findTextNode(root, "Not reflective")).not.toBeNull();
-    expect(
-      root.findAllByProps({ accessibilityLabel: "Not allowed" })[0],
-    ).toBeTruthy();
-  });
-});

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

@@ -1,150 +0,0 @@
-import { describe, it, expect, vi } from "vitest";
-import * as React from "react";
-import { Animated } from "react-native";
-import { create as createRenderer, act } from "react-test-renderer";
-import {
-  UseSmileIDInstructionsHero,
-  OVAL_PROGRESS_DURATION_MS,
-  loopDurationMs,
-} from "../use_smile_id_instructions_hero";
-import { AnimatedLottieView } from "../helpers/animated_lottie_view";
-import { SELFIE_HERO_ANIMATION } from "../../flow/model/instructions_defaults";
-
-function render(element: React.ReactElement) {
-  let tree!: ReturnType<typeof createRenderer>;
-  act(() => {
-    tree = createRenderer(element);
-  });
-  return tree;
-}
-
-/**
- * Smoke tests for the hero. The renderer never fires `onLayout`, so the
- * measured slot stays 0×0 and the SVG/Lottie subtree isn't materialized —
- * these assert the component mounts and tears down cleanly across the oval
- * and progress-disabled variants without throwing.
- */
-describe("UseSmileIDInstructionsHero", () => {
-  it("mounts with a static (no-progress) ring", () => {
-    const { root } = render(
-      <UseSmileIDInstructionsHero
-        source={SELFIE_HERO_ANIMATION}
-        showOval
-        showOvalProgress={false}
-      />,
-    );
-    expect(
-      root.findAllByProps({ testID: "si_instructions_hero" })[0],
-    ).toBeTruthy();
-  });
-
-  it("mounts and unmounts with the progress ring enabled", () => {
-    const tree = render(
-      <UseSmileIDInstructionsHero
-        source={SELFIE_HERO_ANIMATION}
-        showOval
-        showOvalProgress
-      />,
-    );
-    expect(
-      tree.root.findAllByProps({ testID: "si_instructions_hero" })[0],
-    ).toBeTruthy();
-    // Unmount must stop the loop / remove the reduced-motion listener cleanly.
-    act(() => tree.unmount());
-  });
-
-  it("drives the ring fill and the hero on separate, decoupled durations", () => {
-    // Guards the decoupling: the ring fills on the fixed
-    // OVAL_PROGRESS_DURATION_MS loop while the hero plays at its own
-    // composition pace (loopDurationMs(source)). A future refactor that
-    // re-couples the two — or changes the ring duration — fails here.
-    const timingSpy = vi.spyOn(Animated, "timing");
-    try {
-      const tree = render(
-        <UseSmileIDInstructionsHero
-          source={SELFIE_HERO_ANIMATION}
-          showOval
-          showOvalProgress
-        />,
-      );
-      const durations = timingSpy.mock.calls.map(
-        ([, config]) => (config as { duration: number }).duration,
-      );
-      expect(durations).toContain(OVAL_PROGRESS_DURATION_MS);
-      expect(durations).toContain(loopDurationMs(SELFIE_HERO_ANIMATION));
-      act(() => tree.unmount());
-    } finally {
-      timingSpy.mockRestore();
-    }
-  });
-
-  it("pins oval-less heroes to the software Lottie engine on iOS", () => {
-    // lottie-ios's CA engine mis-renders the doc heroes' track mattes, so
-    // oval-less heroes must pin renderMode SOFTWARE on iOS.
-    const docTree = render(
-      <UseSmileIDInstructionsHero
-        source={SELFIE_HERO_ANIMATION}
-        showOval={false}
-        showOvalProgress={false}
-      />,
-    );
-    const docHero = docTree.root.findByProps({
-      testID: "si_instructions_hero",
-    });
-    act(() => {
-      docHero.props.onLayout({
-        nativeEvent: { layout: { width: 390, height: 600 } },
-      });
-    });
-    expect(docTree.root.findByType(AnimatedLottieView).props.renderMode).toBe(
-      "SOFTWARE",
-    );
-    act(() => docTree.unmount());
-
-    const ovalTree = render(
-      <UseSmileIDInstructionsHero
-        source={SELFIE_HERO_ANIMATION}
-        showOval
-        showOvalProgress={false}
-      />,
-    );
-    const ovalHero = ovalTree.root.findByProps({
-      testID: "si_instructions_hero",
-    });
-    act(() => {
-      ovalHero.props.onLayout({
-        nativeEvent: { layout: { width: 390, height: 600 } },
-      });
-    });
-    expect(
-      ovalTree.root.findByType(AnimatedLottieView).props.renderMode,
-    ).toBeUndefined();
-    act(() => ovalTree.unmount());
-  });
-
-  it("gives the document card hero explicit dimensions (no intrinsic-size flash)", () => {
-    const tree = render(
-      <UseSmileIDInstructionsHero
-        source={SELFIE_HERO_ANIMATION}
-        showCardBackground
-        showOvalProgress={false}
-      />,
-    );
-    // The renderer doesn't fire onLayout on its own; drive it so the measured
-    // subtree (card + Lottie) materializes.
-    const hero = tree.root.findByProps({ testID: "si_instructions_hero" });
-    act(() => {
-      hero.props.onLayout({
-        nativeEvent: { layout: { width: 384, height: 600 } },
-      });
-    });
-
-    const lottie = tree.root.findByType(AnimatedLottieView);
-    const style = lottie.props.style as { width?: unknown; height?: unknown };
-    // Regression guard: explicit numeric width/height (not absoluteFill), else the Lottie
-    // flashes at the composition's intrinsic size on first render.
-    expect(typeof style.width).toBe("number");
-    expect(typeof style.height).toBe("number");
-    act(() => tree.unmount());
-  });
-});

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

@@ -1,159 +0,0 @@
-import { describe, expect, it, beforeEach, vi } from "vitest";
-import * as React from "react";
-import {
-  create as createRenderer,
-  act,
-  type ReactTestInstance,
-} from "react-test-renderer";
-import { Linking, Text } from "react-native";
-import { UseSmileIDCrashReporting } from "@smileid/usesmileid_bridge";
-
-import { UseSmileIDLearnMoreContent } from "../use_smile_id_learn_more_content";
-import { enStrings } from "../../../l10n/strings_en";
-
-/**
- * The consent screen's expandable privacy section. Two things must
- * hold: the `{smile_id}` / `{partner}` / `{retention}` tokens are all
- * substituted (a leaked token ships raw template text to a user), and
- * a device with no browser must surface through crash reporting rather
- * than presenting as a dead tap.
- */
-
-const SMILE_ID_PRIVACY_URL = "https://usesmileid.com/privacy-policy/";
-
-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("");
-}
-
-/** The pressable inline links, in render order: DSAR, Smile ID, partner. */
-function links(root: ReactTestInstance): ReactTestInstance[] {
-  return root.findAll(
-    (node) => node.type === Text && typeof node.props.onPress === "function",
-    { deep: true },
-  );
-}
-
-describe("UseSmileIDLearnMoreContent", () => {
-  beforeEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  it("substitutes every token in the description template", () => {
-    const { root } = render(
-      <UseSmileIDLearnMoreContent
-        partnerName="Acme Bank"
-        testID="si_learn_more"
-      />,
-    );
-
-    const text = collectText(root.findByProps({ testID: "si_learn_more" }));
-    expect(text).toContain("Acme Bank");
-    expect(text).toContain(
-      enStrings.si_consent_learn_more_description_smile_id,
-    );
-    expect(text).toContain(
-      enStrings.si_consent_learn_more_description_retention,
-    );
-    expect(text).not.toContain("{smile_id}");
-    expect(text).not.toContain("{partner}");
-    expect(text).not.toContain("{retention}");
-  });
-
-  it("opens the Smile ID privacy policy from the DSAR and privacy links", async () => {
-    const openURL = vi.spyOn(Linking, "openURL").mockResolvedValue(undefined);
-    const { root } = render(
-      <UseSmileIDLearnMoreContent partnerName="Acme Bank" />,
-    );
-
-    await act(async () => {
-      links(root)[0]?.props.onPress();
-    });
-
-    expect(openURL).toHaveBeenCalledWith(SMILE_ID_PRIVACY_URL);
-  });
-
-  it("opens the partner's own policy when one is configured", async () => {
-    const openURL = vi.spyOn(Linking, "openURL").mockResolvedValue(undefined);
-    const { root } = render(
-      <UseSmileIDLearnMoreContent
-        partnerName="Acme Bank"
-        partnerPrivacyPolicyUrl="https://acme.test/privacy"
-      />,
-    );
-
-    const partnerLink = links(root).at(-1);
-    await act(async () => {
-      partnerLink?.props.onPress();
-    });
-
-    expect(openURL).toHaveBeenCalledWith("https://acme.test/privacy");
-  });
-
-  it("is a silent no-op when the partner supplied no policy URL", async () => {
-    const openURL = vi.spyOn(Linking, "openURL").mockResolvedValue(undefined);
-    const { root } = render(
-      <UseSmileIDLearnMoreContent partnerName="Acme Bank" />,
-    );
-
-    const partnerLink = links(root).at(-1);
-    await act(async () => {
-      partnerLink?.props.onPress();
-    });
-
-    expect(openURL).not.toHaveBeenCalled();
-  });
-
-  it("reports a failed Smile ID link open to crash reporting", async () => {
-    const failure = new Error("no browser registered");
-    vi.spyOn(Linking, "openURL").mockRejectedValue(failure);
-    const captureException = vi
-      .spyOn(UseSmileIDCrashReporting, "captureException")
-      .mockImplementation(() => {});
-    const { root } = render(
-      <UseSmileIDLearnMoreContent partnerName="Acme Bank" />,
-    );
-
-    await act(async () => {
-      links(root)[0]?.props.onPress();
-      await Promise.resolve();
-    });
-
-    expect(captureException).toHaveBeenCalledWith(failure);
-  });
-
-  it("reports a failed partner link open to crash reporting", async () => {
-    const failure = new Error("malformed partner url");
-    vi.spyOn(Linking, "openURL").mockRejectedValue(failure);
-    const captureException = vi
-      .spyOn(UseSmileIDCrashReporting, "captureException")
-      .mockImplementation(() => {});
-    const { root } = render(
-      <UseSmileIDLearnMoreContent
-        partnerName="Acme Bank"
-        partnerPrivacyPolicyUrl="not-a-url"
-      />,
-    );
-
-    const partnerLink = links(root).at(-1);
-    await act(async () => {
-      partnerLink?.props.onPress();
-      await Promise.resolve();
-    });
-
-    expect(captureException).toHaveBeenCalledWith(failure);
-  });
-});

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

@@ -1,45 +0,0 @@
-import { describe, it, expect } from "vitest";
-import * as React from "react";
-import {
-  create as createRenderer,
-  act,
-  type ReactTestInstance,
-} from "react-test-renderer";
-import { UseSmileIDLoadingIndicator } from "../use_smile_id_loading_indicator";
-
-/**
- * The spinner reads reduced-motion and starts an `Animated.loop` in
- * effects. These tests assert it mounts without throwing through the
- * RN mock's `AccessibilityInfo` + `Animated.loop` shims.
- */
-
-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;
-}
-
-describe("UseSmileIDLoadingIndicator", () => {
-  it("mounts and exposes its testID", () => {
-    const { root } = render(<UseSmileIDLoadingIndicator testID="si_spinner" />);
-    expect(findByTestID(root, "si_spinner")).not.toBeNull();
-  });
-
-  it("unmounts cleanly (stops the loop)", () => {
-    const tree = render(<UseSmileIDLoadingIndicator testID="si_spinner" />);
-    expect(() => {
-      act(() => {
-        tree.unmount();
-      });
-    }).not.toThrow();
-  });
-});