Karma-Jasmine 安装和使用

时间  2019-11-21
标签 karma jasmine 安装 使用 繁體版
原文   原文链接

注意：本文中出现的资料连接、karma的插件安装等，都可能须要翻$墙后才能正确执行。html

 

Jasmine是一个Javascript的测试工具，在Karma上运行Jasmine可完成Javascript的自动化测试、生成覆盖率报告等。本文不包含Jasmine的使用细节，这几天我会写一篇Jasmine的入门文章，有兴趣的朋友到时候能够看一下。node

 

步骤一：安装Node.JS（版本：v0.12.4, windows-64）

Karma是运行在Node.js之上的，所以咱们首先要安装Node.js。到 https://nodejs.org/download/ 下载你系统所需的NodeJS版本，我下载的是windows-64位的msi版。git

下载以后，双击 node-v0.12.4-x64.msi 运行并安装，这个就不赘述了， 不断下一步便可， 固然最好将目录改一下。angularjs

图1（选择安装内容，默认便可）：github

 

 

步骤二：安装Karma

运行Node.js的命令行程序：Node.js command prompt：web

图2（处于“开始->全部程序->Node.js”中）：chrome

 

图3（咱们将安装到E:\Karma路径下）：npm

 

输入命令安装Karma：windows

npm install karma --save-dev

 

图4（Karma安装完毕后）：浏览器

 

步骤三：安装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安装完毕以后）：

 

步骤四：安装karma-cli

karma-cli用来简化karma的调用，安装命令以下，其中-g表示全局参数，这样从此能够很是方便的使用karma了：

npm install -g karma-cli

 

图6（karma-cli安装完毕以后）：

 

Karma-Jasmine安装完毕：

图7（安装完毕后，在E:\Karma文件夹下会有一个node_modules目录，里面包含刚才安装的karma、karma-jasmine、karma-chrome-launcher目录，固然还包含了jasmine-core目录）：

 

开启Karma：

输入命令：

karma start

 

图8（运行后如图所示出现了一行INFO信息，并无其余提示和动做，由于此时咱们没有配置karma的启动参数。后面会加入karma.conf.js，这样karma就会自动启动浏览器并执行测试用例了）：

 

图9（手动打开Chrome，输入localhost:9876，若是看到这个页面，证实已经安装成功）：

 

Karma+Jasmine配置：

执行命令init命令进行配置：

karma init

 

图10（全部默认配置问题）：

 

 说明：

1. 测试框架：咱们固然选jasmine

2. 是否添加Require.js插件

3. 选择浏览器： 咱们选Chrome

4. 测试文件路径设置，文件可使用通配符匹配，好比*.js匹配指定目录下全部的js文件（实际操做中发现该路径是karma.conf.js文件的相对路径，详见下面我给出的实际测试配置及说明）

5. 在测试文件路径下，须要排除的文件

6. 是否容许Karma监测文件，yes表示当测试路径下的文件变化时，Karma会自动测试

 

我在虚拟机上测试的例子：

图11（TestFiles和NodeJS处于E盘根目录下，karma.conf.js处于文件夹NodeJS的根目录下）：

 

如下是karma.conf.js的完整内容：

复制代码 
 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 };
复制代码

 

说明：

若全部测试文件均处于同一个目录下，咱们能够设置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窗口中，最后一行显示了执行结果）：

 

图13（若是咱们点击图12中的debug按钮，进入debug.html并按F12打开开发者工具，选择Console窗口，咱们将能看到jasmine的执行日志）：

 

若此时，咱们将jasmineTest.js中对于调用TT方法的指望值改成"abcd"（实际为"abc"）：

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

 

因为咱们在karma.conf.js中设置了autoWatch为true：

autoWatch: true

 

Karma将自动执行测试用例，因为本例测试用例未经过，所以在屏幕上打印出了错误信息，Chrome的Console窗口中的日志信息须要刷新debug.html后显示。

图14（Karma自动检测到文件变化并自动从新执行了测试用例）：

 

代码覆盖率：

若是你还想查看测试的代码覆盖率，咱们能够安装karma-coverage插件，安装命令为：

npm install karma-coverage

 

图15（安装karma-coverage的过程）：

 

修改karma.conf.js，增长覆盖率的配置：

图16（主要是变更了如下三个配置节点，其余的配置内容不变）：

复制代码 
 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     },
复制代码

 

变更以下：

  • 在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还生成了一层子文件夹，对应于执行测试的浏览器+版本号+操做系统版本）：

 

参考资料：

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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程