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

package/src/selfie/selfie.test.tsx

@@ -1,458 +0,0 @@
-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

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