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我们能看到覆蓋率已天生。

    原文作者:zhangwk
    原文地址: https://segmentfault.com/a/1190000015734861
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞