nicht einfach AngularJS Jasmine Test bekommen kann mit dem Chutzpah

Question

ich eine sehr einfache jasmine Unit-Test zu durchlaufen haben, die eine einfache Operation an einem AngularJS Controller Targets zu testen, wie folgt:

/// <reference path="../src/jasmine.js"/> 
/// <reference path="../../Scripts/angular.js"/> 
/// <reference path="../../Scripts/angular-mocks.js"/> 
/// <reference path="../../Scripts/angular-ui-router.js"/> 
/// <reference path="../../Scripts/angular-route.js"/> 
/// <reference path="../../Scripts/angular-resource.js"/> 
/// <reference path="../../Scripts/angular-ui/ui-bootstrap.js"/> 
/// <reference path="../../app/app.js"/> 
/// <reference path="../../app/controllers/myController.js"/> 

describe("my Controller", function() { 

    var scope, ctrl, vm; 

    beforeEach(module("app")); 

    beforeEach(inject(function ($controller, $rootScope) { 
     scope = $rootScope.$new(); 
     ctrl = $controller(MyController, { $scope: scope }); 
     vm = ctrl; 
    })); 

    it("sets the title", function() {   
     expect(vm.title).toBe("This is the title"); 
    }); 


}); 

den obigen Test zu beginnen geht, wenn eine der folgenden verwendet:

• öffnen SpecRunner.html, die die gleichen Verweise enthält und zeigt eine bestanden Komponententest im jasmine Standardtestläufer
• Test ohne Änderung läuft, wenn er über ReSharper Testläufer läuft (dieses Werkzeug ist nicht wichtig anderes, als die Testdurchläufe unter Verwendung eines anderen Testläufers zu zeigen; der Test ist nicht der Täter)

jedoch egal, wann immer ich einen der folgenden mit Chutzpah der Test nicht bestanden:

• Run aus dem Zeilenbefehl chutzpah.console.exe
• Verwenden rechts- mit Menü klicken, öffnet in VS.NET zu Run JS-Tests

Jedesmal, wenn der folgende Fehler gegeben:

Error: [$injector:modulerr] Failed to instantiate module app due to: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

So ist dies ein sehr typischer Fehler, wenn die AngularJS Referenzen nicht enthalten sind. Wie Sie jedoch oben sehen können, sind sie sicher enthalten und die anderen Testläufer sehen sie und die Testdurchgänge. Der Fehler ist identisch, unabhängig davon, ob ich den Komponententest über die Befehlszeile ausfühle oder ob ich die Ausgabe in VS.NET betrachte.

Ich habe sogar den /trace Parameter von der Befehlszeile eingeschaltet und die Datei chutzpah.log angesehen. Es ist sicher genug, die angularen Referenzdateien zu finden, so dass ich nicht sicher bin, warum der Test fehlschlägt.

Ich habe eine Menge Posts rund um diese gesehen und die Lösung ist immer, dass die Referenzen fehlen. Das ist hier nicht der Fall und ich stecke fest. Was fehlt mir, um diesen Test mit Chutzpah bestehen zu lassen?

Answer 1

Ich glaube, durch gründliche Tests habe ich die Ursache festgestellt. Das Problem ist höchstwahrscheinlich, dass ich ES6 Klassen in meinen Angular.js Dateien verwende, die in meinen Tests verwendet werden.

Die Frage ist PhantomJS welche Chutzpah Anwendungen macht nicht Unterstützung ES6 und die class Schlüsselwort und somit versagt es (this zur Validierung sehen). Ich konnte in einer nicht Angular Probe reproduzieren. Ich benutzte einen altmodischen ES5 Stil IIFE und den einfachen Test bestanden jetzt. Deshalb funktionierte es in Chrome und in ReSharper, die Chrome als Standardtestbrowser verwendet und Chrome unterstützt das ES6class Schlüsselwort. Wenn ich ReSharperPhantomJS statt Chrome mache, dann scheitert mein einfacher Test auch.

Das Stammproblem scheint PhantomJS und seine fehlende Unterstützung für ES6 Syntax zu sein.

Hier ist ein Blogbeitrag, den ich über meine Ergebnisse geschrieben habe, nachdem ich mir für ein paar Wochen die Haare rausgezogen habe. Es erklärt im Detail über die Probleme mit nicht-ES5 Beschwerde Schreiben von Code und die Verwendung dieses mit Chuzpe und PhantomJS:

Chutzpah and non-ES5 JavaScript for Unit Testing is Problematic

Answer 2

Ich empfehle die Verwendung einer chutzpah.json settings file für eckige Projekte. Ich habe meins an der Wurzel meines Projekts neben der web.config platziert. Sie können die Abhängigkeiten auf diese Weise an einer Stelle angeben, was sehr hilfreich ist, wenn das eckige Projekt schnell wächst. Ich kann nicht sicher wissen, aber ich denke, Ihnen so etwas wie folgt aussehen würde:

{ 
    "Framework": "jasmine", 
    "FrameworkVersion": "1", 
    "References": [ 
    { "Path": "./Scripts/angular/angular.js" }, 
    {   
     "Path": "./Scripts/angular", 
     "Includes": [ "*.js" ] 
    }, 
    { "Path": "./Scripts/angular-ui/ui-bootstrap.js" }, 
    { "Path": "./app/app.js" }, 
    {   
     "Path": "./app", 
     "Includes": [ "*.js" ] 
    }     
    ], 
    "Tests": [ 
    { "Includes": [ "*.spec.js" ] } 
    ] 
} 

Diese auf Jasmin-Version läuft 1. Ich bin mir nicht sicher, wie Sie es alles enthalten, die „passt ./ Scripts/angular * .js "und alles, was zu" ./app/*.js "passt (inklusive Unterverzeichnisse). Wenn Sie neue eckige Referenzen und App-Module hinzufügen, sollten Sie diese Konfiguration nicht mehr ändern müssen (sobald Sie es fertig haben).