AngularJS手把手教您怎么着设置和应用Karma-Jasmine

Jasmine是3个Javascript的测试工具,在Karma上运营Jasmine可做到Javascript的自动化测试、生成覆盖率报告等。本文不包涵Jasmine的使用细节,这几天我会写一篇Jasmine的入门小说,有趣味的意中人到时候可以看一下。

 

Karma-Jasmine安装达成

图7(安装实现后,在E:\Karma文件夹下会有贰个node_modules目录,里面含有刚才安装的karma、karma-jasmine、karma-chrome-launcher目录,当然还含有了jasmine-core目录):

AngularJS 1

 

安装Node.JS(版本:v0.12.4, windows-64)

Karma是运转在Node.js之上的,由此大家率先要设置Node.js。到 https://nodejs.org/download/ 下载你系统所需的NodeJS版本,小编下载的是windows-六十四个人的msi版。

下载之后,双击 node-v0.12.4-x64.msi 运维并设置,这几个就不赘述了,
不断下一步即可, 当然最棒将引得改一下。

图1(选用设置内容,暗中认可即可):

 AngularJS 2

 

与grunt结合 – grunt-karma

grunt的装置不多叙述,相关介绍可看http://www.gruntjs.net/getting-started

小心:本文中冒出的素材链接、karma的插件安装等,均恐怕需求翻$墙后才能科学执行。

参考资料

Karma-runner:http://karma-runner.github.io/0.12/index.html

Karma-runner安装步骤:https://karma-runner.github.io/0.12/intro/installation.html

Karma config file: http://karma-runner.github.io/0.8/config/configuration-file.html

Karma files:http://karma-runner.github.io/0.8/config/files.html

Karma和Jasmin自动化单元测试:http://blog.fens.me/nodejs-karma-jasmine/

AngularJS的UnitTest:https://docs.angularjs.org/guide/unit-testing

配置Gruntfile

将以下代码参加到你项目中的Gruntfile中

grunt.loadNpmTasks("grunt-karma");

karma: {
  unit: {
    configFile: "karma.conf.js"
  }
}

越来越多的布置看那里:https://www.npmjs.com/package/grunt-karma

开启Karma

输入指令:

karma start

 

图8(运营后如图所示出现了一行INFO音信,并从未别的提醒和动作,因为此时大家没有配备karma的运行参数。后边会加盟karma.conf.js,那样karma就会活动运转浏览器并履行测试用例了):

AngularJS 3

 

图9(手动打开Chrome,输入localhost:9876,假使见到那个页面,注解已经设置成功):

AngularJS 4

 

运行karma

grunt karma

 

代码覆盖率

假使您还想查看测试的代码覆盖率,我们可以安装karma-coverage插件,安装命令为:

npm install karma-coverage

 

图15(安装karma-coverage的过程):

AngularJS 5

 

修改karma.conf.js,扩大覆盖率的配置:

图16(重若是改变了以下几个布局节点,其余的布局内容不变):

AngularJS 6

 1     // preprocess matching files before serving them to the browser
 2     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
 3     preprocessors: {
 4         '../TestFiles/test.js':'coverage'
 5     },
 6 
 7 
 8     // test results reporter to use
 9     // possible values: 'dots', 'progress'
10     // available reporters: https://npmjs.org/browse/keyword/karma-reporter
11     reporters: ['progress','coverage'],
12     
13     coverageReporter:{
14         type:'html',
15         dir:'../TestFiles/coverage/'
16     },

AngularJS 7

 

更改如下:

  • 在reporters中增加coverage
  • preprocessors中指定js文件
  • 添加coverageReporter节点,将覆盖率报告项目type设置为html,输入目录dir钦点到你愿意的目录中

 

此刻完整的karma.conf.js如下:

 

// Karma configuration
// Generated on Fri May 29 2015 19:30:26 GMT+0800 (中国标准时间)

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],


    // list of files / patterns to load in the browser
    files: [
      '../TestFiles/jasmineTest.js',
      '../TestFiles/test.js'
    ],


    // list of files to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
        '../TestFiles/test.js':'coverage'
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress','coverage'],

    coverageReporter:{
        type:'html',
        dir:'../TestFiles/coverage/'
    },


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false
  });
};

执行命令:

karma start karma.conf.js

 

图17(执行命令后,在安顿文件coverageReporter节点中内定的dir中,我们将找到变化的覆盖率报告,karma-coverage还生成了一层子文件夹,对应于执行测试的浏览器+版本号+操作系统版本):

AngularJS 8

 

 

安装grunt-karma

npm install grunt-karma --save-dev

Karma+Jasmine配置

执行命令init命令实行布局:

karma init

 

图10(全体暗中认可配置难题):

 AngularJS 9

 说明:

  1. 测试框架:我们当然选jasmine

  2. 是还是不是添加Require.js插件

  3. 分选浏览器: 我们选Chrome

4.
测试文件路径设置,文件能够动用通配符匹配,比如*.js匹配钦点目录下全数的js文件(实操中发现该路线是karma.conf.js文件的相对路径,详见下边作者付出的莫过于测试配置及表明)

  1. 在测试文件路径下,须要免去的公文

6.
是还是不是同意Karma监测文件,yes表示当测试路径下的文本变化时,Karma会自动测试

 

本身在虚拟机上测试的事例:

图11(TestFiles和NodeJS处于E盘根目录下,karma.conf.js处于文件夹NodeJS的根目录下):

AngularJS 10

 

以下是karma.conf.js的一体化内容:

AngularJS 11

 1 // Karma configuration
 2 // Generated on Fri May 29 2015 19:30:26 GMT+0800 (中国标准时间)
 3 
 4 module.exports = function(config) {
 5   config.set({
 6 
 7     // base path that will be used to resolve all patterns (eg. files, exclude)
 8     basePath: '../TestFiles',
 9 
10 
11     // frameworks to use
12     // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
13     frameworks: ['jasmine'],
14 
15 
16     // list of files / patterns to load in the browser
17     files: [
18       '*.js'
19     ],
20 
21 
22     // list of files to exclude
23     exclude: [
24     ],
25 
26 
27     // preprocess matching files before serving them to the browser
28     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
29     preprocessors: {
30     },
31 
32 
33     // test results reporter to use
34     // possible values: 'dots', 'progress'
35     // available reporters: https://npmjs.org/browse/keyword/karma-reporter
36     reporters: ['progress'],
37 
38 
39     // web server port
40     port: 9876,
41 
42 
43     // enable / disable colors in the output (reporters and logs)
44     colors: true,
45 
46 
47     // level of logging
48     // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
49     logLevel: config.LOG_INFO,
50 
51 
52     // enable / disable watching file and executing tests whenever any file changes
53     autoWatch: true,
54 
55 
56     // start these browsers
57     // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
58     browsers: ['Chrome'],
59 
60 
61     // Continuous Integration mode
62     // if true, Karma captures browsers, runs the tests and exits
63     singleRun: false
64   });
65 };

AngularJS 12

 

说明:

若持有测试文件均处于同叁个索引下,大家得以设置basePath(也是相对于karma.conf.js文件的相对路径),然后钦定files,此时files则为basePath目录下的文书相对路径;

自然你也得以不设置basePath,直接采取相对于karma.conf.js文件的文本相对路径,如本例中,大家若保持basePath默许为空,则files配置应为:

files: [
      '../TestFiles/jasmineTest.js',
      '../TestFiles/test.js'
    ]

 

test.js内容:

function TT() {
    return "abc";
}

 

jasmineTest.js内容:

describe("A suite of basic functions", function () {
    it("test", function () {
        expect("abc").toEqual(TT());
    });
});

 

启动Karma:

karma start karma.conf.js

是因为本次加上了布置文件karma.conf.js,由此Karma会依据布署文件中钦赐的参数执行操作了,由于我们配备的是在Chrome中测试,因而Karma会自行运维Chrome实例,并运营测试用例:

 

图12(左侧的Chrome是Karma自动运营的,左侧的Node.js command
prompt窗口中,最终一行展现了实践结果):

AngularJS 13

 

图13(借使大家点击图1第22中学的debug按钮,进入debug.html并按F12开辟开发者工具,选取Console窗口,我们将能看出jasmine的执行日志):

AngularJS 14

 

若那时,大家将jasmineTest.js中对于调用TT方法的冀望值改为”abcd”(实际为”abc”):

describe("A suite of basic functions", function () {
    it("test", function () {
        expect("abcd").toEqual(TT());
    });
});

 

出于大家在karma.conf.js中安装了auto沃特ch为true:

autoWatch: true

 

Karma将自行执行测试用例,由于本例测试用例未通过,因而在显示屏上打字与印刷出了错误消息,Chrome的Console窗口中的日志消息要求刷新debug.html后呈现。

图14(Karma自动物检疫查和测试到文件变化并自行重新履行了测试用例):

AngularJS 15

 

安装karma-cli

karma-cli用来简化karma的调用,安装命令如下,个中-g表示全局参数,那样以往能够格外便宜的应用karma了:

npm install -g karma-cli

 

图6(karma-cli安装达成之后):

AngularJS 16

 

安装karma-jasmine/karma-chrome-launcher插件

接轨输入npm命令安装karma-jasmine、karma-chrome-launcher插件:

npm install karma-jasmine karma-chrome-launcher --save-dev

 

图5(karma-jasmine、karma-chrome-launcher安装实现之后):

AngularJS 17

 

 

原文:http://www.cnblogs.com/wushangjue/p/4539189.html

安装Karma

运作Node.js的命令行程序:Node.js command prompt:

图2(处于“开端->全部程序->Node.js”中):

AngularJS 18

 

图3(我们将安装到E:\Karma路径下):

AngularJS 19

 

输入指令安装Karma:

npm install karma --save-dev

 

图4(Karma安装实现后):

AngularJS 20

 

后记

相关文章