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文件生成报告