码迷,mamicode.com
首页 > Web开发 > 详细

karma+requirejs+angular 测试

时间:2015-11-12 14:56:00      阅读:508      评论:0      收藏:0      [点我收藏+]

标签:

http://karma-runner.github.io/0.8/plus/RequireJS.html

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. });





karma+requirejs+angular 测试

标签:

原文地址:http://www.cnblogs.com/vvch/p/4958972.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!