当前位置：首页 > 资讯 > 技术文档

对Angular.js Controller如何进行单元测试

时间：2021-07-07 18:27 编辑：来源：阅读：
扫一扫，手机访问

摘要：对Angular.js Controller如何进行单元测试

[b]一、写个简单的Angular App[/b] 在开始写测试之前，我们先写一个简单的计算App,它会计算两个数字之和。 [img]http://files.jb51.net/file_images/article/201610/20161025114310987.gif?2016925114324[/img] [b]代码如下：[/b]

<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>

[b]二、简单说说里面涉及的一些基本概念:[/b] [b]创建一个 module[/b] 什么是angular.module？它是用于创建，回收模块的地方。我们创建一个名为calculatorApp新的模块，我们并将组件添加到这个模块里。

angular.module('calculatorApp', []);

关于第二个参数？第二个参数必须的，表明我们正在创造一个新的模块。如果需要我们的应用程序有其他的依赖，我们可以将它们[code]['ngResource'，'ngCookies'][/code]传入进去。第二个参数的存在的表示这是一个请求返回的模块的实例。从概念上讲，它本意是类似下面的意思:

* angular.module.createInstance(name, requires);
* angular.module.getInstance(name)

然而实际我们是这样写的:

* angular.module('calculatorApp', []); // i.e. createInstance
* angular.module('calculatorApp'); // i.e. getInstance

关于module的更多信息 [url=https://docs.angularjs.org/api/ng/function/angular.module]https://docs.angularjs.org/api/ng/function/angular.module[/url] [b]2.给module添加controller[/b] 接着我们给angular module的示例添加一个controller

angular.module('calculatorApp').controller('CalculatorController', function CalculatorController($scope) { 
 $scope.z = 0;
 $scope.sum = function() {
 $scope.z = $scope.x + $scope.y;
 };
});

控制器主要负责业务逻辑和视图绑定，[code]$scope[/code]者是视图的控制器直线的信使。 [b]3.连接视图中的元素[/b] 在下面 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 中的[code]ng-model[/code]绑定的的值及时[code]$scope[/code]上定义的比如[code]$scope.x[/code],我们还在button元素使用[code]ng-click[/code]绑定了[code]$scope.sum[/code]方法。 [b]三、添加测试[/b] 接下来终于到了我们的主题，添加一些单元测试给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一个对象的属性 + 如何调用[code]$scope[/code]里面的函数

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,我们在测试的代码加入[code]angular.mock[/code] ,ngMock模块提供了一种机制进行诸如以及虚拟的service进行单元测试。 [b]四、如何获取controller的实例[/b] 使用ngMock我们可以注册一个calculator app实例。

beforeEach(angular.mock.module('calculatorApp'));

一旦calculatorApp初始化后，我们可以使用[code]inject[/code]函数，这样可以解决controller的引用问题。

beforeEach(angular.mock.inject(function(_$controller_) { 
 $controller = _$controller_;
}));

一旦app加载完了，我们使用了[code]inject[/code]函数，[code]$controller service[/code]可以获取 [code]CalculatorController [/code]的实例。

var controller = $controller('CalculatorController', { $scope: $scope });

[b]五、如何get/set一个对象的属性[/b] 在上篇代码中我们已经可以获取一个controller的实例，在括号的第二个参数实际是controller自己，我们的controller只有一个参数 [code]$scope[/code]对象

function CalculatorController($scope) { ... }

在我们的测试中[code]$scope[/code]代表的就是一个简单的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);

[b]六、如何调用$scope里面的函数[/b] 最后一件事情就是我们如何模拟用户的点击，就像我们在绝大多数JS中使用的一致，，其实就是简单的调用函数就行，

$scope.sum();

[img]http://files.jb51.net/file_images/article/201610/20161025114825395.png?2016925114836[/img] [b]总结[/b] 本篇文章简单的基本的介绍了如何对angular controller进行单元测试，但是这是建立在不停的刷新浏览器基础上，而这些流畅可以再好，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作带来一定的帮助，如果有疑问大家可以留言交流。

全部评论(0)

上一篇：Angular2中如何使用ngx-translate进行国际化
下一篇：Angular2中select用法之设置默认值与事件详解

资讯排行榜
更多>>