@incodetech/web 2.0.0-alpha.1

package/src/flow/flow.test.tsx

@@ -0,0 +1,796 @@
+import { render, screen, waitFor } from '@testing-library/preact';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { IncodeFlow } from './flow';
+
+// Mock the setup module
+const mockSetup = vi.fn().mockResolvedValue(undefined);
+vi.mock('../setup', () => ({
+  setup: (...args: unknown[]) => mockSetup(...args),
+}));
+
+// Mock warmupWasm
+const mockWarmupWasm = vi.fn().mockResolvedValue(undefined);
+
+vi.mock('@incodetech/core', () => ({
+  warmupWasm: (...args: unknown[]) => mockWarmupWasm(...args),
+  api: {
+    get: vi.fn().mockResolvedValue({
+      data: {
+        theme: 'https://example.com/theme.json',
+        'logo.png': 'https://example.com/logo.png',
+      },
+    }),
+  },
+}));
+
+// Mock the flow manager
+const mockLoad = vi.fn();
+const mockCompleteModule = vi.fn();
+const mockStop = vi.fn();
+
+// Use a flexible type for mock state to accommodate different flow states
+type MockState = {
+  status: string;
+  error?: string;
+  currentStep?: string;
+  currentStepIndex?: number;
+  steps?: string[];
+  config?: Record<string, unknown>;
+  flow?: Record<string, unknown>;
+  finishStatus?: {
+    redirectionUrl: string;
+    action: 'approved' | 'rejected' | 'none';
+    scoreStatus: string;
+  };
+};
+
+let mockState: MockState = { status: 'idle' };
+let mockSubscribers: Array<(state: MockState) => void> = [];
+
+const mockFlowManager = {
+  load: mockLoad,
+  completeModule: mockCompleteModule,
+  getState: () => mockState,
+  subscribe: (cb: (state: MockState) => void) => {
+    mockSubscribers.push(cb);
+    return () => {
+      mockSubscribers = mockSubscribers.filter((s) => s !== cb);
+    };
+  },
+  stop: mockStop,
+};
+
+vi.mock('@incodetech/core/flow', () => ({
+  createOrchestratedFlowManager: vi.fn(() => mockFlowManager),
+  getRequiredWasmPipelines: vi.fn((flow) => {
+    // Return pipelines based on flow modules
+    const modules = flow?.flowModules || [];
+    const pipelines: string[] = [];
+    for (const mod of modules) {
+      if (mod.key === 'SELFIE') pipelines.push('selfie');
+      if (mod.key === 'ID') pipelines.push('idCapture');
+    }
+    return pipelines;
+  }),
+}));
+
+// Mock UI components with lazy loading behavior
+let mockPhoneOnError: ((error?: string) => void) | undefined;
+let mockPhoneOnFinish: (() => void) | undefined;
+let mockEmailOnError: ((error?: string) => void) | undefined;
+let mockEmailOnFinish: (() => void) | undefined;
+let mockSelfieOnError: ((error?: string) => void) | undefined;
+
+const MockPhone = vi.fn(
+  (props: { onError?: (error?: string) => void; onFinish?: () => void }) => {
+    mockPhoneOnError = props.onError;
+    mockPhoneOnFinish = props.onFinish;
+    return <div data-testid="phone-component">Phone</div>;
+  },
+);
+const MockEmail = vi.fn(
+  (props: { onError?: (error?: string) => void; onFinish?: () => void }) => {
+    mockEmailOnError = props.onError;
+    mockEmailOnFinish = props.onFinish;
+    return <div data-testid="email-component">Email</div>;
+  },
+);
+const MockSelfie = vi.fn((props: { onError?: (error?: string) => void }) => {
+  mockSelfieOnError = props.onError;
+  return <div data-testid="selfie-component">Selfie</div>;
+});
+
+vi.mock('../phone/phone', () => ({
+  Phone: MockPhone,
+}));
+
+vi.mock('../email/email', () => ({
+  Email: MockEmail,
+}));
+
+vi.mock('../selfie/selfie', () => ({
+  Selfie: MockSelfie,
+}));
+
+// Mock Spinner component - must be inline to avoid hoisting issues
+vi.mock('../shared/spinner', () => ({
+  Spinner: (props: {
+    title?: string;
+    subtitle?: string;
+    size?: string;
+    fullScreen?: boolean;
+  }) => (
+    <div
+      data-testid="spinner"
+      data-title={props.title}
+      data-subtitle={props.subtitle}
+      data-size={props.size}
+    >
+      Spinner
+    </div>
+  ),
+}));
+
+// Helper to update mock state and notify subscribers
+function updateMockState(newState: MockState) {
+  mockState = newState;
+  for (const cb of mockSubscribers) {
+    cb(mockState);
+  }
+}
+
+// Default props for tests
+const defaultProps = {
+  apiURL: 'https://api.test.com',
+  token: 'test-token',
+  onComplete: vi.fn(),
+};
+
+describe('IncodeFlow', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockState = { status: 'idle' };
+    mockSubscribers = [];
+    mockPhoneOnError = undefined;
+    mockPhoneOnFinish = undefined;
+    mockEmailOnError = undefined;
+    mockEmailOnFinish = undefined;
+    mockSelfieOnError = undefined;
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('Initialization', () => {
+    it('should show spinner during initialization', () => {
+      render(<IncodeFlow {...defaultProps} />);
+
+      expect(screen.getByTestId('spinner')).toBeTruthy();
+    });
+
+    it('should initialize with external token', async () => {
+      render(<IncodeFlow {...defaultProps} token="external-token" />);
+
+      await waitFor(() => {
+        expect(mockSetup).toHaveBeenCalledWith(
+          expect.objectContaining({
+            apiURL: 'https://api.test.com',
+            token: 'external-token',
+          }),
+        );
+      });
+    });
+
+    it('should handle initialization error', async () => {
+      const onError = vi.fn();
+      mockSetup.mockRejectedValueOnce(new Error('Network error'));
+
+      render(<IncodeFlow {...defaultProps} onError={onError} />);
+
+      await waitFor(() => {
+        expect(screen.getByText(/Network error/)).toBeTruthy();
+        expect(onError).toHaveBeenCalledWith('Network error');
+      });
+    });
+  });
+
+  describe('Flow States', () => {
+    it('should show spinner during flow loading', async () => {
+      render(<IncodeFlow {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(mockSetup).toHaveBeenCalled();
+      });
+
+      updateMockState({ status: 'loading' });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('spinner')).toBeTruthy();
+      });
+    });
+
+    it('should show flow error state', async () => {
+      const onError = vi.fn();
+      render(<IncodeFlow {...defaultProps} onError={onError} />);
+
+      await waitFor(() => {
+        expect(mockSetup).toHaveBeenCalled();
+      });
+
+      updateMockState({ status: 'error', error: 'Flow failed to load' });
+
+      await waitFor(() => {
+        expect(screen.getByText(/Flow failed to load/)).toBeTruthy();
+        expect(onError).toHaveBeenCalledWith('Flow failed to load');
+      });
+    });
+
+    it('should call onComplete when flow finishes', async () => {
+      const onComplete = vi.fn();
+      render(<IncodeFlow {...defaultProps} onComplete={onComplete} />);
+
+      await waitFor(() => {
+        expect(mockSetup).toHaveBeenCalled();
+      });
+
+      const finishStatus = {
+        redirectionUrl: 'https://example.com/done',
+        action: 'approved' as const,
+        scoreStatus: 'OK' as const,
+      };
+
+      updateMockState({
+        status: 'finished',
+        finishStatus,
+        flow: { flowId: 'test-flow' },
+      });
+
+      await waitFor(() => {
+        expect(onComplete).toHaveBeenCalledWith(finishStatus);
+      });
+    });
+  });
+
+  describe('Module Loading', () => {
+    it('should load and render Phone module', async () => {
+      render(<IncodeFlow {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(mockSetup).toHaveBeenCalled();
+      });
+
+      updateMockState({
+        status: 'ready',
+        currentStep: 'PHONE',
+        currentStepIndex: 0,
+        steps: ['PHONE'],
+        config: { otpVerification: true, otpExpirationInMinutes: 5 },
+        flow: { disableLaunchScreen: true, flowModules: [] },
+      });
+
+      await waitFor(
+        () => {
+          expect(screen.getByTestId('phone-component')).toBeTruthy();
+        },
+        { timeout: 10_000 },
+      );
+    });
+
+    it('should load and render Email module', async () => {
+      render(<IncodeFlow {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(mockSetup).toHaveBeenCalled();
+      });
+
+      updateMockState({
+        status: 'ready',
+        currentStep: 'EMAIL',
+        currentStepIndex: 0,
+        steps: ['EMAIL'],
+        config: {
+          otpVerification: true,
+          otpExpirationInMinutes: 5,
+          prefill: false,
+        },
+        flow: { disableLaunchScreen: true, flowModules: [] },
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('email-component')).toBeTruthy();
+      });
+    });
+
+    it('should load and render Selfie module', async () => {
+      render(<IncodeFlow {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(mockSetup).toHaveBeenCalled();
+      });
+
+      updateMockState({
+        status: 'ready',
+        currentStep: 'SELFIE',
+        currentStepIndex: 0,
+        steps: ['SELFIE'],
+        config: { showTutorial: true },
+        flow: { disableLaunchScreen: true, flowModules: [] },
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('selfie-component')).toBeTruthy();
+      });
+    });
+
+    it('should show unsupported module message for unknown modules', async () => {
+      render(<IncodeFlow {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(mockSetup).toHaveBeenCalled();
+      });
+
+      updateMockState({
+        status: 'ready',
+        currentStep: 'UNKNOWN_MODULE',
+        currentStepIndex: 0,
+        steps: ['UNKNOWN_MODULE'],
+        config: {},
+        flow: { disableLaunchScreen: true, flowModules: [] },
+      });
+
+      await waitFor(() => {
+        // The UnsupportedModule component is rendered - check for the i18n key or the test button
+        expect(
+          screen.getByTestId('unsupported-module-next-button'),
+        ).toBeTruthy();
+      });
+    });
+
+    it('should call onModuleLoading and onModuleLoaded callbacks', async () => {
+      const onModuleLoading = vi.fn();
+      const onModuleLoaded = vi.fn();
+
+      render(
+        <IncodeFlow
+          {...defaultProps}
+          onModuleLoading={onModuleLoading}
+          onModuleLoaded={onModuleLoaded}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(mockSetup).toHaveBeenCalled();
+      });
+
+      updateMockState({
+        status: 'ready',
+        currentStep: 'PHONE',
+        currentStepIndex: 0,
+        steps: ['PHONE'],
+        config: { otpVerification: true, otpExpirationInMinutes: 5 },
+        flow: { disableLaunchScreen: true, flowModules: [] },
+      });
+
+      await waitFor(() => {
+        expect(onModuleLoading).toHaveBeenCalledWith('PHONE');
+      });
+
+      await waitFor(() => {
+        expect(onModuleLoaded).toHaveBeenCalledWith('PHONE');
+      });
+    });
+
+    it('should call flowManager.completeModule when Phone module finishes', async () => {
+      render(<IncodeFlow {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(mockSetup).toHaveBeenCalled();
+      });
+
+      updateMockState({
+        status: 'ready',
+        currentStep: 'PHONE',
+        currentStepIndex: 0,
+        steps: ['PHONE'],
+        config: { otpVerification: true, otpExpirationInMinutes: 5 },
+        flow: { disableLaunchScreen: true, flowModules: [] },
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('phone-component')).toBeTruthy();
+      });
+
+      if (mockPhoneOnFinish) {
+        mockPhoneOnFinish();
+      }
+
+      expect(mockCompleteModule).toHaveBeenCalled();
+    });
+
+    it('should call flowManager.completeModule when Email module finishes', async () => {
+      render(<IncodeFlow {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(mockSetup).toHaveBeenCalled();
+      });
+
+      updateMockState({
+        status: 'ready',
+        currentStep: 'EMAIL',
+        currentStepIndex: 0,
+        steps: ['EMAIL'],
+        config: {
+          otpVerification: true,
+          otpExpirationInMinutes: 5,
+          prefill: false,
+        },
+        flow: { disableLaunchScreen: true, flowModules: [] },
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('email-component')).toBeTruthy();
+      });
+
+      if (mockEmailOnFinish) {
+        mockEmailOnFinish();
+      }
+
+      expect(mockCompleteModule).toHaveBeenCalled();
+    });
+  });
+
+  describe('WASM Warmup', () => {
+    it('should warmup WASM when flow requires selfie pipeline', async () => {
+      const onWasmWarmup = vi.fn();
+      const wasmConfig = {
+        wasmPath: '/wasm/ml.wasm',
+        glueCodePath: '/wasm/ml.js',
+      };
+
+      render(
+        <IncodeFlow
+          {...defaultProps}
+          wasmConfig={wasmConfig}
+          onWasmWarmup={onWasmWarmup}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(mockSetup).toHaveBeenCalled();
+      });
+
+      updateMockState({
+        status: 'ready',
+        currentStep: 'SELFIE',
+        currentStepIndex: 0,
+        steps: ['SELFIE'],
+        config: {},
+        flow: {
+          disableLaunchScreen: true,
+          flowModules: [{ key: 'SELFIE', configuration: {} }],
+        },
+      });
+
+      await waitFor(() => {
+        expect(onWasmWarmup).toHaveBeenCalledWith(['selfie']);
+        expect(mockWarmupWasm).toHaveBeenCalledWith(
+          expect.objectContaining({
+            wasmPath: '/wasm/ml.wasm',
+            glueCodePath: '/wasm/ml.js',
+            pipelines: ['selfie'],
+          }),
+        );
+      });
+    });
+
+    it('should not warmup WASM when flow does not require ML', async () => {
+      const onWasmWarmup = vi.fn();
+      const wasmConfig = {
+        wasmPath: '/wasm/ml.wasm',
+        glueCodePath: '/wasm/ml.js',
+      };
+
+      render(
+        <IncodeFlow
+          {...defaultProps}
+          wasmConfig={wasmConfig}
+          onWasmWarmup={onWasmWarmup}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(mockSetup).toHaveBeenCalled();
+      });
+
+      updateMockState({
+        status: 'ready',
+        currentStep: 'PHONE',
+        currentStepIndex: 0,
+        steps: ['PHONE', 'EMAIL'],
+        config: {},
+        flow: {
+          disableLaunchScreen: true,
+          flowModules: [
+            { key: 'PHONE', configuration: {} },
+            { key: 'EMAIL', configuration: {} },
+          ],
+        },
+      });
+
+      // Wait a bit to ensure warmup wasn't called
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      expect(onWasmWarmup).not.toHaveBeenCalled();
+      expect(mockWarmupWasm).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Email Module Validation', () => {
+    it('should show error for invalid email configuration', async () => {
+      render(<IncodeFlow {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(mockSetup).toHaveBeenCalled();
+      });
+
+      // Provide invalid config (missing required fields)
+      updateMockState({
+        status: 'ready',
+        currentStep: 'EMAIL',
+        currentStepIndex: 0,
+        steps: ['EMAIL'],
+        config: { invalid: true }, // Missing otpVerification and otpExpirationInMinutes
+        flow: { disableLaunchScreen: true, flowModules: [] },
+      });
+
+      await waitFor(() => {
+        expect(screen.getByText(/Invalid email configuration/)).toBeTruthy();
+      });
+    });
+  });
+
+  describe('Flow Loading After Init', () => {
+    it('should call flowManager.load after successful initialization', async () => {
+      render(<IncodeFlow {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(mockSetup).toHaveBeenCalled();
+      });
+
+      await waitFor(() => {
+        expect(mockLoad).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('Spinner Customization', () => {
+    it('should use custom spinner title', () => {
+      render(
+        <IncodeFlow
+          {...defaultProps}
+          spinnerConfig={{ title: 'Custom Loading' }}
+        />,
+      );
+
+      const spinner = screen.getByTestId('spinner');
+      expect(spinner.getAttribute('data-title')).toBe('Custom Loading');
+    });
+
+    it('should use custom spinner subtitle', () => {
+      render(
+        <IncodeFlow
+          {...defaultProps}
+          spinnerConfig={{ subtitle: 'Please wait...' }}
+        />,
+      );
+
+      const spinner = screen.getByTestId('spinner');
+      expect(spinner.getAttribute('data-subtitle')).toBe('Please wait...');
+    });
+
+    it('should use custom spinner size', () => {
+      render(
+        <IncodeFlow {...defaultProps} spinnerConfig={{ size: 'large' }} />,
+      );
+
+      const spinner = screen.getByTestId('spinner');
+      expect(spinner.getAttribute('data-size')).toBe('large');
+    });
+
+    it('should show spinner when loading module', async () => {
+      render(<IncodeFlow {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(mockSetup).toHaveBeenCalled();
+      });
+
+      updateMockState({
+        status: 'ready',
+        currentStep: 'PHONE',
+        currentStepIndex: 0,
+        steps: ['PHONE'],
+        config: { otpVerification: true, otpExpirationInMinutes: 5 },
+        flow: { disableLaunchScreen: true, flowModules: [] },
+      });
+
+      // Spinner shows during module loading with i18n defaults
+      // The actual title/subtitle come from i18n keys (loadingCircle.hangOn, loadingCircle.validating)
+      await waitFor(() => {
+        expect(screen.getByTestId('spinner')).toBeTruthy();
+      });
+    });
+  });
+
+  describe('Module Error Handling', () => {
+    it('should handle Selfie module errors', async () => {
+      const onError = vi.fn();
+      render(<IncodeFlow {...defaultProps} onError={onError} />);
+
+      await waitFor(() => {
+        expect(mockSetup).toHaveBeenCalled();
+      });
+
+      updateMockState({
+        status: 'ready',
+        currentStep: 'SELFIE',
+        currentStepIndex: 0,
+        steps: ['SELFIE'],
+        config: { showTutorial: true },
+        flow: { disableLaunchScreen: true, flowModules: [] },
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('selfie-component')).toBeTruthy();
+      });
+
+      if (mockSelfieOnError) {
+        mockSelfieOnError('Selfie error');
+        expect(onError).toHaveBeenCalledWith('Selfie error');
+      }
+    });
+
+    it('should handle Selfie module errors with undefined error', async () => {
+      const onError = vi.fn();
+      render(<IncodeFlow {...defaultProps} onError={onError} />);
+
+      await waitFor(() => {
+        expect(mockSetup).toHaveBeenCalled();
+      });
+
+      updateMockState({
+        status: 'ready',
+        currentStep: 'SELFIE',
+        currentStepIndex: 0,
+        steps: ['SELFIE'],
+        config: { showTutorial: true },
+        flow: { disableLaunchScreen: true, flowModules: [] },
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('selfie-component')).toBeTruthy();
+      });
+
+      if (mockSelfieOnError) {
+        mockSelfieOnError(undefined);
+        expect(onError).toHaveBeenCalledWith('Selfie verification error');
+      }
+    });
+
+    it('should handle Phone module errors', async () => {
+      const onError = vi.fn();
+      render(<IncodeFlow {...defaultProps} onError={onError} />);
+
+      await waitFor(() => {
+        expect(mockSetup).toHaveBeenCalled();
+      });
+
+      updateMockState({
+        status: 'ready',
+        currentStep: 'PHONE',
+        currentStepIndex: 0,
+        steps: ['PHONE'],
+        config: { otpVerification: true, otpExpirationInMinutes: 5 },
+        flow: { disableLaunchScreen: true, flowModules: [] },
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('phone-component')).toBeTruthy();
+      });
+
+      if (mockPhoneOnError) {
+        mockPhoneOnError('Phone error');
+        expect(onError).toHaveBeenCalledWith('Phone error');
+      }
+    });
+
+    it('should handle Phone module errors with undefined error', async () => {
+      const onError = vi.fn();
+      render(<IncodeFlow {...defaultProps} onError={onError} />);
+
+      await waitFor(() => {
+        expect(mockSetup).toHaveBeenCalled();
+      });
+
+      updateMockState({
+        status: 'ready',
+        currentStep: 'PHONE',
+        currentStepIndex: 0,
+        steps: ['PHONE'],
+        config: { otpVerification: true, otpExpirationInMinutes: 5 },
+        flow: { disableLaunchScreen: true, flowModules: [] },
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('phone-component')).toBeTruthy();
+      });
+
+      if (mockPhoneOnError) {
+        mockPhoneOnError(undefined);
+        expect(onError).toHaveBeenCalledWith('Phone verification error');
+      }
+    });
+
+    it('should handle Email module errors', async () => {
+      const onError = vi.fn();
+      render(<IncodeFlow {...defaultProps} onError={onError} />);
+
+      await waitFor(() => {
+        expect(mockSetup).toHaveBeenCalled();
+      });
+
+      updateMockState({
+        status: 'ready',
+        currentStep: 'EMAIL',
+        currentStepIndex: 0,
+        steps: ['EMAIL'],
+        config: {
+          otpVerification: true,
+          otpExpirationInMinutes: 5,
+          prefill: false,
+        },
+        flow: { disableLaunchScreen: true, flowModules: [] },
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('email-component')).toBeTruthy();
+      });
+
+      if (mockEmailOnError) {
+        mockEmailOnError('Email error');
+        expect(onError).toHaveBeenCalledWith('Email error');
+      }
+    });
+
+    it('should handle Email module errors with undefined error', async () => {
+      const onError = vi.fn();
+      render(<IncodeFlow {...defaultProps} onError={onError} />);
+
+      await waitFor(() => {
+        expect(mockSetup).toHaveBeenCalled();
+      });
+
+      updateMockState({
+        status: 'ready',
+        currentStep: 'EMAIL',
+        currentStepIndex: 0,
+        steps: ['EMAIL'],
+        config: {
+          otpVerification: true,
+          otpExpirationInMinutes: 5,
+          prefill: false,
+        },
+        flow: { disableLaunchScreen: true, flowModules: [] },
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('email-component')).toBeTruthy();
+      });
+
+      if (mockEmailOnError) {
+        mockEmailOnError(undefined);
+        expect(onError).toHaveBeenCalledWith('Email verification error');
+      }
+    });
+  });
+});