2016-04-20 5 views
5

Ich habe dieses Tutorial gefolgt für eine Angular 2 App testen: https://angular.io/docs/ts/latest/guide/testing.htmlAngular 2 für Typoskript app Tests - Spezifikationen erscheinen mehrfach in Jasmin

Nach dem First app test Abschnitt Finishing und ging zu unit-tests.html sah ich meine spec Berichte mehrere erscheinen Zeiten:

jasmine unit-tests.html
Obwohl ich keine Änderungen an den Tutorial-Code nicht gemacht habe, für eine schnelle Referenz ist hier meine Einheit-tests.html:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html;charset=utf-8"> 
    <title>Ng App Unit Tests</title> 

    <link rel="stylesheet" href="node_modules/jasmine-core/lib/jasmine-core/jasmine.css"> 

    <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script> 
    <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script> 
    <script src="node_modules/jasmine-core/lib/jasmine-core/boot.js"></script> 
</head> 
<body> 
<!-- #1. add the system.js library --> 
<script src="node_modules/systemjs/dist/system-polyfills.js"></script> 
<script src="node_modules/systemjs/dist/system.src.js"></script> 

<script> 
    // #2. Configure systemjs to use the .js extension 
    //  for imports from the app folder 
    System.config({ 
     packages: { 
      'app': {defaultExtension: 'js'} 
     } 
    }); 

    // #3. Import the spec file explicitly 
    System.import('app/hero.spec') 

    // #4. wait for all imports to load ... 
    //  then re-execute `window.onload` which 
    //  triggers the Jasmine test-runner start 
    //  or explain what went wrong. 
      .then(window.onload) 
      .catch(console.error.bind(console)); 
</script> 
</body> 

</html> 

hero.spec.ts

import {Hero} from './hero'; 

describe('Hero',() => { 
    it('has name',() => { 
     let hero:Hero = {id: 1, name: 'Super Cat'}; 
     expect(hero.name).toEqual('Super Cat'); 
    }); 
    it('has id',() => { 
     let hero:Hero = {id: 1, name: 'Super Cat'}; 
     expect(hero.id).toEqual(1); 
    }); 
}); 

Jede Idee, was falsch vielleicht ging?

+0

Dieses Problem besteht immer noch, wenn für das Tutorial für Angular2.0.0-rc.5, d. H. Die Ergebnisse für die einfachen Tests für hero.ts sind verdreifacht. Beachten Sie, dass die nächste Testgruppe im Lernprogramm, d. H. Für die Datei my-exception.pipe.ts, die Ergebnisse nicht verdreifacht hat. Es ist also nicht einfach, dass alle Ergebnisse verdreifacht werden, nur einige.Ich nehme an, dass es etwas mit dem feinen Timing der Dinge zu tun hat, z. Das Timing, wenn einfache Tests abgeschlossen werden, oder wenn kompliziertere Tests, die etwas anderes erfordern (andere Downloads?), relativ zum Beispiel beendet werden, wenn das Browserfenster geladen ist und Jasmin wieder startet. –

Antwort

2

Da mein vorheriger Kommentar als gelöscht markiert ist, schreibe ich meine endgültige Lösung auf, um das Problem zu entfernen. Diese Lösung funktioniert und das einzige Problem ist, dass das erste Mal zeigt die HTML-Seite mit dem Text "Keine Angaben gefunden", aber wenn alle Module geladen sind, zeigt es alle Spezifikationen und seine Ergebnisse.

Diese Lösung durch das Buch "Angular 2 Entwicklung mit Typoskript v7 MEAP" von Manning Early Access Programm genommen wird:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html;charset=utf-8"> 
    <title>Unit Tests</title> 
    <link rel="stylesheet" href="node_modules/jasmine-core/lib/jasmine-core/jasmine.css"> 
    <!-- #1. Polyfills --> 
    <script src="node_modules/reflect-metadata/Reflect.js"></script> 
    <!-- #2. Zone.js dependencies --> 
    <script src="node_modules/zone.js/dist/zone.js"></script> 
    <script src="node_modules/zone.js/dist/async-test.js"></script> 
    <script src="node_modules/zone.js/dist/fake-async-test.js"></script> 
    <!-- #3. Add specs dependencies --> 
    <script src="app/treeNode.spec.ts"></script> 
    <script src="app/template.spec.ts"></script> 
    <script src="app/services/tree.side.service.spec.ts"></script> 
    <script src="app/services/tree.service.spec.ts"></script> 
    <!-- #4. Add Jasmine dependencies --> 
    <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script> 
    <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script> 
    <script src="node_modules/jasmine-core/lib/jasmine-core/boot.js"></script> 
    <script src="node_modules/jasmine-expect/dist/jasmine-matchers.js"></script> 
    <!-- #5. Add the system.js library --> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <script>System.packageWithIndex = true;</script> 
    <script src="systemjs.config.js"></script> 

    <script> 
     // #6. Configure SystemJS to use the .js extension for imports from the app folder 
     System.config({ 
      packages: { 
       'app': {defaultExtension: 'js'} 
      } 
     }); 

     var SPEC_MODULES = [ 
      'app/treeNode.spec', 
      'app/template.spec', 
      'app/services/tree.side.service.spec', 
      'app/services/tree.service.spec' 
     ]; 

     /** 
     * #7. Import the spec files explicitly 
     */ 
     Promise.all([ 
      System.import('@angular/core/testing'), 
      System.import('@angular/platform-browser-dynamic/testing') 
     ]) 
     .then(function (modules) { 
      var testing = modules[0]; 
      var testingBrowser = modules[1]; 
      testing.TestBed.initTestEnvironment(testingBrowser.BrowserDynamicTestingModule, testingBrowser.platformBrowserDynamicTesting()); 
      return Promise.all(SPEC_MODULES.map(function (module) { 
       return System.import(module); 
      })); 
     }) 
     .then(window.onload) 
     .catch(console.error.bind(console)); 
    </script> 
</head> 
<body> 
</body> 
</html> 

Ich hoffe, dass Sie diese Lösung nützlich finden.

+0

Ich denke, das sollte die richtige/akzeptierte Lösung sein. Ich habe das offizielle Online-Tutorial zu Angular2 (Version 2.0.0-rc.5) verfolgt, und die Testergebnisse von 'hero.ts' sind verdreifacht (wie in der Originalfrage), aber nicht die 'my-highcase.pipe'. ts' Testergebnisse (nicht in der Frage diskutiert). Ich habe diese Lösung verwendet und das "SPEC_MODULES" -Array durch die '... spec (.ts)' -Dateien des Tutorials ersetzt. Im Gegensatz zu einigen anderen veröffentlichten Antworten reduziert diese Lösung (A) die unangemessene Ergebnisverdreifachung auf einzelne Ergebnisse, aber (B) behält die Implementierung und Berichterstellung für nachfolgende Tests bei. –

1

Ich kann Ihr Problem nicht reproduzieren. Siehe diese Plunkr: https://plnkr.co/edit/viMSZD?p=preview.

Der einzige Unterschied, den ich sehe, ist, dass ich SystemJS Bibliotheksdateien vor den Jasmin diejenigen eingeschlossen:

<script src="https://code.angularjs.org/tools/system-polyfills.js"></script> 
<script src="https://code.angularjs.org/tools/system.js"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine-html.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/boot.js"></script> 
+0

Nur Spekulation, aber ich frage mich, ob das ursprüngliche Problem hier nicht wiedergegeben wird, weil Abhängigkeiten von "fern" geladen werden (d. H. "Https ..."). Ich bekomme das unangemessene Ergebnis verdreifacht, nachdem ich dem offiziellen Online-Tutorial Angular2.0.0-rc.5 gefolgt bin, aber dort wird zB jasmine.js lokal geladen, dh von ''. Daher löst diese Antwort das Problem nicht, aber es liefert einige verlockende Beweise dafür, warum das Problem manchmal, aber nicht immer, auftritt, d. H. Vielleicht etwas mit relativen Ladezeiten zu tun hat. –

+1

Ich folgte dem Tutorial und beinhaltete SystemJS-Bibliotheksdateien, bevor die Jasmine-Dateien tatsächlich für mich (lokal) funktionierten. Aber ich stimme zu, dass dies wahrscheinlich nur das Problem maskiert. – shusson

1

Ich habe genau das gleiche Problem (Testfall erscheint 3 Mal statt 1mal).

Um es zu beheben, entfernte ich die .then(window.onload) Anruf auf die System.import('app/hero.spec') Versprechen.

Es scheint, als ob das SystemJS-Modul held.spec.js laden kann, bevor der Browser das Fensterladeereignis auslöst. Dies würde den nachfolgenden Aufruf der Funktion window.onload obsolet machen.

+2

Diese Lösung funktioniert nicht für die Spezifikationen, die geladen werden, nachdem der Browser das Fensterladeereignis ausgelöst hat. Eine (hässliche) Problemumgehung, die ich finde, ist die Verzögerung der Ausführung der Spezifikationen, die sie in ein setTimeout einschließen. Weitere Informationen finden Sie [hier] (https://github.com/jasmine/jasmine/issues/1003). – pliski

+0

Dies "repariert" das Problem, aber nicht in einer angemessenen Weise. Ich habe die Angular2-Tutorials (jetzt in der Version rc.5) verfolgt und die Testergebnisse sind wie in der ursprünglichen Frage verdreifacht. Dies gilt jedoch nur für die Hero-Tests, d. H. Für einige extrem einfache Tests, die kein Angular erfordern. Die nächste Testgruppe im Test, eine Pipe testen, wird nicht verdreifacht. Durch die Implementierung dieser Lösung werden die ursprünglichen dreifachen Ergebnisse auf ein angemessenes einzelnes Ergebnis reduziert, die nachfolgenden Testergebnisse werden jedoch vollständig übersprungen. Daher ist diese Lösung keine angemessene vollständige Lösung. –

+1

Ich stimme zu, dies sollte nicht die akzeptierte Antwort sein. Wie von @AndrewWillems angemerkt, führt dies tatsächlich dazu, dass andere Tests fehlschlagen. – shusson

0

Ich kann dieses seltsame Verhalten reproduzieren, wenn ich lite-server verwende. Wenn Sie dem Beispiel auf der Website angular2 folgen, werden Sie feststellen, dass sie live-server verwenden (beachten Sie die "v" anstelle von "t"). Mit live-server rendert Jasmin meine Tests richtig. Vielleicht gibt es einige Probleme mit browser-sync Magie in den HTML-Code injiziert werden?

+0

Ich weiß nicht, was der Status der offiziellen Online-Tutorials von Angular2 war, als du diese Antwort ursprünglich am 22. Juni 2016 gepostet hast, aber die aktuellen Tutorials zur Verwendung mit Angular2 Version rc.5 zeigen keinen "Live-Server" irgendwo in den Tutorials in einer Google-Suche, während "Lite-Server" wird in einer ähnlichen Suche angezeigt. Daher glaube ich wirklich nicht, dass dies einen korrekten Weg zu einer Lösung einschlägt und möglicherweise irreführende "richtige" Ergebnisse z. (Erraten Sie einfach hier), zwingt den Browser, andere "Sachen" zu laden, die Tests zu verzögern, die irgendwie sie auf window.onload nicht wiederholen lassen. –

0

Ich hatte das gleiche Problem und nach dem Importieren der Core-Shim-Bibliothek das Problem verschwand. Stellen Sie außerdem sicher, dass Sie es als erstes Skript importieren.