karma+requirejs+angular 测试

karma 不是测试框架，只是一个运行测试框架的服务器

karma测试的原理是，将所有的文件都加载，然后执行对应的测试文件

使用到的前端自动化工具：

grunt bower npm 等

安装依赖：

1. "karma": "^0.13.15",
2. "karma-chrome-launcher": "^0.2.1",
3. "karma-jasmine": "^0.3.6",
4. "karma-mocha": "^0.2.0", //与jasmine 二选一即可，建议使用jasmine，mocha需要其他的断言包
5. "karma-requirejs": "^0.2.2",

初始化配置文件：

1. karma init

配置说明：

1. // Karma configuration
2. // Generated on Tue Nov 10 2015 09:39:31 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', 'requirejs'],
10. // 配置要加载的文件
11. //字符串形式的表示 通过<script>标签进行加载
12. //对象形式的必须包含pattern、included属性，pattern进行匹配文件，included为true表示通过requirejs进行加载(后面会结束配置说明)，否则通过script标签进行加载
13. files: [
14. 'app/bower_components/angular/angular.js',
15. 'app/bower_components/angular-route/angular-route.js',
16. 'app/bower_components/angular-mocks/angular-mocks.js',
17. 'app/components/**/*.js',
18. 'app/view*/**/*.js',
19. {pattern: 'app/define/*.js', included: false},
20. {pattern: 'app/test/*.js', included: false},
21. 'test-main.js'
22. ],
23. // list of files to exclude
24. exclude: [
25. '**/*.swp'
26. ],

27. proxies: {//'/static': 'http://gstatic.com','/log': 'http://localhost:3000' //避免跨域，测试异步请求时如果指定完整url就是跨域，会出错，如果只写路径会请求到karma服务器localhsot:9876/

    },

28. // preprocess matching files before serving them to the browser
29. // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
30. preprocessors: {},
31. // test results reporter to use
32. // possible values: 'dots', 'progress'
33. // available reporters: https://npmjs.org/browse/keyword/karma-reporter
34. reporters: ['progress'],
35. // web server port
36. port: 9876,
37. // enable / disable colors in the output (reporters and logs)
38. colors: true,
39. // level of logging
40. // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
41. logLevel: config.LOG_INFO,
42. // enable / disable watching file and executing tests whenever any file changes
43. autoWatch: true,
44. // start these browsers
45. // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
46. browsers: ['Chrome'],
47. // Continuous Integration mode
48. // if true, Karma captures browsers, runs the tests and exits
49. singleRun: false
50. })
51. }

requirejs配置

1. /**
2. * Created by weichunhe on 2015/11/10.
3. */
4. var tests = [];
5. for (var file in window.__karma__.files) { //这里的文件路径已经包含了 /base了
6. if (window.__karma__.files.hasOwnProperty(file)) {
7. if (/test1\.js$/.test(file)) {
8. tests.push(file);
9. }
10. }
11. }
12. console.log(window.__karma__.files);
13. console.log(tests);
14. requirejs.config({
15. // Karma serves files from '/base'
16. baseUrl: '/base/app/define',
17. paths: {},
18. shim: {},
19. // ask Require.js to load these files (all our tests)
20. deps: tests, //这里只包含需要测试的文件就可以了
21. // start test run, once Require.js is done
22. callback: window.__karma__.start
23. });

启动：

cd node_modules/.bin/

karma.cmd start ../../karma.conf.js

karma:

files: 根据正则表达式去遍历文件系统，将符合条件的文件在/base下面通过web提供服务

将included指定为false时通过requirejs加载，如果指定为true 会出现 Uncaught Error: Mismatched anonymous define() module 这是因为在加载requirejs之前通过script标签进行加载的

使用requirejs时：

所有在deps里面的文件都会去加载执行，所以deps里面放的只是要测试的文件就可以了，要么define、要么直接写，不能require，这是异步了

angular 的 $controllerProvider.reigster 在 angular启动之后注册的controller测试时通过angular-mock就加载不进来了

如果是所有controller都在angular bootstrap之前注册了，就可以使用 angular-mocks ，否则还是不要用了，太麻烦了；直接angular测试

1. $injector = angular.injector(['app']); //执行这步之后 注册的controller可以injector获取到
2. require('app').register.controller('testCtrl', function (name) {
3. console.log('controller', name);
4. });
5. $injector.invoke(function ($controller) {
6. $controller('testCtrl', {name: 'testCtrl'});
7. });

来自为知笔记(Wiz)