对Angular.js Controller如何进行单元测试  更新时间:2016年10月25日 11:52:31   投稿:daisy   这篇文章主要给大家介绍了如何对Angular Controller进行单页测试。如果你不太了解angular也没关系,本文也会提及关于Angular的一些知识。文中通过示例代码介绍的很详细,详细对大家的理解和学习很有帮助,下面来一起看看吧。 一、写个简单的Angular App 在开始写测试之前,我们先写一个简单的计算App,它会计算两个数字之和。 代码如下: {{z}} 二、简单说说里面涉及的一些基本概念: 创建一个 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中。 {{z}} 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中的单元测试实例 使用Angular CLI进行单元测试和E2E测试的方法 AngularJs unit-testing(单元测试)详解 利用Jasmine对Angular进行单元测试的方法详解 AngularJS 单元测试(一)详解 在JavaScript的AngularJS库中进行单元测试的方法 AngularJS 单元测试(二)详解 Angular单元测试之事件触发的实现 浅谈Angular单元测试总结 Angular进行简单单元测试的实现方法实例 angular.js controller 单元测试 相关文章 Angularjs过滤器使用详解 AngularJS提供了过滤器来对输入输出数据格式化。这篇文章主要介绍了Angularjs过滤器使用的相关资料,需要的朋友可以参考下 2016-05-05 Angular中的$watch方法详解 本文通过实例代码给大家介绍了Angular中的$watch方法,包括$watch简介及基本用法,需要的朋友参考下吧 2017-09-09 基于AngularJS的拖拽文件上传的实例代码 本篇文章主要介绍了基于AngularJS的拖拽上传的实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-07-07 使用angular-cli webpack创建多个包的方法 这篇文章主要介绍了使用angular-cli webpack创建多个包的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-10-10 AngularJS表单提交实例详解 这篇文章主要介绍了AngularJS表单提交的方法,结合完整实例形式分析了AngularJS表单提交过程中的数据绑定、模块、控制器等相关操作技巧,需要的朋友可以参考下 2017-02-02 详解AngularJS中的依赖注入机制 这篇文章主要介绍了详解AngularJS中的依赖注入机制,对JavaScript各组件的使用起到非常重要的作用,需要的朋友可以参考下 2015-06-06 Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖 这篇文章主要介绍了Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 2018-11-11 AngularJS实现ajax请求的方法 这篇文章主要介绍了AngularJS实现ajax请求的方法,结合实例形式分析了AngularJS实现ajax请求的前端界面、ajax交互及后台php处理技巧,需要的朋友可以参考下 2016-11-11 cnpm加速Angular项目创建的方法 这篇文章主要介绍了cnpm加速Angular项目创建的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-09-09 学习Angularjs分页指令 这篇文章主要和大家一起学习Angularjs分页指令,代码很详细,文章结构紧凑,感兴趣的小伙伴们可以参考一下 2016-07-07 最新评论

一、写个简单的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中的单元测试实例
  • 使用Angular CLI进行单元测试和E2E测试的方法
  • AngularJs unit-testing(单元测试)详解
  • 利用Jasmine对Angular进行单元测试的方法详解
  • AngularJS 单元测试(一)详解
  • 在JavaScript的AngularJS库中进行单元测试的方法
  • AngularJS 单元测试(二)详解
  • Angular单元测试之事件触发的实现
  • 浅谈Angular单元测试总结
  • Angular进行简单单元测试的实现方法实例
张贴在3