@incodetech/web 2.0.0-alpha.1 → 2.0.0-alpha.10

package/src/flow/flow.test.tsx

@@ -1,796 +0,0 @@
-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');
-      }
-    });
-  });
-});