在前面其實我們已經有提到，可替換性是模組很重要的特徵之一，我們延續上一篇的例子來觀察作者的設計思維，下面這段程式碼是一個最樸實的報表格式，當測試案例通過時，就印出一個.，如果測試失敗則印出一個F，原始碼非常的簡短很適合拿來說明。

下面的這段程式 DotReporter 繼承了 WDIOReporter，所以 DotReporter 繼承了 WDIOReporter 所有功能，並且可以 override 掉 WDIOReporter 裡原先的實作邏輯。

import chalk from "chalk";
import WDIOReporter from "@wdio/reporter";

// Initialize a new `Dot` matrix test reporter.
export default class DotReporter extends WDIOReporter {
  constructor(options) {
    // make dot reporter to write to output stream by default
    options = Object.assign({ stdout: true }, options);
    super(options);
  }

  // pending tests
  onTestSkip() {
    this.write(chalk.cyanBright("."));
  }

  // passing tests
  onTestPass() {
    this.write(chalk.greenBright("."));
  }

  // failing tests
  onTestFail() {
    this.write(chalk.redBright("F"));
  }
}
// https://github.com/webdriverio/webdriverio/blob/master/packages/wdio-dot-reporter/src/index.js

除此之外 WDIOReporter 裡還保留了許多定義好的 interface，待讓使用者可以自行實作。

onRunnerStart () {}
onBeforeCommand () {}
onAfterCommand () {}
onScreenshot () {}
onSuiteStart () {}
onHookStart () {}
onHookEnd () {}
onTestStart () {}
onTestPass () {}
onTestFail () {}
onTestSkip () {}
onTestEnd () {}
onSuiteEnd () {}
onRunnerEnd () {}

// https://github.com/webdriverio/webdriverio/blob/master/packages/wdio-reporter/src/index.js

因為作者預先定義的這些 interface，讓這些目的性相同的模組，可以依照使用者情境替換使用。