karma+jasmine简单介绍
karma主要是网页端的javascript测试,karma会将你的js代码引用到浏览器中,给代码一个浏览器的运行环境,这是karma的一个主要功能。
jasmine是一个测试框架,首先提供了基本的断言机制,还有其他的高级功能,函数的监控,判断这个函数是不是被调用过,还有可以mock伪装ajax请求的结果,等等吧,具体的上jasmine的官网上看,这个玩的还不是很熟。
karma+jasmine安装
注意点:karma不要安装到全局,这个一定要注意。
只要注意到这一点,其他的都是官网上都有的了。
npm install karma
npm install -g karma-cli
npm install karma-jasmine
npm install karma-chrome-launcher
karma安装到本地,通过全局的karma-cli(客户端)来执行karma命令,不需要单独安装jasmine,用karma-jasmine就可以了。
下面讲一下karma和requirejs一起怎么使用。
首先安装karma-requirejs插件,然后karma init来配置karma.conf.js
也可以直接创建一个这个js,这里给一个现成的。
module.exports = function(config) {
config.set({
// 基本路径,这个是决定从哪里找引用的文件和要排除的文件
basePath: '',
// 要用的框架,这里用到了下面两个
frameworks: ['jasmine', 'requirejs'],
// 要加载到浏览器的文件,注意html结尾的也是可以加载的。
files: [
{pattern: 'lib/**/*.js', included: false},
{pattern: 'service/**/*.js', included: false},
{pattern: 'route/**/*.js', included: false},
{pattern: 'conponent/**/*.js', included: false},
{pattern: 'constants/**/*.js', included: false},
{pattern: 'model/**/*.js', included: false},
{pattern: 'template/**/*.html', included: false},
{pattern: 'test/**/*Spec.js', included: false},
'test-main.js'
],
// 不想引用的js
exclude: [
'src/main.js'
],
//插件,用到什么就写什么,不写会报错
plugins : [
'karma-jasmine',
'karma-requirejs'
],
// 生成测试结果报告的类型
// 可能的值: 'dots', 'progress', 'junit', 'growl', 'coverage'
reporters: ['dots'],
// 端口号
port: 9876,
// 输出的要不要颜色
colors: true,
// 日志的等级,就那几样看着选
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// 是否自动监控,如果是文件一改就自动跑测试用例,这边选择的是否
autoWatch: false,
// 支持的浏览器,用来做兼容性测试,感觉diaodiao的。
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers: ['Chrome'],
// 浏览器超时时间,超过这个时间就kill掉了
captureTimeout: 60000,
//
// true表示找到浏览器就自动运行test然后退出,默认就好。
singleRun: false
});
};
上面就是conf文件了,copy放到项目根目录下就欧了,如果不用reqirejs就把相应的require的去掉,把test-main.js去掉就可以了。
用requirejs看下面怎么配置test-main.js
var allTestFiles = [];
var TEST_REGEXP = /(spec|test)\.js$/i;
// Get a list of all the test files to include
Object.keys(window.__karma__.files).forEach(function(file) {
if (TEST_REGEXP.test(file)) {
// Normalize paths to RequireJS module names.
// If you require sub-dependencies of test files to be loaded as-is (requiring file extension)
// then do not normalize the paths
var normalizedTestModule = file.replace(/^\/base\/|\.js$/g, '');
allTestFiles.push(normalizedTestModule);
}
});
require.config({
// Karma serves files under /base, which is the basePath from your config file
baseUrl: '/base',
paths: {
'jquery': 'lib/jquery',
'underscore': 'lib/underscore'
},
shim: {
'underscore': {
exports: '_'
},
'lib/bootstrap' : {
deps : ['jquery'],
exports : 'bootstrap'
},
'lib/jquery.qrcode.min' : {
deps : ['jquery'],
exports : 'qrcode'
}
},
// dynamically load all test files
deps: allTestFiles,
// we have to kickoff jasmine, as it is asynchronous
callback: window.__karma__.start
});
require.config 里面的东西才是要修改的,这个用过requirejs的都应该知道怎么修改成自己项目的,如果想开始用require,去官网上搜搜。
给出一个测试例子,项目用到了backbone,render的时候需要dom节点,就可以在测试之前创建个节点出来。
define(['underscore','conponent/appCon'], function(_,appCon) {
describe('just checking', function() {
it('works for underscore', function() {
// just checking that _ works
expect(_.size([1,2,3])).toEqual(3);
});
});
beforeEach(function() {
var element = "<div id='body'></div>";
$("body").append(element);
});
describe('html page render', function() {
it('runder page', function() {
var app = new appCon();
app.renderFirstPage({
is_display_org_info : false
});
});
});
});
如果是webstorm,直接右键karma.conf.js然后选择run就可以跑测试用例了。如果不是,就karma start 然后karma run 同样可以。
感觉一篇没法写完debug的东西,下一篇再介绍js的debug和测试覆盖率怎么弄。感觉用webstorm来debug js还是感觉吊吊的。