2016-07-06 12 views
0

Testing Guide
Ich habe es verfolgt.Angular2 Unit Testing Setup-Problem

HINWEIS: Ich habe meine App läuft ohne Testteil.

Problem: Ich kann unit-tests.html nicht laden. Ich denke, das Problem ist sehr klein, aber nicht in der Lage, es herauszufinden. Ich benutze VisualCode und wenn ich F5 treffe, läuft es nur meine App. So, wie man lädt Einheit-Tests.html?

Mein Setup ist wie folgt.

package.json

{ 
    "name": "angular2-quickstart", 
    "version": "1.0.0", 


    "scripts": { 

    "test": "live-server --open=unit-tests.html", 
    //<------ I have added this as mentioned. 

    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", 
    //<------ I tried to disable this line as well. 

    "lite": "lite-server", 
    "postinstall": "typings install", 
    "tsc": "tsc", 
    "tsc:w": "tsc -w", 
    "typings": "typings" 
    }, 


    "license": "ISC", 
    "dependencies": { 
    "@angular/common": "2.0.0-rc.4", 
    "@angular/compiler": "2.0.0-rc.4", 
    "@angular/core": "2.0.0-rc.4", 
    "@angular/forms": "0.2.0", 
    "@angular/http": "2.0.0-rc.4", 
    "@angular/platform-browser": "2.0.0-rc.4", 
    "@angular/platform-browser-dynamic": "2.0.0-rc.4", 
    "@angular/router": "3.0.0-beta.1", 
    "@angular/router-deprecated": "2.0.0-rc.2", 
    "@angular/upgrade": "2.0.0-rc.4", 
    "systemjs": "0.19.27", 
    "core-js": "^2.4.0", 
    "reflect-metadata": "^0.1.3", 
    "rxjs": "5.0.0-beta.6", 
    "zone.js": "^0.6.12", 
    "angular2-in-memory-web-api": "0.0.14", 
    "bootstrap": "^3.3.6" 
    }, 
    "devDependencies": { 
    "concurrently": "^2.0.0", 
    "jasmine-core": "2.4.1", 
    "lite-server": "^2.2.0", 
    "typescript": "^1.8.10", 
    "typings": "^1.0.4" 
    } 
} 

einheits 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> 

    <script src="../node_modules/systemjs/dist/system.src.js"></script> 

    <script> 
    System.config({ 
     packages: { 
     'app': {defaultExtension: 'js'} 
     } 
    }); 

    System.import('app/app.spec') 
     .then(window.onload) 
     .catch(console.error.bind(console)); 
    </script> 

</body> 
</html> 

app.spec.ts (Anmerkung: in App Ordner, app.spec .ts ist dort)

+0

Sie nur einen Browser öffnen könnte, navigieren Sie zu 'localhost: PORTNUMBER/unit-tests.html 'ersetzen Sie PORTNUMBER durch den Port Live-Server. Oder öffnen Sie npm, navigieren Sie mit 'cd' zum Projektordner und tippen Sie' npm run test' – Colum

+0

Ja. Aber ich möchte 'system.js' laden' testdatei'. – micronyks

+0

Auf diese Weise sagt es auch, dass nicht in der Lage zu bekommen "app/app.spec" – micronyks

Antwort

0

Meine Einheit-tests.html Datei:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html;charset=utf-8"> 
    <title>Angular2 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> 

    <script src="../node_modules/reflect-metadata/Reflect.js"></script> 
    <script src="../node_modules/zone.js/dist/zone.js"></script> 
</head> 
<body> 
    <!-- #1. add the system.js library --> 
    <script src="../node_modules/systemjs/dist/system.src.js"></script> 

    <script src="systemjs.config.js"></script> 

    <!--<script src="systemjs.builder.js"></script>--> 

    <script> 

    var fileList = ['sanity.spec']; 

    System.baseURL = 'bin/tests/'; 

    multiImport(fileList) 
    .then(window.onload) 
    .catch(console.error.bind(console)); 


    function multiImport(modules) { 
     return Promise.all(modules.map(function(m) { return System.import(m) })) 
    } 

    </script> 
</body> 
</html> 

dies macht es einfach, System js zu sagen, mehrere Dateien laden