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

模塊組件

對象

名稱	描述
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);

參考

• 官方API：ngMock

• ngMock:$httpBackend

• AngularJS tests with an http mock

• 單元測試—AngularJS學習筆記