前端测试中的设计模式运用

设计模式在前端测试中的价值

设计模式在前端测试中扮演着重要角色，它们能提升测试代码的可维护性、可读性和复用性。合理运用设计模式可以解决测试中的常见问题，如测试数据管理、测试用例组织和测试逻辑复用等。测试代码与业务代码同样需要良好的架构设计，而设计模式为此提供了成熟的解决方案。

工厂模式在测试数据生成中的应用

工厂模式特别适合用于创建复杂的测试数据。通过将对象的创建过程封装在工厂方法中，可以简化测试数据的生成，保持测试代码的整洁。

class UserFactory {
  static createUser(overrides = {}) {
    const defaultUser = {
      id: faker.datatype.uuid(),
      name: faker.name.fullName(),
      email: faker.internet.email(),
      age: faker.datatype.number({ min: 18, max: 80 })
    };
    return { ...defaultUser, ...overrides };
  }
}

// 测试中使用
test('should display user profile correctly', () => {
  const testUser = UserFactory.createUser({ name: 'Test User' });
  render(<Profile user={testUser} />);
  expect(screen.getByText('Test User')).toBeInTheDocument();
});

这种模式的优势在于：

• 集中管理测试数据的默认值
• 通过参数轻松覆盖特定字段
• 保持测试数据的随机性和真实性
• 减少测试间的耦合

策略模式处理不同的测试场景

策略模式允许在运行时选择不同的测试策略，特别适合处理需要多种验证方式的测试场景。

class FormValidationStrategy {
  validate() {
    throw new Error('Method not implemented');
  }
}

class EmailValidation extends FormValidationStrategy {
  validate(formData) {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email);
  }
}

class PasswordValidation extends FormValidationStrategy {
  validate(formData) {
    return formData.password.length >= 8;
  }
}

// 测试中使用
describe('Form Validation', () => {
  const testCases = [
    { strategy: new EmailValidation(), input: { email: 'test@example.com' }, expected: true },
    { strategy: new PasswordValidation(), input: { password: 'short' }, expected: false }
  ];

  testCases.forEach(({ strategy, input, expected }) => {
    test(`should validate ${strategy.constructor.name} correctly`, () => {
      expect(strategy.validate(input)).toBe(expected);
    });
  });
});

策略模式使测试更加模块化，可以轻松添加新的验证策略而不影响现有测试代码。

装饰器模式增强测试功能

装饰器模式可以在不修改原有测试代码的情况下，为测试添加额外的功能或验证。

function withRetryDecorator(testFn, retries = 3) {
  return async function(...args) {
    let lastError;
    for (let i = 0; i < retries; i++) {
      try {
        return await testFn(...args);
      } catch (error) {
        lastError = error;
        if (i < retries - 1) await new Promise(resolve => setTimeout(resolve, 1000 * i));
      }
    }
    throw lastError;
  };
}

// 使用装饰器
test('flaky API test', withRetryDecorator(async () => {
  const response = await fetchApi();
  expect(response.status).toBe(200);
}));

装饰器模式特别适合用于：

• 添加重试逻辑
• 添加性能监控
• 实现测试前置/后置条件
• 添加日志记录

观察者模式实现测试事件通知

观察者模式可以用于构建灵活的测试报告系统，让多个观察者监听测试事件并做出响应。

class TestEventEmitter {
  constructor() {
    this.listeners = {};
  }

  on(event, callback) {
    if (!this.listeners[event]) this.listeners[event] = [];
    this.listeners[event].push(callback);
  }

  emit(event, data) {
    (this.listeners[event] || []).forEach(callback => callback(data));
  }
}

// 测试中使用
const testEvents = new TestEventEmitter();

testEvents.on('testStart', (testName) => {
  console.log(`Test started: ${testName}`);
});

testEvents.on('testEnd', ({ testName, passed }) => {
  console.log(`Test ${passed ? 'passed' : 'failed'}: ${testName}`);
});

test('example test', () => {
  testEvents.emit('testStart', 'example test');
  try {
    expect(1 + 1).toBe(2);
    testEvents.emit('testEnd', { testName: 'example test', passed: true });
  } catch (error) {
    testEvents.emit('testEnd', { testName: 'example test', passed: false });
    throw error;
  }
});

单例模式管理测试状态

单例模式可以确保测试间共享的状态保持一致，特别适合管理测试环境或全局配置。

class TestConfig {
  static instance = null;
  
  constructor() {
    if (!TestConfig.instance) {
      this.baseUrl = process.env.TEST_BASE_URL || 'http://localhost:3000';
      this.timeout = 5000;
      this.headless = true;
      TestConfig.instance = this;
    }
    return TestConfig.instance;
  }
}

// 测试中使用
describe('API Tests', () => {
  const config = new TestConfig();
  
  beforeAll(() => {
    axios.defaults.baseURL = config.baseUrl;
    axios.defaults.timeout = config.timeout;
  });

  test('should fetch data', async () => {
    const response = await axios.get('/api/data');
    expect(response.status).toBe(200);
  });
});

组合模式构建复杂测试套件

组合模式可以让我们用一致的方式处理单个测试和测试套件，构建层次化的测试结构。

class TestComponent {
  run() {
    throw new Error('Method not implemented');
  }
}

class TestCase extends TestComponent {
  constructor(name, fn) {
    super();
    this.name = name;
    this.fn = fn;
  }

  run() {
    try {
      this.fn();
      console.log(`✓ ${this.name}`);
      return true;
    } catch (error) {
      console.log(`✗ ${this.name}: ${error.message}`);
      return false;
    }
  }
}

class TestSuite extends TestComponent {
  constructor(name) {
    super();
    this.name = name;
    this.children = [];
  }

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

  run() {
    console.log(`Running suite: ${this.name}`);
    const results = this.children.map(child => child.run());
    return results.every(Boolean);
  }
}

// 使用组合模式
const suite = new TestSuite('API Tests');
suite.add(new TestCase('should return 200', () => {
  expect(fetch('/api').status).toBe(200);
}));

const subSuite = new TestSuite('Authentication Tests');
subSuite.add(new TestCase('should reject invalid tokens', () => {
  expect(auth('invalid')).toThrow();
}));
suite.add(subSuite);

suite.run();

模板方法模式统一测试流程

模板方法模式可以定义测试的标准流程，让具体测试只需实现特定步骤。

abstract class UITestTemplate {
  async runTest() {
    await this.setupBrowser();
    await this.loadPage();
    await this.performTest();
    await this.verifyResults();
    await this.cleanup();
  }

  async setupBrowser() {
    this.browser = await puppeteer.launch();
    this.page = await this.browser.newPage();
  }

  async loadPage() {
    await this.page.goto(this.getUrl());
  }

  abstract async performTest();
  abstract async verifyResults();

  async cleanup() {
    await this.browser.close();
  }

  getUrl() {
    return 'http://localhost:3000';
  }
}

class LoginTest extends UITestTemplate {
  async performTest() {
    await this.page.type('#username', 'testuser');
    await this.page.type('#password', 'password');
    await this.page.click('#login-button');
  }

  async verifyResults() {
    const welcomeText = await this.page.$eval('.welcome-message', el => el.textContent);
    expect(welcomeText).toContain('Welcome, testuser');
  }
}

// 运行测试
test('login functionality', async () => {
  const loginTest = new LoginTest();
  await loginTest.runTest();
});

代理模式控制测试访问

代理模式可以用于控制对测试资源的访问，添加缓存、权限检查或延迟加载等功能。

class RealImageLoader {
  async loadImage(url) {
    console.log(`Loading image from ${url}`);
    // 实际加载图像的逻辑
    return { url, width: 100, height: 100 };
  }
}

class ImageLoaderProxy {
  constructor() {
    this.cache = new Map();
    this.realLoader = new RealImageLoader();
  }

  async loadImage(url) {
    if (this.cache.has(url)) {
      console.log(`Returning cached image for ${url}`);
      return this.cache.get(url);
    }
    const image = await this.realLoader.loadImage(url);
    this.cache.set(url, image);
    return image;
  }
}

// 测试中使用
describe('ImageLoader', () => {
  let loader;

  beforeEach(() => {
    loader = new ImageLoaderProxy();
  });

  test('should load image first time', async () => {
    const image = await loader.loadImage('test.jpg');
    expect(image).toBeDefined();
  });

  test('should return cached image second time', async () => {
    await loader.loadImage('test.jpg');
    const consoleSpy = jest.spyOn(console, 'log');
    await loader.loadImage('test.jpg');
    expect(consoleSpy).toHaveBeenCalledWith('Returning cached image for test.jpg');
  });
});

状态模式处理测试工作流

状态模式可以管理测试的不同状态和状态间的转换，特别适合复杂的工作流测试。

class TestState {
  constructor(testRunner) {
    this.testRunner = testRunner;
  }

  start() {
    throw new Error('Method not implemented');
  }

  complete() {
    throw new Error('Method not implemented');
  }

  fail() {
    throw new Error('Method not implemented');
  }
}

class PendingState extends TestState {
  start() {
    console.log('Test starting...');
    this.testRunner.setState(new RunningState(this.testRunner));
  }
}

class RunningState extends TestState {
  complete() {
    console.log('Test completed successfully');
    this.testRunner.setState(new CompletedState(this.testRunner));
  }

  fail(error) {
    console.log(`Test failed: ${error.message}`);
    this.testRunner.setState(new FailedState(this.testRunner));
  }
}

class TestRunner {
  constructor() {
    this.setState(new PendingState(this));
  }

  setState(state) {
    this.state = state;
  }

  startTest() {
    this.state.start();
  }

  completeTest() {
    this.state.complete();
  }

  failTest(error) {
    this.state.fail(error);
  }
}

// 测试中使用
describe('Test State Management', () => {
  let runner;

  beforeEach(() => {
    runner = new TestRunner();
  });

  test('should transition through states correctly', () => {
    runner.startTest();
    runner.completeTest();
    expect(runner.state).toBeInstanceOf(CompletedState);
  });
});