test: add unit tests for all 13 frontend components (Closes #169)

frontend/__tests__/credential-analytics-dashboard.test.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { CredentialAnalyticsDashboard } from '../src/components/credential-analytics-dashboard';
+
+// Mock fetch to reject so the component falls back to MOCK_DATA
+global.fetch = jest.fn(() => Promise.reject(new Error('Network error')));
+
+describe('CredentialAnalyticsDashboard', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('shows loading state initially', () => {
+    render(<CredentialAnalyticsDashboard />);
+    expect(screen.getByText('Loading analytics...')).toBeInTheDocument();
+  });
+
+  it('renders dashboard with mock data after loading', async () => {
+    render(<CredentialAnalyticsDashboard />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Credential Analytics Dashboard')).toBeInTheDocument();
+    });
+
+    // Check usage stats
+    expect(screen.getByText('Total Credentials Issued')).toBeInTheDocument();
+    expect(screen.getByText('Total Verifications')).toBeInTheDocument();
+    expect(screen.getByText('Data Shares')).toBeInTheDocument();
+
+    // Check mock data values
+    expect(screen.getByText('120')).toBeInTheDocument(); // totalIdentities
+    expect(screen.getByText('300')).toBeInTheDocument(); // total verifications
+    expect(screen.getByText('150')).toBeInTheDocument(); // total shares
+  });
+
+  it('renders system status', async () => {
+    render(<CredentialAnalyticsDashboard />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/operational/i)).toBeInTheDocument();
+    });
+
+    expect(screen.getByText('99.99%')).toBeInTheDocument(); // uptime
+    expect(screen.getByText('45ms')).toBeInTheDocument(); // api latency
+  });
+
+  it('renders quick action buttons', async () => {
+    render(<CredentialAnalyticsDashboard />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Issue New')).toBeInTheDocument();
+    });
+
+    expect(screen.getByText('Export Report')).toBeInTheDocument();
+  });
+
+  it('renders recent activity section', async () => {
+    render(<CredentialAnalyticsDashboard />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Recent Activity')).toBeInTheDocument();
+    });
+
+    // Check for activity items
+    expect(screen.getByText(/Vaccination verified by Clinic A/)).toBeInTheDocument();
+    expect(screen.getByText(/Credential shared with Employer B/)).toBeInTheDocument();
+  });
+
+  it('renders verification trend section', async () => {
+    render(<CredentialAnalyticsDashboard />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Verification Trend (Last 7 Days)')).toBeInTheDocument();
+    });
+  });
+
+  it('renders verification rates pie chart', async () => {
+    render(<CredentialAnalyticsDashboard />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Verification Rates')).toBeInTheDocument();
+    });
+  });
+
+  it('shows loading while fetch is pending', async () => {
+    // Make fetch never resolve/reject
+    global.fetch = jest.fn(() => new Promise(() => {}));
+    render(<CredentialAnalyticsDashboard />);
+    expect(screen.getByText('Loading analytics...')).toBeInTheDocument();
+  });
+});

frontend/__tests__/credential-details-modal.test.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { CredentialDetailsModal } from '../src/components/credential-details-modal';
+
+const mockCredential = {
+  id: 'cred-001',
+  vaccineType: 'COVID-19 (Pfizer)',
+  verificationStatus: true,
+  vaccinationDate: '2026-07-15',
+};
+
+describe('CredentialDetailsModal', () => {
+  it('renders nothing when isOpen is false', () => {
+    const { container } = render(
+      <CredentialDetailsModal isOpen={false} credential={mockCredential} onClose={jest.fn()} />
+    );
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('renders nothing when credential is null', () => {
+    const { container } = render(
+      <CredentialDetailsModal isOpen={true} credential={null} onClose={jest.fn()} />
+    );
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('renders credential details when open', () => {
+    render(
+      <CredentialDetailsModal isOpen={true} credential={mockCredential} onClose={jest.fn()} />
+    );
+    expect(screen.getByText('Credential Details')).toBeInTheDocument();
+    expect(screen.getByText('COVID-19 (Pfizer)')).toBeInTheDocument();
+    expect(screen.getByText('Verified')).toBeInTheDocument();
+    expect(screen.getByText('2026-07-15')).toBeInTheDocument();
+    expect(screen.getByText('cred-001')).toBeInTheDocument();
+  });
+
+  it('shows Pending status when verificationStatus is false', () => {
+    const pendingCred = { ...mockCredential, verificationStatus: false };
+    render(
+      <CredentialDetailsModal isOpen={true} credential={pendingCred} onClose={jest.fn()} />
+    );
+    expect(screen.getByText('Pending')).toBeInTheDocument();
+  });
+
+  it('calls onClose when close button is clicked', () => {
+    const onClose = jest.fn();
+    render(
+      <CredentialDetailsModal isOpen={true} credential={mockCredential} onClose={onClose} />
+    );
+    const closeButton = screen.getByLabelText('Close modal');
+    fireEvent.click(closeButton);
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('calls onClose when backdrop is clicked', () => {
+    const onClose = jest.fn();
+    const { container } = render(
+      <CredentialDetailsModal isOpen={true} credential={mockCredential} onClose={onClose} />
+    );
+    // The backdrop is the first motion.div with onClick={onClose}
+    const backdrops = container.querySelectorAll('.fixed.inset-0');
+    expect(backdrops.length).toBeGreaterThan(0);
+  });
+});

frontend/__tests__/credential-edit-modal.test.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { CredentialEditModal } from '../src/components/credential-edit-modal';
+
+const mockCredential = {
+  id: 'cred-001',
+  vaccineType: 'COVID-19 (Pfizer)',
+  verificationStatus: true,
+  vaccinationDate: '2026-07-15',
+};
+
+describe('CredentialEditModal', () => {
+  it('renders nothing when isOpen is false', () => {
+    const { container } = render(
+      <CredentialEditModal isOpen={false} credential={mockCredential} onSave={jest.fn()} onClose={jest.fn()} />
+    );
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('renders nothing when credential is null', () => {
+    const { container } = render(
+      <CredentialEditModal isOpen={true} credential={null} onSave={jest.fn()} onClose={jest.fn()} />
+    );
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('renders edit form with credential values', () => {
+    render(
+      <CredentialEditModal isOpen={true} credential={mockCredential} onSave={jest.fn()} onClose={jest.fn()} />
+    );
+    expect(screen.getByText('Edit Metadata')).toBeInTheDocument();
+    expect(screen.getByDisplayValue('COVID-19 (Pfizer)')).toBeInTheDocument();
+    expect(screen.getByDisplayValue('2026-07-15')).toBeInTheDocument();
+    expect(screen.getByText('Save Changes')).toBeInTheDocument();
+    expect(screen.getByText('Cancel')).toBeInTheDocument();
+  });
+
+  it('calls onSave with updated credential on form submit', () => {
+    const onSave = jest.fn();
+    const onClose = jest.fn();
+    render(
+      <CredentialEditModal isOpen={true} credential={mockCredential} onSave={onSave} onClose={onClose} />
+    );
+
+    const vaccineInput = screen.getByDisplayValue('COVID-19 (Pfizer)');
+    fireEvent.change(vaccineInput, { target: { value: 'COVID-19 (Moderna)' } });
+
+    fireEvent.click(screen.getByText('Save Changes'));
+
+    expect(onSave).toHaveBeenCalledWith({
+      ...mockCredential,
+      vaccineType: 'COVID-19 (Moderna)',
+    });
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('calls onClose when Cancel button is clicked', () => {
+    const onClose = jest.fn();
+    render(
+      <CredentialEditModal isOpen={true} credential={mockCredential} onSave={jest.fn()} onClose={onClose} />
+    );
+    fireEvent.click(screen.getByText('Cancel'));
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('calls onClose when close button is clicked', () => {
+    const onClose = jest.fn();
+    render(
+      <CredentialEditModal isOpen={true} credential={mockCredential} onSave={jest.fn()} onClose={onClose} />
+    );
+    const closeButton = screen.getByLabelText('Close modal');
+    fireEvent.click(closeButton);
+    expect(onClose).toHaveBeenCalled();
+  });
+});