对Angular.js Controller如何进行单元测试
一、写个简单的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进行单元测试，但是这是建立在不停的刷新浏览器基础上， 而这些流畅可以再好，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作带来一定的帮助，如果有疑问大家可以留言交流。
相关文章
这篇文章主要为大家详细介绍了angularjs下拉框空白的解决方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
本文主要介绍AngularJS ng-class-odd 指令,这里对ng-class-odd基础知识做了详细整理,并有示例代码和效果图,学习AngularJS的同学可以参考下2016-08-08
这篇文章主要给大家介绍了关于Angular2使用jQuery的方法教程，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来跟着小编一起学习学习吧。2017-05-05
本文给大家介绍angularjs 隐藏和显示，对angularjs 隐藏和显示相关知识感兴趣的朋友一起学习吧2015-12-12
本篇文章主要介绍了AngularJS之$window窗口对象，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要给大家介绍了关于angular实现页面打印局部功能的思考与方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-04-04
数据绑定是将应用程序UI或用户界面绑定到模型的机制。使用数据绑定，用户将能够使用浏览器来操纵网站上存在的元素。2021-05-05
本篇文章主要介绍了angular2系列之路由转场动画的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
本篇文章主要介绍了angular组件继承的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
下面小编就为大家分享一篇angular2中使用第三方js库的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
最新评论