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进修笔记