黄兵的个人博客

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

Angular-mock简介

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

安装

在HTML中引用：

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

还可以用以下方式下载或引用：

• Bower

  
      bower install angular-mocks@X.Y.Z

• code.angularjs.org

  "//code.angularjs.org/X.Y.Z/angular-mocks.js"

  X、Y、Z为你需要的AngularJS版本号。

然后在你的angular应用中启用ngMock模块：

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

模块组件

对象

服务

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

测试框架

Karma

安装

npm install -g karma

配置

在你想要测试的项目目录下创建config

karma init karma.config.js

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

$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);

参考

• 官方API：ngMock

• ngMock:$httpBackend

• AngularJS tests with an http mock

• 单元测试—AngularJS学习笔记

本文转载自：Angular-mock之使用$httpBackend服务测试$http