使用karma和jasmine配合phantom瀏覽器進行單元測試

初始化package.json

實現初始化 NPM 包管理，建立package.json專案管理檔案。

使用引數-y直接按照預設值建立packgae.json專案管理檔案。

npm init -y

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

複製程式碼

安裝karma

我們需要整合karma，參考karma官網

使用cnpm下載包（注：npm下載沒比較好的科學上網是很難下載的，所以我們選擇cnpm）

cnpm install karma --save-dev
cnpm install karma-jasmine jasmine-core --save-dev
複製程式碼

上面三個包分別是：

• karma（karma測試驅動）
• karma-jasmine（karma適用於Jasmine測試框架的介面卡）
• jasmine-core（jasmine測試框架）

初始化karma

由於我們安裝的包是區域性安裝的，所以將package.json內的scripts屬性`設定為：

"scripts": {
    "karma_init": "karma init"
}
複製程式碼

然後執行npm run karma_init來初始化karma，然後配置如下：

問題分別是：

• 你想使用哪個測試框架？
• 您想使用Require.js嗎?
• 您想要使用哪個瀏覽器測試？
• 原始檔和測試檔案的位置是什麼？
• 是否應該排除前面模式中包含的任何檔案？
• 您希望karma監視所有檔案並在更改上執行測試嗎？

選擇完成之後會生成一個karma.conf.js檔案

因為我們使用的是無頭瀏覽器phantom，所以我們需要將karma.conf.js中的singleRun屬性設為true

安裝Phantom無頭瀏覽器

整合完karma之後，我們還需要安裝進行測試的瀏覽器phantom

cnpm i phantom -D
複製程式碼

安裝karma啟動phantom瀏覽器的啟動包

需要讓karma能夠啟動phantom瀏覽器還需要一個啟動包

cnpm install --save-dev karma-phantomjs-launcher
複製程式碼

開始測試

先來一段小的測試demo，新建一個unit資料夾，裡面新建一個index.js和index.spec.js（帶有.spec的js都是用來測試用的）

index.js裡面寫入：

window.add = function(a) {
	if (a == 1) {
		return a;
	} else {
		return a + 1;
	}
}	
複製程式碼

index.spec.js裡面寫入：

describe("函式基本API測試", function() {
	it("+1函式應用", function() {
		expect(window.add(1)).toBe(1);
		expect(window.add(2)).toBe(3);
	})
})
複製程式碼

指定karma的測試地址

將karma.conf.js中的files配置為：

files: [
    "./unit/**/*.js",
    "./unit/**/*.spec.js"
]
複製程式碼

將package.json內的scripts配置為：

"scripts": {
    "karma_init": "karma init",
    "karma_unit": "karma start"
}
複製程式碼

執行npm run karma_unit進行測試

測試成功的話為：

測試失敗的話為：

安裝生成測試報告的包

直接在命令視窗檢視的測試結果並不直觀，所以我們需要一個生成測試報告的包，以便我們檢視測試的結果

cnpm install karma-coverage --save-dev
複製程式碼

然後我們更改karma.conf.js中的配置

在reporters陣列中新增coverage

reporters: ['progress', 'coverage']
複製程式碼

將preprocessors屬性設定為：

'./unit/**/*.js': ['coverage']	// 測試檔案地址
複製程式碼

新增一個coverageReporter屬性：

coverageReporter: {
    type : 'html',
    dir : './docs/coverage/'	// 測試報告生成地址
}
複製程式碼

這時我們再執行npm run karma_unit ，在docs/coverage下就會生成一個html檔案，這個html檔案就是整個測試的報告了

到這裡，就算大功告成了！