[译] 如何对 Angular Controller 进行单元测试

aboutU 发布于2019-08-21 10:53 / 2875人阅读

摘要：原文地址上面一篇文章简单介绍了如何使用进行的单元测试我们用了一段简单的代码进行计算的测试。添加测试接下来终于到了我们的主题，添加一些单元测试给我们忽略代码中部分，主要集中在的代码中。

原文地址：http://www.bradoncode.com/blog/2015/05/17/angularjs-testing-controller/
@Bradley Braithwaite

上面一篇文章简单介绍了如何使用 Jasmine 进行JavaScript的单元测试

我们用了一段简单的代码进行计算的测试。

接下来我们将其延伸到我们对Angular Controller的测试中。如果你不太了解angular也没关系，下文也会提及关于Angular的一些知识。

写个简单的Angular App

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

代码如下：

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

创建一个 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进行单元测试，但是这是建立在不停的刷新浏览器基础上，
而这些流畅可以再好，也是我们后面的一篇文章如何使用karam进行 angular 测试 (翻译中...)的所要说的。

完整代码:https://github.com/JackPu/angular-test-tutorial/blob/master/angular-test.html

云服务器 GPU云服务器如何对数据进行统计如何对数据进行分析如何对指针进行初始化如何对数据进行统计分析

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86367.html

[译]使用karma进行angular测试

摘要：前面我们写过了的一篇文章开始对进行单元测试而提供了非常有用的工具去帮助我们进行的测试。接下来，会增加一些内容写测试用例接下来我们可以开始进行测试了，我们在命令行工具里输入下面的命令我们将下面的代码粘贴到中去。 showImg(https://segmentfault.com/img/bVx65M); 紧随前文如何对Angular Controller进行单元测试,但是我们也提到了前文工...

Tony 2019-08-19 18:30 评论0 收藏0
[译] 通过 Webpack 实现 AngularJS 的延迟加载

摘要：虽然这些东西都是非常棒的，但是它们都不是实现延迟加载所必需的东西。我们通过的配置对象中的属性就可以实现延迟加载。单元测试的技巧把改成是全局依赖并不意味着你应该从控制器中删除它。因为在单元测试中，你只会加载这一个控制器而非整个应用模块。原文链接：http://michalzalecki.com/lazy-load-angularjs-with-webpack/ 随着你的单页应用扩大，...

Zhuxy 2019-08-19 17:42 评论0 收藏0
[译]开始对Angular App进行单元测试（1）

摘要：小结我们初步了解了使用来进行测试，这样有利于我们接下来去理解使用进行单元测试翻译中 showImg(https://segmentfault.com/img/bVxI9p); 这是一些列文章，陆续翻译整理中... 原文地址:http://www.bradoncode.com/blog/2015/05/12/angularjs-testing-getting-started/ @ Bra...

Tikitoo 2019-08-19 18:27 评论0 收藏0
[译] 如何使用 TypeScript 编写 AngularJS 的 Controller？

摘要：在这篇文章里，我将介绍如何使用去编写的。一个新的子将被创建并作为变量注入到的构造函数当中。当使用一个构造函数就可以很好地解决问题，因为函数提升起到了很重要的作用。自定义接口类型接着就可以在构造器使用参数获得强类型和智能支持了。原文链接 : How to write AngularJS controller using TypeScript?原文作者 : Siddharth Pande...

alphahans 2019-08-21 14:14 评论0 收藏0
[译] 使用angularjs创建一个CRUD应用

摘要：我使用的是为这个示例应用设计接口。发起一个请求体为的请求。目前只有一个可以设置。创建一个的应用为了加强的概念我们为电影爱好者创建一个应用。我已经使用和创建了一个后端服务。创建每一个路由都对应一个。原文地址：https://www.sitepoint.com/creating-crud-app-minutes-angulars-resource 大量的单页应用都有CRUD操作。如果你使...

missonce 2019-08-20 11:21 评论0 收藏0