@incodetech/web 2.0.0-alpha.1

package/src/selfie/selfie.test.tsx

@@ -0,0 +1,458 @@
+import type { SelfieState } from '@incodetech/core/selfie';
+import { render, waitFor } from '@testing-library/preact';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const mockRegister = vi.fn();
+const mockNextStep = vi.fn();
+const mockRequestPermission = vi.fn();
+const mockGoToLearnMore = vi.fn();
+const mockBack = vi.fn();
+const mockQuitProcess = vi.fn();
+const mockRetryCapture = vi.fn();
+const mockReset = vi.fn();
+const mockLoad = vi.fn();
+
+const createMockManager = () => ({
+  nextStep: mockNextStep,
+  requestPermission: mockRequestPermission,
+  goToLearnMore: mockGoToLearnMore,
+  back: mockBack,
+  close: mockQuitProcess,
+  retryCapture: mockRetryCapture,
+  reset: mockReset,
+  load: mockLoad,
+});
+
+let currentMockState: SelfieState = { status: 'idle' };
+
+vi.mock('@incodetech/core', () => ({
+  api: {
+    get: vi.fn().mockResolvedValue({
+      data: {
+        theme: 'https://example.com/theme.json',
+        'logo.png': 'https://example.com/logo.png',
+      },
+    }),
+  },
+  getDeviceClass: vi.fn(() => 'desktop'),
+  getBrowser: vi.fn(() => 'chrome'),
+}));
+
+vi.mock('preact-custom-element', () => ({
+  default: mockRegister,
+}));
+
+vi.mock('../hooks', () => ({
+  useManager: () => [currentMockState, createMockManager()],
+}));
+
+vi.mock('./tutorial', async () => {
+  const actual =
+    await vi.importActual<typeof import('./tutorial')>('./tutorial');
+  return {
+    ...actual,
+    Tutorial: ({ manager }: { manager: { nextStep: () => void } }) => (
+      <div data-testid="tutorial">
+        <button
+          type="button"
+          data-testid="tutorial-continue"
+          onClick={() => manager.nextStep()}
+        >
+          Continue
+        </button>
+      </div>
+    ),
+  };
+});
+
+vi.mock('./permissions/permissions', () => ({
+  Permissions: ({ permissionStatus }: { permissionStatus: string }) => (
+    <div data-testid="permissions" data-permission-status={permissionStatus}>
+      Permissions Component
+    </div>
+  ),
+}));
+
+vi.mock('./capture', () => ({
+  Capture: ({ onFinish }: { onFinish: () => void }) => (
+    <div data-testid="capture">
+      <button type="button" data-testid="capture-finish" onClick={onFinish}>
+        Finish
+      </button>
+    </div>
+  ),
+}));
+
+const mockConfig = {
+  showTutorial: true,
+  showPreview: false,
+  assistedOnboarding: false,
+  enableFaceRecording: false,
+  autoCaptureTimeout: 30,
+  captureAttempts: 3,
+  validateLenses: false,
+  validateFaceMask: false,
+  validateHeadCover: false,
+  validateClosedEyes: false,
+  validateBrightness: false,
+  deepsightLiveness: 'SINGLE_FRAME' as const,
+};
+
+describe('Selfie', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    currentMockState = { status: 'idle' };
+  });
+
+  describe('custom element registration', () => {
+    it('registers with correct tag name and props', async () => {
+      vi.resetModules();
+      mockRegister.mockClear();
+      const module = await import('./selfie');
+      expect(module).toBeDefined();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      expect(mockRegister).toHaveBeenCalledWith(
+        expect.any(Function),
+        'incode-selfie',
+        ['config', 'onFinish', 'onError'],
+        { shadow: false },
+      );
+    }, 10000);
+  });
+
+  describe('container rendering', () => {
+    it('renders with IncodeComponent class', async () => {
+      const { Selfie } = await import('./selfie');
+      const { container } = render(
+        <Selfie config={mockConfig} onFinish={() => {}} onError={() => {}} />,
+      );
+      expect(container.querySelector('.IncodeComponent')).toBeTruthy();
+    });
+
+    it('renders nothing when config is undefined', async () => {
+      const { Selfie } = await import('./selfie');
+      const { container } = render(
+        <Selfie
+          config={undefined as unknown as typeof mockConfig}
+          onFinish={() => {}}
+          onError={() => {}}
+        />,
+      );
+      const incodeComponent = container.querySelector('.IncodeComponent');
+      expect(incodeComponent?.children.length).toBe(0);
+    });
+  });
+
+  describe('state-based rendering', () => {
+    it('renders nothing when status is idle', async () => {
+      currentMockState = { status: 'idle' };
+      vi.resetModules();
+      const { Selfie } = await import('./selfie');
+      const { queryByTestId } = render(
+        <Selfie config={mockConfig} onFinish={() => {}} onError={() => {}} />,
+      );
+      expect(queryByTestId('tutorial')).toBeNull();
+      expect(queryByTestId('permissions')).toBeNull();
+      expect(queryByTestId('capture')).toBeNull();
+    });
+
+    it('renders nothing when status is loading', async () => {
+      currentMockState = { status: 'loading' };
+      vi.resetModules();
+      const { Selfie } = await import('./selfie');
+      const { queryByTestId } = render(
+        <Selfie config={mockConfig} onFinish={() => {}} onError={() => {}} />,
+      );
+      expect(queryByTestId('tutorial')).toBeNull();
+      expect(queryByTestId('permissions')).toBeNull();
+      expect(queryByTestId('capture')).toBeNull();
+    });
+
+    it('renders Tutorial when tutorial is loading', async () => {
+      currentMockState = { status: 'tutorial' };
+      vi.resetModules();
+      const { Selfie } = await import('./selfie');
+      const { getByTestId, queryByTestId } = render(
+        <Selfie config={mockConfig} onFinish={() => {}} onError={() => {}} />,
+      );
+      await waitFor(() => {
+        expect(getByTestId('tutorial')).toBeTruthy();
+      });
+      expect(queryByTestId('permissions')).toBeNull();
+      expect(queryByTestId('capture')).toBeNull();
+    });
+
+    it('renders Tutorial when status is tutorial', async () => {
+      currentMockState = { status: 'tutorial' };
+      vi.resetModules();
+      const { Selfie } = await import('./selfie');
+      const { getByTestId, queryByTestId } = render(
+        <Selfie config={mockConfig} onFinish={() => {}} onError={() => {}} />,
+      );
+      await waitFor(() => {
+        expect(getByTestId('tutorial')).toBeTruthy();
+      });
+      expect(queryByTestId('permissions')).toBeNull();
+      expect(queryByTestId('capture')).toBeNull();
+    });
+
+    it('renders Permissions when status is permissions', async () => {
+      currentMockState = {
+        status: 'permissions',
+        permissionStatus: 'idle',
+      };
+      vi.resetModules();
+      const { Selfie } = await import('./selfie');
+      const { container, queryByTestId } = render(
+        <Selfie config={mockConfig} onFinish={() => {}} onError={() => {}} />,
+      );
+      expect(container.querySelector('.IncodePermissionsPage')).toBeTruthy();
+      expect(queryByTestId('tutorial')).toBeNull();
+      expect(queryByTestId('capture')).toBeNull();
+    });
+
+    it('passes permissionStatus to Permissions component', async () => {
+      currentMockState = {
+        status: 'permissions',
+        permissionStatus: 'denied',
+      };
+      vi.resetModules();
+      const { Selfie } = await import('./selfie');
+      const { container } = render(
+        <Selfie config={mockConfig} onFinish={() => {}} onError={() => {}} />,
+      );
+      expect(container.querySelector('.IncodeDeniedPage')).toBeTruthy();
+    });
+
+    it('renders Capture when status is capture', async () => {
+      currentMockState = {
+        status: 'capture',
+        captureStatus: 'detecting',
+        stream: undefined,
+        detectionStatus: 'detecting',
+        debugFrame: undefined,
+        attemptsRemaining: 3,
+        uploadError: undefined,
+      };
+      vi.resetModules();
+      const { Selfie } = await import('./selfie');
+      const { getByTestId, queryByTestId } = render(
+        <Selfie config={mockConfig} onFinish={() => {}} onError={() => {}} />,
+      );
+      expect(getByTestId('capture')).toBeTruthy();
+      expect(queryByTestId('tutorial')).toBeNull();
+      expect(queryByTestId('permissions')).toBeNull();
+    });
+
+    it('renders nothing when status is finished', async () => {
+      currentMockState = { status: 'finished' };
+      vi.resetModules();
+      const { Selfie } = await import('./selfie');
+      const { queryByTestId } = render(
+        <Selfie config={mockConfig} onFinish={() => {}} onError={() => {}} />,
+      );
+      expect(queryByTestId('tutorial')).toBeNull();
+      expect(queryByTestId('permissions')).toBeNull();
+      expect(queryByTestId('capture')).toBeNull();
+    });
+
+    it('renders nothing when status is closed', async () => {
+      currentMockState = { status: 'closed' };
+      vi.resetModules();
+      const { Selfie } = await import('./selfie');
+      const { queryByTestId } = render(
+        <Selfie config={mockConfig} onFinish={() => {}} onError={() => {}} />,
+      );
+      expect(queryByTestId('tutorial')).toBeNull();
+      expect(queryByTestId('permissions')).toBeNull();
+      expect(queryByTestId('capture')).toBeNull();
+    });
+
+    it('renders nothing when status is error', async () => {
+      currentMockState = { status: 'error', error: 'Some error' };
+      vi.resetModules();
+      const { Selfie } = await import('./selfie');
+      const { queryByTestId } = render(
+        <Selfie config={mockConfig} onFinish={() => {}} onError={() => {}} />,
+      );
+      expect(queryByTestId('tutorial')).toBeNull();
+      expect(queryByTestId('permissions')).toBeNull();
+      expect(queryByTestId('capture')).toBeNull();
+    });
+
+    it('renders nothing for unknown state', async () => {
+      currentMockState = { status: 'unknown' } as unknown as SelfieState;
+      vi.resetModules();
+      const { Selfie } = await import('./selfie');
+      const { queryByTestId } = render(
+        <Selfie config={mockConfig} onFinish={() => {}} onError={() => {}} />,
+      );
+      expect(queryByTestId('tutorial')).toBeNull();
+      expect(queryByTestId('permissions')).toBeNull();
+      expect(queryByTestId('capture')).toBeNull();
+    });
+  });
+
+  describe('callbacks', () => {
+    it('calls onFinish when status is finished', async () => {
+      currentMockState = { status: 'finished' };
+      vi.resetModules();
+      const { Selfie } = await import('./selfie');
+      const onFinish = vi.fn();
+      render(
+        <Selfie config={mockConfig} onFinish={onFinish} onError={() => {}} />,
+      );
+      await waitFor(() => {
+        expect(onFinish).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    it('calls onError with undefined when status is closed', async () => {
+      currentMockState = { status: 'closed' };
+      vi.resetModules();
+      const { Selfie } = await import('./selfie');
+      const onError = vi.fn();
+      render(
+        <Selfie config={mockConfig} onFinish={() => {}} onError={onError} />,
+      );
+      await waitFor(() => {
+        expect(onError).toHaveBeenCalledWith(undefined);
+      });
+    });
+
+    it('calls onError with error message when status is error', async () => {
+      currentMockState = { status: 'error', error: 'Permission denied' };
+      vi.resetModules();
+      const { Selfie } = await import('./selfie');
+      const onError = vi.fn();
+      render(
+        <Selfie config={mockConfig} onFinish={() => {}} onError={onError} />,
+      );
+      await waitFor(() => {
+        expect(onError).toHaveBeenCalledWith('Permission denied');
+      });
+    });
+
+    it('does not throw when onFinish is undefined and status is finished', async () => {
+      currentMockState = { status: 'finished' };
+      vi.resetModules();
+      const { Selfie } = await import('./selfie');
+      expect(() => {
+        render(
+          <Selfie
+            config={mockConfig}
+            onFinish={undefined}
+            onError={undefined}
+          />,
+        );
+      }).not.toThrow();
+    });
+
+    it('does not throw when onError is undefined and status is closed', async () => {
+      currentMockState = { status: 'closed' };
+      vi.resetModules();
+      const { Selfie } = await import('./selfie');
+      expect(() => {
+        render(
+          <Selfie
+            config={mockConfig}
+            onFinish={undefined}
+            onError={undefined}
+          />,
+        );
+      }).not.toThrow();
+    });
+  });
+
+  describe('manager interactions', () => {
+    it('calls manager.nextStep when Tutorial onContinue is triggered', async () => {
+      currentMockState = { status: 'tutorial' };
+      vi.resetModules();
+      const { Selfie } = await import('./selfie');
+      const { getByTestId } = render(
+        <Selfie config={mockConfig} onFinish={() => {}} onError={() => {}} />,
+      );
+      await waitFor(() => {
+        expect(getByTestId('tutorial-continue')).toBeTruthy();
+      });
+      getByTestId('tutorial-continue').click();
+      expect(mockNextStep).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onFinish prop when Capture onFinish is triggered', async () => {
+      currentMockState = {
+        status: 'capture',
+        captureStatus: 'detecting',
+        stream: undefined,
+        detectionStatus: 'detecting',
+        debugFrame: undefined,
+        attemptsRemaining: 3,
+        uploadError: undefined,
+      };
+      vi.resetModules();
+      const { Selfie } = await import('./selfie');
+      const onFinish = vi.fn();
+      const { getByTestId } = render(
+        <Selfie config={mockConfig} onFinish={onFinish} onError={() => {}} />,
+      );
+      getByTestId('capture-finish').click();
+      expect(onFinish).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('permissions substates', () => {
+    it('renders Permissions with permissionStatus=idle', async () => {
+      currentMockState = {
+        status: 'permissions',
+        permissionStatus: 'idle',
+      };
+      vi.resetModules();
+      const { Selfie } = await import('./selfie');
+      const { container } = render(
+        <Selfie config={mockConfig} onFinish={() => {}} onError={() => {}} />,
+      );
+      expect(container.querySelector('.IncodePermissionsPage')).toBeTruthy();
+    });
+
+    it('renders Permissions with permissionStatus=requesting', async () => {
+      currentMockState = {
+        status: 'permissions',
+        permissionStatus: 'requesting',
+      };
+      vi.resetModules();
+      const { Selfie } = await import('./selfie');
+      const { container } = render(
+        <Selfie config={mockConfig} onFinish={() => {}} onError={() => {}} />,
+      );
+      expect(
+        container.querySelector('.IncodePermissionsRequestingPage'),
+      ).toBeTruthy();
+    });
+
+    it('renders Permissions with permissionStatus=denied', async () => {
+      currentMockState = {
+        status: 'permissions',
+        permissionStatus: 'denied',
+      };
+      vi.resetModules();
+      const { Selfie } = await import('./selfie');
+      const { container } = render(
+        <Selfie config={mockConfig} onFinish={() => {}} onError={() => {}} />,
+      );
+      expect(container.querySelector('.IncodeDeniedPage')).toBeTruthy();
+    });
+
+    it('renders Permissions with permissionStatus=learnMore', async () => {
+      currentMockState = {
+        status: 'permissions',
+        permissionStatus: 'learnMore',
+      };
+      vi.resetModules();
+      const { Selfie } = await import('./selfie');
+      const { container } = render(
+        <Selfie config={mockConfig} onFinish={() => {}} onError={() => {}} />,
+      );
+      expect(container.querySelector('.IncodeLearnMorePage')).toBeTruthy();
+    });
+  });
+});

package/src/selfie/selfie.tsx

@@ -0,0 +1,83 @@
+import './styles.css';
+import {
+  createSelfieManager,
+  type SelfieConfig,
+} from '@incodetech/core/selfie';
+import type { FC } from 'preact/compat';
+import { useManager } from '@/hooks';
+import { Permissions } from '../permissions/permissions';
+import { IncodeComponent } from '../shared/componentRoot/incodeComponent';
+import {
+  type IncodeModuleProps,
+  registerIncodeModuleElement,
+} from '../shared/webComponent/incodeModule';
+import { Capture } from './capture';
+import { Tutorial } from './tutorial';
+
+type SelfieContentProps = {
+  config: SelfieConfig;
+  onFinish?: () => void;
+  onError?: (error: string | undefined) => void;
+};
+
+const SelfieContent: FC<SelfieContentProps> = ({
+  config,
+  onFinish,
+  onError,
+}) => {
+  const [state, manager] = useManager(() => createSelfieManager({ config }));
+
+  if (state.status === 'idle' || state.status === 'loading') {
+    return null;
+  }
+
+  if (state.status === 'tutorial') {
+    return <Tutorial manager={manager} />;
+  }
+
+  if (state.status === 'permissions') {
+    return (
+      <Permissions
+        manager={manager}
+        permissionStatus={state.permissionStatus}
+      />
+    );
+  }
+
+  if (state.status === 'capture') {
+    return (
+      <Capture manager={manager} state={state} onFinish={() => onFinish?.()} />
+    );
+  }
+
+  if (state.status === 'finished') {
+    onFinish?.();
+    return null;
+  }
+
+  if (state.status === 'closed') {
+    onError?.(undefined);
+    return null;
+  }
+
+  if (state.status === 'error') {
+    onError?.(state.error);
+    return null;
+  }
+
+  return null;
+};
+
+type SelfieProps = IncodeModuleProps<SelfieConfig>;
+
+export const Selfie: FC<SelfieProps> = ({ config, onFinish, onError }) => {
+  return (
+    <IncodeComponent>
+      {config ? (
+        <SelfieContent config={config} onFinish={onFinish} onError={onError} />
+      ) : null}
+    </IncodeComponent>
+  );
+};
+
+registerIncodeModuleElement(Selfie, 'incode-selfie');