时间:2021-05-18
一、写个简单的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进行单元测试,但是这是建立在不停的刷新浏览器基础上, 而这些流畅可以再好,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作带来一定的帮助,如果有疑问大家可以留言交流。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
前言单元测试对我们的代码质量非常重要。很多同学都会对业务逻辑或者工具方法写测试用例,但是往往忽略了对Controller层写单元测试。我所在的公司没见过一个对C
本文主要和大家分享如何在Android应用开发过程中如何进行单元测试,个人在做项目的过程中,觉得单元测试很有必要,以保证我们编写程序的正确性。下面我们先大概了解
为什么要进行单元测试?单元测试保证局部代码的质量单元测试改良项目代码的整体结构单元测试降低测试、维护升级的成本单元测试使开发过程适应频繁变化的需求单元测试有助于
在进行使用的eclipse的进行开发的代码中,必然就会需要进行单元测试,在单元测试的情况提供较多的框架单元测试,例如使用junit单元测试,而在国外进行开发较好
1、前言“不会写单元测试的程序员不是合格的程序员,不写单元测试的程序员不是优秀的工程师。”那么问题来了,什么是单元测试,如何做单元测试。2、单元测试2.1单元测