Angular Jasmine Tests scheitern mit minimized Quelle

Question

Ich werde versuchen, diese Frage mit ein wenig Abstraktion zu nähern, da in die Codedaten gehen wäre nutzlos.

Ich habe ein Winkelmodul, das in 2 Quelldateien aufgeteilt ist, sagen source1.js und source2.js. Dann habe ich 3 Unit-Test-Dateien, die entwickelt wurden, um 3 Winkel Service/Fabrik/Anbieter zu testen.

Das Projekt Layout ist wie folgt:

root 
| 
-dist 
    | 
    -source.min.js 
-src 
    | 
    -source1.js 
    -source2.js 
-tests 
    | 
    -unit 
     | 
     -service1.js 
     -service2.js 
     -service3.js 

Alle Tests laufen mit Karma und Jasmin, passieren und wie erwartet. Sehen Sie dieses Bit des Karma Config den Punkt zu bringen:

files: [ 

    'bower_components/angular/angular.min.js', 
    'bower_components/angular-mocks/angular-mocks.js', 

    'src/*.js', 
    'tests/unit/*.js' 
], 

Next i minimierte source1 und source2 mit gulpjs in source.min.js und versuchte Tests mit der verkleinerten Datei auszuführen, also habe ich das Karma Config wie folgt:

files: [ 

    'bower_components/angular/angular.min.js', 
    'bower_components/angular-mocks/angular-mocks.js', 

    'dist/*.js', // <--- see here. 
    'tests/unit/*.js' 
], 

Mit dieser Konfiguration sind alle Tests wegen Winkelabhängigkeit Injektion fehlgeschlagen - sieht aus wie der Anbieter nicht gelöst wird.

Was könnte das verursachen? Ich meine, der Quellcode sollte der gleiche sein.

Answer 1

Dies ist ein bekanntes Problem mit Winkelabhängigkeit Injektion und Minification. Außerdem liegt das Problem genau in den Details des Codes.

Fall 1:

Ohne explizite Injektion Winkel versucht den Dienst von dem Dienstnamen zu schließen, wenn erklärten Funktionen als Controller verwendet wird.

angular.module('app').controller('MyController', MyController); 

function MyController(service1, service2, ...){ ... service1.doSomething ...} 

Fall 2:

Mit expliziter Injektion, verwendet die Steuerung kantig Funktionsparameter in der Reihenfolge, in der sie injiziert wurden.

angular.module('app').controller('MyController', MyController); 

MyController.$inject = ['service1', 'service2', ...] 

function MyController(a, b, ...){ ... a.doSomething ... } 

Fall 1 wird nicht jedes Mal mit minification arbeiten, weil der Name des Dienstes ändert und Winkel den Dienst zu schließen, dass ein oder b oder c bezieht sich auf nur um einen Blick auf ihren Namen nicht in der Lage sein, .

Fall 2 wird jedoch jedes Mal funktionieren, weil eckle nicht raten muss, da $ inject besagt, dass service1 a ist und service 2 b und so weiter.

Wenn Sie ein Build-Dienstprogramm wie Gulp verwenden, können Sie ng-annotate verwenden, die automatisch die Abhängigkeiten für Sie in Fall 1 injiziert und Ihr Code sollte immer noch funktionieren.

In meiner eigenen Meinung und als eine Frage der Art, die Sie Fall 2. Ich neige dazu verwenden sollte etwas in der Nähe John Papa's Angular Style Guide