注意:本文中出现的资料链接、karma的插件安装等,均可能需要翻$墙后才能正确执行。

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

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

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

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

图1(选择安装内容,默认即可):

步骤二:安装Karma

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

图2(处于“开始->所有程序->Node.js”中):

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

输入命令安装Karma:

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

说明:

若所有测试文件均处于同一个目录下,我们可以设置basePath(也是相对于karma.conf.js文件的相对路径),然后指定files,此时files则为basePath目录下的文件相对路径;

当然你也可以不设置basePath,直接使用相对于karma.conf.js文件的文件相对路径,如本例中,我们若保持basePath默认为空,则files配置应为:

  1. files: [
  2. '../TestFiles/jasmineTest.js',
  3. '../TestFiles/test.js'
  4. ]

test.js内容:

  1. function TT() {
  2. return "abc";
  3. }

jasmineTest.js内容:

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

启动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"):

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

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

变动如下:

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

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

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

执行命令:

karma start karma.conf.js

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

 
0

0

如何安装和使用Karma-Jasmine的更多相关文章

  1. angular测试-Karma + Jasmine配置

    首先讲一下大致的流程: 需要node环境,首先先要安装node,node不会?请自行搜索.版本>0.8 安装node完成之后先要测试下npm是否测试通过,如下图所示 首先看下目录结构 目录为:F ...

  2. Karma +Jasmine+ require JS进行单元测试并生成测试报告、代码覆盖率报告

    1. 关于Karma Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner). 该工具可用于测试所有主流Web浏览器,也可集成到CI(Continuou ...

  3. angularJS测试一 Karma Jasmine Mock

    AngularJS测试 一 测试工具 1.NodeJS领域:Jasmine做单元测试,Karma自动化完成单元测试,Grunt启动Karma统一项目管理,Yeoman最后封装成一个项目原型模板,npm ...

  4. 在WebStorm中集成Karma+jasmine进行前端单元测试

    在WebStorm中集成Karma+jasmine进行前端单元测试 前言 好久没有写博了,主要还是太懒=.=,有点时间都去带娃.看书了,今天给大家分享一个原创的小东西,如果大家对TDD或者BDD有兴趣 ...

  5. 使用karma+jasmine做单元测试

    目的 使用karma和jasmine来配置自动化的js单元测试. Karma和Jasmine Karma是由Angular团队所开发的一种自动化测试工具.链接:http://karma-runner. ...

  6. 【转】用systemJS+karma+Jasmine+babel环境去编写简单的ES6工程

    原文链接:http://www.cnblogs.com/shuoer/p/7779131.html 用systemJS+karma+Jasmine+babel环境去编写简单的ES6工程 首先解释下什么 ...

  7. 搭建Karma+Jasmine的自动化单元测试

    最近在打算将以前的代码进行重构,过程中发现自己不写自动化测试代码,而是手动的写,这样并不好,所以就学了Karma+Jasmine的自动化单元测试,以后写代码尽量要写自动化单元测试,也要测一下istan ...

  8. 学习Karma+Jasmine+istanbul+webpack自动化单元测试

    学习Karma+Jasmine+istanbul+webpack自动化单元测试 1-1. 什么是karma?  Karma 是一个基于Node.js的Javascript测试执行过程管理工具.该工具可 ...

  9. Karma+Jasmine实现自动化单元测试

    1.Karma介绍 Karma是Testacular的新名字,在2012年google开源了Testacular,2013年Testacular改名为Karma.Karma是一个让人感到非常神秘的名字 ...

  10. angularjs, nodejs, express, gulp, karma, jasmine 前端方案整合

    今年转向做前端开发,主要是做angularjs开发,期间接触了nodejs平台,从此一发不可收拾. npm丰富的插件库,express 开发框架, grunt, gulp构建工具,karma测试管理工 ...

随机推荐

  1. js生成guid(唯一标识码)

    在使用postman对接口进行测试的时候,有时候接口日志会要求写入随机标识码,这里我们可以使用js来生成. // Generate four random hex digits. function S ...

  2. 【BZOJ4025】二分图 LCT

    [BZOJ4025]二分图 Description 神犇有一个n个节点的图.因为神犇是神犇,所以在T时间内一些边会出现后消失.神犇要求出每一时间段内这个图是否是二分图.这么简单的问题神犇当然会做了,于 ...

  3. Apache Accumulo

    Apache Accumulo 是一个可靠的.可伸缩的.高性能的排序分布式的 Key-Value 存储解决方案, 基于单元访问控制以及可定制的服务器端处理.Accumulo使用 Google BigT ...

  4. Youtube 视频下载

    Youtube 视频下载 由于特殊原因,需要下载 Youtube 的视频. https://www.clipconverter.cc/

  5. 可以方便配合 Git 的现代编辑器

    可以方便配合 Git 的现代编辑器 虽然有些人说编辑器不重要,有人用记事本来编辑 PHP(我是不推荐的),但学是要推荐一些现在编辑器. 可以很方便的配合 Git,比如有冲突时不会看得晕乎乎,使用鼠标点 ...

  6. xunsearch之php索引维护(四)

    1.添加文档 $xs = new XS('njw'); $index = $xs->index; $data = array( 'pid' => 234, // 此字段为主键,必须指定 ' ...

  7. RedHat6.5用ISO配置yum源

    CentOS自带强大的yum功能,默认为从网上自动下载rpm包,对于网速不太给力或者没有网络的情况下需要用的话就不是很方便,很多软件尤其是服务器上的软件我们么有必要追求最新,稳定性最重要,这里我们用C ...

  8. golang调用动态库

    测试动态库 test_so.h int test_so_func(int a,int b); test_so.c #include "test_so.h" int test_so_ ...

  9. 基于INTEL FPGA硬浮点DSP实现卷积运算

    概述 卷积是一种线性运算,其本质是滑动平均思想,广泛应用于图像滤波.而随着人工智能及深度学习的发展,卷积也在神经网络中发挥重要的作用,如卷积神经网络.本参考设计主要介绍如何基于INTEL 硬浮点的DS ...

  10. [Java.web][eclipse]经验集

    自动提示部分内容来自:http://www.cnblogs.com/mashuangying2016/p/6549991.html 使用 Eclipse 调试 Tomcat 的设置: Window - ...