Testing Strategies

Project Status: ProyectoWeb is currently in the planning stage. This guide provides general testing best practices that can be applied when development begins.

Testing Philosophy

A comprehensive testing strategy ensures code quality, prevents regressions, and builds confidence in deployments.

Unit Tests

Test individual functions and components in isolation

Integration Tests

Test how components work together

E2E Tests

Test complete user workflows end-to-end

Testing Pyramid

       /\      E2E Tests (Few)
      /  \     - Complete user flows
     /    \    - Cross-browser testing
    /------\   - Slow but comprehensive
   / Integr \  Integration Tests (Some)
  /  ation  \ - API endpoints
 /   Tests   \ - Component interactions
/------------\ - Database operations
/    Unit     \ Unit Tests (Many)
/    Tests     \ - Functions and utilities
/_______________\ - Fast and focused

The testing pyramid suggests having many fast unit tests, fewer integration tests, and only a few comprehensive end-to-end tests.

Unit Testing

Testing Principles

Test Behavior, Not Implementation

Focus on what the code does, not how it does it:

// Good - tests behavior
test('calculates total price with tax', () => {
  const result = calculateTotal([10, 20], 0.1);
  expect(result).toBe(33);
});

// Avoid - tests implementation details
test('calls reduce method', () => {
  const spy = jest.spyOn(Array.prototype, 'reduce');
  calculateTotal([10, 20], 0.1);
  expect(spy).toHaveBeenCalled();
});

Keep Tests Independent

Each test should run independently:

describe('User Service', () => {
  // Reset state before each test
  beforeEach(() => {
    jest.clearAllMocks();
    database.clear();
  });
  
  test('creates user', () => { /* ... */ });
  test('updates user', () => { /* ... */ });
});

Use Descriptive Test Names

// Good - clear and descriptive
test('returns 400 when email is missing', () => { });
test('allows admin to delete users', () => { });
test('prevents user from accessing unauthorized content', () => { });

// Avoid - vague or unclear
test('test1', () => { });
test('it works', () => { });
test('user test', () => { });

Follow AAA Pattern

Structure tests with Arrange, Act, Assert:

test('applies discount to order total', () => {
  // Arrange - set up test data
  const order = { items: [{ price: 100 }] };
  const discount = 0.1;
  
  // Act - execute the code being tested
  const result = applyDiscount(order, discount);
  
  // Assert - verify the result
  expect(result.total).toBe(90);
});

Testing Frameworks

Common Testing Tools

Jest
Vitest
Mocha + Chai

Popular JavaScript testing framework:

// Example Jest test
describe('Math utilities', () => {
  test('adds two numbers', () => {
    expect(add(2, 3)).toBe(5);
  });
  
  test('handles edge cases', () => {
    expect(add(0, 0)).toBe(0);
    expect(add(-1, 1)).toBe(0);
  });
});

Features:

Built-in mocking
Snapshot testing
Code coverage
Good error messages

Fast, modern testing framework:

import { describe, it, expect } from 'vitest';

describe('User validation', () => {
  it('validates email format', () => {
    expect(isValidEmail('[email protected]')).toBe(true);
    expect(isValidEmail('invalid')).toBe(false);
  });
});

Benefits:

Very fast execution
Compatible with Jest API
Built for Vite projects
Native ESM support

Flexible testing combination:

const { expect } = require('chai');

describe('String utilities', () => {
  it('capitalizes first letter', () => {
    const result = capitalize('hello');
    expect(result).to.equal('Hello');
  });
});

Characteristics:

Flexible and unopinionated
Large ecosystem
Separate assertion library
Good for various environments

Writing Effective Tests

Testing Functions

// Function to test
function calculateDiscount(price, discountPercent, memberLevel) {
  if (price < 0) throw new Error('Price cannot be negative');
  if (discountPercent < 0 || discountPercent > 100) {
    throw new Error('Invalid discount percentage');
  }
  
  let finalDiscount = discountPercent;
  if (memberLevel === 'gold') finalDiscount += 5;
  if (memberLevel === 'platinum') finalDiscount += 10;
  
  return price * (1 - finalDiscount / 100);
}

// Comprehensive tests
describe('calculateDiscount', () => {
  test('calculates basic discount', () => {
    expect(calculateDiscount(100, 10, 'regular')).toBe(90);
  });
  
  test('applies gold member bonus', () => {
    expect(calculateDiscount(100, 10, 'gold')).toBe(85);
  });
  
  test('applies platinum member bonus', () => {
    expect(calculateDiscount(100, 10, 'platinum')).toBe(80);
  });
  
  test('throws error for negative price', () => {
    expect(() => calculateDiscount(-100, 10, 'regular'))
      .toThrow('Price cannot be negative');
  });
  
  test('throws error for invalid discount', () => {
    expect(() => calculateDiscount(100, 150, 'regular'))
      .toThrow('Invalid discount percentage');
  });
});

Testing Async Code

// Async function to test
async function fetchUser(userId) {
  const response = await api.get(`/users/${userId}`);
  return response.data;
}

// Test async code
describe('fetchUser', () => {
  test('fetches user successfully', async () => {
    // Mock the API call
    api.get = jest.fn().mockResolvedValue({
      data: { id: '1', name: 'John' }
    });
    
    const user = await fetchUser('1');
    
    expect(user).toEqual({ id: '1', name: 'John' });
    expect(api.get).toHaveBeenCalledWith('/users/1');
  });
  
  test('handles errors', async () => {
    api.get = jest.fn().mockRejectedValue(new Error('Network error'));
    
    await expect(fetchUser('1')).rejects.toThrow('Network error');
  });
});

Mocking and Stubbing

Why Mock?

Isolate the code being tested
Avoid slow operations (API calls, database queries)
Test error conditions
Make tests deterministic

Common Mocking Techniques

Mock Functions

// Create a mock function
const mockCallback = jest.fn();

// Use it
[1, 2, 3].forEach(mockCallback);

// Verify it was called
expect(mockCallback).toHaveBeenCalledTimes(3);
expect(mockCallback).toHaveBeenCalledWith(1);

Mock Modules

// Mock entire module
jest.mock('./api', () => ({
  getUser: jest.fn(),
  updateUser: jest.fn()
}));

// Import and use mocked module
import { getUser } from './api';

test('uses API', async () => {
  getUser.mockResolvedValue({ id: '1', name: 'Test' });
  
  const result = await someFunction();
  
  expect(getUser).toHaveBeenCalled();
});

Mock Return Values

const mock = jest.fn();

// Return specific value
mock.mockReturnValue(42);
expect(mock()).toBe(42);

// Return different values on consecutive calls
mock
  .mockReturnValueOnce(1)
  .mockReturnValueOnce(2)
  .mockReturnValue(3);
  
expect(mock()).toBe(1);
expect(mock()).toBe(2);
expect(mock()).toBe(3);

Mock Implementations

const mock = jest.fn((x) => x * 2);

expect(mock(5)).toBe(10);

// Change implementation
mock.mockImplementation((x) => x + 1);

expect(mock(5)).toBe(6);

Integration Testing

Integration tests verify that multiple components work correctly together.

API Integration Tests

// Example API integration test
describe('User API', () => {
  beforeAll(async () => {
    // Set up test database
    await setupTestDatabase();
  });
  
  afterAll(async () => {
    // Clean up
    await teardownTestDatabase();
  });
  
  beforeEach(async () => {
    // Clear data before each test
    await clearUsers();
  });
  
  test('creates and retrieves user', async () => {
    // Create user
    const createResponse = await request(app)
      .post('/api/users')
      .send({ name: 'Test User', email: '[email protected]' });
    
    expect(createResponse.status).toBe(201);
    const userId = createResponse.body.id;
    
    // Retrieve user
    const getResponse = await request(app)
      .get(`/api/users/${userId}`);
    
    expect(getResponse.status).toBe(200);
    expect(getResponse.body.name).toBe('Test User');
  });
  
  test('validates required fields', async () => {
    const response = await request(app)
      .post('/api/users')
      .send({ name: 'Test' }); // Missing email
    
    expect(response.status).toBe(400);
    expect(response.body.errors).toContain('email');
  });
});

End-to-End Testing

E2E tests simulate real user interactions.

E2E Testing Tools

Cypress
Playwright
Selenium

Developer-friendly E2E testing:

describe('Login Flow', () => {
  it('allows user to login', () => {
    cy.visit('/login');
    
    cy.get('[data-testid="email"]').type('[email protected]');
    cy.get('[data-testid="password"]').type('password123');
    cy.get('[data-testid="login-btn"]').click();
    
    cy.url().should('include', '/dashboard');
    cy.get('[data-testid="welcome"]').should('contain', 'Welcome');
  });
  
  it('shows error for invalid credentials', () => {
    cy.visit('/login');
    
    cy.get('[data-testid="email"]').type('[email protected]');
    cy.get('[data-testid="password"]').type('wrong');
    cy.get('[data-testid="login-btn"]').click();
    
    cy.get('[data-testid="error"]').should('be.visible');
  });
});

Modern cross-browser testing:

import { test, expect } from '@playwright/test';

test.describe('User Registration', () => {
  test('complete registration flow', async ({ page }) => {
    await page.goto('/register');
    
    await page.fill('[name="email"]', '[email protected]');
    await page.fill('[name="password"]', 'SecurePass123');
    await page.fill('[name="confirmPassword"]', 'SecurePass123');
    
    await page.click('button:has-text("Register")');
    
    await expect(page.locator('text=Welcome')).toBeVisible();
  });
});

Established browser automation:

const { Builder, By, until } = require('selenium-webdriver');

describe('Search Functionality', () => {
  let driver;
  
  before(async () => {
    driver = await new Builder().forBrowser('chrome').build();
  });
  
  after(async () => {
    await driver.quit();
  });
  
  it('searches for items', async () => {
    await driver.get('http://localhost:3000');
    
    await driver.findElement(By.name('search')).sendKeys('test');
    await driver.findElement(By.css('button[type="submit"]')).click();
    
    await driver.wait(until.elementLocated(By.className('results')));
    
    const results = await driver.findElements(By.className('result-item'));
    expect(results.length).toBeGreaterThan(0);
  });
});

Test Coverage

Understanding Coverage

Statement Coverage

Percentage of code statements executed during tests

Branch Coverage

Percentage of conditional branches tested

Function Coverage

Percentage of functions called during tests

Line Coverage

Percentage of code lines executed

Code coverage is a useful metric, but 100% coverage doesn’t guarantee bug-free code. Focus on meaningful tests, not just coverage numbers.

Viewing Coverage

# Generate coverage report (example with Jest)
npm test -- --coverage

# View HTML report
open coverage/index.html

Testing Best Practices

Test Edge Cases

test('handles empty array', () => {
  expect(sum([])).toBe(0);
});

test('handles null input', () => {
  expect(processData(null)).toBeNull();
});

test('handles very large numbers', () => {
  expect(add(Number.MAX_SAFE_INTEGER, 1)).toBeDefined();
});

Use Test Data Factories

// Factory for creating test data
function createTestUser(overrides = {}) {
  return {
    id: '123',
    name: 'Test User',
    email: '[email protected]',
    role: 'user',
    ...overrides
  };
}

// Use in tests
test('admin can delete users', () => {
  const admin = createTestUser({ role: 'admin' });
  const result = canDeleteUser(admin);
  expect(result).toBe(true);
});

Clean Up After Tests

describe('Database operations', () => {
  afterEach(async () => {
    // Clean up test data
    await database.clear();
  });
  
  test('creates record', async () => {
    await database.create({ name: 'Test' });
    // Test will clean up automatically
  });
});

Test One Thing at a Time

// Good - focused test
test('validates email format', () => {
  expect(isValidEmail('[email protected]')).toBe(true);
});

test('rejects invalid email', () => {
  expect(isValidEmail('invalid')).toBe(false);
});

// Avoid - testing too much
test('user validation', () => {
  // Tests email, password, name, etc. all in one test
});

Test-Driven Development (TDD)

TDD Workflow

Write a Failing Test

Write a test for the functionality you want to add:

test('formats phone number', () => {
  expect(formatPhoneNumber('1234567890'))
    .toBe('(123) 456-7890');
});
// This test will fail because formatPhoneNumber doesn't exist yet

Write Minimal Code

Write just enough code to make the test pass:

function formatPhoneNumber(number) {
  return `(${number.slice(0, 3)}) ${number.slice(3, 6)}-${number.slice(6)}`;
}

Refactor

Improve the code while keeping tests green:

function formatPhoneNumber(number) {
  // Add validation
  if (number.length !== 10) {
    throw new Error('Invalid phone number length');
  }
  
  return `(${number.slice(0, 3)}) ${number.slice(3, 6)}-${number.slice(6)}`;
}

Repeat

Continue the cycle for new functionality

Debugging Tests

Console Debugging
Isolate Tests
Increase Timeout

test('debug test', () => {
  const data = processData(input);
  
  // Debug output
  console.log('Processed data:', data);
  
  expect(data).toBeDefined();
});

// Run only this test
test.only('focused test', () => {
  // This is the only test that will run
});

// Skip this test
test.skip('skipped test', () => {
  // This test will be skipped
});

test('slow operation', async () => {
  // Increase timeout for this test
  const result = await slowOperation();
  expect(result).toBeDefined();
}, 10000); // 10 second timeout

When Development Begins

When ProyectoWeb moves to implementation:

Choose Testing Framework

Select appropriate testing tools based on the technology stack

Set Up Testing Environment

Configure testing framework, coverage tools, and CI integration

Write Tests Alongside Code

Adopt test-driven development or write tests as you code

Run Tests Regularly

Run tests locally and in CI/CD pipeline before merging code

Next Steps

Development Guidelines

Review coding standards and best practices

Setup Guide

Learn about development environment setup

Testing is an investment in code quality and maintainability. Start with tests for critical functionality and expand coverage over time.

Get Started

Project Documentation

Development

Resources

Testing Philosophy

Unit Tests

Integration Tests

E2E Tests

Testing Pyramid

Unit Testing

Testing Principles

Testing Frameworks

Common Testing Tools

Writing Effective Tests

Testing Functions

Testing Async Code

Mocking and Stubbing

Why Mock?

Common Mocking Techniques

Integration Testing

API Integration Tests

End-to-End Testing

E2E Testing Tools

Test Coverage

Understanding Coverage

Statement Coverage

Branch Coverage

Function Coverage

Line Coverage

Viewing Coverage

Testing Best Practices

Test-Driven Development (TDD)

TDD Workflow

Debugging Tests

When Development Begins

Next Steps

Development Guidelines

Setup Guide

Build docs developers (and LLMs) love

Get Started

Project Documentation

Development

Resources

​Testing Philosophy

Unit Tests

Integration Tests

E2E Tests

​Testing Pyramid

​Unit Testing

​Testing Principles

​Testing Frameworks

​Common Testing Tools

​Writing Effective Tests

​Testing Functions

​Testing Async Code

​Mocking and Stubbing

​Why Mock?

​Common Mocking Techniques

​Integration Testing

​API Integration Tests

​End-to-End Testing

​E2E Testing Tools

​Test Coverage

​Understanding Coverage

Statement Coverage

Branch Coverage

Function Coverage

Line Coverage

​Viewing Coverage

​Testing Best Practices

​Test-Driven Development (TDD)

​TDD Workflow

​Debugging Tests

​When Development Begins

​Next Steps

Development Guidelines

Setup Guide

Build docs developers (and LLMs) love

Testing Philosophy

Testing Pyramid

Unit Testing

Testing Principles

Testing Frameworks

Common Testing Tools

Writing Effective Tests

Testing Functions

Testing Async Code

Mocking and Stubbing

Why Mock?

Common Mocking Techniques

Integration Testing

API Integration Tests

End-to-End Testing

E2E Testing Tools

Test Coverage

Understanding Coverage

Viewing Coverage

Testing Best Practices

Test-Driven Development (TDD)

TDD Workflow

Debugging Tests

When Development Begins

Next Steps