2017-01-25 7 views
9

Ich habe eine Probe Route wie folgt aus:Angular JS Testing mit Karma Jasmin

angular 
     .module('appRouter',['ui.router']) 
     .config(function($stateProvider,$urlRouterProvider){ 
      $stateProvider 
       ..... 
       ..... 
       .state('settings.account',{ 
        url:'/account', 
        templateUrl:'templates/account.html', 
        controller:function(resolveData){ 
         console.log(resolveData); 
        }, 
        resolve:{ 
         resolveData : function($http){ 
          var root = 'https://jsonplaceholder.typicode.com'; 
          return $http.get(root+'/posts/1').then(function(response){ 

           return response.data; 
          }); 
         } 
        } 
       }); 

      ..... 

Es ist nur eine Test-URL, wo ich Online-Probe JSON-Daten

https://jsonplaceholder.typicode.com/posts/1

bekommen

Ich wollte den Zustand testen.

beforeEach(function(){ 
     module('appRouter'); 
    }); 

    beforeEach(inject(function(_$rootScope_,_$injector_,_$state_,_$httpBackend_,$templateCache){ 
     $rootScope = _$rootScope_; 
     $state = _$state_; 
     $injector = _$injector_; 
     $httpBackend = _$httpBackend_; 
     $templateCache.put('templates/account.html',''); 
    })); 

    it('should resolve "resolveData"',function(){ 
     const state = $state.get('settings.account'); 
     const resolveFn = state.resolve.resolveData; 

       $httpBackend.whenGET('https://jsonplaceholder.typicode.com/posts/1').respond(function(){ 
     return [ 
      200,{ 
       "userId": 1, 
       "id": 1, 
       "title": "...", 
       "body": "..." 
     }] 
    }); 

    $httpBackend.expectGET('https://jsonplaceholder.typicode.com/posts/1'); 

    $injector.invoke(resolveFn); 

    $httpBackend.flush(); 

    expect($injector.annotate(resolveFn)).toEqual(['$http']); 

    console.log(angular.mock.dump($scope)); 

    expect($scope.resolveData).toEqual({ 
     "userId": 1, 
     "id": 1, 
     "title": "...", 
     "body": "..." 
    }); 

Aber das schlägt fehl. Sprichwort

1) should resolve "resolveData" 
    UI Routerer Config For Account 
    Expected undefined to equal Object({ userId: 1, id: 1, title: '...', body: '...' }). 
    at Object.<anonymous> (test/controllers/main-controller-spec.js:114:36) 

Was mache ich falsch?

UPDATE

console.log(angular.mock.dump($scope)); gibt die folgende

enter image description here

Bitte helfen.

+0

Ich denke, es gab Wert in der ursprünglichen Frage, die Sie (vor der Bearbeitung) mit dem ursprünglichen Fehler gestellt haben. Diese neue Fehlermeldung sollte eine neue Frage sein.Sie sind zwei getrennte Probleme, die einzeln behandelt werden sollten. –

+2

Ich verstehe nicht genau, was Sie hier testen möchten. Ich meine: Tests sollten prüfen, ob Ihr Code eine Logik ausführt, die Sie erwarten. Aber stattdessen (soweit ich sehen kann) prüft Ihr Test, ob Sie einige JSON aus einer Anfrage erhalten können. Das ist nicht der Zweck von Tests. Vielleicht ist es ein guter Zweck der serverseitigen Tests. Stattdessen schlage ich vor, dass Sie einen Dienst innerhalb der "Lösung" aufrufen (ersetzen Sie einfach den $ http-Aufruf durch Injizieren eines Dienstes und rufen Sie eine seiner Methoden auf), jetzt können Sie den ifs-Dienst als Antwort auf "state.go" aufrufen und wenn der Dienst mit korrekten Parametern aufgerufen wird. (Das ist meine Meinung) – happyZZR1400

Antwort

1
should resolve "resolveData" 
UI Routerer Config For Account 
TypeError: Cannot read property 'get' of undefined 
at resolveData (app/appRouter.js:25:41) 
at Object.<anonymous> (test/controllers/main-controller-spec.js:97:9) 

dieses Problem lösen Sie $http zu resolveData Funktion übergeben sollte.

resolveFn($http); 

aber es ist besser Tests wie Original-Fehler this

+0

Sorry, aber das sagt 'ReferenceError: $ http ist nicht definiert. Bitte sehen Sie es sich an. – StrugglingCoder

+0

Ja, Sie müssen $ http in Ihrem Test injizieren – fingerpich

+0

Ich habe das getan. Und es hat versagt, den Fehler zu sagen, den ich erwähnte. Wie zu überwinden? – StrugglingCoder

2

zu schreiben:

should resolve "resolveData" 
UI Routerer Config For Account 
TypeError: Cannot read property 'get' of undefined 
    at resolveData (app/appRouter.js:25:41) 
    at Object.<anonymous> (test/controllers/main-controller-spec.js:97:9) 

What am I doing wrong?

Sie rufen resolveFn() in Ihrem Gerät zu testen. Die Funktion wurde so definiert, dass sie den Dienst $http erfordert und dieser Anruf den Dienst $http (wie in fingerpich erwähnt) nicht besteht.

Um dies zu korrigieren, lassen Sie angular die Abhängigkeitsinjektion mithilfe von verarbeiten.

Sehen Sie dies in Aktion mit einer plunk. Beachten Sie, dass der Test aus einem anderen Grund fehlschlägt. Aber, (wenn ich die Regeln richtig verstehe), das ist ein anderes Thema sollte mit einer anderen Frage beantwortet werden (wenn Sie mehr Hilfe benötigen).

Eine Randnotiz: Wenn der Standort (nicht der Komponententest) in einem Browser geöffnet wird, würde ich erwarten, dass es funktioniert, weil Winkel die $http Abhängigkeit in die Funktion einfügt, die resolveData zugewiesen wird.

Schauen Sie sich answer an, die auch auf das von fingerpich erwähnte Blog verweist.

Hier ist ein Blog, den ich hilfreich fand, wenn Sie über unit testing AngularJS lernen.

+0

Ich habe das gleiche versucht, aber es hat nicht für mich geklappt. Er sagte 'Expected undefined to equal Object ({userId: 1, id: 1, title: ...' wenn ich '$ scope.resolveData' erwarte, um die JSON-Daten zu finden. Was mache ich falsch? – StrugglingCoder

+0

Erhalten Sie immer noch der Fehler 'sollte" resolveData "auflösen ... TypeError: Kann Eigenschaft 'get' von undefined nicht lesen ...'? Wenn nicht, sollte Ihre ursprüngliche Frage gelöst werden und der Fehler, der im Kommentar erwähnt wird, würde unter eine neue Frage fallen. –

+0

Vielleicht hilft ein kleiner Anstoß mit dem neuen Fehler: Fügen Sie 'console.log (angle.mock.dump ($ scope));' vor der 'expect'-Anweisung am Ende des Tests hinzu. Danach checken Sie wie' .then() 'wird mit dem' $ injector.invoke() 'Aufruf [hier] verwendet (http://stackoverflow.com/questions/29080657/testing-ui-router-stateprovider-resolve-values/29128751#29128751) (Ich habe diesen Link in meine Antwort eingefügt.) –

Verwandte Themen