首先我们会写一个简单的基于AngularJs的应用。
html代码:
<html>
<head>
<script src=‘angula.js‘></script>
</head>
<body>
<div ng-app=‘demoApp‘>
<div ng-controller=‘demoController‘>
{{name}}
</div>
</div>
<script src=‘demo.js‘></script>
</body>
</html>
demo.js代码:
var app = angular.module(‘demoApp‘, []);
app.controller(‘demoController‘, [‘$scope‘, function ($scope) {
}]);
OK。在我们有了基本的js文件后,我们就需要写我们测试文件了。我们使用的测试工具是karma,karma的配置文件里的frameworks使用的是Jasmine。
在完成karma的配置后,我们就应当着手写测试文件了。
首先,在写测试的时候,我们一定要明白自己测试的期望是什么,目标是什么,测试的用例有哪些。当我们清楚明白地知道自己想要测什么的时候,就以写出优雅的测试代码以及漂亮的功能代码。
开始写测试文件,demo.test.js:
我要测angular的controller, demoController, 于是我就describe(‘demoController‘, function () {});
之后我要拿到我要测试的期望目标啊,于是我们接着写:
describe(‘demoController‘, function () {
var $controller;
beforeEach(function () {
module(‘demoApp‘);
inject(function ($injector) {
$controller = $injector.get(‘$controller‘)
});
});
})
写到这里,我们就要想了,测demoController 的什么呢,于是,我们case来了,比如说,我们期望$scope.name 是 ‘Hello world‘:
describe(‘demoController‘, function () {
var $controller;
beforeEach(function () {
module(‘demoApp‘);
inject(function ($injector) {
$controller = $injector.get(‘$controller‘)
});
});
it(‘$scope.name should be equal hello world‘, function () {
var $scope;
$scope = {}
$controller(‘demoController‘, {$scope: $scope})
expect($scope.name).toEqual(‘Hello world‘);
});
});
OK,我们的测试写完了,使用karma命令来跑测试. 99%测试一定会挂,为什么呢?因为我们的demo.js里,demoController中还没有$scope.name.并且我们期望$scope.name = ‘Hello world‘.于是,在demo.js里写上:
app.controller(‘demoController‘, [‘$scope‘, function ($scope) {
$scope.name = ‘Hello world‘;
}]);
运行测试,Bingo!
好了,我们可以继续TDD了。
写漂亮的测试,写优雅的代码。Make it run.
原文:http://www.cnblogs.com/Yaxian/p/4960436.html