AngularJs的TDD
首先我们会写一个简单的基于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.
