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

0

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']);

模块组件

对象

名称 描述
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,中文表述不清之处请点击链接查看英文描述。

测试框架

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

参考

你可能感兴趣的

载入中...