原文地点:http://www.bradoncode.com/blog/2015/05/17/angularjs-testing-controller/
@Bradley Braithwaite
上面一篇文章简朴引见了怎样运用 Jasmine 举行JavaScript的单元测试
我们用了一段简朴的代码举行盘算的测试。
接下来我们将其延伸到我们对Angular Controller的测试中。假如你不太相识angular也没紧要,下文也会说起关于Angular的一些学问。
写个简朴的Angular App
在最先写测试之前,我们先写一个简朴的盘算App,它会盘算两个数字之和。
代码以下:
<html>
<head>
<script type="text/javascript" src="https://code.angularjs.org/1.4.0-rc.2/angular.min.js"></script>
</head>
<body>
<!-- This div element corresponds to the CalculatorController we created via the JavaScript-->
<div ng-controller="CalculatorController">
<input ng-model="x" type="number">
<input ng-model="y" type="number">
<strong>{{z}}</strong>
<!-- the value for ngClick maps to the sum function within the controller body -->
<input type="button" ng-click="sum()" value="+">
</div>
</body>
<script type="text/javascript">
// Creates a new module called 'calculatorApp'
angular.module('calculatorApp', []);
// Registers a controller to our module 'calculatorApp'.
angular.module('calculatorApp').controller('CalculatorController', function CalculatorController($scope) {
$scope.z = 0;
$scope.sum = function() {
$scope.z = $scope.x + $scope.y;
};
});
// load the app
angular.element(document).ready(function() {
angular.bootstrap(document, ['calculatorApp']);
});
</script>
</html>
简朴说说内里触及的一些基础概念:
建立一个 module
什么是angular.module?它是用于建立,接纳模块的处所
。我们建立一个名为calculatorApp新的模块,我们并将组件增加到这个模块里。
angular.module('calculatorApp', []);
关于第二个参数?第二个参数必需的,表明我们正在制造一个新的模块。假如须要我们的应用程序有其他的依靠,我们能够将它们['ngResource','ngCookies']
传入进去。
第二个参数的存在的示意这是一个要求返回的模块的实例。
从概念上讲,它本意是相似下面的意义:
* angular.module.createInstance(name, requires);
* angular.module.getInstance(name)
然则现实我们是如许写的:
* angular.module('calculatorApp', []); // i.e. createInstance
* angular.module('calculatorApp'); // i.e. getInstance
关于module的更多信息 https://docs.angularjs.org/api/ng/function/angular.module
2.给module增加controller
接着我们给angular module的示例增加一个controller
angular.module('calculatorApp').controller('CalculatorController', function CalculatorController($scope) {
$scope.z = 0;
$scope.sum = function() {
$scope.z = $scope.x + $scope.y;
};
});
控制器重要担任营业逻辑和视图绑定,$scope
者是视图的控制器直线的信使。
3.衔接视图中的元素
在下面 HTML 中,我们须要盘算input内里的值,而这些都包括在这个controller的div中。
<div ng-controller="CalculatorController">
<input ng-model="x" type="number">
<input ng-model="y" type="number">
<strong>{{z}}</strong>
<!-- the value for ngClick maps to the sum function within the controller body -->
<input type="button" ng-click="sum()" value="+">
</div>
input 中的ng-model绑定的的值实时$scope上定义的比方$scope.x
,我们还在button元素运用ng-click绑定了$scope.sum
要领。
增加测试
接下来终究到了我们的主题,增加一些单元测试给controller,我们疏忽代码中html部份,重要集合在controller的代码中。
angular.module('calculatorApp').controller('CalculatorController', function CalculatorController($scope) {
$scope.z = 0;
$scope.sum = function() {
$scope.z = $scope.x + $scope.y;
};
});
为了测试 controller,我们还得说起下面几点?
怎样建立一个controller实例
怎样get/set一个对象的属性
怎样挪用$scope内里的函数
describe('calculator', function () {
beforeEach(angular.mock.module('calculatorApp'));
var $controller;
beforeEach(angular.mock.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);
});
});
});
最先前我们须要引入ngMock,我们在测试的代码到场angular.mock
,ngMock模块供应了一种机制举行诸如以及假造的service举行单元测试。
怎样猎取controller的实例
运用ngMock我们能够注册一个calculator app实例。
beforeEach(angular.mock.module('calculatorApp'));
一旦calculatorApp初始化后,我们能够运用inject
函数,如许能够处理controller的援用题目。
beforeEach(angular.mock.inject(function(_$controller_) {
$controller = _$controller_;
}));
一旦app加载完了,我们运用了inject
函数,$controller service能够猎取 CalculatorController 的实例。
var controller = $controller('CalculatorController', { $scope: $scope });
怎样get/set一个对象的属性
在上篇代码中我们已能够猎取一个controller的实例,在括号的第二个参数现实是controller本身,我们的controller只要一个参数$scope
对象
function CalculatorController($scope) { ... }
在我们的测试中$scope代表的就是一个简朴的JavaScript对象。
var $scope = {};
var controller = $controller('CalculatorController', { $scope: $scope });
// set some properties on the scope object
$scope.x = 1;
$scope.y = 2;
我们设置x,y的值,模仿适才的gif中的所展现的一样。我们赞同也能够读取对象中的属性,就像下面这段测试的断言:
expect($scope.z).toBe(3);
怎样挪用$scope内里的函数
末了一件事变就是我们怎样模仿用户的点击,就像我们在绝大多数JS中运用的一致,,实在就是简朴的挪用函数就行,
$scope.sum();
运转结果以下
小结
本篇文章简朴的基础的引见了怎样对angular controller举行单元测试,然则这是建立在不断的革新浏览器基础上,
而这些流通能够再好,也是我们背面的一篇文章 怎样运用karam举行 angular 测试 (翻译中…)的所要说的。
完全代码:https://github.com/JackPu/angular-test-tutorial/blob/master/angular-test.html