Merge pull request #117 from Two-Weeks-Team/test/issue-109-frontend-test-infra

test: add frontend test infrastructure with Vitest + Testing Library (#109)

Author: ComBba

.github/workflows/ci.yml

@@ -119,5 +119,8 @@ jobs:
       - name: Lint
         run: npm run lint
 
+      - name: Unit tests
+        run: npm test
+
       - name: Build (static export)
         run: npm run build

web/__tests__/components/HighlightCard.test.tsx

@@ -0,0 +1,34 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import HighlightCard, { type Highlight } from '../../components/HighlightCard';
+
+describe('HighlightCard', () => {
+  it('returns null for empty highlights', () => {
+    const { container } = render(<HighlightCard highlights={[]} />);
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('renders all highlight items', () => {
+    const highlights: Highlight[] = [
+      { timestamp: '0:10', description: 'First moment', expression: 'happy' },
+      { timestamp: '1:30', description: 'Second moment', expression: 'excited' },
+      { timestamp: '3:00', description: 'Third moment', expression: 'nostalgic' },
+    ];
+    render(<HighlightCard highlights={highlights} />);
+
+    expect(screen.getByText('First moment')).toBeInTheDocument();
+    expect(screen.getByText('Second moment')).toBeInTheDocument();
+    expect(screen.getByText('Third moment')).toBeInTheDocument();
+  });
+
+  it('shows timestamp, description, and expression for each item', () => {
+    const highlights: Highlight[] = [
+      { timestamp: '2:45', description: 'A key scene', expression: 'surprised' },
+    ];
+    render(<HighlightCard highlights={highlights} />);
+
+    expect(screen.getByText('2:45')).toBeInTheDocument();
+    expect(screen.getByText('A key scene')).toBeInTheDocument();
+    expect(screen.getByText('surprised')).toBeInTheDocument();
+  });
+});

web/__tests__/components/OnboardingFlow.test.tsx

@@ -0,0 +1,72 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import OnboardingFlow from '../../components/OnboardingFlow';
+import type { YouTubeVideo } from '../../components/YouTubeGrid';
+import type { Highlight } from '../../components/HighlightCard';
+
+const sampleVideos: YouTubeVideo[] = [
+  { id: 'v1', title: 'Video One', thumbnail: 'https://example.com/1.jpg', privacyStatus: 'public' },
+  { id: 'v2', title: 'Video Two', thumbnail: 'https://example.com/2.jpg', privacyStatus: 'public' },
+];
+
+const sampleHighlights: Highlight[] = [
+  { timestamp: '0:15', description: 'Laughing together', expression: 'joyful' },
+];
+
+const sampleCrops = [
+  'https://example.com/crop1.jpg',
+  'https://example.com/crop2.jpg',
+];
+
+const makeDefaultProps = () => ({
+  stage: 'welcome' as const,
+  videos: sampleVideos,
+  personCrops: sampleCrops,
+  highlights: sampleHighlights,
+  analysisStep: 'Extracting features...',
+  analysisPercent: 30,
+  onSelectVideo: vi.fn(),
+  onSelectPerson: vi.fn(),
+});
+
+let defaultProps: ReturnType<typeof makeDefaultProps>;
+
+beforeEach(() => {
+  defaultProps = makeDefaultProps();
+});
+
+describe('OnboardingFlow', () => {
+  it('renders YouTubeGrid when stage is youtube_grid', () => {
+    render(<OnboardingFlow {...defaultProps} stage="youtube_grid" />);
+    expect(screen.getByText('Select a video')).toBeInTheDocument();
+    expect(screen.getByText('Video One')).toBeInTheDocument();
+    expect(screen.getByText('Video Two')).toBeInTheDocument();
+  });
+
+  it('renders person select UI when stage is person_select with crops', () => {
+    render(<OnboardingFlow {...defaultProps} stage="person_select" />);
+    expect(screen.getByText('Select the person to analyze')).toBeInTheDocument();
+    expect(screen.getByAltText('Person 1')).toBeInTheDocument();
+    expect(screen.getByAltText('Person 2')).toBeInTheDocument();
+  });
+
+  it('does not render person select when personCrops is empty', () => {
+    render(<OnboardingFlow {...defaultProps} stage="person_select" personCrops={[]} />);
+    expect(screen.queryByText('Select the person to analyze')).not.toBeInTheDocument();
+  });
+
+  it('renders ProgressBar when stage is analyzing', () => {
+    render(<OnboardingFlow {...defaultProps} stage="analyzing" />);
+    expect(screen.getByText('Extracting features...')).toBeInTheDocument();
+    expect(screen.getByText('30%')).toBeInTheDocument();
+  });
+
+  it('calls onSelectPerson when person button clicked', () => {
+    const onSelectPerson = vi.fn();
+    render(
+      <OnboardingFlow {...defaultProps} stage="person_select" onSelectPerson={onSelectPerson} />
+    );
+    fireEvent.click(screen.getByAltText('Person 2'));
+    expect(onSelectPerson).toHaveBeenCalledWith(1);
+  });
+});

web/__tests__/components/ProgressBar.test.tsx

@@ -0,0 +1,34 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import ProgressBar from '../../components/ProgressBar';
+
+describe('ProgressBar', () => {
+  it('renders step text', () => {
+    render(<ProgressBar step="Analyzing video..." percent={50} />);
+    expect(screen.getByText('Analyzing video...')).toBeInTheDocument();
+  });
+
+  it('renders percent text', () => {
+    render(<ProgressBar step="Loading" percent={42} />);
+    expect(screen.getByText('42%')).toBeInTheDocument();
+  });
+
+  it('clamps width to 0% for negative values', () => {
+    render(<ProgressBar step="Step" percent={-20} />);
+    const fillBar = screen.getByTestId('progress-fill');
+    expect(fillBar).toBeInTheDocument();
+    expect(fillBar).toHaveStyle({ width: '0%' });
+  });
+
+  it('clamps width to 100% for values greater than 100', () => {
+    render(<ProgressBar step="Step" percent={150} />);
+    const fillBar = screen.getByTestId('progress-fill');
+    expect(fillBar).toHaveStyle({ width: '100%' });
+  });
+
+  it('shows correct width for normal values', () => {
+    render(<ProgressBar step="Step" percent={65} />);
+    const fillBar = screen.getByTestId('progress-fill');
+    expect(fillBar).toHaveStyle({ width: '65%' });
+  });
+});

web/__tests__/components/SceneDisplay.test.tsx

@@ -0,0 +1,23 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import SceneDisplay from '../../components/SceneDisplay';
+
+describe('SceneDisplay', () => {
+  it('returns null when both previewSrc and finalSrc are null', () => {
+    const { container } = render(<SceneDisplay previewSrc={null} finalSrc={null} />);
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('renders preview image when previewSrc provided', () => {
+    render(<SceneDisplay previewSrc="data:image/png;base64,preview" finalSrc={null} />);
+    const img = screen.getByAltText('Scene preview');
+    expect(img).toBeInTheDocument();
+    expect(img).toHaveAttribute('src', 'data:image/png;base64,preview');
+  });
+
+  it('renders final image element when finalSrc provided', () => {
+    render(<SceneDisplay previewSrc={null} finalSrc="data:image/png;base64,final" />);
+    const img = screen.getByAltText('Scene final');
+    expect(img).toBeInTheDocument();
+  });
+});

web/__tests__/components/SessionTransition.test.tsx

@@ -0,0 +1,20 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import SessionTransition from '../../components/SessionTransition';
+
+describe('SessionTransition', () => {
+  it('returns null when phase is idle', () => {
+    const { container } = render(<SessionTransition phase="idle" />);
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('shows "Please wait..." when transitioning', () => {
+    render(<SessionTransition phase="transitioning" />);
+    expect(screen.getByText('Please wait...')).toBeInTheDocument();
+  });
+
+  it('shows "Ready" when ready', () => {
+    render(<SessionTransition phase="ready" />);
+    expect(screen.getByText('Ready')).toBeInTheDocument();
+  });
+});

web/__tests__/components/YouTubeGrid.test.tsx

@@ -0,0 +1,79 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import YouTubeGrid, { type YouTubeVideo } from '../../components/YouTubeGrid';
+
+const publicVideo: YouTubeVideo = {
+  id: 'vid-1',
+  title: 'Public Video Title',
+  thumbnail: 'https://example.com/thumb1.jpg',
+  privacyStatus: 'public',
+};
+
+const privateVideo: YouTubeVideo = {
+  id: 'vid-2',
+  title: 'Private Video Title',
+  thumbnail: 'https://example.com/thumb2.jpg',
+  privacyStatus: 'private',
+};
+
+const unlistedVideo: YouTubeVideo = {
+  id: 'vid-3',
+  title: 'Unlisted Video Title',
+  thumbnail: 'https://example.com/thumb3.jpg',
+  privacyStatus: 'unlisted',
+};
+
+describe('YouTubeGrid', () => {
+  it('returns null for empty videos', () => {
+    const { container } = render(
+      <YouTubeGrid videos={[]} onSelect={vi.fn()} onPrivateClick={vi.fn()} />
+    );
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('renders all video items with titles', () => {
+    const videos = [publicVideo, privateVideo, unlistedVideo];
+    render(
+      <YouTubeGrid videos={videos} onSelect={vi.fn()} onPrivateClick={vi.fn()} />
+    );
+
+    expect(screen.getByText('Public Video Title')).toBeInTheDocument();
+    expect(screen.getByText('Private Video Title')).toBeInTheDocument();
+    expect(screen.getByText('Unlisted Video Title')).toBeInTheDocument();
+  });
+
+  it('clicking public video calls onSelect with video id', () => {
+    const onSelect = vi.fn();
+    const onPrivateClick = vi.fn();
+    render(
+      <YouTubeGrid videos={[publicVideo]} onSelect={onSelect} onPrivateClick={onPrivateClick} />
+    );
+
+    fireEvent.click(screen.getByText('Public Video Title'));
+    expect(onSelect).toHaveBeenCalledWith('vid-1');
+    expect(onPrivateClick).not.toHaveBeenCalled();
+  });
+
+  it('clicking private video calls onPrivateClick', () => {
+    const onSelect = vi.fn();
+    const onPrivateClick = vi.fn();
+    render(
+      <YouTubeGrid videos={[privateVideo]} onSelect={onSelect} onPrivateClick={onPrivateClick} />
+    );
+
+    fireEvent.click(screen.getByText('Private Video Title'));
+    expect(onPrivateClick).toHaveBeenCalledTimes(1);
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+
+  it('shows "Private" badge for non-public videos', () => {
+    const videos = [publicVideo, privateVideo, unlistedVideo];
+    render(
+      <YouTubeGrid videos={videos} onSelect={vi.fn()} onPrivateClick={vi.fn()} />
+    );
+
+    const privateBadges = screen.getAllByText('Private');
+    // privateVideo and unlistedVideo both get the badge
+    expect(privateBadges).toHaveLength(2);
+  });
+});