一、写个简单的Angular App

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

代码如下：

超文本标记语言头脚本类型=' text/JavaScript ' src=' http :https://代码。安格拉js。org/14 .0-RC。2/棱角分明。量滴js /脚本/头体！-这个差异元素对应于我们通过JavaScript-div-ng-控制器创建的计算器控制器='计算器控制器'输入ng-model='x' type='number '输入ng-model=' y ' type=' number ' strong { { z } }/strong！ngClick的值映射到控制器主体内的总额函数-输入类型='button' ng-click='sum()'值=' '/div/主体脚本类型='text/javascript' /创建一个名为calculatorApp ' angular。模块(' calculatorApp '，[])的新模块；//向我们的模块"计算器应用程序"注册控制器角度模块(calculatorApp).控制器('计算控制器'，函数calculator controller($ scope){ $ scope。z=0；$ scope。sum=function(){ $ scope。z=$ scope。x $范围。y；};});//加载app angular.element(文档)。ready(function(){ angular。bootstrap(文档，[' calculatorApp '])；});/script/html二、简单说说里面涉及的一些基本概念：

创建一个组件

什么是角度模块？它是用于创建，回收模块的地方。我们创建一个名为calculatorApp新的模块，我们并将组件添加到这个模块里。

angular.module('calculatorApp '，[])；关于第二个参数？第二个参数必须的，表明我们正在创造一个新的模块。如果需要我们的应用程序有其他的依赖，我们可以将它们['ngResource '，' ngCookies']传入进去。第二个参数的存在的表示这是一个请求返回的模块的实例。

从概念上讲，它本意是类似下面的意思：

* angular.module.createInstance(名称，要求);* angular.module.getInstance(名称)然而实际我们是这样写的：

* angular.module('calculatorApp '，[])；//即创建实例*角度。模块(' calculatorApp ')；//即getInstance关于组件的更多信息https://docs.angularjs.org/api/ng/function/angular.module

2.给组件添加控制器

接着我们给角度模块的示例添加一个控制器

角度模块(calculatorApp).控制器('计算控制器'，函数calculator controller($ scope){ $ scope。z=0；$ scope。sum=function(){ $ scope。z=$ scope。x $范围。y；};});控制器主要负责业务逻辑和视图绑定，$scope者是视图的控制器直线的信使。

3.连接视图中的元素

在下面超文本标记语言中，我们需要计算投入里面的值，而这些都包含在这个控制器的差异中。

div ng-controller=' calculator controller '输入ng-model='x' type='number '输入ng-model=' y ' type=' number ' strong { { z } }/strong！ngClick的值映射到控制器主体内的总额函数-输入类型='button' ng-click='sum()'值=' '/div输入中的尼日利亚模型绑定的的值及时$范围上定义的比如$scope.x，我们还在按钮元素使用尼日利亚点击绑定了$scope.sum方法。

三、添加测试

接下来终于到了我们的主题，添加一些单元测试给控制器，我们忽略代码中超文本标记语言部分，主要集中在控制器的代码中。

角度模块(calculatorApp).控制器('计算控制器'，函数calculator controller($ scope){ $ scope。z=0；$ scope。sum=function(){ $ scope。z=$ scope。x $范围。y；};});为了测试控制器，我们还得提及下面几点？如何创建一个控制器实例如何获取/设置一个对象的属性如何调用$范围里面的函数

description(' calculator '，function(){ before each(angular . mock . module(' calculatorApp ')))；var $控制器；before EACH(angular . mock . inject(function(_ $ controller _){ $ controller=_ $ controller _；}));description(' sum '，function () { it('1 1应该等于2 '，function(){ var $ scope={ }；var controller=$ controller(' CalculatorController '，{ $ scope : $ scope })；$ scope . x=1；$ scope . y=2；$ scope . sum()；expect($scope.z)。托比(3)；});});});在开始之前，我们需要引入ngMock，并在测试代码中添加angular.mock

，ngMock模块提供了一种用于单元测试的机制，如虚拟服务。

第四，如何获取控制器的实例

使用ngMock，我们可以注册一个计算器应用的实例。

beforeach(angular . mock . module(' calculatorApp '))；一旦calculatorApp初始化，我们就可以使用inject函数，这样可以解决控制器的引用问题。

before EACH(angular . mock . inject(function(_ $ controller _){ $ controller=_ $ controller _；}));一旦加载了应用程序，我们就使用inject函数，$controller服务可以获得CalculatorController的实例。

var controller=$ controller(' CalculatorController '，{ $ scope : $ scope })；五、如何获取/设置对象的属性

在前面的代码中，我们已经可以获得控制器的一个实例。括号中的第二个参数实际上是控制器本身，我们的控制器只有一个参数$scope对象

函数计算器控制器($ scope){ 0.}在我们的测试中，$ scope表示一个简单的JavaScript对象。

var $ scope={ }；var controller=$ controller(' CalculatorController '，{ $ scope : $ scope })；//在scope对象$scope.x=1上设置一些属性；$ scope . y=2；我们设置x和y的值，类似于刚才gif中显示的值。我们同意也可以读取对象中的属性，就像下面测试中的断言一样：

expect($scope.z)。托比(3)；第六，如何在$scope中调用函数

最后一件事是如何模拟用户的点击，就像我们在大多数JS中使用的一样，就是简单地调用函数。

$ scope . sum()；

摘要

本文简单而基本地介绍了如何对角度控制器进行单元测试，但这是基于不断刷新浏览器，这些流畅性可以更好。以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助。有问题可以留言交流。