Question

我正在研究Angular 2的最终版本以进行组件测试。我可以运行我的应用程序，但是当我运行测试时，浏览器显示以下结果 Error Message After Viewing Test in Browser

Systemjs.config.js如下

＆＃13;

var map = {
	"rxjs": "node_modules/rxjs",
	"@angular/common": "node_modules/@angular/common",
	"@angular/forms": "node_modules/@angular/forms",
	"@angular/compiler": "node_modules/@angular/compiler",
	"@angular/core": "node_modules/@angular/core",
	"@angular/platform-browser": "node_modules/@angular/platform-browser",
	"@angular/testing":"node_modules/@angular/core/testing",
	"@angular/platform-browser-dynamic": "node_modules/@angular/platform-browser-dynamic",
};
var packages = {
	"rxjs": { "defaultExtension": "js" },
	"@angular/common": { "main": "bundles/common.umd.js", "defaultExtension": "js" },
	"@angular/forms": { "main": "bundles/forms.umd.js", "defaultExtension": "js" },
	"@angular/compiler": { "main": "bundles/compiler.umd.js", "defaultExtension": "js" },
	"@angular/core": { "main": "bundles/core.umd.js", "defaultExtension": "js" },
	"@angular/platform-browser": { "main": "bundles/platform-browser.umd.js", "defaultExtension": "js" },
	"@angular/platform-browser-dynamic": { "main": "bundles/platform-browser-dynamic.umd.js", "defaultExtension": "js" },
	"@angular/testing" : {"main": "testing.js", "defaultExtension": "js"},
	"app": {
		format: 'register',
		defaultExtension: 'js'
	}  
};

var config = {
	map: map,
	packages: packages
};

System.config(config);

＆＃13;

apptester.html如下

＆＃13;

<!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>
  <script src="node_modules/es6-shim/es6-shim.min.js"></script>
  <script src="node_modules/zone.js/dist/zone.js"></script>
  <script src="node_modules/zone.js/dist/long-stack-trace-zone.js"></script>
  <script src="node_modules/zone.js/dist/proxy.js"></script>
  <script src="node_modules/zone.js/dist/sync-test.js"></script>
  <script src="node_modules/zone.js/dist/jasmine-patch.js"></script>
  <script src="node_modules/reflect-metadata/Reflect.js"></script>
 <script src="node_modules/systemjs/dist/system.src.js"></script>  
</head>
<body>
  <script src="systemjs.config.js"></script>
  <script>
    System.import('./app/app.component.spec')
       .then(window.onload)
       .catch(console.error.bind(console));
  </script>
</body>
</html>

＆＃13;

app.component.spec.ts中的测试代码如下

＆＃13;

import {inject,TestBed,ComponentFixture } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import {EmployeeComponent} from './app.component';
import {Employee} from './employee.model';
describe('EmployeeComponent', () => {
  let employee;
  let app;
  let fixture: ComponentFixture<EmployeeComponent>;
  beforeEach(() => {
    employee = new Employee();
//    app = new EmployeeComponent();
    TestBed.configureTestingModule({
      declarations: [EmployeeComponent],
    });
    TestBed.compileComponents();
       fixture = TestBed.createComponent(EmployeeComponent);
       app = fixture.componentInstance;
       console.log('In describe');
  });
it('getTax', () => {
    employee.designation = "Manager";
    employee.salary = 40000;
    let res = 12111000;
    app.emp = employee;
    fixture.detectChanges();
    let actRes = app.getTax();
    expect(actRes).toEqual(res);
  });
});

＆＃13;

相同的代码适用于RC 1和2版本，但不适用于Angular 2最终版本。我的package.json如下：

＆＃13;

{
  "name": "ng2-databinding-application",
  "version": "1.0.0",
  "scripts": {
    "start": "concurrently \"tsc -w\" \"node server.js\"",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.23",
    "angular2-in-memory-web-api": "0.0.20",
    "bootstrap": "*",
    "es6-shim": "^0.35.0",
    "koa": "^1.2.0",
    "koa-static": "^2.0.0",
    "livereload": "^0.4.1",
    "jasmine-core": "2.5.1",
    "typescript": "^2.0.2",
    "typings": "^1.3.2"
  },
  "devDependencies": {
    "concurrently": "^2.2.0",
    "jasmine-core": "^2.5.1",
    "lite-server": "^2.1.0",
    "node-gyp": "^3.3.1",
    "typescript": "^2.0.2",
    "typings": "^1.3.2"
  }
}

＆＃13;

Answer 1

问题来自您的systemJS配置，让我解释一下。

您添加了@angular/testing作为包，这很不错，但您告诉systemJS他可以在testing.js找到主JS。

因此，当您执行import{Foo} from "@angular/testing"; systemJS时，node_modules/@angular/testing/testing.js会导入它。

只需将@angular/testing条目的主要属性设置为index.js，它就能正常运行：

var packages = {
    ...
    ...
    "@angular/testing" : {"main":"index.js", "defaultExtension": "js"},
    ...
    ... 
};

编辑：如果您想要导入捆绑版本：

var packages = {
    ...
    ...
    "@angular/testing" : {"main":"bundles/testing.umd.js", "defaultExtension": "js"},
    ...
    ... 
};

使用Jasmine进行Angular 2组件测试

1 个答案: