@smileid/usesmileid 12.0.0-beta01

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

@@ -0,0 +1,288 @@
+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, Text } from "react-native";
+import { UseSmileIDConsentScreen } from "../use_smile_id_consent_screen";
+
+/**
+ * Component-level tests for the consent screen — find by `testID`,
+ * find by visible text, expand / collapse the learn-more panel,
+ * toggle the consent checkbox to gate the Allow button.
+ *
+ * Rendering goes through `react-test-renderer` directly. The vitest
+ * config aliases `react-native` to a pure-JS host stub at
+ * `src/__tests__/react_native_mock.tsx`.
+ */
+
+function render(element: React.ReactElement) {
+  let tree!: ReturnType<typeof createRenderer>;
+  act(() => {
+    tree = createRenderer(element);
+  });
+  return tree;
+}
+
+function findByTestID(
+  root: ReactTestInstance,
+  testID: string,
+): ReactTestInstance | null {
+  const matches = root.findAllByProps({ testID });
+  return matches[0] ?? null;
+}
+
+function findTextNode(
+  root: ReactTestInstance,
+  expected: string,
+): ReactTestInstance | null {
+  const matches = root.findAll(
+    (node) => {
+      if (node.type !== Text) return false;
+      const text = collectText(node);
+      return text.includes(expected);
+    },
+    { deep: true },
+  );
+  return matches[0] ?? null;
+}
+
+function collectText(node: ReactTestInstance): string {
+  return node.children
+    .map((child) =>
+      typeof child === "string"
+        ? child
+        : collectText(child as ReactTestInstance),
+    )
+    .join("");
+}
+
+const PARTNER = "Bank X";
+const PRIVACY_URL = "https://www.bankx.com/privacy-policy";
+
+describe("UseSmileIDConsentScreen", () => {
+  it("test_consent_screen_displayed", () => {
+    const { root } = render(
+      <UseSmileIDConsentScreen
+        partnerName={PARTNER}
+        partnerPrivacyPolicyUrl={PRIVACY_URL}
+        onAllow={() => {}}
+        onDeny={() => {}}
+      />,
+    );
+    expect(findByTestID(root, "si_consent_screen")).not.toBeNull();
+  });
+
+  it("test_title_text_displayed", () => {
+    const { root } = render(
+      <UseSmileIDConsentScreen
+        partnerName={PARTNER}
+        partnerPrivacyPolicyUrl={PRIVACY_URL}
+        onAllow={() => {}}
+        onDeny={() => {}}
+      />,
+    );
+    // Substring match.
+    expect(findTextNode(root, "would like to verify your")).not.toBeNull();
+  });
+
+  it("test_screen_with_attribution_enabled", () => {
+    const { root } = render(
+      <UseSmileIDConsentScreen
+        partnerName={PARTNER}
+        partnerPrivacyPolicyUrl={PRIVACY_URL}
+        showAttribution={true}
+        onAllow={() => {}}
+        onDeny={() => {}}
+      />,
+    );
+    // Attribution renders as an SVG image with the localized
+    // accessibility label.
+    expect(
+      root.findAllByProps({ accessibilityLabel: "Powered by Smile ID" })[0],
+    ).toBeTruthy();
+    expect(findByTestID(root, "si_consent_screen")).not.toBeNull();
+  });
+
+  it("test_screen_with_attribution_disabled", () => {
+    const { root } = render(
+      <UseSmileIDConsentScreen
+        partnerName={PARTNER}
+        partnerPrivacyPolicyUrl={PRIVACY_URL}
+        showAttribution={false}
+        onAllow={() => {}}
+        onDeny={() => {}}
+      />,
+    );
+    expect(
+      root.findAllByProps({ accessibilityLabel: "Powered by Smile ID" }),
+    ).toHaveLength(0);
+    expect(findByTestID(root, "si_consent_screen")).not.toBeNull();
+  });
+
+  it("test_learn_more_expand_collapse", () => {
+    const tree = render(
+      <UseSmileIDConsentScreen
+        partnerName={PARTNER}
+        partnerPrivacyPolicyUrl={PRIVACY_URL}
+        onAllow={() => {}}
+        onDeny={() => {}}
+      />,
+    );
+
+    // "Learn more" label is always present.
+    expect(findTextNode(tree.root, "Learn more")).not.toBeNull();
+
+    // Expanded content is NOT in the tree until the toggle fires.
+    expect(findByTestID(tree.root, "si_consent_learn_more_content")).toBeNull();
+
+    // Toggle expand. The expandable-icon wrapper exposes `onChange`
+    // (the inner Pressable owns `onClick`); the test fires the same
+    // callback path the icon uses internally.
+    const toggle = findByTestID(tree.root, "si_consent_learn_more_toggle");
+    expect(toggle).not.toBeNull();
+    act(() => {
+      (toggle!.props.onChange as (next: boolean) => void)(
+        !toggle!.props.expanded,
+      );
+    });
+
+    // Expanded content renders.
+    expect(
+      findByTestID(tree.root, "si_consent_learn_more_content"),
+    ).not.toBeNull();
+
+    // Collapse: re-fire the toggle's onChange against the new expanded state.
+    act(() => {
+      const t = findByTestID(tree.root, "si_consent_learn_more_toggle")!;
+      (t.props.onChange as (next: boolean) => void)(!t.props.expanded);
+    });
+    expect(findByTestID(tree.root, "si_consent_learn_more_content")).toBeNull();
+  });
+
+  it("test_allow_button_disabled_when_consent_unchecked", () => {
+    const { root } = render(
+      <UseSmileIDConsentScreen
+        partnerName={PARTNER}
+        partnerPrivacyPolicyUrl={PRIVACY_URL}
+        onAllow={() => {}}
+        onDeny={() => {}}
+      />,
+    );
+
+    // Default state: checkbox starts CHECKED, Allow enabled.
+    const allowButton = findByTestID(root, "si_consent_allow_button");
+    expect(allowButton).not.toBeNull();
+    expect(allowButton!.props.enabled).toBe(true);
+
+    // Toggle the checkbox off via its `onChange` callback.
+    const checkbox = findByTestID(root, "si_consent_checkbox");
+    expect(checkbox).not.toBeNull();
+    act(() => {
+      (checkbox!.props.onChange as (next: boolean) => void)(
+        !checkbox!.props.checked,
+      );
+    });
+
+    // Allow button is now disabled.
+    const allowAfter = findByTestID(root, "si_consent_allow_button");
+    expect(allowAfter!.props.enabled).toBe(false);
+  });
+
+  it("test_allow_button_enabled_when_consent_checked", () => {
+    const onAllow = vi.fn();
+    const { root } = render(
+      <UseSmileIDConsentScreen
+        partnerName={PARTNER}
+        partnerPrivacyPolicyUrl={PRIVACY_URL}
+        onAllow={onAllow}
+        onDeny={() => {}}
+      />,
+    );
+
+    // Toggle off first, then back on.
+    act(() => {
+      const checkbox = findByTestID(root, "si_consent_checkbox")!;
+      (checkbox.props.onChange as (next: boolean) => void)(
+        !checkbox.props.checked,
+      );
+    });
+    expect(findByTestID(root, "si_consent_allow_button")!.props.enabled).toBe(
+      false,
+    );
+
+    act(() => {
+      const checkbox = findByTestID(root, "si_consent_checkbox")!;
+      (checkbox.props.onChange as (next: boolean) => void)(
+        !checkbox.props.checked,
+      );
+    });
+    expect(findByTestID(root, "si_consent_allow_button")!.props.enabled).toBe(
+      true,
+    );
+
+    // Tapping Allow when enabled invokes the partner callback with
+    // a fresh `ConsentInformation` carrying granted=true.
+    act(() => {
+      const allow = findByTestID(root, "si_consent_allow_button")!;
+      (allow.props.onClick as () => void)();
+    });
+    expect(onAllow).toHaveBeenCalledTimes(1);
+    const info = onAllow.mock.calls[0]?.[0];
+    expect(info?.granted).toBe(true);
+    expect(info?.noticePrivacyPolicyUrl).toBe(PRIVACY_URL);
+    // Millisecond-precision ISO-8601 UTC, e.g. "2026-06-04T17:36:36.000Z".
+    expect(info?.grantedAt).toMatch(
+      /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/,
+    );
+    // Uppercase primary language subtag, e.g. "EN".
+    expect(info?.noticeLanguage).toBe("EN");
+  });
+
+  // --- Slot-prop contract -----------------------------------------
+
+  it("test_custom_allow_and_deny_button_slots", () => {
+    const onAllow = vi.fn();
+    const onDeny = vi.fn();
+    const { root } = render(
+      <UseSmileIDConsentScreen
+        partnerName={PARTNER}
+        partnerPrivacyPolicyUrl={PRIVACY_URL}
+        onAllow={onAllow}
+        onDeny={onDeny}
+        allowButton={({ onClick, enabled }) => (
+          <Pressable
+            testID="si_custom_allow_button"
+            onPress={onClick}
+            accessibilityState={{ disabled: !enabled }}
+          >
+            <Text>Yes please</Text>
+          </Pressable>
+        )}
+        denyButton={({ onClick }) => (
+          <Pressable testID="si_custom_deny_button" onPress={onClick}>
+            <Text>No thanks</Text>
+          </Pressable>
+        )}
+      />,
+    );
+
+    expect(findByTestID(root, "si_custom_allow_button")).not.toBeNull();
+    expect(findByTestID(root, "si_custom_deny_button")).not.toBeNull();
+    // The default primary/secondary buttons must NOT render when both
+    // slots are supplied — concrete scenario this catches: a future
+    // refactor that renders both side-by-side would silently double up.
+    expect(findByTestID(root, "si_consent_allow_button")).toBeNull();
+    expect(findByTestID(root, "si_consent_deny_button")).toBeNull();
+
+    // Slot's onPress fires the partner callback.
+    act(() => {
+      (
+        findByTestID(root, "si_custom_deny_button")!.props.onPress as () => void
+      )();
+    });
+    expect(onDeny).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -0,0 +1,136 @@
+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 { UseSmileIDDocumentBackInstructions } from "../use_smile_id_document_back_instructions";
+
+/**
+ * Component-level tests for the in-flow back-of-ID flip interstitial: the
+ * tokenized "Flip your <ID Type>" title, the Capture-Back primary action, and
+ * the conditionally-rendered Skip action. Rendering goes through
+ * `react-test-renderer` directly (the vitest config aliases `react-native` to
+ * the pure-JS host stub).
+ */
+
+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 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("UseSmileIDDocumentBackInstructions", () => {
+  it("renders the tokenized flip title for the document type", () => {
+    const { root } = render(
+      <UseSmileIDDocumentBackInstructions
+        documentTypeDisplayName="Green Book"
+        onCaptureBack={() => {}}
+      />,
+    );
+    expect(findByTestID(root, "si_document_back_instructions")).not.toBeNull();
+    expect(findTextNode(root, "Flip your Green Book")).not.toBeNull();
+  });
+
+  it("invokes onCaptureBack from the primary button", () => {
+    const onCaptureBack = vi.fn();
+    const { root } = render(
+      <UseSmileIDDocumentBackInstructions
+        documentTypeDisplayName="Document"
+        onCaptureBack={onCaptureBack}
+      />,
+    );
+    const button = findByTestID(root, "si_document_capture_back_button");
+    expect(button).not.toBeNull();
+    act(() => {
+      (button!.props.onClick as () => void)();
+    });
+    expect(onCaptureBack).toHaveBeenCalledTimes(1);
+  });
+
+  it("hides the Skip action by default", () => {
+    const { root } = render(
+      <UseSmileIDDocumentBackInstructions
+        documentTypeDisplayName="Document"
+        onCaptureBack={() => {}}
+      />,
+    );
+    expect(findByTestID(root, "si_document_skip_back_button")).toBeNull();
+  });
+
+  it("shows Skip and invokes onSkip when allowSkip is true", () => {
+    const onSkip = vi.fn();
+    const { root } = render(
+      <UseSmileIDDocumentBackInstructions
+        documentTypeDisplayName="Document"
+        onCaptureBack={() => {}}
+        allowSkip
+        onSkip={onSkip}
+      />,
+    );
+    const skip = findByTestID(root, "si_document_skip_back_button");
+    expect(skip).not.toBeNull();
+    act(() => {
+      (skip!.props.onPress as () => void)();
+    });
+    expect(onSkip).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders a back button only when onBack is supplied", () => {
+    const onBack = vi.fn();
+    const withBack = render(
+      <UseSmileIDDocumentBackInstructions
+        documentTypeDisplayName="Document"
+        onCaptureBack={() => {}}
+        onBack={onBack}
+      />,
+    );
+    const backButton = findByTestID(withBack.root, "si_back_button");
+    expect(backButton).not.toBeNull();
+    act(() => {
+      (backButton!.props.onClick as () => void)();
+    });
+    expect(onBack).toHaveBeenCalledTimes(1);
+
+    const withoutBack = render(
+      <UseSmileIDDocumentBackInstructions
+        documentTypeDisplayName="Document"
+        onCaptureBack={() => {}}
+      />,
+    );
+    expect(findByTestID(withoutBack.root, "si_back_button")).toBeNull();
+  });
+});

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

@@ -0,0 +1,245 @@
+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, Text } from "react-native";
+import { UseSmileIDInstructionsScreen } from "../use_smile_id_instructions_screen";
+import { UseSmileIDGuidelineThumbnail } from "../../components/use_smile_id_guideline_thumbnail";
+
+/**
+ * Component-level tests for the redesigned instructions screen — split
+ * annotated title (with the forced line break), uppercase guidelines
+ * header, one thumbnail per guideline, attribution toggle, custom button
+ * slot, and an RTL render pass.
+ *
+ * Rendering goes through `react-test-renderer` directly (no
+ * `@testing-library/react-native` — its CommonJS deep imports bypass
+ * vitest's `react-native` alias). The vitest config aliases `react-native`
+ * to a pure-JS host stub at `src/__tests__/react_native_mock.tsx`.
+ */
+
+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 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("UseSmileIDInstructionsScreen", () => {
+  it("test_back_button_exists_and_clickable", () => {
+    const onBack = vi.fn();
+    const { root } = render(
+      <UseSmileIDInstructionsScreen onBack={onBack} onContinue={() => {}} />,
+    );
+    const backButton = findByTestID(root, "si_back_button");
+    expect(backButton).not.toBeNull();
+    act(() => {
+      (backButton!.props.onClick as () => void)();
+    });
+    expect(onBack).toHaveBeenCalledTimes(1);
+  });
+
+  it("test_instructions_screen_displayed", () => {
+    const { root } = render(
+      <UseSmileIDInstructionsScreen onBack={() => {}} onContinue={() => {}} />,
+    );
+    expect(findByTestID(root, "si_instructions_screen")).not.toBeNull();
+    expect(findByTestID(root, "si_instructions_hero")).not.toBeNull();
+  });
+
+  it("test_split_title_renders_prefix_and_emphasis", () => {
+    const { root } = render(
+      <UseSmileIDInstructionsScreen
+        titlePrefix="Get ready to capture your"
+        titleEmphasis="selfie"
+        onBack={() => {}}
+        onContinue={() => {}}
+      />,
+    );
+    expect(findTextNode(root, "Get ready to capture your")).not.toBeNull();
+    expect(findTextNode(root, "selfie")).not.toBeNull();
+  });
+
+  it("test_emphasis_breaks_onto_its_own_line", () => {
+    // The emphasis word must start a new line — a literal `\n` sits between
+    // the prefix and emphasis spans (natural wrapping leaves it inline on
+    // wide screens).
+    const { root } = render(
+      <UseSmileIDInstructionsScreen
+        titlePrefix="Get ready to capture your"
+        titleEmphasis="selfie"
+        onBack={() => {}}
+        onContinue={() => {}}
+      />,
+    );
+    const title = findByTestID(root, "si_instructions_title");
+    expect(title).not.toBeNull();
+    expect(collectText(title!)).toContain("your\nselfie");
+  });
+
+  it("test_short_emphasis_breaks_onto_its_own_line", () => {
+    // A short document type name (e.g. "ID") must sit on its own line below
+    // the prefix rather than inline after it.
+    const { root } = render(
+      <UseSmileIDInstructionsScreen
+        titlePrefix="Get ready to capture your"
+        titleEmphasis="ID"
+        onBack={() => {}}
+        onContinue={() => {}}
+      />,
+    );
+    const title = findByTestID(root, "si_instructions_title");
+    expect(collectText(title!)).toContain("your\nID");
+  });
+
+  it("test_default_title_resolves_from_localizations_when_omitted", () => {
+    const { root } = render(
+      <UseSmileIDInstructionsScreen onBack={() => {}} onContinue={() => {}} />,
+    );
+    const title = findByTestID(root, "si_instructions_title");
+    expect(collectText(title!)).toContain("Get ready to capture your\nselfie");
+  });
+
+  it("test_capture_guidelines_section_header_is_uppercased", () => {
+    const { root } = render(
+      <UseSmileIDInstructionsScreen onBack={() => {}} onContinue={() => {}} />,
+    );
+    expect(
+      findByTestID(root, "si_instructions_guidelines_section_header"),
+    ).not.toBeNull();
+    expect(findTextNode(root, "CAPTURE GUIDELINES")).not.toBeNull();
+  });
+
+  it("test_renders_one_thumbnail_per_default_guideline", () => {
+    const { root } = render(
+      <UseSmileIDInstructionsScreen onBack={() => {}} onContinue={() => {}} />,
+    );
+    // Default SELFIE_GUIDELINES has 4 entries → 4 thumbnails.
+    expect(root.findAllByType(UseSmileIDGuidelineThumbnail)).toHaveLength(4);
+    for (const caption of [
+      "Good",
+      "Accessories",
+      "Multiple Faces",
+      "Poor Lighting",
+    ]) {
+      expect(findTextNode(root, caption)).not.toBeNull();
+    }
+  });
+
+  it("test_default_continue_button_invokes_onContinue", () => {
+    const onContinue = vi.fn();
+    const { root } = render(
+      <UseSmileIDInstructionsScreen
+        onBack={() => {}}
+        onContinue={onContinue}
+      />,
+    );
+    const button = findByTestID(root, "si_instructions_continue_button");
+    expect(button).not.toBeNull();
+    act(() => {
+      (button!.props.onClick as () => void)();
+    });
+    expect(onContinue).toHaveBeenCalledTimes(1);
+  });
+
+  it("test_custom_continue_button_displayed", () => {
+    const onContinue = vi.fn();
+    const { root } = render(
+      <UseSmileIDInstructionsScreen
+        onBack={() => {}}
+        onContinue={onContinue}
+        continueButton={({ onClick }) => (
+          <Text testID="si_custom_continue_button" onPress={onClick}>
+            Get Started
+          </Text>
+        )}
+      />,
+    );
+    const customButton = findByTestID(root, "si_custom_continue_button");
+    expect(customButton).not.toBeNull();
+    // The default primary button must NOT render when a slot is supplied.
+    expect(findByTestID(root, "si_instructions_continue_button")).toBeNull();
+    act(() => {
+      (customButton!.props.onPress as () => void)();
+    });
+    expect(onContinue).toHaveBeenCalledTimes(1);
+  });
+
+  it("test_screen_with_attribution_enabled", () => {
+    const { root } = render(
+      <UseSmileIDInstructionsScreen
+        onBack={() => {}}
+        onContinue={() => {}}
+        showAttribution={true}
+      />,
+    );
+    expect(
+      root.findAllByProps({ accessibilityLabel: "Powered by Smile ID" })[0],
+    ).toBeTruthy();
+  });
+
+  it("test_screen_with_attribution_disabled", () => {
+    const { root } = render(
+      <UseSmileIDInstructionsScreen
+        onBack={() => {}}
+        onContinue={() => {}}
+        showAttribution={false}
+      />,
+    );
+    expect(
+      root.findAllByProps({ accessibilityLabel: "Powered by Smile ID" }),
+    ).toHaveLength(0);
+    expect(findByTestID(root, "si_instructions_screen")).not.toBeNull();
+  });
+
+  it("test_renders_under_rtl_without_throwing", () => {
+    // The capture overlay/oval is intentionally not mirrored, but the
+    // screen chrome must lay out cleanly in RTL.
+    I18nManager.isRTL = true;
+    try {
+      const { root } = render(
+        <UseSmileIDInstructionsScreen
+          onBack={() => {}}
+          onContinue={() => {}}
+        />,
+      );
+      expect(findByTestID(root, "si_instructions_screen")).not.toBeNull();
+      expect(findTextNode(root, "Good")).not.toBeNull();
+    } finally {
+      I18nManager.isRTL = false;
+    }
+  });
+});