博客 / 詳情

返回

karma入門學習整理

karma介紹

Karma是Testacular的新名字,在2012年google開源了Testacular,2013年Testacular改名為Karma。
Karma是一個基於Node.js的JavaScript測試執行過程管理工具(Test Runner)。該工具可用於測試所有主流Web瀏覽器,也可集成到CI(Continuous integration)工具,也可和其他代碼編輯器一起使用。這個測試工具的一個強大特性就是,它可以監控(Watch)文件的變化,然後自行執行,通過console.log顯示測試結果。

安裝karma

Karma依賴NodeJs和NPM包管理工具,安裝前首先要確認存在node和npm(安裝這裏就不介紹了)

首先安裝karma的cli工具karma-cli,有了cli工具才可以在全局執行karma命令

npm install karma-cli -g        // 安裝karma的cli工具

新建一個目錄來執行整個過程

$ mkdir karma-test

$ cd karma-test

生成package.json

$ npm init -y

安裝karma

$ npm install --save-dev karma

初始化karma

$ karma init
// 選擇測試框架,這裏我選擇jasmine
Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine

// 是否引入Require.js,不需要
Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no 

// 選擇使用的瀏覽器,可以使用無頭瀏覽器PhantomJS,不過需要單獨安裝PhantomJS
// 這裏也可以選擇多個瀏覽器,測試用例將在多個瀏覽器裏執行
// 這裏我只選擇了PhantomJS(鍵入空白執行下一步)
Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> PhantomJS
>

// 告訴需要執行的測試用例的代碼路徑,支持正則,可以寫多個(鍵入空白執行下一步)
What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
> src/**/*.js
> test/**/*.js
14 10 2016 10:49:43.958:WARN [init]: There is no file matching this pattern.

>

// 上面指定的路徑中需要排除在外的文件
Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
>

// 是否觀察文件的變化,自動測試
Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes


Config file generated at "E:\demo\karma-test\karma.conf.js".

命令運行完成後,我們可以看到在當前目錄下生成了karma.conf.js文件。同時,根據我們的配置情況,package.json裏也多了一些依賴項。如我的package.json裏,就多了

"devDependencies": {
    "karma-jasmine": "^1.1.2",
    "karma-phantomjs-launcher": "^1.0.4"
}

因為我們選擇的是使用jasmine框架和phantomjs,所以自動添加了這兩個Karma依賴。

安裝新增的依賴項

// 自動安裝package.json新增的依賴項
$ npm install

// 安裝jasmine框架
$ npm install jasmine-core --save-dev

編寫第一個測試用例

創建一個 src 目錄和一個 test 目錄,在其中分別創建 index.jsindex.spec.js 文件。
我要做的測試內容比較簡單,對 index.js 中的兩個函數(一個加法函數,一個乘法函數)進行測試。
index.js 文件如下:

// 加法函數
function add(x){
    return function(y){
        return x + y;
    }
}

// 乘法函數
function multi(x){
    return function(y){
        return x * y + 1;
    }
}

index.spec.js 文件如下:

describe("運算功能單元測試",function(){
    it("加法函數測試",function(){
        var add5 = add(5)
        expect(add5(5)).toBe(10)
    });

    it("乘法函數測試",function(){
       var multi5 = multi(5)
        expect(multi5(5)).toBe(25)
    })
})

單測的代碼寫好後,就可以使用 karma start 來運行單元測試。由於我們的乘法代碼中有錯誤,因此測試結果是這樣的:

23 07 2018 15:28:06.122:INFO [watcher]: Changed file "E:/demo/karma-test/test/index.spec.js".
23 07 2018 15:28:06.334:INFO [watcher]: Changed file "E:/demo/karma-test/test/index.spec.js".
23 07 2018 15:28:06.570:INFO [watcher]: Changed file "E:/demo/karma-test/test/index.spec.js".
PhantomJS 2.1.1 (Windows 8 0.0.0) 運算功能單元測試 乘法函數測試 FAILED
        Expected 26 to be 25.
        <Jasmine>
        test/index.spec.js:9:31
        <Jasmine>
PhantomJS 2.1.1 (Windows 8 0.0.0): Executed 2 of 2 (1 FAILED) (0.004 secs / 0.003 secs)
TOTAL: 1 FAILED, 1 SUCCESS

將乘法函數的代碼改為正常,再次啓用 karma start 進行測試:

23 07 2018 15:30:39.779:INFO [watcher]: Changed file "D:/test/karma-test/test/index.spec.js".
PhantomJS 2.1.1 (Windows 8 0.0.0): Executed 2 of 2 SUCCESS (0.005 secs / 0.003 secs)
TOTAL: 2 SUCCESS

測試覆蓋率

karma 的插件 karma-coverage 提供了測試代碼覆蓋率的支持。
首先你需要安裝這個 Karma 插件,然後需要在配置文件的三個地方進行配置。

$ npm install karma-coverage --save-dev

修改karma.conf.js配置

// Karma configuration

module.exports = function(config) {
  config.set({
    ...
    // 這裏配置哪些文件需要統計測試覆蓋率,例如,如果你的所有代碼文件都在 src文件夾中,你就需要如下配置。
    preprocessors: {
        'src/*.js': 'coverage'
    },
    // 新增 coverageReporter選項
    // 配置覆蓋率報告的查看方式,type查看類型,可取值html、text等等,dir輸出目錄
    coverageReporter: {
        type: 'html',
        dir: 'coverage/'
    },

    // 添加配置報告選擇
    reporters: ['progress','coverage'],
    
    ...
  })
}

再次執行karma start,我們能看到生成了coverage目錄,在瀏覽器中打開目錄中的index.html我們能看到覆蓋率已經生成。

user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.