開發外掛

Karma 可以透過外掛進行擴展。外掛分為五種類型：框架、報告器、啟動器、前置處理器和中間件。每一種類型都允許修改 Karma 行為的特定方面。

• 框架將測試框架（例如 Mocha）連接到 Karma API，以便瀏覽器可以將測試結果發送回 Karma 伺服器。
• 報告器定義如何向使用者報告測試結果。
• 啟動器允許 Karma 啟動不同的瀏覽器來執行測試。
• 前置處理器負責在將原始程式碼載入瀏覽器之前進行轉換/轉譯。
• 中間件可用於自訂如何將檔案提供給瀏覽器。

依賴注入 #

Karma 是使用 依賴注入 組裝的。了解這個概念對於開發外掛至關重要。

在非常高的層面上，您可以將 Karma 視為一個物件，其中每個鍵（一個DI 權杖）都映射到某個 Karma 物件（一個服務）。例如，config DI 權杖映射到 Config 實例，該實例保存目前的 Karma 設定。外掛可以通過指定相應的 DI 權杖來請求（或注入）各種 Karma 物件。注入後，外掛可以與注入的服務交互以實現其功能。

沒有所有可用服務及其 DI 權杖的完整列表，但您可以通過閱讀 Karma 或其他外掛的原始程式碼來發現它們。

外掛結構 #

每個外掛本質上都是一個服務，並具有其關聯的 DI 權杖。當使用者在其設定中啟用外掛時，Karma 會尋找相應的 DI 權杖，並實例化連結到此 DI 權杖的服務。

要聲明一個外掛，應該為外掛定義一個 DI 權杖，並向 Karma 解釋如何實例化它。DI 權杖由兩部分組成：外掛類型和外掛的唯一名稱。前者定義外掛可以做什麼、對服務 API 的要求以及何時實例化。後者是一個唯一的名稱，外掛使用者將使用它來啟用外掛。

外掛定義多個服務是完全有效的。這可以通過向外掛導出的物件添加更多鍵來完成。常見的例子是 framework + reporter 外掛，它們通常一起出現。

讓我們製作一個非常簡單的外掛，它在實例化時會印出「Hello, world!」。我們將使用 framework 類型，因為它在 Karma 生命週期的早期就被實例化，並且對其 API 没有任何要求。讓我們將外掛稱為「hello」，因此其唯一名稱將是 hello。將這兩部分連接起來，我們得到外掛 framework:hello 的 DI 權杖。讓我們聲明它。

// hello-plugin.js

// A factory function for our plugin, it will be called, when Karma needs to
// instantiate a plugin. Normally it should return an instance of the service
// conforming to the API requirements of the plugin type (more on that below),
// but for our simple example we don't need any service and just print 
// a message when function is called.
function helloFrameworkFactory() {
  console.log('Hello, world!')
}

module.exports = {
  // Declare the plugin, so Karma knows that it exists.
  // 'factory' tells Karma that it should call `helloFrameworkFactory`
  // function and use whatever it returns as a service for the DI token
  // `framework:hello`.
  'framework:hello': ['factory', helloFrameworkFactory]
};

// karma.conf.js

module.exports = (config) => {
  config.set({
    plugins: [
      require('./hello-plugin')
    ],
    // Activate our plugin by specifying its unique name in the 
    // corresponding configuration key.
    frameworks: ['hello']
  })
}

注入依賴項 #

在「依賴注入」部分，我們討論了可以將任何 Karma 服務注入外掛並與之交互。這可以通過將外掛的工廠函數上的 $inject 屬性設置為外掛希望與之交互的 DI 權杖數組來完成。Karma 將提取此屬性，並將請求的服務作為參數傳遞給工廠函數。

讓我們讓 hello 框架更有用一些，並讓它將 hello.js 檔案添加到 files 數組中。這樣，外掛的使用者就可以例如從他們的測試中訪問 hello.js 中定義的函數。

// hello-plugin.js

// Add parameters to the function to receive requested services.
function helloFrameworkFactory(config) {
  config.files.unshift({
    pattern: __dirname + '/hello.js',
    included: true,
    served: true,
    watched: false
  })
}

// Declare DI tokens plugin wants to inject.
helloFrameworkFactory.$inject = ['config']

module.exports = {
  'framework:hello': ['factory', helloFrameworkFactory]
};

Karma 設定保持不變，為簡潔起見，此处省略。有關外掛的使用，請參見上面的示例。

外掛類型 #

本節概述了不同外掛類型的 API 要求和約定。還有一些外掛的連結，您可以將其用作參考。

框架 #

• 外掛範例：karma-jasmine、karma-mocha、karma-requirejs
• 使用命名約定為 karma-*
• 使用 npm 關鍵字 karma-plugin、karma-framework。

框架將現有的測試庫連接到 Karma 的 API，以便可以在瀏覽器中顯示其結果並將其發送回伺服器。

Karma 框架必須實現一個 window.__karma__.start 方法，Karma 將調用該方法來啟動測試執行。此函數使用一個物件調用，該物件具有將結果發送回 karma 的方法

• .result 單個測試已完成
• .complete 客戶端完成了所有測試的執行
• .error 客戶端發生錯誤
• .info 其他數據（例如測試數量或調試訊息）

最常見的是，您將使用 result 方法發送單個測試成功或失敗狀態。該方法採用以下形式的物件

{
    // test id
    id: String,

     // test description
    description: String,

    // the suite to which this test belongs. potentially nested.
    suite: Array[String],

    // an array of string error messages that might explain a failure.
    // this is required if success is false.
    log: Array[String],

    success: Boolean, // pass / fail

    skipped: Boolean // skipped / ran
}

報告器 #

• 外掛範例：karma-growl-reporter、karma-junit-reporter、karma-material-reporter
• 使用命名約定為 karma-*-reporter
• 使用 npm 關鍵字 karma-plugin、karma-reporter

啟動器 #

• 外掛範例：karma-chrome-launcher、karma-sauce-launcher
• 使用命名約定為 karma-*-launcher
• 使用 npm 關鍵字 karma-plugin、karma-launcher

前置處理器 #

• 外掛範例：karma-coffee-preprocessor、karma-ng-html2js-preprocessor
• 使用命名約定為 karma-*-preprocessor
• 使用 npm 關鍵字 karma-plugin、karma-preprocessor

前置處理器是一個函數，它接受三個參數（content、file 和 next），以某種方式改變內容，並將其傳遞給下一個前置處理器。

• 傳遞給前置處理器外掛的參數
  • content 正在處理的檔案的內容
  • file 描述正在處理的檔案的物件
    • path: 目前的檔案，可變的檔案路徑。例如 some/file.coffee -> some/file.coffee.js 此路徑是可變的，實際上可能不存在。
    • originalPath: 原始的、未變異的路徑
    • encodings: 一個可變的鍵值物件，其中鍵是有效的編碼類型（'gzip'、'compress'、'br' 等），值是編碼的內容。編碼的內容應存儲在此處，而不是使用 next(null, encodedContent) 解析
    • type: 確定提供服務時如何包含檔案
  • next 預處理完成時要調用的函數，應調用為 next(null, processedContent) 或 next(error)

更瘋狂的東西 #

由於 Karma 是通過依賴注入組裝的，外掛可以請求幾乎任何 Karma 組件並與之交互。有一些外掛可以做更有趣的事情，例如 karma-closure、karma-intellij。