Projekt Główny: Kompletny Test Suite -- Kosmiczne Centrum Kontroli Misji

Nadszedł czas na podsumowanie wszystkiego, czego nauczyliśmy się w tym module! Twoim zadaniem jest stworzenie kompletnego zestawu testów dla Kosmicznego Centrum Kontroli Misji -- aplikacji zarządzającej misjami kosmicznymi, załogą i systemami statku.

Opis aplikacji

Centrum Kontroli Misji składa się z następujących komponentów:

1. MissionDashboard -- Główny panel

• Wyświetla listę aktywnych misji
• Pobiera dane z API (

  /api/missions

  )
• Filtruje misje po statusie
• Wyświetla podsumowanie statystyk

2. CrewManager -- Zarządzanie załogą

• Formularz dodawania nowych członków załogi
• Lista członków z możliwością usuwania
• Walidacja danych (imię, rola, doświadczenie)

3. SystemStatus -- Status systemów

• Wyświetla status systemów statku (silnik, osłony, nawigacja)
• Automatyczny refresh co 10 sekund
• Alerty przy krytycznych poziomach

4. Custom hooki

• useMissions

  -- pobieranie i zarządzanie misjami

• useSystemHealth

  -- monitorowanie zdrowia systemów

• useCrewFilter

  -- filtrowanie załogi

Zadania do wykonania

Sprawdź poniższy kod aplikacji i napisane testy. Aplikacja demonstruje kompletny test suite obejmujący:

1. Testy jednostkowe -- funkcje pomocnicze, walidacja
2. Testy komponentów -- renderowanie, interakcje, stany
3. Testy asynchroniczne -- pobieranie danych, loading, błędy
4. Testy hooków -- custom hooki z renderHook
5. Mockowanie API -- jest.mock, mockowanie fetch
6. Snapshot tests -- kluczowe komponenty UI

Struktura testów

1__tests__/
2  MissionDashboard.test.js    -- testy głównego panelu
3  CrewManager.test.js         -- testy zarządzania załogą
4  SystemStatus.test.js        -- testy statusu systemów
5  hooks/
6    useMissions.test.js       -- testy hooka misji
7    useSystemHealth.test.js   -- testy hooka systemów
8  utils/
9    validators.test.js        -- testy funkcji walidacji

Kluczowe wzorce do zastosowania

Pattern: Arrange-Act-Assert

1test('adds new crew member', async () => {
2  // Arrange -- przygotuj
3  const user = userEvent.setup();
4  render(<CrewManager />);
5
6  // Act -- wykonaj
7  await user.type(screen.getByLabelText('Name'), 'Commander Nova');
8  await user.selectOptions(screen.getByLabelText('Role'), 'Captain');
9  await user.click(screen.getByRole('button', { name: 'Add Member' }));
10
11  // Assert -- sprawdź
12  expect(screen.getByText('Commander Nova')).toBeInTheDocument();
13  expect(screen.getByText('Captain')).toBeInTheDocument();
14});

Pattern: Test Isolation

1describe('MissionDashboard', () => {
2  beforeEach(() => {
3    // Każdy test zaczyna z czystym stanem
4    jest.clearAllMocks();
5    global.fetch = jest.fn();
6  });
7
8  afterEach(() => {
9    jest.restoreAllMocks();
10  });
11});

Pattern: Error Boundary Testing

1test('shows error boundary on crash', () => {
2  const ThrowError = () => { throw new Error('Kaboom!'); };
3
4  // Wyciszamy console.error
5  const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
6
7  render(
8    <ErrorBoundary fallback={<p>Something went wrong</p>}>
9      <ThrowError />
10    </ErrorBoundary>
11  );
12
13  expect(screen.getByText('Something went wrong')).toBeInTheDocument();
14  spy.mockRestore();
15});

Dobre praktyki testowe

1. Testuj zachowanie, nie implementację -- sprawdzaj co użytkownik widzi
2. Jeden koncept na test -- każdy test sprawdza jedną rzecz
3. Czytelne nazwy testów --

   it('displays error when mission not found')

4. DRY w testach z umiarem -- duplikacja w testach jest lepsza niż zbyt skomplikowana abstrakcja
5. Testuj ścieżki sukcesu i błędu -- happy path i edge cases
6. Nie testuj frameworka -- nie testuj czy

   useState

   działa, testuj swoją logikę

Sprawdź Sandbox

Poniżej znajdziesz kompletny przykład Centrum Kontroli Misji z testami. Przeanalizuj kod i zwróć uwagę na:

• Jak testy odzwierciedlają wymagania biznesowe
• Jak mockujemy API i zewnętrzne zależności
• Jak testujemy różne stany komponentów (loading, error, success)
• Jak testujemy interakcje użytkownika