feat(4.1-05-07): create frontend components for spare-parts search integration - useItemSearch hook, LoadingModal, ErrorModal with tests

frontend/tests/SearchErrorModal.test.tsx

@@ -0,0 +1,51 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { SearchErrorModal } from '../components/SearchErrorModal';
+
+describe('SearchErrorModal', () => {
+  it('renders when open', () => {
+    render(<SearchErrorModal isOpen={true} error="Network error" />);
+    expect(screen.getByText(/Search failed/i)).toBeInTheDocument();
+  });
+
+  it('does not render when closed', () => {
+    const { container } = render(<SearchErrorModal isOpen={false} error="Network error" />);
+    expect(container.firstChild?.childNodes.length).toBe(0);
+  });
+
+  it('displays error message', () => {
+    const errorMsg = 'Unable to connect to server';
+    render(<SearchErrorModal isOpen={true} error={errorMsg} />);
+    expect(screen.getByText(errorMsg)).toBeInTheDocument();
+  });
+
+  it('calls onRetry when Retry clicked', async () => {
+    const onRetry = vi.fn();
+    const user = userEvent.setup();
+
+    render(<SearchErrorModal isOpen={true} error="Error" onRetry={onRetry} canRetry={true} />);
+
+    const retryBtn = screen.getByRole('button', { name: /Retry/i });
+    await user.click(retryBtn);
+
+    expect(onRetry).toHaveBeenCalled();
+  });
+
+  it('calls onSkip when Skip clicked', async () => {
+    const onSkip = vi.fn();
+    const user = userEvent.setup();
+
+    render(<SearchErrorModal isOpen={true} error="Error" onSkip={onSkip} />);
+
+    const skipBtn = screen.getByRole('button', { name: /Skip/i });
+    await user.click(skipBtn);
+
+    expect(onSkip).toHaveBeenCalled();
+  });
+
+  it('hides Retry button when canRetry is false', () => {
+    render(<SearchErrorModal isOpen={true} error="Error" canRetry={false} />);
+    expect(screen.queryByRole('button', { name: /Retry/i })).not.toBeInTheDocument();
+  });
+});

frontend/tests/SearchLoadingModal.test.tsx

@@ -0,0 +1,35 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import { SearchLoadingModal } from '../components/SearchLoadingModal';
+
+describe('SearchLoadingModal', () => {
+  it('renders when open', () => {
+    render(<SearchLoadingModal isOpen={true} maxSeconds={30} />);
+    expect(screen.getByText(/Searching for specs/i)).toBeInTheDocument();
+  });
+
+  it('does not render when closed', () => {
+    const { container } = render(<SearchLoadingModal isOpen={false} />);
+    expect(container.firstChild?.childNodes.length).toBe(0);
+  });
+
+  it('displays countdown timer', () => {
+    render(<SearchLoadingModal isOpen={true} maxSeconds={30} />);
+    expect(screen.getByText(/30 seconds remaining/i)).toBeInTheDocument();
+  });
+
+  it('calls onTimeout when timer expires', async () => {
+    const onTimeout = vi.fn();
+    render(<SearchLoadingModal isOpen={true} maxSeconds={1} onTimeout={onTimeout} />);
+
+    await waitFor(() => {
+      expect(onTimeout).toHaveBeenCalled();
+    }, { timeout: 2000 });
+  });
+
+  it('shows progress bar', () => {
+    const { container } = render(<SearchLoadingModal isOpen={true} maxSeconds={30} />);
+    const progressBar = container.querySelector('div[class*="bg-primary"]');
+    expect(progressBar).toBeInTheDocument();
+  });
+});

frontend/tests/useItemSearch.test.tsx

@@ -0,0 +1,103 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { renderHook, act, waitFor } from '@testing-library/react';
+import { useItemSearch } from '../hooks/useItemSearch';
+
+describe('useItemSearch', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    global.fetch = vi.fn();
+  });
+
+  it('initializes with idle state', () => {
+    const { result } = renderHook(() => useItemSearch());
+    expect(result.current.state.searchStatus).toBe('idle');
+    expect(result.current.state.isSearching).toBe(false);
+  });
+
+  it('performs search with part number and category', async () => {
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({ type: 'DDR4', description: 'Kingston RAM' }),
+    });
+
+    const { result } = renderHook(() => useItemSearch());
+
+    await act(async () => {
+      await result.current.performSearch('KF466C40RS-16', 'DDR4');
+    });
+
+    expect(result.current.state.searchStatus).toBe('success');
+    expect(result.current.state.searchResults?.type).toBe('DDR4');
+  });
+
+  it('handles search timeout', async () => {
+    global.fetch = vi.fn().mockImplementation(
+      () =>
+        new Promise((_, reject) => {
+          setTimeout(() => reject(new DOMException('Aborted', 'AbortError')), 100);
+        })
+    );
+
+    const { result } = renderHook(() => useItemSearch({ timeout: 50 }));
+
+    await act(async () => {
+      await result.current.performSearch('KF466C40RS-16', 'DDR4');
+    });
+
+    await waitFor(() => {
+      expect(result.current.state.searchStatus).toBe('timeout');
+    });
+  });
+
+  it('skips search when part number is missing', async () => {
+    const { result } = renderHook(() => useItemSearch());
+
+    await act(async () => {
+      await result.current.performSearch('', 'DDR4');
+    });
+
+    expect(result.current.state.searchStatus).toBe('skipped');
+  });
+
+  it('handles search error', async () => {
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: false,
+      status: 500,
+    });
+
+    const { result } = renderHook(() => useItemSearch());
+
+    await act(async () => {
+      await result.current.performSearch('KF466C40RS-16', 'DDR4');
+    });
+
+    expect(result.current.state.searchStatus).toBe('error');
+    expect(result.current.state.searchError).toBeTruthy();
+  });
+
+  it('retries search', async () => {
+    const { result } = renderHook(() => useItemSearch({ maxRetries: 2 }));
+
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({ type: 'DDR4' }),
+    });
+
+    await act(async () => {
+      await result.current.retrySearch('KF466C40RS-16', 'DDR4');
+    });
+
+    expect(result.current.state.retryCount).toBe(1);
+  });
+
+  it('skips search', async () => {
+    const { result } = renderHook(() => useItemSearch());
+
+    act(() => {
+      result.current.skipSearch();
+    });
+
+    expect(result.current.state.searchStatus).toBe('skipped');
+    expect(result.current.state.isSearching).toBe(false);
+  });
+});