您的位置：首页 > 其它

karma + mocha 简单入门

2017-05-27 00:00 537 查看

最近，刚入门了mocha，就感觉好用的不要不要的，但如果要在浏览器中测试页面，就需要karma这个Test Runner帮忙了

参考一个简单的可运行的工程，是学习的最简洁途径，本文就以github上的karma-seed(https://github.com/bbraithwaite/karma-seed)工程为参考，拙谈一下自己的学习过程

从装备库package.json开始

{
"devDependencies": {
"chai": "^4.0.0",
"istanbul": "^0.4.5",
"karma": "1.7.0",  // 和原工程不一样，1.7.0适配node7
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^2.1.1",
"karma-coverage": "^1.1.1",
"karma-fixture": "^0.2.6",
"karma-html2js-preprocessor": "^1.1.0",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.4",
"mocha": "^3.4.2"
}
}

天啦，是不是有些多，下面一个一个说说，都是干嘛的

karma：Test Runner, 测试框架的驱动，自动化测试全靠它啦，这里安装1.7.0是因为以前的版本不兼容node7.0，如果你使用的是node6.x就没有关系

mocha：Test Framework, 类似jasmine

karma-mocha: karma的插件，为karma定制的mocha

chai: Assertation Lib, 可以使用BDD风格的判定

karma-chai: karma定制的chai插件

karma-fixture: 方便模板代码如html, json的插入，给测试搭建上下文环境

karma-html2js-preporcessor: 伴随着karma-fixture而来的，将html(对应于fixture)文件预处理

karma-coverage: karma定制的代码覆盖了插件

istanbul: karma-coverage需要使用到的代码生成代码覆盖率的js lib

karma-chrome-launcher: chrome启动器

karma-phantomjs-launcher: phantomjs启动器

使用npm install 或 yarn install 安装上述依赖，这装备就算齐全了

主菜登场

index.html，我们的功能页面

主要是实现2个数据相加

<html>
<head>
<title>Magic Calculator</title>
</head>
<body>
<input id="x" type="text">
<input id="y" type="text">
<input id="add" type="button" value="Add Numbers">
Result: <span id="result" />
<script type="text/javascript" src="lib/calculator.js"></script>
<script>
calculator.init();
</script>
</body>
</html>

lib/calculator.js (功能实现)

'use strict';

window.calculator = (function() {

return {
init: init
}

function getIntById(id) {
return parseInt(document.getElementById(id).value, 10);
};

function calculate() {
var sum = getIntById('x') + getIntById('y');
document.getElementById('result').innerHTML = isNaN(sum) ? 0 : sum;
};

function init() {
document.getElementById('add').addEventListener('click', calculate);
};

})();

test/calculator.fixture.html(测试用的页面结构)

<input id="x" type="text">
<input id="y" type="text">
<input id="add" type="button" value="Add Numbers">
Result: <span id="result" />

test/calculator.test.js

'use strict';

/*
* Unit tests for lib/calculator.js
*/

describe('Calculator', function() {

// API for interacting with the page.
var controls =  {
get result() {
return document.getElementById('result').innerHTML;
},
get x() {
return document.getElementById('x').value;
},
set x(val) {
document.getElementById('x').value = val;
},
get y() {
return document.getElementById('y').value;
},
set y(val) {
document.getElementById('y').value = val;
},
clickAdd: function() {
document.getElementById('add').click();
}
};

// inject the HTML fixture for the tests
beforeEach(function() {
// Why this line? See: https://github.com/billtrik/karma-fixture/issues/3 fixture.base = 'test';
fixture.load('calculator.fixture.html');

// init js lib
window.calculator.init();
});

// remove the html fixture from the DOM
afterEach(function() {
fixture.cleanup();
});

it('should calculate 3 for 1 + 2', function() {
controls.x = 1;
controls.y = 2;
controls.clickAdd();
controls.result.should.equal('3');
});

it('should calculate zero for invalid x value', function() {
controls.x = 'hello';
controls.y = 2;
controls.clickAdd();
controls.result.should.equal('0');
});

it('should calculate zero for invalid y value', function() {
controls.x = 1;
controls.y = 'goodbye';
controls.clickAdd();
controls.result.should.equal('0');
});
});

配置文件，掌控一切

karma.conf.js

frameworks: ['mocha', 'chai', 'fixture'],

// list of files / patterns to load in the browser
files: [
'lib/*.js',
'test/*.js',
'test/*.html'  // 没有这句，fixture会找不到文件
],

// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor preprocessors: {
'lib/*.js': 'coverage',
'test/*.html' : ['html2js']
},

// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter reporters: ['progress', 'coverage'],

// web server port
port: 9876,

browsers: ['Chrome']

测试结果：

参考资料：
http://www.bradoncode.com/blog/2015/02/27/karma-tutorial/ https://github.com/bbraithwaite/karma-seed

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： karma mocha

相关文章推荐

新的分享

章节导航