Main Project: Complete Test Suite -- Cosmic Mission Control Center

The time has come to summarize everything we've learned in this module! Your task is to create a complete test suite for the Cosmic Mission Control Center -- an application managing space missions, crew, and ship systems.

Application Description

The Mission Control Center consists of the following components:

1. MissionDashboard -- Main Panel

• Displays a list of active missions
• Fetches data from API (

  /api/missions

  )
• Filters missions by status
• Displays summary statistics

2. CrewManager -- Crew Management

• Form for adding new crew members
• List of members with deletion capability
• Data validation (name, role, experience)

3. SystemStatus -- Systems Status

• Displays ship system status (engine, shields, navigation)
• Auto-refresh every 10 seconds
• Alerts at critical levels

4. Custom Hooks

• useMissions

  -- fetching and managing missions

• useSystemHealth

  -- monitoring system health

• useCrewFilter

  -- filtering crew

Tasks to Complete

Review the application code and written tests below. The application demonstrates a complete test suite covering:

1. Unit tests -- helper functions, validation
2. Component tests -- rendering, interactions, states
3. Async tests -- data fetching, loading, errors
4. Hook tests -- custom hooks with renderHook
5. API mocking -- jest.mock, fetch mocking
6. Snapshot tests -- key UI components

Test Structure

1__tests__/
2  MissionDashboard.test.js    -- main panel tests
3  CrewManager.test.js         -- crew management tests
4  SystemStatus.test.js        -- system status tests
5  hooks/
6    useMissions.test.js       -- missions hook tests
7    useSystemHealth.test.js   -- systems hook tests
8  utils/
9    validators.test.js        -- validation function tests

Key Patterns to Apply

Pattern: Arrange-Act-Assert

1test('adds new crew member', async () => {
2  // Arrange -- prepare
3  const user = userEvent.setup();
4  render(<CrewManager />);
5
6  // Act -- execute
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 -- verify
12  expect(screen.getByText('Commander Nova')).toBeInTheDocument();
13  expect(screen.getByText('Captain')).toBeInTheDocument();
14});

Pattern: Test Isolation

1describe('MissionDashboard', () => {
2  beforeEach(() => {
3    // Each test starts with a clean state
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  // Silence 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});

Testing Best Practices

1. Test behavior, not implementation -- check what the user sees
2. One concept per test -- each test checks one thing
3. Readable test names --

   it('displays error when mission not found')

4. DRY in tests with moderation -- duplication in tests is better than overly complicated abstractions
5. Test success and error paths -- happy path and edge cases
6. Don't test the framework -- don't test whether

   useState

   works, test your logic

Check the Sandbox

Below you'll find a complete Mission Control Center example with tests. Analyze the code and pay attention to:

• How tests reflect business requirements
• How we mock APIs and external dependencies
• How we test different component states (loading, error, success)
• How we test user interactions