Full-Stack Project Development

Chapter 10: Testing Strategy

10.1 Comprehensive Testing

A comprehensive testing strategy includes unit, integration, and end-to-end tests.

Testing Pyramid:

• Unit Tests: Test individual functions/components (70%)
• Integration Tests: Test component interactions (20%)
• E2E Tests: Test complete user flows (10%)

// Backend unit test
describe('User Service', () => {
    test('creates user', async () => {
        const userData = { email: 'test@example.com', password: 'password123' };
        const user = await createUser(userData);
        expect(user).toHaveProperty('id');
        expect(user.email).toBe(userData.email);
    });
});

// Frontend component test
import { render, screen, fireEvent } from '@testing-library/react';
import LoginForm from './LoginForm';

test('submits login form', async () => {
    const handleSubmit = jest.fn();
    render(<LoginForm onSubmit={handleSubmit} />);
    
    fireEvent.change(screen.getByLabelText('Email'), {
        target: { value: 'test@example.com' }
    });
    fireEvent.click(screen.getByRole('button', { name: /login/i }));
    
    await waitFor(() => {
        expect(handleSubmit).toHaveBeenCalled();
    });
});

10.2 Integration Testing

// API integration test
const request = require('supertest');
const app = require('./app');

describe('User API Integration', () => {
    test('complete user flow', async () => {
        // Create user
        const createRes = await request(app)
            .post('/api/users')
            .send({ email: 'test@example.com', password: 'password123' })
            .expect(201);
        
        const userId = createRes.body.id;
        
        // Get user
        await request(app)
            .get(`/api/users/${userId}`)
            .expect(200);
        
        // Update user
        await request(app)
            .put(`/api/users/${userId}`)
            .send({ name: 'Updated Name' })
            .expect(200);
    });
});

10.3 E2E Testing

// Cypress E2E test
describe('User Registration Flow', () => {
    it('completes registration', () => {
        cy.visit('/register');
        cy.get('[name="email"]').type('test@example.com');
        cy.get('[name="password"]').type('password123');
        cy.get('button[type="submit"]').click();
        cy.url().should('include', '/dashboard');
    });
});