Testing Fundamentals

// src/utils/calculator.ts
export function add(a: number, b: number): number {
  return a + b
}
 
export function divide(a: number, b: number): number {
  if (b === 0) {
    throw new Error('Cannot divide by zero')
  }
  return a / b
}

// src/utils/calculator.test.ts
import { describe, it, expect } from 'vitest'
import { add, divide } from './calculator'
 
describe('Calculator Utils', () => {
  describe('add', () => {
    it('should add two positive numbers', () => {
      expect(add(2, 3)).toBe(5)
    })
 
    it('should handle negative numbers', () => {
      expect(add(-5, 3)).toBe(-2)
    })
 
    it('should handle zero', () => {
      expect(add(0, 5)).toBe(5)
    })
  })
 
  describe('divide', () => {
    it('should divide two numbers', () => {
      expect(divide(10, 2)).toBe(5)
    })
 
    it('should throw error when dividing by zero', () => {
      expect(() => divide(10, 0)).toThrow('Cannot divide by zero')
    })
  })
})

// pages/api/users.ts
import type { NextApiRequest, NextApiResponse } from 'next'
import { db } from '@/lib/db'
 
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  if (req.method === 'GET') {
    const users = await db.user.findMany()
    return res.status(200).json(users)
  }
 
  if (req.method === 'POST') {
    const { name, email } = req.body
    const user = await db.user.create({
      data: { name, email },
    })
    return res.status(201).json(user)
  }
 
  res.status(405).json({ message: 'Method not allowed' })
}

// pages/api/users.test.ts
import { describe, it, expect, beforeEach, afterEach } from 'vitest'
import request from 'supertest'
import { setupTestDatabase, cleanupTestDatabase } from '@/test/helpers'
 
describe('Users API', () => {
  beforeEach(async () => {
    await setupTestDatabase()
  })
 
  afterEach(async () => {
    await cleanupTestDatabase()
  })
 
  it('should return all users', async () => {
    const response = await request('/api/users').get('/')
 
    expect(response.status).toBe(200)
    expect(response.body).toBeInstanceOf(Array)
  })
 
  it('should create a new user', async () => {
    const userData = {
      name: 'John Doe',
      email: 'john@example.com',
    }
 
    const response = await request('/api/users').post('/').send(userData)
 
    expect(response.status).toBe(201)
    expect(response.body).toMatchObject(userData)
  })
})

// e2e/login.spec.ts
import { test, expect } from '@playwright/test'
 
test.describe('User Login', () => {
  test('should login successfully with valid credentials', async ({ page }) => {
    await page.goto('https://myapp.com/login')
 
    // Fill in login form
    await page.fill('input[name="email"]', 'user@example.com')
    await page.fill('input[name="password"]', 'password123')
 
    // Click login button
    await page.click('button[type="submit"]')
 
    // Verify redirect to dashboard
    await expect(page).toHaveURL('https://myapp.com/dashboard')
 
    // Verify user is logged in
    await expect(page.locator('text=Welcome back!')).toBeVisible()
  })
 
  test('should show error with invalid credentials', async ({ page }) => {
    await page.goto('https://myapp.com/login')
 
    await page.fill('input[name="email"]', 'wrong@example.com')
    await page.fill('input[name="password"]', 'wrongpassword')
    await page.click('button[type="submit"]')
 
    // Should stay on login page
    await expect(page).toHaveURL(/.*login/)
 
    // Should show error message
    await expect(page.locator('text=Invalid credentials')).toBeVisible()
  })
})

// Testing a search feature
test('search functionality', async () => {
  const searchInput = screen.getByRole('searchbox')
  const searchButton = screen.getByRole('button', { name: /search/i })
 
  // Enter search query
  await userEvent.type(searchInput, 'React testing')
  await userEvent.click(searchButton)
 
  // Verify search results appear
  expect(await screen.findByText('Search Results')).toBeInTheDocument()
  expect(screen.getAllByTestId('result-item').length).toBeGreaterThan(0)
})

import { performance } from 'perf_hooks'
 
test('data processing completes within 100ms', () => {
  const start = performance.now()
 
  processLargeDataset(mockData)
 
  const duration = performance.now() - start
  expect(duration).toBeLessThan(100)
})

test('should sanitize user input to prevent XSS', () => {
  const maliciousInput = '<script>alert("XSS")</script>'
  const sanitized = sanitizeInput(maliciousInput)
 
  expect(sanitized).not.toContain('<script>')
  expect(sanitized).toBe('alert("XSS")')
})

// Regression test for a bug fix
test('should handle empty array without crashing (Bug #123)', () => {
  const emptyArray: number[] = []
 
  // This used to crash before the fix
  expect(() => processArray(emptyArray)).not.toThrow()
  expect(processArray(emptyArray)).toEqual([])
})

// smoke.test.ts
describe('Smoke Tests', () => {
  test('application starts without errors', async () => {
    const app = await startApplication()
    expect(app.isRunning()).toBe(true)
  })
 
  test('homepage loads successfully', async () => {
    const response = await fetch('http://localhost:3000')
    expect(response.status).toBe(200)
  })
 
  test('database connection works', async () => {
    const isConnected = await db.ping()
    expect(isConnected).toBe(true)
  })
 
  test('critical API endpoint responds', async () => {
    const response = await fetch('http://localhost:3000/api/health')
    expect(response.status).toBe(200)
  })
})

// After adding a new payment method
describe('Sanity Tests - New Payment Method', () => {
  test('PayPal option appears in payment methods', () => {
    render(<PaymentForm />)
 
    const paypalOption = screen.getByLabelText('PayPal')
    expect(paypalOption).toBeInTheDocument()
  })
 
  test('PayPal payment can be processed', async () => {
    const result = await processPayment({
      method: 'paypal',
      amount: 100,
      email: 'user@example.com',
    })
 
    expect(result.success).toBe(true)
  })
})