mirror of
https://github.com/lbr77/SideImpactor.git
synced 2026-06-20 20:29:33 -04:00
refactor: migrate frontend to React + Tailwind, add Docker + tests
Replace the vanilla-TS innerHTML frontend with a type-checked React component tree (React 19 + Tailwind v4 + Vite). Frontend: - 14 components: Header, Stepper, LoginPage, LoginModal, SignPage, DropZone, DevicePicker, ProgressCard, SavedAccountsList, TrustModal, TwoFactorModal, Button, Field, Chip, Modal - lib/ extracts: storage (10 localStorage keys preserved), pair-record, account-session, log-parser, ids, use-log hook - flows/ encapsulate async pair/login/sign/install with dependency injection - Accounts page as main view with Add Account modal - Fullscreen progress overlay during sign/install - Account selector + device picker on Sign page - Security notice in login modal (server trust warning) - All addLog calls mirrored to console.log for devtools debugging Build: - bun run dev: submodule init + install + wasm dist + vite + wrangler - bun run setup: one-shot project bootstrap - Docker: multi-stage bun build → nginx on :3000 - build:wasm:dist copies pre-built src→dist (no Rust/Emscripten needed) - jszip/node-forge/fflate pre-bundled for CJS→ESM conversion Tests: - 163 vitest tests (happy-dom): all lib, components, App integration, WASM dist artifact checks, libcurl Apple connectivity, anisette init error handling Cleanup: - Delete yarn.lock (bun.lock canonical), expand .gitignore - Remove README.zh.md, rewrite README.md + AGENTS.md - Update libcurl.js submodule to f65d440 (CI build artifacts)
This commit is contained in:
58
frontend/src/components/TwoFactorModal.test.tsx
Normal file
58
frontend/src/components/TwoFactorModal.test.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import { TwoFactorModal } from './TwoFactorModal';
|
||||
|
||||
describe('TwoFactorModal', () => {
|
||||
it('is hidden when closed', () => {
|
||||
const { container } = render(<TwoFactorModal open={false} onSubmit={() => {}} onCancel={() => {}} />);
|
||||
expect(container.querySelector('.modal')).not.toHaveClass('open');
|
||||
});
|
||||
|
||||
it('focuses the input when opened', async () => {
|
||||
render(<TwoFactorModal open onSubmit={() => {}} onCancel={() => {}} />);
|
||||
// useEffect runs a setTimeout(0) before focusing — let it tick.
|
||||
await new Promise((resolve) => setTimeout(resolve, 10));
|
||||
expect(screen.getByLabelText('Verification Code')).toHaveFocus();
|
||||
});
|
||||
|
||||
it('shows an inline error when submitting an empty code', async () => {
|
||||
const onSubmit = vi.fn();
|
||||
render(<TwoFactorModal open onSubmit={onSubmit} onCancel={() => {}} />);
|
||||
await userEvent.click(screen.getByRole('button', { name: 'Verify' }));
|
||||
expect(screen.getByText('Please enter verification code.')).toBeInTheDocument();
|
||||
expect(onSubmit).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('clears the error once the user starts typing', async () => {
|
||||
render(<TwoFactorModal open onSubmit={() => {}} onCancel={() => {}} />);
|
||||
await userEvent.click(screen.getByRole('button', { name: 'Verify' }));
|
||||
expect(screen.getByText('Please enter verification code.')).toBeInTheDocument();
|
||||
await userEvent.type(screen.getByLabelText('Verification Code'), '1');
|
||||
expect(screen.queryByText('Please enter verification code.')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('submits a trimmed code on Enter', async () => {
|
||||
const onSubmit = vi.fn();
|
||||
render(<TwoFactorModal open onSubmit={onSubmit} onCancel={() => {}} />);
|
||||
const input = screen.getByLabelText('Verification Code');
|
||||
await userEvent.type(input, ' 123456 ');
|
||||
fireEvent.keyDown(input, { key: 'Enter' });
|
||||
expect(onSubmit).toHaveBeenLastCalledWith('123456');
|
||||
});
|
||||
|
||||
it('submits via the Verify button', async () => {
|
||||
const onSubmit = vi.fn();
|
||||
render(<TwoFactorModal open onSubmit={onSubmit} onCancel={() => {}} />);
|
||||
await userEvent.type(screen.getByLabelText('Verification Code'), '654321');
|
||||
await userEvent.click(screen.getByRole('button', { name: 'Verify' }));
|
||||
expect(onSubmit).toHaveBeenLastCalledWith('654321');
|
||||
});
|
||||
|
||||
it('calls onCancel when Cancel is clicked', async () => {
|
||||
const onCancel = vi.fn();
|
||||
render(<TwoFactorModal open onSubmit={() => {}} onCancel={onCancel} />);
|
||||
await userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
|
||||
expect(onCancel).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user