The application of design patterns in front-end testing

The Value of Design Patterns in Frontend Testing

Design patterns can significantly enhance the maintainability and scalability of code in frontend testing. Test code, much like business code, requires good architectural design. The judicious use of design patterns can make test cases clearer, assertions more precise, and test suites easier to manage. Especially in frontend scenarios with complex UI interactions and frequent asynchronous operations, design patterns can effectively address issues like repetitive test code and dependency chaos.

Factory Pattern for Generating Test Data

Constructing test data is a common pain point in frontend testing. The factory pattern creates different types of data objects through a unified interface. Take user information generation as an example:

class UserFactory {
  static createAdmin(overrides = {}) {
    return {
      id: faker.datatype.uuid(),
      name: faker.name.fullName(),
      role: 'admin',
      lastLogin: new Date(),
      ...overrides
    }
  }

  static createGuest(overrides = {}) {
    return {
      id: `guest_${faker.datatype.number()}`,
      name: 'Guest User',
      role: 'guest',
      ...overrides
    }
  }
}

// Usage in test cases
test('admin should have all permissions', () => {
  const admin = UserFactory.createAdmin({ permissions: ['read', 'write'] })
  expect(validatePermissions(admin)).toBeTruthy()
})

This pattern avoids repetitive construction of similar objects in tests. When the data structure changes, only the factory class needs to be modified. Combined with libraries like faker, realistic test data can be quickly generated.

Strategy Pattern for Multi-Environment Assertions

Different test environments may require different assertion strategies. The strategy pattern encapsulates assertion algorithms into independent objects:

const AssertionStrategies = {
  strict: {
    compare(actual, expected) {
      return actual === expected
    }
  },
  loose: {
    compare(actual, expected) {
      return actual == expected  // Loose comparison with double equals
    }
  },
  arrayContains: {
    compare(actual, expected) {
      return expected.every(item => actual.includes(item))
    }
  }
}

function assertWithStrategy(strategyName, actual, expected) {
  const strategy = AssertionStrategies[strategyName]
  if (!strategy.compare(actual, expected)) {
    throw new Error(`Assertion failed with ${strategyName} strategy`)
  }
}

// Test case
test('API response should contain required fields', () => {
  const response = { id: 1, name: 'Test' }
  assertWithStrategy('arrayContains', Object.keys(response), ['id', 'name'])
})

Observer Pattern for Test Event Notifications

In end-to-end testing, the observer pattern can decouple test actions from result verification:

class TestEventBus {
  constructor() {
    this.subscribers = []
  }

  subscribe(callback) {
    this.subscribers.push(callback)
  }

  publish(event) {
    this.subscribers.forEach(sub => sub(event))
  }
}

// In the test framework
const eventBus = new TestEventBus()

// Page object triggers events
class LoginPage {
  constructor() {
    this.eventBus = eventBus
  }

  async login(username, password) {
    // ...Perform login operation
    this.eventBus.publish({
      type: 'LOGIN_ATTEMPT',
      payload: { username }
    })
  }
}

// Test case subscribes to events
test('should track login attempts', async () => {
  const loginPage = new LoginPage()
  let receivedEvent = null
  
  eventBus.subscribe(event => {
    if (event.type === 'LOGIN_ATTEMPT') {
      receivedEvent = event
    }
  })

  await loginPage.login('test', 'pass123')
  expect(receivedEvent.payload.username).toBe('test')
})

Decorator Pattern for Enhancing Test Functionality

The decorator pattern can add new features without modifying existing test code:

function withRetry(maxAttempts = 3) {
  return function(target, name, descriptor) {
    const original = descriptor.value
    
    descriptor.value = async function(...args) {
      let lastError
      for (let i = 0; i < maxAttempts; i++) {
        try {
          return await original.apply(this, args)
        } catch (error) {
          lastError = error
          await new Promise(resolve => setTimeout(resolve, 1000 * i))
        }
      }
      throw lastError
    }
    
    return descriptor
  }
}

class FlakyTestSuite {
  @withRetry(5)
  async testUnstableAPI() {
    const result = await fetchUnstableAPI()
    expect(result.status).toBe(200)
  }
}

Singleton Pattern for Managing Test State

When sharing state across test cases, the singleton pattern ensures state consistency:

class TestState {
  constructor() {
    this.counter = 0
    this.events = []
  }

  static getInstance() {
    if (!TestState.instance) {
      TestState.instance = new TestState()
    }
    return TestState.instance
  }
}

// Test case A
test('should increment counter', () => {
  const state = TestState.getInstance()
  state.counter++
  expect(state.counter).toBe(1)
})

// Test case B
test('should maintain counter state', () => {
  const state = TestState.getInstance()
  expect(state.counter).toBe(1)  // Maintains state modified by the previous test
})

Composite Pattern for Building Complex Test Flows

The composite pattern can combine simple tests into complex test trees:

class TestComponent {
  constructor(name) {
    this.name = name
    this.children = []
  }

  add(component) {
    this.children.push(component)
  }

  async run() {
    console.log(`Running ${this.name}`)
    for (const child of this.children) {
      await child.run()
    }
  }
}

class TestCase extends TestComponent {
  async run() {
    console.log(`Executing test: ${this.name}`)
    // Actual test logic...
  }
}

// Build test suite
const suite = new TestComponent('Main Test Suite')
const authSuite = new TestComponent('Authentication')

authSuite.add(new TestCase('Login with valid credentials'))
authSuite.add(new TestCase('Login with invalid password'))

suite.add(authSuite)
suite.add(new TestCase('Guest checkout flow'))

// Execute the entire test tree
suite.run()

Proxy Pattern for Controlling Test Access

The proxy pattern can intercept and manage access to test resources:

class RealAPI {
  fetchUser(id) {
    // Actual API call
  }
}

class APIProxy {
  constructor() {
    this.realAPI = new RealAPI()
    this.cache = new Map()
  }

  fetchUser(id) {
    if (this.cache.has(id)) {
      return this.cache.get(id)
    }
    const user = this.realAPI.fetchUser(id)
    this.cache.set(id, user)
    return user
  }
}

// Usage in tests
test('should cache API responses', async () => {
  const api = new APIProxy()
  const user1 = await api.fetchUser(1)  // Actual call
  const user2 = await api.fetchUser(1)  // Retrieved from cache
  expect(user1).toBe(user2)
})

State Pattern for Handling Test Lifecycle

Test cases often need to perform different operations based on different states:

class TestState {
  constructor(testCase) {
    this.testCase = testCase
  }

  run() {
    throw new Error('Abstract method')
  }
}

class PendingState extends TestState {
  run() {
    console.log(`${this.testCase.name} is pending`)
  }
}

class RunningState extends TestState {
  run() {
    console.log(`Executing ${this.testCase.name}`)
    try {
      this.testCase.execute()
      this.testCase.setState(new PassedState(this.testCase))
    } catch (error) {
      this.testCase.setState(new FailedState(this.testCase, error))
    }
  }
}

class TestCase {
  constructor(name) {
    this.name = name
    this.state = new PendingState(this)
  }

  setState(newState) {
    this.state = newState
  }

  run() {
    this.state.run()
  }
}

Template Method Pattern for Defining Test Structure

The template method pattern can standardize the basic structure of test cases:

class TestTemplate {
  beforeAll() {}
  beforeEach() {}
  afterEach() {}
  afterAll() {}

  run() {
    this.beforeAll()
    try {
      this.testCases.forEach(test => {
        this.beforeEach()
        test()
        this.afterEach()
      })
    } finally {
      this.afterAll()
    }
  }
}

class UserTests extends TestTemplate {
  beforeAll() {
    this.db = setupTestDatabase()
  }

  testCases = [
    () => {
      const user = createUser()
      expect(user.id).toBeDefined()
    },
    () => {
      const users = listUsers()
      expect(users.length).toBe(0)
    }
  ]
}

new UserTests().run()