UDN-企业互联网技术人气社区

板块导航

浏览  : 1777
回复  : 2

[AngularJS] 利用Angular.js测试引擎Karma进行自动化测试

[复制链接]
葡萄柚的头像 楼主
发表于 2017-1-5 15:44:32 | 显示全部楼层 |阅读模式
  Karma是google angular团队运行自动化测试的一个js引擎(JavaScript test runner ), angular项目的测试代码都是基于karma和jasmine测试框架编写。

  karma 特性如下:

  1. 在真实设备和浏览器中运行测试。无论你需要在手机,平板,电脑或PhantomJS 都可以跑你的测试代码。

  2. 远程控制。 从IDE或命令行控制整个测试流程,当你改变并保存了测试文件,karma就会运行全部测试。

  3. 不依赖于特定测试框架。 你可以用Jasmine,Mocha, QUnit 等任意测试框架编写测试。

  4. 项目开源. https://github.com/karma-runner/karma

  5. 便捷简单的调试。 可以直接在你的IDE 比如 WebStorm 或Google Chrome浏览器调试。

  6. 持续集成。 可以简单的搭配Jenkins, Travis或Semaphore 进行持续集成。

  什么时候考虑使用Karma?

  1. 你想在真实的浏览器中测试你的代码。

  2. 你需要在多个环境中测试你的代码(桌面,平板,移动端浏览器)。

  3. 你需要在本地开发时测试你的代码。

  4. 你需要在持续集成服务器中执行你的测试代码。

  5. 你需要在你每一次保存代码时跑测试。

  6. 你喜欢使用命令行。

  7. 你喜欢简单的测试,而不是被测试弄得痛苦不堪。

  8. 你希望使用Istanbul自动生成测试报告。

  9. 你希望用RequireJS 测试你的源码。

  开始使用Karma

  1. 使用npm安装Karma和相应浏览器lancher ,如下是 link 项目中的相关 package.json
  1. "jasmine-core": "^2.5.2",
  2. "karma": "^1.3.0",
  3. "karma-chrome-launcher": "^2.0.0",
  4. "karma-coverage": "^1.1.1",
  5. "karma-firefox-launcher": "^1.0.0",
  6. "karma-ie-launcher": "^1.0.0",
  7. "karma-jasmine": "^1.1.0",
  8. "karma-opera-launcher": "^1.0.0",
  9. "karma-phantomjs-launcher": "^1.0.2",
  10. "karma-safari-launcher": "^1.0.0",
复制代码

  2. 类似webpack,定义一个config文件, 如下是 link 项目中karma config (稍作翻译) 有兴趣的可以看看 angular 目录中以Karma开头的配置文件
  1. module.exports = function (config) {
  2.   config.set({

  3.     // 基本目录
  4.     basePath: '',


  5.     // 使用的测试框架
  6.     // 其他测试框架: https://npmjs.org/browse/keyword/karma-adapter
  7.     frameworks: ['jasmine'],


  8.     // 需要加载的js文件, 下面是link类库和test目录下的测试文件
  9.     files: [
  10.       'dist/link.js',
  11.       'test/**/*Spec.js'
  12.     ],


  13.     // 需要排除的文件
  14.     exclude: [
  15.     ],


  16.     // 预处理器
  17.     // 可用的预处理器: https://npmjs.org/browse/keyword/karma-preprocessor
  18.     preprocessors: {
  19.       // 利用Istanbul生成测试报告

  20.       'dist/link.js': ['coverage']
  21.     },


  22.     // 可用的报表: https://npmjs.org/browse/keyword/karma-reporter
  23.     // 代码覆盖率测试结果报表
  24.     reporters: ['progress', 'coverage'],


  25.     // web服务器端口
  26.     port: 9876,


  27.     // 报告和log输出颜色
  28.     colors: true,


  29.     // 日志级别
  30.     // 可以配置为: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
  31.     logLevel: config.LOG_INFO,


  32.     // 是否启用自动检查文件改动并运行测试
  33.     autoWatch: true,


  34.     // 需要启动的浏览器实例,下面是启动chrome
  35.     // 可用的浏览器: https://npmjs.org/browse/keyword/karma-launcher
  36.     browsers: ['Chrome'/*'PhantomJS', 'Chrome', 'Firefox', 'IE', 'Safari', 'Opera'*/],

  37.     // 是否至运行一次就结束
  38.     singleRun: false,

  39.     // 同时开启几个浏览器运行测试
  40.     concurrency: Infinity,

  41.     // 代码覆盖率报表结果配置
  42.     coverageReporter: {
  43.       type: 'html',
  44.       dir: 'test/coverage/'
  45.     }
  46.   })
  47. }
复制代码

  3. 将命令行cd到项目根目录运行karma start ,即可运行所有测试代码并生成测试报告。
1.png

  测试报告如下:
1.png

  4. 如何调试测试代码。

  以上配置启动的浏览器实例为Chrome , 运行测试会自动打开chrome 浏览器 , 如下,点击debug按钮即可进入一个空白的调试界面(其实已经加载了你希望加载的待测试代码和测试代码, 即配置文件中files配置项定义的文件,上面我们定义了需要加载dist目录下的link.js文件和test目录下以Spec名称结尾的js文件),打开浏览器开发者工具,选择Sources选项,展开base目录即可看到我们编写的测试代码并进行调试。
1.png

1.png

  以上karma配置文件和测试代码见 https://github.com/leonwgc/link , 下载代码,运行npm install 安装好依赖后 运行npm test 或gulp test 即可启动测试并调试。 另外karma本身并不是一个测试框架,它需要搭配其他测试框架如Jasmine等进行单元测试,其工作原理是利用nodejs生成web服务器, 在所有与之连接的浏览器中通过iframe加载并执行测试代码,运行结果通过socket.io库实时报告给node处理并呈现于命令行。

相关帖子

发表于 2017-1-5 15:45:01 | 显示全部楼层
占坑编辑ing
使用道具 举报

回复

发表于 2017-1-5 16:25:03 | 显示全部楼层
回帖支持下楼主,请眼熟我,我叫“念你情深“
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部