Angular-mock之使用$httpBackend服务测试$http

时间 2019-12-07

标签 angular mock 使用 httpbackend 服务测试 http 栏目 AngularJS 繁體版

原文原文链接

Angular-mock简介

Angular-mock模块为angular单元测试提供模块定义、加载、注入等支持。辅助Karma、Jasmine等JS测试工具来模拟angular方法，测试angular应用。除此以外，Angular-mock还扩展了ng的多个核心服务，使之能够被测试代码以同步的方式进行审查和控制。angularjs

安装

在HTML中引用：npm

<script src="angular.js">
<script src="angular-mocks.js">

还能够用如下方式下载或引用：json

Bower后端
```
bower install angular-mocks@X.Y.Z
```
code.angularjs.orgapi
```
"//code.angularjs.org/X.Y.Z/angular-mocks.js"
```
X、Y、Z为你须要的AngularJS版本号。数组

而后在你的angular应用中启用ngMock模块：浏览器

angular.module('app', ['ngMock']);

模块组件

对象

名称	描述
angular.mock	'angular-mocks.js'的命名空间，其中包含测试代码。

服务

名称	描述
$exceptionHandler	经过$exceptionHandler模拟实现重抛或记录错误信息。查看$exceptionHandlerProvider获取配置信息。
$log	模拟实现 $log 收集全部数组中已记录的日志信息(每个记录等级一个数组)。这些数组被做为`logs`属性可每一个具体等级的log方法获取。例：对于等级`error`数组可被 $log.error.logs获取。
$interval	模拟实现$interval服务。
$httpBackend	为使用了$http service的应用提供单元测试的伪HTTP后台。
$timeout	该服务仅是一个简单的装饰器，为$timeout 服务添加了"flush"和"verifyNoPendingTasks" 方法。
$controller	为$controller提供了额外的bindings参数，这在测试使用了 bindToController 指令的控制器时颇有用处。

以上介绍信息来自官方api，中文表述不清之处请点击连接查看英文描述。app

测试框架

Karma

安装

npm install -g karma

配置

在你想要测试的项目目录下建立config框架

karma init karma.config.js

使用该命令将出现问答式设置，包括使用框架选择、包含文件/文件夹、测试监听端口、测试用浏览器、是否使用Require.js等。根据提示进行设置便可。ide

$http测试示例

$http service示例

该示例提供了两个测试，一个简单的$http服务及一个简单的字符串匹配测试。

var app = angular.module('Application', []);

app.controller('MainCtrl', function($scope, $http) {
    $http.get('Users/users.json').success(function(data){
        $scope.users = data;
    });
    $scope.text = 'Hello World!';
});

将该文件保存为js/demo.js，测试时需按顺序将测试项目文件及依赖文件引入config.js。

使用$httpBackend设置伪后台

针对上面这个示例，测试的时候，咱们不须要真实的发送HTTP请求来获取数据。若是能够只测试Service的逻辑，当发送请求时，咱们将这个请求拦截下来，而后返回一个预约义好的数据便可：

describe('MainCtrl', function() {
    //咱们会在测试中使用这个scope
    var scope, $httpBackend;

    //模拟咱们的Application模块并注入咱们本身的依赖
    beforeEach(angular.mock.module('Application'));

    //模拟Controller，而且包含 $rootScope 和 $controller
    beforeEach(angular.mock.inject(function($rootScope, $controller, _$httpBackend_) {
        //设置$httpBackend冲刷$http请求
        $httpBackend = _$httpBackend_;
        $httpBackend.when('GET', 'Users/users.json').respond([{
            id: 1,
            name: 'Bob'
        }, {
            id: 2,
            name: 'Jane'
        }]);
        //建立一个空的 scope
        scope = $rootScope.$new();

        //声明 Controller而且注入已建立的空的 scope
        $controller('MainCtrl', {
            $scope: scope
        });
    }));

    // 测试从这里开始
    it('should have variable text = "Hello World!"', function() {
        expect(scope.text).toBe('Hello World!');
    });
    it('should fetch list of users', function() {
        $httpBackend.flush();
        expect(scope.users.length).toBe(2);
        expect(scope.users[0].name).toBe('Bob');
        //输出结果以方便查看
        for(var i=0;i<scope.users.length;i++){
            console.log(scope.users[i].name);
        }
    });
});

以上示例中，可使用$httpBackend.when和$httpBackend.expect提早设置请求的伪数据。最后在请求后执行$httpBackend.flush就会当即执行完成http请求。

将测试文件保存在test/demo-test.js中。

接下来在项目目录中找到设置好的config.js文件，在files数组中添加如下引用：

files: [
  'ng/angular.js',
  'ng/angular-mocks.js',
  'js/demo.js',
  'test/demo-test.js'
],

为保证测试与项目代码分离，我建议将配置文件及测试代码单独存放在test目录，项目打包时可直接删除。

测试跑起来

写好测试后，使用

karma start config.js

让测试跑起来。karma默认端口9876，能够在config.js中设置。运行命令后，设置过的浏览器会自动运行，点击DEBUG按钮便可运行测试代码。

打开console，能够看到测试已经成功输出了。

$httpBackend经常使用方法

when

新建一个后端定义（backend definition）。

when(method, url, [data], [headers]);

expect

新建一个请求指望（request expectation）。

expect(method, url, [data], [headers]);

when和expect都须要4个参数method, url, data, headers, 其中后2个参数可选。

method表示http方法注意都须要是大写(GET, PUT…);<br/>
url请求的url能够为正则或者字符串；
data请求时带的参数，
headers请求时设置的header。

若是这些参数都提供了，那只有当这些参数都匹配的时候才会正确的匹配请求。when和expect都会返回一个带respond方法的对象。respond方法有3个参数status，data，headers经过设置这3个参数就能够伪造返回的响应数据了。

区别

$httpBackend.when与$httpBackend.expect的区别在于：$httpBackend.expect的伪后台只能被调用一次(调用一次后会被清除)，第二次调用就会报错，并且$httpBackend.resetExpectations能够移除全部的expect而对when没有影响。

快捷方法

when和expect都有对应的快捷方法whenGET, whenPOST,whenHEAD, whenJSONP, whenDELETE, whenPUT; expect也同样。

//when
whenGET(url, [headers]);
whenHEAD(url, [headers]);
whenDELETE(url, [headers]);
whenPOST(url, [data], [headers]);
whenPUT(url, [data], [headers]);
whenJSONP(url);
//expect
expectGET(url, [headers]);
expectHEAD(url, [headers]);
expectDELETE(url, [headers]);
expectPOST(url, [data], [headers]);
expectPUT(url, [data], [headers]);
expectPATCH(url, [data], [headers]);
expectJSONP(url);