test: add mobile sdk demo vitest tests

app/package.json

@@ -56,8 +56,8 @@
     "tag:release": "node scripts/tag.cjs release",
     "tag:remove": "node scripts/tag.cjs remove",
     "test": "yarn build:deps && jest --passWithNoTests && node --test scripts/tests/*.cjs",
-    "test:ci": "jest --passWithNoTests && node --test scripts/tests/*.cjs",
     "test:build": "yarn build:deps && yarn types && node ./scripts/bundle-analyze-ci.cjs ios && yarn test",
+    "test:ci": "jest --passWithNoTests && node --test scripts/tests/*.cjs",
     "test:coverage": "jest --coverage --passWithNoTests",
     "test:coverage:ci": "jest --coverage --passWithNoTests --ci --coverageReporters=lcov --coverageReporters=text --coverageReporters=json",
     "test:e2e:android": "./scripts/mobile-ci-build-android.sh && maestro test tests/e2e/launch.android.flow.yaml",

packages/mobile-sdk-demo/package.json

@@ -30,14 +30,12 @@
     "@faker-js/faker": "^10.0.0",
     "@noble/hashes": "^1.5.0",
     "@react-native-async-storage/async-storage": "^2.2.0",
-    "@react-native/gradle-plugin": "0.76.9",
     "@selfxyz/common": "workspace:*",
     "@selfxyz/mobile-sdk-alpha": "workspace:*",
     "assert": "^2.1.0",
     "buffer": "^6.0.3",
     "constants-browserify": "^1.0.0",
     "ethers": "^6.11.0",
-    "find-yarn-workspace-root": "^2.0.0",
     "react": "^18.3.1",
     "react-native": "0.76.9",
     "react-native-get-random-values": "^1.11.0",
@@ -51,10 +49,16 @@
   "devDependencies": {
     "@babel/core": "^7.28.3",
     "@react-native-community/cli": "^16.0.3",
+    "@react-native/gradle-plugin": "0.76.9",
     "@react-native/metro-config": "0.76.9",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
     "@tsconfig/react-native": "^3.0.6",
     "@types/node": "^22.18.3",
     "@types/react": "^18.3.4",
+    "@types/react-dom": "^18.3.0",
     "@types/react-native-vector-icons": "^6.4.18",
     "@typescript-eslint/eslint-plugin": "^8.44.0",
     "@typescript-eslint/parser": "^8.44.0",
@@ -66,9 +70,11 @@
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-sort-exports": "^0.9.1",
+    "find-yarn-workspace-root": "^2.0.0",
     "jsdom": "^25.0.1",
     "metro-react-native-babel-preset": "0.76.9",
     "prettier": "^3.6.2",
+    "react-dom": "^18.3.1",
     "react-native-svg-transformer": "^1.5.1",
     "typescript": "^5.9.2",
     "vitest": "^2.1.8"

packages/mobile-sdk-demo/src/polyfills/cryptoPolyfill.js

@@ -8,6 +8,26 @@
  */
 
 // Re-export the shared crypto polyfill implementation
-const { cryptoPolyfill } = require('@selfxyz/common');
+const { cryptoPolyfill, createHash, createHmac, randomBytes, pbkdf2Sync } = require('@selfxyz/common');
 
-module.exports = cryptoPolyfill;
+// Fallback to Node.js crypto implementation when the shared polyfill isn't available
+const nodeCrypto = require('crypto');
+
+const exportedPolyfill = cryptoPolyfill ?? {
+  createHash: createHash ?? nodeCrypto.createHash.bind(nodeCrypto),
+  createHmac: createHmac ?? nodeCrypto.createHmac.bind(nodeCrypto),
+  randomBytes:
+    randomBytes ??
+    (size => {
+      if (!globalThis.crypto || typeof globalThis.crypto.getRandomValues !== 'function') {
+        throw new Error('globalThis.crypto.getRandomValues is not available');
+      }
+      const out = new Uint8Array(size);
+      globalThis.crypto.getRandomValues(out);
+      return Buffer.from(out);
+    }),
+  pbkdf2Sync: pbkdf2Sync ?? nodeCrypto.pbkdf2Sync.bind(nodeCrypto),
+};
+
+module.exports = exportedPolyfill;
+module.exports.default = exportedPolyfill;

packages/mobile-sdk-demo/tests/App.test.tsx

@@ -0,0 +1,198 @@
+import React from 'react';
+import { render, screen, waitFor, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { sdkMocks } from './mocks/sdk';
+
+vi.mock('../src/providers/SelfClientProvider', () => ({
+  __esModule: true,
+  default: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));
+
+type ScreenContext = import('../src/screens').ScreenContext;
+
+let latestContext: ScreenContext | null = null;
+function createScreensModule() {
+  const descriptors = [
+    {
+      id: 'generate',
+      title: 'Generate Mock Document',
+      subtitle: 'Create sample passport data for testing',
+      sectionTitle: 'Main',
+      status: 'working' as const,
+      load: () => () => <div data-testid="screen-Generate Screen">Generate Screen</div>,
+      getProps: ({ navigate, refreshDocuments }: ScreenContext) => ({
+        onBack: () => navigate('home'),
+        onNavigate: navigate,
+        onDocumentStored: refreshDocuments,
+      }),
+    },
+    {
+      id: 'documents',
+      title: 'Document List',
+      subtitle: 'View and manage stored documents',
+      sectionTitle: 'Main',
+      status: 'working' as const,
+      load: () => () => <div data-testid="screen-Documents Screen">Documents Screen</div>,
+      getProps: ({ navigate, documentCatalog }: ScreenContext) => ({
+        onBack: () => navigate('home'),
+        catalog: documentCatalog,
+      }),
+    },
+  ];
+
+  const screenMap = descriptors.reduce<Record<string, any>>((acc, descriptor) => {
+    acc[descriptor.id] = descriptor;
+    return acc;
+  }, {});
+
+  const orderedSectionEntries = [{ title: 'Main', items: descriptors }];
+
+  const HomeScreen = ({ screenContext }: { screenContext: ScreenContext }) => {
+    latestContext = screenContext;
+    return (
+      <div>
+        <h1>Self Demo App</h1>
+        {orderedSectionEntries.map(section => (
+          <section key={section.title}>
+            <h2>{section.title}</h2>
+            {section.items.map(descriptor => (
+              <button
+                key={descriptor.id}
+                type="button"
+                onClick={() => screenContext.navigate(descriptor.id as import('../src/screens').ScreenRoute)}
+              >
+                {descriptor.title}
+              </button>
+            ))}
+          </section>
+        ))}
+      </div>
+    );
+  };
+
+  return {
+    __esModule: true as const,
+    orderedSectionEntries,
+    screenDescriptors: descriptors,
+    screenMap,
+    HomeScreen,
+  };
+}
+
+vi.mock('../src/screens', () => {
+  const moduleExports = createScreensModule();
+  return moduleExports;
+});
+
+vi.mock('../src/screens/HomeScreen', () => ({
+  __esModule: true,
+  default: (props: { screenContext: ScreenContext }) => createScreensModule().HomeScreen(props),
+}));
+
+import App from '../App';
+
+describe('App integration', () => {
+  beforeEach(() => {
+    latestContext = null;
+  });
+
+  it('fetches catalog and selected document on mount', async () => {
+    const catalog = {
+      documents: [{ id: 'doc-1', documentType: 'mock_passport' }],
+      selectedDocumentId: 'doc-1',
+    } as any;
+    const selected = {
+      metadata: { id: 'doc-1', documentType: 'mock_passport' },
+      data: { id: 'doc-1' },
+    } as any;
+
+    sdkMocks.selfClient.loadDocumentCatalog.mockResolvedValueOnce(catalog);
+    sdkMocks.loadSelectedDocumentMock.mockResolvedValueOnce(selected);
+
+    render(<App />);
+
+    await waitFor(() => {
+      expect(sdkMocks.selfClient.loadDocumentCatalog).toHaveBeenCalled();
+      expect(sdkMocks.loadSelectedDocumentMock).toHaveBeenCalled();
+      expect(latestContext).not.toBeNull();
+    });
+
+    expect(screen.getByText(/Self Demo App/i)).toBeInTheDocument();
+    expect(latestContext?.documentCatalog).toEqual(catalog);
+    expect(latestContext?.selectedDocument).toEqual(selected);
+  });
+
+  it('navigates into descriptor screens from the home menu', async () => {
+    sdkMocks.selfClient.loadDocumentCatalog.mockResolvedValueOnce({ documents: [] });
+    sdkMocks.loadSelectedDocumentMock.mockResolvedValueOnce(null);
+
+    render(<App />);
+
+    await screen.findByText(/Self Demo App/i);
+
+    await userEvent.click(screen.getByRole('button', { name: /document list/i }));
+
+    expect(await screen.findByTestId('screen-Documents Screen')).toHaveTextContent('Documents Screen');
+
+    await act(async () => {
+      latestContext?.navigate('home');
+    });
+
+    await screen.findByText(/Self Demo App/i);
+    await userEvent.click(screen.getByRole('button', { name: /generate mock document/i }));
+
+    expect(await screen.findByTestId('screen-Generate Screen')).toHaveTextContent('Generate Screen');
+  });
+
+  it('falls back to the home screen when navigating to an unknown route', async () => {
+    sdkMocks.selfClient.loadDocumentCatalog.mockResolvedValueOnce({ documents: [] });
+    sdkMocks.loadSelectedDocumentMock.mockResolvedValueOnce(null);
+
+    render(<App />);
+
+    await screen.findByText(/Self Demo App/i);
+
+    await act(async () => {
+      latestContext?.navigate('documents');
+    });
+
+    expect(await screen.findByTestId('screen-Documents Screen')).toBeInTheDocument();
+
+    await act(async () => {
+      latestContext?.navigate('unknown' as any);
+    });
+
+    await waitFor(() => expect(screen.getByText(/Self Demo App/i)).toBeInTheDocument());
+  });
+
+  it('resets catalog and selection when refresh fails', async () => {
+    const catalog = {
+      documents: [{ id: 'doc-2', documentType: 'mock_passport' }],
+      selectedDocumentId: 'doc-2',
+    } as any;
+    const selected = {
+      metadata: { id: 'doc-2', documentType: 'mock_passport' },
+      data: { id: 'doc-2' },
+    } as any;
+
+    sdkMocks.selfClient.loadDocumentCatalog
+      .mockResolvedValueOnce(catalog)
+      .mockRejectedValueOnce(new Error('no catalog'));
+    sdkMocks.loadSelectedDocumentMock.mockResolvedValueOnce(selected).mockRejectedValueOnce(new Error('no selection'));
+
+    render(<App />);
+
+    await waitFor(() => expect(latestContext?.selectedDocument).toEqual(selected));
+
+    await act(async () => {
+      await latestContext?.refreshDocuments();
+    });
+
+    await waitFor(() => {
+      expect(latestContext?.documentCatalog.documents).toEqual([]);
+      expect(latestContext?.selectedDocument).toBeNull();
+    });
+  });
+});

packages/mobile-sdk-demo/tests/components/MenuButton.test.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+import MenuButton from '../../src/components/MenuButton';
+
+describe('MenuButton', () => {
+  it('renders the provided title and subtitle', () => {
+    render(<MenuButton title="Documents" subtitle="Manage your IDs" onPress={() => {}} />);
+
+    expect(screen.getByRole('button', { name: /documents/i })).toBeInTheDocument();
+    expect(screen.getByText(/manage your ids/i)).toBeInTheDocument();
+  });
+
+  it('invokes onPress when pressed if enabled', async () => {
+    const onPress = vi.fn();
+    render(<MenuButton title="Open" onPress={onPress} isWorking />);
+
+    await userEvent.click(screen.getByRole('button', { name: /open/i }));
+
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('prevents presses and shows disabled styles when disabled', async () => {
+    const onPress = vi.fn();
+    render(<MenuButton title="Disabled" subtitle="Unavailable" onPress={onPress} disabled />);
+
+    const button = screen.getByRole('button', { name: /disabled/i });
+    expect(button).toBeDisabled();
+
+    await userEvent.click(button);
+    expect(onPress).not.toHaveBeenCalled();
+  });
+});

packages/mobile-sdk-demo/tests/components/ScreenLayout.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+import ScreenLayout from '../../src/components/ScreenLayout';
+
+describe('ScreenLayout', () => {
+  it('renders title, children, and right action content', () => {
+    render(
+      <ScreenLayout title="My Title" onBack={() => {}} rightAction={<span>Clear</span>}>
+        <span>Body content</span>
+      </ScreenLayout>,
+    );
+
+    expect(screen.getByText(/my title/i)).toBeInTheDocument();
+    expect(screen.getByText(/body content/i)).toBeInTheDocument();
+    expect(screen.getByText(/clear/i)).toBeInTheDocument();
+  });
+
+  it('invokes onBack when the header back button is pressed', async () => {
+    const onBack = vi.fn();
+    render(
+      <ScreenLayout title="Back Test" onBack={onBack}>
+        <span>Content</span>
+      </ScreenLayout>,
+    );
+
+    await userEvent.click(screen.getByRole('button', { name: /back/i }));
+
+    expect(onBack).toHaveBeenCalledTimes(1);
+  });
+});