Kiểm tra đơn vị Bộ điều khiển AngularJS với $ httpBackend

Question

Đối với cuộc sống của tôi, tôi không thể nhận được $ httpBackend để làm việc trên bộ điều khiển thực hiện yêu cầu nhận $ http. Tôi đã thử giờ này =)

Tôi đã giảm số này xuống dạng đơn giản nhất mà tôi có thể dưới đây. Xét nghiệm này đi nếu tôi

• bình luận ra các yêu cầu $ http.get() trong bộ điều khiển
• bình luận ra "httpMock.flush()" trong các thử nghiệm
• và thay đổi "lợn" và " con chó "để đối sánh

Đó là, đây là một thử nghiệm và ứng dụng hoạt động hợp lệ.

Nếu tôi đặt nó trở lại, tôi gặp lỗi hiển thị ở dưới cùng.

---

app/js/app.js

// Declare a module which depends on filters and services. 
var myApp = angular 
    .module('myApp', ['ngRoute', 'myApp.filters', 'myApp.services', 
           'myApp.directives']) 
    .config(['$routeProvider' , function($routeProvider) { 

    $routeProvider 
     .when("/dashboard", { 
     templateUrl: "partials/dashboard.html", 
     controller: cDashboard 
     }) 

     .otherwise({redirectTo: "/dashboard"}); 
    }]); 

// Pre-define our main namespace modules. 
angular.module('myApp.directives' , []); 
angular.module('myApp.filters' , []); 
angular.module('myApp.services' , []); 
angular.module('myApp.controllers', []); 

app/js/controller.js

function cDashboard ($scope, $http) { 
    $scope.data = "dog"; 

    // Fetch the actual data. 
    $http.get("/data") 
    .success(function (data) { $scope.data = data }) 
    .error(function() {}); 
} 

cDashboard.$inject = [ '$scope', '$http' ]; 

test/unit/controllerSpec.js

describe('cDashboard', function(){ 
    var scope, ctrl, httpMock; 

    beforeEach(inject(function ($rootScope, $controller, $http, $httpBackend) { 
    scope = $rootScope.$new(); 
    ctrl = $controller('cDashboard', {$scope: scope}); 

    httpMock = $httpBackend; 
    httpMock.when("GET", "/data").respond("pig"); 
    })); 

    it("should get 'pig' from '/data'", function() { 
    httpMock.expectGET("/data").respond("pig"); 
    expect(scope.data).toBe("pig"); 
    }); 

}); 

Và đây là lỗi tôi nhận được trong vỏ:

INFO [watcher]: Changed file "/home/myApp/test/unit/controller/cDashboard.js". 
Chrome 26.0 (Linux) cDashboard should get 'pig' from '/data' FAILED 
    Error: No pending request to flush ! 
     at Error (<anonymous>) 
     at Function.$httpBackend.flush (/home/myApp/test/lib/angular/angular-mocks.js:1171:34) 
     at null.<anonymous> (/home/myApp/test/unit/controller/cDashboard.js:15:18) 
Chrome 26.0 (Linux): Executed 1 of 1 (1 FAILED) (0.326 secs/0.008 secs) 

Answer 1

Có một vài vấn đề trong mã thử nghiệm của bạn:

1. Bộ điều khiển được tạo ra trước các httpMock được cấu hình để trả lời với pig. Cuộc gọi expectGet sẽ xảy ra trước khi khởi tạo bộ điều khiển.
2. Các httpMock nhu cầu để tuôn ra những yêu cầu
3. Các httMock.when là không cần thiết, miễn là bạn có expectGet

dụ làm việc: http://plnkr.co/edit/lUkDMrsy1KJNai3ndtng?p=preview

describe('cDashboard', function(){ 
    var scope, controllerService, httpMock; 

    beforeEach(inject(function ($rootScope, $controller, $httpBackend) { 
    scope = $rootScope.$new(); 
    controllerService = $controller; 
    httpMock = $httpBackend; 
    })); 

    it("should get 'pig' from '/data'", function() { 
    httpMock.expectGET("/data").respond("pig"); 
    ctrl = controllerService('cDashboard', {$scope: scope}); 
    httpMock.flush(); 
    expect(scope.data).toBe("pig"); 
    }); 
});