背景

Angular 預設使用Jasmine, Karma為測試工具。

前者是一套「單元測試框架」aka Assertion library (斷言庫)。常見的還有: Mocha, Chai

後者是run test code的「環境工具」，用來執行Jasmine測試在瀏覽器上運行。還有其他的像是: Jest, Chai

Angular CLI new project 時就預設產生 xxx.spec.ts 來撰寫單元測試。透過ng test即能運行測試。

認識 Karma 設定檔

預設有 karma.conf.js，用來設定測試的執行環境。

• line 4 : 配置Karma的framwork
• line 17: 測試報告格式，預設為html
• line 25: 是開啟的瀏覽器，預設為Chrome
• line 24: 當啟動ng test時，會把server帶起來，當測試程式碼有變更時，autoWatch設定為true，會自動重跑server，若不要檔案變更後即跑server則可設定為fasle。運行過程中，若要暫停server，按ctrl+c則可停掉server。預設為true，若想在cli上no watch，可在command key --no-auto-watch

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, '../coverage'),
      reports: ['html', 'lcovonly'],
      fixWebpackSourcePaths: true
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

• line 219: 設定跑ng test 時的==測試覆蓋率==
  指令下 ng test --no-watch --code-coverage

"test": {
    "builder": "@angular-devkit/build-angular:karma",
        "options": {
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "codeCoverage": true
   }
}

更多Karma config設定，可參考官網

什麼是覆蓋率?

• 撰寫的測試涵蓋整體主程式的比例有多少%。這數字可以讓我們知道「有沒有該寫的測試，但沒被寫到」。數值%越高越好

但是，並不是coverage % 越高越好，因為從實際來看，會根據「開發時程」、「人力配置」、「技術能力」，並不是每間公司都有「測試QA Team」的預算，讓工程師們可以寫測試，維護高品質的程式碼，所以維護測試的時候，以「最小可行性」的執行概念，撰寫出高維護性、可彈性、低耦合的測試程式碼，確保80%的程式碼都有被測試到就好。

測試報告上的覆蓋率有?

• Statement:
  以statement為單位，有些在程式碼中會一行寫兩個statement，如下：

console.log('Happy moon festival'); console.log('BBQ is the first choise')

• Branches:
  以測試情境為單位，有正向情境，就會有反向情境，如果只測試正向，反向沒有被測試到，2個branch只測正向一種，就會是50%。

• Functions:
  以function為單位，一個spec.ts有多少%的function被執行到。

• Lines:
  以line為單位，所以當一行有多個statement時，line 的涵蓋率並不會知道有多少個statement，而這就是statement 數值可以補足的地方。

在撰寫這篇時，有很多不確定的地方，還好有許多先進提供很好的方向，筆記來源參考：

• [UT] What's unit test ? 在前端要測什麼 ?!
• [從 0 開始的 Angular 生活]No.41 在 Angular 內進行測試(一) - 服務元件
• [如何提升系統品質-Day24]測試 - Code Coverage

下一篇，介紹 Jasmine 常見名詞