紧随前文怎样对Angular Controller举行单元测试,
然则我们也提到了前文事情流程的不轻易,简朴总结上前文举行测试的一个流程:
修正测试代码;
革新浏览器;
检察测试效果;
该要领最大的缺点就是,我们每次都得手动的去革新我们的浏览器。然则假如我们须要测试差别的浏览器我们又应当怎样处置惩罚呢?
而本文将提出一个自动化测试的计划,从而处理这些题目。
关于Karma
Karma是一个由AngularJS 团队制造的JavaScript测试东西。前面我们写过了Jasmine的一篇文章《最先对Angular App举行单元测试》
而Karma供应了异常有效的东西去协助我们举行Jasmine的测试。
装置 Karma
你在这里可以看到更加细致的装置
文章,而本文随后也会归纳综合总结一些。起首你得装置node.js,假如装置了则跳过,没有装置的可以看这里
注重官方文档中有申明,Karma在某些版本的node事情不那么友爱。但是作者自身的v0.12.x并没碰见什么题目。翻开你的敕令行软件,我们输入下面敕令,
mkdir CalculatorKarma
cd CalculatorKarma
echo {} >> package.json bash
接下来我么用npm装置karma
npm install karma --save-dev
假如装置胜利, package.json中将会有下面内容:
{
"devDependencies": {
"karma": "^0.12.31"
}
}
接着我们最好装置下karma-cli,如许可以全局运用karma
敕令。
npm install -g karma-cli
下一步我们须要装置一些karma的插件,如许可以Jasmine测试框架可以事情,而且设置Google Chrome 作为我们的测试浏览器。
npm install karma-jasmine karma-chrome-launcher --save-dev
接下来,package.json会增添一些内容:
{
"devDependencies": {
"jasmine-core": "^2.3.4",
"karma": "^0.12.31",
"karma-chrome-launcher": "^0.1.12",
"karma-jasmine": "^0.3.5"
}
}
写测试用例
接下来我们可以最先举行测试了,我们在敕令行东西里输入下面的敕令:
mkdir tests
touch tests/calculator.controller.test.js
我们将下面的代码粘贴到calculator.controller.test.js中去。
describe('calculator', function () {
beforeEach(module('calculatorApp'));
var $controller;
beforeEach(inject(function(_$controller_){
$controller = _$controller_;
}));
describe('sum', function () {
it('1 + 1 should equal 2', function () {
var $scope = {};
var controller = $controller('CalculatorController', { $scope: $scope });
$scope.x = 1;
$scope.y = 2;
$scope.sum();
expect($scope.z).toBe(3);
});
});
});
让测试跑起来
在举行测试之前,我们建立一个设置文件用于举行karma的一些设置。关于设置的内容您可以浏览 官方文档。
接下来我们最先建立这个设置文件我们须要输入下面的内容:
karma init karma.conf.js
然后回复敕令行的题目就好了
Which testing framework do you want to use?(你所运用的测试框架?)
接收一个默许的值,比方:jasmine
Do you want to use Require.js ?(你愿望运用 Require.js吗?)
接收一个默许的值,比方:no
Do you want to capture any browsers automatically ?(你想自动捕捉浏览器吗?)
接收一个默许的值 比方:chrome
What is the location of your source and test files ?(你测试文件的地点)
输入下面的地点:
tests/*.test.js
固然你并不须要忧郁你跳过那些讯问,稍后我们都可以手动修正设置文件。
Should any of the files included by the previous patterns be excluded ?(是不是有须要消除的相符前面花样的问文件)
Do you want Karma to watch all the files and run the tests on change ?(是不是动态监听文件变化)
接收一个默许的值,比方:yes
接下来我们可以在根目次看到设置文件karma.conf.js建立胜利。
我们输入下面的敕令最先测试
karma start karma.conf.js
测试后的输出就像下面如许:
> @ test /Users/devuser/repos/CalculatorKarma
> ./node_modules/karma/bin/karma start karma.conf.js
INFO [karma]: Karma v0.12.31 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 42.0.2311 (Mac OS X 10.10.3)]: Connected on socket 2absOkNfa1asasaX0fCJ with id 71338229
Chrome 42.0.2311 (Mac OS X 10.10.3) calculator encountered a declaration exception FAILED
ReferenceError: module is not defined
at Suite.<anonymous> (/Users/devuser/repos/CalculatorKarma/tests/calculator.controller.test.js:3:13)
at /Users/devuser/repos/CalculatorKarma/tests/calculator.controller.test.js:1:1
Chrome 42.0.2311 (Mac OS X 10.10.3): Executed 1 of 1 (1 FAILED) ERROR (0.01 secs / 0.005 secs)
按住ctrl/command+c就可以住手这个历程。
小提示: 我们可以在package.json中的scripts里到场测试的敕令,轻易有用
{
"scripts": {
"test": "karma start karma.conf.js"
},
"devDependencies": {
"jasmine-core": "^2.3.4",
"karma": "^0.12.31",
"karma-chrome-launcher": "^0.1.12",
"karma-jasmine": "^0.3.5"
}
}
到场这段代码后,我们可以输入npm test
举行karma的测试了。假如我们要考证package.json是不是修正准确。
经由过程测试并增加新功能
接下来我们增加一些controller的逻辑进去.
mkdir app
touch app/calculator.controller.js
然后我们须要下载angular的类库文件和angular mock的文件。
mkdir lib
curl -o lib/angular.min.js https://code.angularjs.org/1.4.0-rc.2/angular.min.js
curl -o lib/angular-mocks.js https://code.angularjs.org/1.4.0-rc.2/angular-mocks.js
我们须要将新增的目次到场到设置中去,翻开 karma.conf.js
然后增加成下面内容:
// list of files / patterns to load in the browser
files: [
'lib/angular.min.js',
'lib/angular-mocks.js',
'app/*.js',
'tests/*.js'
],
再次在敕令行中输入敕令:
npm test
运转效果依旧是失利的,由于我们并没有增加我们的controller,接下来我们将下面的代码粘贴到 app/calculator.controller.js
。
angular.module('calculatorApp', []).controller('CalculatorController', function CalculatorController($scope) {
$scope.sum = function() {
$scope.z = $scope.x + $scope.y;
};
});
在敕令行东西内里我们可以看到karma检测到了文件变化,从新举行测试,这个时刻测试就会经由过程了。
接下来我们增加一个新的测试用例,我们将它增添到calculator.controller.test.js
中去,把它放到describe
作用域内。
it('z should have default value of zero', function () {
var $scope = {};
var controller = $controller('CalculatorController', { $scope: $scope });
expect($scope.z).toBe(0);
});
敕令行这个时刻会输出测试不经由过程,这个时刻我们须要更新我们的controller代码
angular.module('calculatorApp', []).controller('CalculatorController', function CalculatorController($scope) {
$scope.z = 0;
$scope.sum = function() {
$scope.z = $scope.x + $scope.y;
};
});
测试经由过程的输出以下:
更多
原文作者写过一篇文章更加细致的引见Karam,人人可以去深切的相识karma的运用。
karma支撑差别的浏览器,我们可以在测试的时刻设置这些浏览器:
除此之外,karma另有许多可供运用的插件,你可以在这里搜刮到他们:https://www.npmjs.com/package/karma-ie-launcher
原文地点: http://www.bradoncode.com/blog/2015/05/19/karma-angularjs-testing/