对Angular.js Controller如何进行单元测试-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

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

Dec 09, 2016 am 09:33 AM

angular.js

一、写个简单的Angular App

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

代码如下：

&lt;html&gt;
 &lt;head&gt;
 &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.angularjs.org/1.4.0-rc.2/angular.min.js&quot;&gt;&lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;!-- This div element corresponds to the CalculatorController we created via the JavaScript--&gt;
 &lt;div ng-controller=&quot;CalculatorController&quot;&gt;
  &lt;input ng-model=&quot;x&quot; type=&quot;number&quot;&gt;
  &lt;input ng-model=&quot;y&quot; type=&quot;number&quot;&gt;
  &lt;strong&gt;{{z}}&lt;/strong&gt;
  &lt;!-- the value for ngClick maps to the sum function within the controller body --&gt;
  &lt;input type=&quot;button&quot; ng-click=&quot;sum()&quot; value=&quot;+&quot;&gt;
 &lt;/div&gt;
 &lt;/body&gt;
 &lt;script type=&quot;text/javascript&quot;&gt;
  
 // Creates a new module called &#39;calculatorApp&#39;
 angular.module(&#39;calculatorApp&#39;, []);
  
 // Registers a controller to our module &#39;calculatorApp&#39;.
 angular.module(&#39;calculatorApp&#39;).controller(&#39;CalculatorController&#39;, 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, [&#39;calculatorApp&#39;]);
 });
  
 &lt;/script&gt;
&lt;/html&gt;

Salin selepas log masuk

二、简单说说里面涉及的一些基本概念:

创建一个 module

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

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

Salin selepas log masuk

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

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

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

Salin selepas log masuk

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

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

Salin selepas log masuk

关于module的更多信息 https://docs.angularjs.org/api/ng/function/angular.module

2.给module添加controller

接着我们给angular module的示例添加一个controller

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

Salin selepas log masuk

控制器主要负责业务逻辑和视图绑定，$scope者是视图的控制器直线的信使。

3.连接视图中的元素

在下面 HTML 中，我们需要计算input里面的值，而这些都包含在这个controller的div中。

&lt;div ng-controller=&quot;CalculatorController&quot;&gt;
 &lt;input ng-model=&quot;x&quot; type=&quot;number&quot;&gt;
 &lt;input ng-model=&quot;y&quot; type=&quot;number&quot;&gt;
 &lt;strong&gt;{{z}}&lt;/strong&gt;
 &lt;!-- the value for ngClick maps to the sum function within the controller body --&gt;
 &lt;input type=&quot;button&quot; ng-click=&quot;sum()&quot; value=&quot;+&quot;&gt;
&lt;/div&gt;

Salin selepas log masuk

input 中的ng-model绑定的的值及时$scope上定义的比如$scope.x,我们还在button元素使用ng-click绑定了$scope.sum方法。

三、添加测试

接下来终于到了我们的主题，添加一些单元测试给controller,我们忽略代码中html部分，主要集中在controller的代码中。

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

Salin selepas log masuk

为了测试 controller，我们还得提及下面几点？ + 如何创建一个controller实例 + 如何get/set一个对象的属性 + 如何调用$scope里面的函数

describe(&#39;calculator&#39;, function () {
  
 beforeEach(angular.mock.module(&#39;calculatorApp&#39;));
  
 var $controller;
  
 beforeEach(angular.mock.inject(function(_$controller_){
 $controller = _$controller_;
 }));
  
 describe(&#39;sum&#39;, function () {
 it(&#39;1 + 1 should equal 2&#39;, function () {
  var $scope = {};
  var controller = $controller(&#39;CalculatorController&#39;, { $scope: $scope });
  $scope.x = 1;
  $scope.y = 2;
  $scope.sum();
  expect($scope.z).toBe(3);
 });
 });
  
});

Salin selepas log masuk

开始前我们需要引入ngMock,我们在测试的代码加入angular.mock

,ngMock模块提供了一种机制进行诸如以及虚拟的service进行单元测试。

四、如何获取controller的实例

使用ngMock我们可以注册一个calculator app实例。

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

Salin selepas log masuk

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

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

Salin selepas log masuk

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

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

Salin selepas log masuk

五、如何get/set一个对象的属性

在上篇代码中我们已经可以获取一个controller的实例，在括号的第二个参数实际是controller自己，我们的controller只有一个参数 $scope对象

1	`function` `CalculatorController($scope) { ... }`

Salin selepas log masuk

在我们的测试中$scope代表的就是一个简单的JavaScript对象。

var $scope = {};
var controller = $controller(&#39;CalculatorController&#39;, { $scope: $scope });
// set some properties on the scope object
$scope.x = 1;
$scope.y = 2;

Salin selepas log masuk

我们设置x,y的值，模拟刚才的gif中的所展示的一样。我们同意也可以读取对象中的属性，就像下面这段测试的断言：

1	`expect($scope.z).toBe(3);`

Salin selepas log masuk

六、如何调用$scope里面的函数

最后一件事情就是我们如何模拟用户的点击，就像我们在绝大多数JS中使用的一致，，其实就是简单的调用函数就行，

1	`$scope.sum();`

Salin selepas log masuk

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn