2016-07-06 9 views
0

Testing Guide
私はそれに従っています。角度2ユニットテストセットアップ問題

注:私は、アプリケーションをテストすることなくテストを実行しています。

問題:unit-tests.htmlを読み込めません。私は問題は非常に小さいと思うが、それを理解することはできない。私はVisualCodeを使用しています。F5を打つと、私のアプリだけが実行されます。だからどのようにロードするユニットtests.html

私の設定は以下の通りです。

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" 
    } 
} 

単位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(注:appフォルダ内、app.spec .tsあり)

it('true is true',() => expect(true).toEqual(true)); 
+0

あなただけの、ブラウザを開き、ローカルホスト 'に移動できます。PORTNUMBER/unit-tests.html' PORTNUMBERをポートlive-serverで置き換えます。またはnpmを開き、 'cd'を使用してプロジェクトフォルダに移動し、' npm run test'と入力してください。 – Colum

+0

はい。しかし 'system.js'に' testing file'を読み込ませたいです。 – micronyks

+0

この方法では、 'app/app.spec'を得ることができないとも言います。 – micronyks

答えて

0

マイユニット-tests.htmlファイル:

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

が、これは複数のファイルをロードするために、システムのJSを伝えるために、それが容易になります