码迷，mamicode.com
首页 > 其他好文 > 详细

如何安装和使用Karma-Jasmine

时间：2017-06-02 17:40:13      阅读：371      评论：0      收藏：0      [点我收藏+]

标签：views   开始   不包含   测试文件   自动测试   asm   tool   err   知识   

 

注意：本文中出现的资料链接、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的完整内容：

[html] view plain copy
 
  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配置应为：

[html] view plain copy
 
  1. files: [  
  2.       ‘../TestFiles/jasmineTest.js‘,  
  3.       ‘../TestFiles/test.js‘  
  4.     ]  

 

test.js内容：

 

[html] view plain copy
 
  1. function TT() {  
  2.     return "abc";  
  3. }  

 

jasmineTest.js内容：

[html] view plain copy
 
  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"）：

[html] view plain copy
 
  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（主要是变动了以下三个配置节点，其他的配置内容不变）：

[html] view plain copy
 
  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如下：

[html] view plain copy
 
  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: ‘‘,  
  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.       ‘../TestFiles/jasmineTest.js‘,  
  19.       ‘../TestFiles/test.js‘  
  20.     ],  
  21.   
  22.   
  23.     // list of files to exclude  
  24.     exclude: [  
  25.     ],  
  26.   
  27.   
  28.     // preprocess matching files before serving them to the browser  
  29.     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor  
  30.     preprocessors: {  
  31.         ‘../TestFiles/test.js‘:‘coverage‘  
  32.     },  
  33.   
  34.   
  35.     // test results reporter to use  
  36.     // possible values: ‘dots‘, ‘progress‘  
  37.     // available reporters: https://npmjs.org/browse/keyword/karma-reporter  
  38.     reporters: [‘progress‘,‘coverage‘],  
  39.       
  40.     coverageReporter:{  
  41.         type:‘html‘,  
  42.         dir:‘../TestFiles/coverage/‘  
  43.     },  
  44.   
  45.   
  46.     // web server port  
  47.     port: 9876,  
  48.   
  49.   
  50.     // enable / disable colors in the output (reporters and logs)  
  51.     colors: true,  
  52.   
  53.   
  54.     // level of logging  
  55.     // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG  
  56.     logLevel: config.LOG_INFO,  
  57.   
  58.   
  59.     // enable / disable watching file and executing tests whenever any file changes  
  60.     autoWatch: true,  
  61.   
  62.   
  63.     // start these browsers  
  64.     // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher  
  65.     browsers: [‘Chrome‘],  
  66.   
  67.   
  68.     // Continuous Integration mode  
  69.     // if true, Karma captures browsers, runs the tests and exits  
  70.     singleRun: false  
  71.   });  
  72. };  


执行命令：

karma start karma.conf.js

 

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

技术分享

 
顶
0
 
踩
0

如何安装和使用Karma-Jasmine

标签：views   开始   不包含   测试文件   自动测试   asm   tool   err   知识   

原文地址：http://www.cnblogs.com/tongbiao/p/6933717.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！