Unit test Controller AngularJS con $ httpBackend

Question

Per la vita di me non riesco a ottenere $ httpBackend per funzionare su un controller che esegue una richiesta di $ http. Ho provato per ore ora =)

Ho ridotto questo alla forma più semplice che posso qui sotto. Il test viene superato se

• commento alla richiesta $ http.get() nel controller
• commento il "httpMock.flush()" nel test
• e cambiamento "maiale" e " cane "per abbinare

Cioè, è un test di lavoro valido e app.

Se lo rimetto in, ottengo l'errore indicato nella parte inferiore.

---

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

}); 

E questo è l'errore che ottengo nella shell:

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

Ci sono un paio di problemi nel codice di prova:

1. Il controller viene creato prima il httpMock è configurato per rispondere con pig. La chiamata expectGet deve essere eseguita prima di istanziare il controller.
2. Le httpMock bisogno di lavare la richiesta
3. Il httMock.when è inutile fino a quando si ha la expectGet

esempio di lavoro: 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"); 
    }); 
});