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


Posted in Javascript onOctober 25, 2016

一、写个简单的Angular App

在开始写测试之前,我们先写一个简单的计算App,它会计算两个数字之和。

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

代码如下:

<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.js Controller如何进行单元测试

总结

本篇文章简单的基本的介绍了如何对angular controller进行单元测试,但是这是建立在不停的刷新浏览器基础上, 而这些流畅可以再好,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
js分解url参数(面向对象-极简主义法应用)
Aug 09 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
Apr 12 Javascript
js 一个关于图片onload加载的事
Nov 10 Javascript
基于bootstrap风格的弹框插件
Dec 28 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
Jan 04 Javascript
JS实现图片手风琴效果
Apr 17 Javascript
node.js操作MongoDB的实例详解
Oct 11 Javascript
vue中动态绑定表单元素的属性方法
Feb 23 Javascript
微信小程序实现的一键拨号功能示例
Apr 24 Javascript
小程序实现多个选项卡切换
Jun 19 Javascript
JavaScript 语句之常用 for 循环详解
Mar 29 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
Oct 25 #Javascript
input file上传 图片预览功能实例代码
Oct 25 #Javascript
Node.js开启Https的实践详解
Oct 25 #Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
Oct 25 #Javascript
利用yarn实现一个webpack+react种子
Oct 25 #Javascript
Yarn的安装与使用详细介绍
Oct 25 #Javascript
jQuery通过ajax快速批量提交表单数据
Oct 25 #Javascript
You might like
解析PHP将对象转换成数组的方法(兼容多维数组类型)
2013/06/21 PHP
php使用ZipArchive函数实现文件的压缩与解压缩
2015/10/27 PHP
php的debug相关函数用法示例
2016/07/11 PHP
Yii2框架dropDownList下拉菜单用法实例分析
2016/07/18 PHP
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
IE6下js通过css隐藏select的一个bug
2010/08/16 Javascript
javascript代码加载优化方法
2011/01/30 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
2012/01/08 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
2013/04/22 Javascript
Bootstrap基础学习
2015/06/16 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
2016/11/30 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
node.js操作mongodb简单示例分享
2017/05/25 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
使用Node.js在深度学习中做图片预处理的方法
2019/09/18 Javascript
使用webpack将ES6转化ES5的实现方法
2019/10/13 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
python多重继承实例
2014/10/11 Python
Python函数参数类型*、**的区别
2015/04/11 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
Python+pyplot绘制带文本标注的柱状图方法
2019/07/08 Python
基于Python实现船舶的MMSI的获取(推荐)
2019/10/21 Python
tensorboard显示空白的解决
2020/02/15 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
捷克移动配件网上商店:ProMobily.cz
2019/03/15 全球购物
EMU Australia澳大利亚官网:澳大利亚本土雪地靴品牌
2019/07/24 全球购物
军训教官感言
2014/03/02 职场文书
办公自动化毕业生求职信
2014/03/09 职场文书
任长霞观后感
2015/06/16 职场文书
学困生帮扶工作总结
2015/08/13 职场文书