test: add component tests for 6 untested components

apps/web/src/__tests__/components/DocumentPreviewModal.test.tsx

@@ -0,0 +1,119 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import {
+  DocumentPreviewModal,
+  isPreviewableMimeType,
+} from '#/routes/_authenticated/applications/$applicationId/-components/DocumentPreviewModal';
+
+describe('isPreviewableMimeType', () => {
+  it('returns true for PDF', () => {
+    expect(isPreviewableMimeType('application/pdf')).toBe(true);
+  });
+
+  it('returns true for PNG', () => {
+    expect(isPreviewableMimeType('image/png')).toBe(true);
+  });
+
+  it('returns true for JPEG', () => {
+    expect(isPreviewableMimeType('image/jpeg')).toBe(true);
+  });
+
+  it('returns false for DOCX', () => {
+    expect(
+      isPreviewableMimeType(
+        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+      ),
+    ).toBe(false);
+  });
+
+  it('returns false for plain text', () => {
+    expect(isPreviewableMimeType('text/plain')).toBe(false);
+  });
+});
+
+describe('DocumentPreviewModal', () => {
+  const pdfDoc = {
+    name: 'resume.pdf',
+    mimeType: 'application/pdf',
+    url: 'https://example.com/resume.pdf',
+  };
+  const imageDoc = {
+    name: 'photo.png',
+    mimeType: 'image/png',
+    url: 'https://example.com/photo.png',
+  };
+  const unsupportedDoc = {
+    name: 'report.docx',
+    mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    url: 'https://example.com/report.docx',
+  };
+
+  it('renders nothing when document is null', () => {
+    const { container } = render(<DocumentPreviewModal document={null} onClose={vi.fn()} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders the document name in the header', () => {
+    render(<DocumentPreviewModal document={pdfDoc} onClose={vi.fn()} />);
+    expect(screen.getByText('resume.pdf')).toBeInTheDocument();
+  });
+
+  it('renders an iframe for PDF documents', () => {
+    render(<DocumentPreviewModal document={pdfDoc} onClose={vi.fn()} />);
+    const iframe = screen.getByTitle('resume.pdf');
+    expect(iframe).toHaveAttribute('src', 'https://example.com/resume.pdf');
+  });
+
+  it('renders an img for PNG documents', () => {
+    render(<DocumentPreviewModal document={imageDoc} onClose={vi.fn()} />);
+    const img = screen.getByAltText('photo.png');
+    expect(img).toHaveAttribute('src', 'https://example.com/photo.png');
+  });
+
+  it('renders an img for JPEG documents', () => {
+    const jpegDoc = { ...imageDoc, name: 'photo.jpg', mimeType: 'image/jpeg' };
+    render(<DocumentPreviewModal document={jpegDoc} onClose={vi.fn()} />);
+    const img = screen.getByAltText('photo.jpg');
+    expect(img).toHaveAttribute('src', 'https://example.com/photo.png');
+  });
+
+  it('renders fallback message for unsupported file types', () => {
+    render(<DocumentPreviewModal document={unsupportedDoc} onClose={vi.fn()} />);
+    expect(screen.getByText(/preview isn't available/i)).toBeInTheDocument();
+  });
+
+  it('renders a download link for unsupported file types', () => {
+    render(<DocumentPreviewModal document={unsupportedDoc} onClose={vi.fn()} />);
+    const link = screen.getByRole('link', { name: /open report\.docx/i });
+    expect(link).toHaveAttribute('href', 'https://example.com/report.docx');
+    expect(link).toHaveAttribute('target', '_blank');
+  });
+
+  it('calls onClose when the close button is clicked', () => {
+    const onClose = vi.fn();
+    render(<DocumentPreviewModal document={pdfDoc} onClose={onClose} />);
+    // The X button
+    const buttons = screen.getAllByRole('button');
+    const closeButton = buttons.find((b) => b.querySelector('svg'));
+    expect(closeButton).toBeDefined();
+    fireEvent.click(closeButton!);
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+
+  it('calls onClose when the backdrop is clicked', () => {
+    const onClose = vi.fn();
+    const { container } = render(<DocumentPreviewModal document={pdfDoc} onClose={onClose} />);
+    // The backdrop is the fixed inset-0 div with bg-black/50
+    const backdrop = container.querySelector('.bg-black\\/50');
+    expect(backdrop).toBeInTheDocument();
+    fireEvent.click(backdrop!);
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+
+  it('renders the "Open in new tab" link', () => {
+    render(<DocumentPreviewModal document={pdfDoc} onClose={vi.fn()} />);
+    const link = screen.getByTitle('Open in new tab');
+    expect(link).toHaveAttribute('href', 'https://example.com/resume.pdf');
+    expect(link).toHaveAttribute('target', '_blank');
+  });
+});

apps/web/src/__tests__/components/ErrorState.test.tsx

@@ -0,0 +1,73 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ErrorState } from '#/components/ErrorState';
+
+describe('ErrorState', () => {
+  it('renders the generic error message for a plain string error', () => {
+    render(<ErrorState error="Network timeout" />);
+    expect(screen.getByText('Something went wrong. Please try again.')).toBeInTheDocument();
+  });
+
+  it('renders the generic error message for an Error instance', () => {
+    render(<ErrorState error={new Error('Not found')} />);
+    expect(screen.getByText('Something went wrong. Please try again.')).toBeInTheDocument();
+  });
+
+  it('renders the network error message for a TypeError', () => {
+    render(<ErrorState error={new TypeError('fetch failed')} />);
+    expect(
+      screen.getByText("Can't reach the server. Check your connection and try again."),
+    ).toBeInTheDocument();
+  });
+
+  it('renders the error message from a GraphQL error with a known code', () => {
+    const gqlError = {
+      response: {
+        errors: [{ message: 'Rate limited', extensions: { code: 'RATE_LIMITED' } }],
+      },
+    };
+    render(<ErrorState error={gqlError} />);
+    expect(screen.getByText('Rate limited')).toBeInTheDocument();
+  });
+
+  it('shows a NOT_FOUND override message', () => {
+    const gqlError = {
+      response: {
+        errors: [{ message: 'Application not found', extensions: { code: 'NOT_FOUND' } }],
+      },
+    };
+    render(<ErrorState error={gqlError} />);
+    expect(
+      screen.getByText("That item couldn't be found — it may have been deleted."),
+    ).toBeInTheDocument();
+  });
+
+  it('shows a FORBIDDEN override message', () => {
+    const gqlError = {
+      response: {
+        errors: [{ message: 'Forbidden', extensions: { code: 'FORBIDDEN' } }],
+      },
+    };
+    render(<ErrorState error={gqlError} />);
+    expect(screen.getByText("You don't have permission to do that.")).toBeInTheDocument();
+  });
+
+  it('renders the retry button when onRetry is provided', () => {
+    const onRetry = vi.fn();
+    render(<ErrorState error="fail" onRetry={onRetry} />);
+    const btn = screen.getByRole('button', { name: /try again/i });
+    expect(btn).toBeInTheDocument();
+    fireEvent.click(btn);
+    expect(onRetry).toHaveBeenCalledOnce();
+  });
+
+  it('does not render the retry button when onRetry is not provided', () => {
+    render(<ErrorState error="fail" />);
+    expect(screen.queryByRole('button', { name: /try again/i })).not.toBeInTheDocument();
+  });
+
+  it('renders the alert triangle icon', () => {
+    const { container } = render(<ErrorState error="fail" />);
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
+});

apps/web/src/__tests__/components/JdImportPanel.test.tsx

@@ -0,0 +1,181 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { JdImportPanel } from '#/routes/_authenticated/applications/-components/JdImportPanel';
+
+const { mockGqlRequest } = vi.hoisted(() => ({
+  mockGqlRequest: vi.fn(),
+}));
+
+vi.mock('#/graphql/client', () => ({
+  gqlClient: { request: mockGqlRequest },
+}));
+
+vi.mock('@tanstack/react-router', () => ({
+  Link: ({ children, to }: { children: React.ReactNode; to: string }) => (
+    <a href={to}>{children}</a>
+  ),
+}));
+
+describe('JdImportPanel', () => {
+  const onFill = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders the collapsed toggle button', () => {
+    render(<JdImportPanel onFill={onFill} />);
+    expect(screen.getByText('Auto-fill from job posting')).toBeInTheDocument();
+  });
+
+  it('expands the panel when toggle is clicked', () => {
+    render(<JdImportPanel onFill={onFill} />);
+    fireEvent.click(screen.getByText('Auto-fill from job posting'));
+    expect(screen.getByText('Paste text')).toBeInTheDocument();
+    expect(screen.getByText('From URL')).toBeInTheDocument();
+  });
+
+  it('shows the textarea in text mode by default', () => {
+    render(<JdImportPanel onFill={onFill} />);
+    fireEvent.click(screen.getByText('Auto-fill from job posting'));
+    expect(screen.getByPlaceholderText(/paste the job description/i)).toBeInTheDocument();
+  });
+
+  it('switches to URL mode when "From URL" is clicked', () => {
+    render(<JdImportPanel onFill={onFill} />);
+    fireEvent.click(screen.getByText('Auto-fill from job posting'));
+    fireEvent.click(screen.getByText('From URL'));
+    expect(screen.getByPlaceholderText(/https:\/\/company\.com/i)).toBeInTheDocument();
+  });
+
+  it('disables the auto-fill button when input is empty', () => {
+    render(<JdImportPanel onFill={onFill} />);
+    fireEvent.click(screen.getByText('Auto-fill from job posting'));
+    const btn = screen.getByRole('button', { name: /auto-fill fields/i });
+    expect(btn).toBeDisabled();
+  });
+
+  it('enables the auto-fill button when text is entered', () => {
+    render(<JdImportPanel onFill={onFill} />);
+    fireEvent.click(screen.getByText('Auto-fill from job posting'));
+    fireEvent.change(screen.getByPlaceholderText(/paste the job description/i), {
+      target: { value: 'Software Engineer at Acme' },
+    });
+    const btn = screen.getByRole('button', { name: /auto-fill fields/i });
+    expect(btn).toBeEnabled();
+  });
+
+  it('calls onFill with parsed data on successful auto-fill', async () => {
+    mockGqlRequest.mockResolvedValue({
+      parseJobDescription: {
+        company: 'Acme',
+        role: 'Engineer',
+        location: 'Remote',
+        salary: '$100k',
+        description: 'Build things',
+      },
+    });
+
+    render(<JdImportPanel onFill={onFill} />);
+    fireEvent.click(screen.getByText('Auto-fill from job posting'));
+    fireEvent.change(screen.getByPlaceholderText(/paste the job description/i), {
+      target: { value: 'Software Engineer at Acme' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: /auto-fill fields/i }));
+
+    await waitFor(() => {
+      expect(onFill).toHaveBeenCalledWith({
+        company: 'Acme',
+        role: 'Engineer',
+        location: 'Remote',
+        salary: '$100k',
+        description: 'Build things',
+      });
+    });
+  });
+
+  it('shows error message on mutation failure', async () => {
+    mockGqlRequest.mockRejectedValue(new Error('Network error'));
+
+    render(<JdImportPanel onFill={onFill} />);
+    fireEvent.click(screen.getByText('Auto-fill from job posting'));
+    fireEvent.change(screen.getByPlaceholderText(/paste the job description/i), {
+      target: { value: 'Some job description' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: /auto-fill fields/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText('Network error')).toBeInTheDocument();
+    });
+  });
+
+  it('shows "Parsing..." while loading', async () => {
+    let resolvePromise: (value: unknown) => void;
+    mockGqlRequest.mockReturnValue(
+      new Promise((resolve) => {
+        resolvePromise = resolve;
+      }),
+    );
+
+    render(<JdImportPanel onFill={onFill} />);
+    fireEvent.click(screen.getByText('Auto-fill from job posting'));
+    fireEvent.change(screen.getByPlaceholderText(/paste the job description/i), {
+      target: { value: 'Job description' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: /auto-fill fields/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText('Parsing…')).toBeInTheDocument();
+    });
+
+    resolvePromise!({
+      parseJobDescription: {
+        company: null,
+        role: null,
+        location: null,
+        salary: null,
+        description: null,
+      },
+    });
+  });
+
+  it('shows "Filled!" after successful auto-fill', async () => {
+    mockGqlRequest.mockResolvedValue({
+      parseJobDescription: {
+        company: null,
+        role: null,
+        location: null,
+        salary: null,
+        description: null,
+      },
+    });
+
+    render(<JdImportPanel onFill={onFill} />);
+    fireEvent.click(screen.getByText('Auto-fill from job posting'));
+    fireEvent.change(screen.getByPlaceholderText(/paste the job description/i), {
+      target: { value: 'Job description' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: /auto-fill fields/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText('Filled!')).toBeInTheDocument();
+    });
+  });
+
+  it('shows AI not configured message when error code matches', async () => {
+    mockGqlRequest.mockRejectedValue({
+      response: { errors: [{ extensions: { code: 'AI_NOT_CONFIGURED' } }] },
+    });
+
+    render(<JdImportPanel onFill={onFill} />);
+    fireEvent.click(screen.getByText('Auto-fill from job posting'));
+    fireEvent.change(screen.getByPlaceholderText(/paste the job description/i), {
+      target: { value: 'Job description' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: /auto-fill fields/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/add your ai api key/i)).toBeInTheDocument();
+    });
+  });
+});