Web前端持续集成方案(三)
来源:互联网 发布:软件测试佩腾 编辑:程序博客网 时间:2024/06/06 04:12
四、利用karma实现seajs模块单元测试覆盖率检测
关于覆盖率检测, 之前尝试了jscoverage等很多方案,都没有成功。最后试了karma方案可以。现在就大致介绍一下基于karma的覆盖率检测。
1、安装karma及相关插件
2、进行karma配置
命令行下输入karma init会生成配置应道交互程序,具体配置如下:
// Karma configuration// Generated on Wed May 27 2015 21:12:16 GMT+0800 (中国标准时间)module.exports = function(config) { config.set({ // base path that will be used to resolve all patterns (eg. files, exclude) basePath: '', // frameworks to use // available frameworks: https://npmjs.org/browse/keyword/karma-adapter frameworks: ['qunit', 'seajs'], // list of files / patterns to load in the browser files: [ 'coverage-main.js', 'test/common/jquery-1.11.1.min.js', 'script/common/$.js', 'script/common/fun.js', 'script/common/cache.js', 'script/common/helper.js', 'script/common/fastclick.js', {pattern: 'script/kissy/*.js', included: false}, {pattern: 'test/mockjax/*.js', included: false}, {pattern: 'script/module/**/*.js', included: false}, {pattern: 'test/script/**/*.js', included: false} ], // list of files to exclude exclude: [ ], // preprocess matching files before serving them to the browser // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor preprocessors: { }, // test results reporter to use // possible values: 'dots', 'progress' // available reporters: https://npmjs.org/browse/keyword/karma-reporter reporters: ['progress'], // web server port port: 9876, // enable / disable colors in the output (reporters and logs) colors: true, // level of logging // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG logLevel: config.LOG_INFO, // enable / disable watching file and executing tests whenever any file changes autoWatch: false, // start these browsers PhantomJS, Chrome // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher browsers: ['PhantomJS'], // Continuous Integration mode // if true, Karma captures browsers, runs the tests and exits singleRun: true, reporters: ['progress', 'coverage'], preprocessors: { 'script/module/**/!(tpl)/*.js': ['coverage'] }, coverageReporter: { type : 'html', dir : 'report/coverage', subdir: '.' } });};
框架中需要引入qunit和seajs。Kama启动的时候,会打开一个浏览器,预先加载一些文件。上图中的files配置项就是用来指定浏览器要加载哪些文件的。Include表示是否把js文件通过标签的方式注入到页面中。如果通过seajs加载,include设置为false。上图中,我们把所有的单元测试文件以及相关的业务逻辑文件和工具类文件注入到页面中。
Browers配置项用于指定karma调用哪种浏览器。在调试的时候建议配置为chrome浏览器。使用的时候采用PhantomJS。
Preprocessors配置项用于指定预处理器。这里可以指定需要进行预处理的js文件。
coverageReporter配置项用于设置覆盖率报告相关信息。
Files配置项的第一个文件converage-main.js是单元测试的入口文件。配置信息如下:
CONST = { Deploy: 1, // 发布到 0 本地;1 仿真;2 外网 Develop: 0, // 是否开发环境 0否;1是 SSL: 1, // 是否安全通道 TS: new Date().getTime(), // 时间戳 Version: "2.3.182" // 版本号};(function(__karma__, seajs) { var tests = [], file; var alias = { 'kissy': 'script/kissy/lib/mini-full.js', 'debuggap': 'script/common/debuggap-1.0.1.js' }; for (file in __karma__.files) { if (__karma__.files.hasOwnProperty(file)) { if (file.indexOf('test/') > -1) { tests.push(file); } } } seajs.config({ base: '/base', alias: alias, // 路径配置, Grunt不支持 // 变量配置 vars: { "locale": "zh-cn" }, // 映射配置 map: [ ], preload: [ ], // 调试模式 debug: true }); // 插入内容 var el = document.createElement('div'); var str = ''; str += '<h1 id="qunit-header"></h1>'; str += '<h2 id="qunit-banner"></h2>'; str += '<div id="qunit-testrunner-toolbar"></div>'; str += '<h2 id="qunit-userAgent"></h2>'; str += '<ol id="qunit-tests"></ol>'; str += '<div class="wrapper">'; str += '</div>'; str += '<div id="testInfo"></div>'; el.innerHTML = str; document.body.appendChild(el); var __start = __karma__.start; __karma__.start = function() {}; seajs.use(tests, function() { __start.call(); });})(window.__karma__, seajs);
该文件主要是在入口处配置一下业务相关的变量。
3、运行karma
在命令行下运行karma start karma.conf.js会看到用例运行情况。最后生成的覆盖率报告如下
点击每一项,可以查看具体的覆盖率情况:
0 0
- Web前端持续集成方案(三)
- Web前端持续集成方案(一)
- Web前端持续集成方案(二)
- Web前端持续集成方案(四)
- 前端持续集成解决方案
- 前端开源项目持续集成三剑客
- web 前端(三)
- 持续集成之sonar(三)
- 持续集成(三)- hudson插件入门
- CI持续集成组合方案
- 前端js优化方案(二)持续更新
- 【Web前端】配色方案(全览)
- web前端优化方案
- Web 前端本地化(三)
- web前端面试(三)
- “持续集成”之一二三
- hudson持续集成即时反馈方案
- 持续集成方案,Hudson还是Jenkins?
- 欢迎使用CSDN-markdown编辑器
- java基础之Integer和Long对象相等比较 .
- 构造函数析构函数为什么没有返回值?
- 内存泄漏-Delete不调用析构函数的两种情况
- solr的schema配置优化
- Web前端持续集成方案(三)
- iOS 9适配技巧(更新版)
- python打开自已配置的firefox
- mysql 的thread pool
- Android基础入门教程——2.5.2 Notification(状态栏通知)详解
- jQuery之滑动
- Android绘图机制(四)自定义控件
- HTTP返回码总结
- jQuery中click和onclick的区别