Karma + Jasmine 自动化测试

 

1. Karma 安装  

  1. //安装
  2. npm install -g karma
  3.  
  4. //测试安装是否成功
  5. karma start

2. Karma + Jasmine 配置

需包含的modules
module 之间是存在依赖关系的,当安装了某个模块的同时,如果存在依赖关系则会同时自动下载相关的依赖包

  • jasmine-core
  • karma-jasmine

初始构建karma(通过方向键选择相关内容)

  1. //执行karma初始化
  2. > karma init
  3.  
  4. Which testing framework do you want to use ?
  5. Press tab to list possible options. Enter to move to the next question.
  6. > jasmine
  7.  
  8. Do you want to use Require.js ?
  9. This will add Require.js plugin.
  10. Press tab to list possible options. Enter to move to the next question.
  11. > no
  12.  
  13. Do you want to capture a browser automatically ?
  14. Press tab to list possible options. Enter empty string to move to the next question.
  15. > Chrome
  16. >
  17.  
  18. What is the location of your source and test files ?
  19. You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
  20. Enter empty string to move to the next question.
  21. >
  22.  
  23. Should any of the files included by the previous patterns be excluded ?
  24. You can use glob patterns, eg. "**/*.swp".
  25. Enter empty string to move to the next question.
  26. >
  27.  
  28. Do you want Karma to watch all the files and run the tests on change ?
  29. Press tab to list possible options.
  30. > yes  
  31. // Karma configuration
  32. // Generated on Tue Sep 22 2015 14:13:42 GMT+0800 (中国标准时间)
  33.  
  34. module.exports = function(config) {
  35. config.set({
  36.  
  37. // base path that will be used to resolve all patterns (eg. files, exclude)
  38. basePath: '',
  39.  
  40. // frameworks to use
  41. // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
  42. frameworks: ['jasmine'],
  43.  
  44. // list of files / patterns to load in the browser
  45. files: [
  46. ],
  47.  
  48. // list of files to exclude
  49. exclude: [
  50. ],
  51.  
  52. // preprocess matching files before serving them to the browser
  53. // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
  54. preprocessors: {
  55. },
  56.  
  57. // test results reporter to use
  58. // possible values: 'dots', 'progress'
  59. // available reporters: https://npmjs.org/browse/keyword/karma-reporter
  60. reporters: ['progress'],
  61.  
  62. // web server port
  63. port: 9876,
  64.  
  65. // enable / disable colors in the output (reporters and logs)
  66. colors: true,
  67.  
  68. // level of logging
  69. // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
  70. logLevel: config.LOG_INFO,
  71.  
  72. // enable / disable watching file and executing tests whenever any file changes
  73. autoWatch: true,
  74.  
  75. // start these browsers
  76. // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
  77. browsers: ['Chrome'],
  78.  
  79. // Continuous Integration mode
  80. // if true, Karma captures browsers, runs the tests and exits
  81. singleRun: false
  82. })
  83. }
  • 安装karma-jasmine
  1. npm install karma-jasmine
  • 业务逻辑文件 src.js
  1. function reverse(name){
  2. return name.split("").reverse().join("");
  3. }
  • 测试代码文件 test.js
  1. describe("A suite of basic functions", function() {
  2. it("reverse word",function(){
  3. expect("DCBA").toEqual(reverse("ABCD"));
  4. });
  5. });
  • 修改karma.conf.js配置文件
  • 配置files和exclude,指定配置文件和测试文件
  1. module.exports = function (config) {
  2. config.set({
  3. basePath: '',
  4. frameworks: ['jasmine'],
  5. files: ['*.js'],
  6. exclude: ['karma.conf.js'],
  7. reporters: ['progress'],
  8. port: 9876,
  9. colors: true,
  10. logLevel: config.LOG_INFO,
  11. autoWatch: true,
  12. browsers: ['Chrome'],
  13. captureTimeout: 60000,
  14. singleRun: false
  15. });
  16. };
  • 启动测试  
  1. //如果不指定测试配置文件,则只能启动karma,并不知道将执行何种测试用例
  2. karma start karma.conf.js

3. karma和istanbul代码覆盖率

在测试的同时,我们也需要了解,我们测试用例的代码覆盖率情况

 

需要的相关包

  • jasmine-core
  • karma
  • karma-chrome-launcher
  • karma-coverage
  • karma-jasmine
  • 安装 karma-coverage  
  1. npm install karma-coverage
  • 安装 karma
  1. npm install karma
  • 安装 karma-chrome
  1. npm install karma-chrome-launcher
  • 修改karma.conf.js

添加 coverage 相关配置

  1. module.exports = function(config) {
  2. config.set({
  3. basePath: '',
  4. frameworks: ['jasmine'],
  5. files: ['*.js'],
  6. exclude: ['karma.conf.js'],
  7. reporters: ['progress','coverage'],// coverage新增配置内容
  8. preprocessors : {'src.js': 'coverage'},// coverage新增配置内容
  9. // coverage新增配置内容
  10. coverageReporter: {
  11. type : 'html',
  12. dir : 'coverage/'
  13. },
  14. port: 9876,
  15. colors: true,
  16. logLevel: config.LOG_INFO,
  17. autoWatch: true,
  18. browsers: ['Chrome'],
  19. captureTimeout: 60000,
  20. singleRun: false
  21. });
  22. }
  • 执行测试
  1. karma start karma.conf.js

在这里,覆盖报告是在正常的jasmine测试结果后分析得到的,所以和之前的执行是一样的。
jasmine 测试结束后,将在配置文件中设置的 dir : coverage/ doverage文件生成报告

Comments