Question

Testing Guide我一直在关注它。

注意：我的应用程序在没有测试部分的情况下运行。

问题：我无法加载 unit-tests.html 。我认为问题非常小但无法弄明白。我正在使用 VisualCode ，当我点击 F5 时，它只运行我的应用。那么如何加载 unit-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"
  }
}

unit-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));

Answer 1

我的unit-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加载多个文件

Angular2单元测试设置问题

1 个答案: