如何在这个Plunkr中使Angular 2最终(2.0.0,在rc7之后)和TestBed工作?

时间:2016-10-12 19:42:12

标签: unit-testing angular plunker

我只是想启动TestBed,所以我可以使用TestBed函数。我在我的src / test.spec.ts中尝试这个并且它无法正常工作:

TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());

我也尝试过为TestBed做一个System.import但它没有用。例如,这不能用作index.html中的脚本标记。

Promise.all([
    System.import('@angular/core/testing'),
    System.import('@angular/platform-browser-dynamic/testing')
]).then(function (providers) {
    var testing = providers[0];
    var testingBrowser = providers[1];
   testing.TestBed.initTestEnvironment(testingBrowser.BrowserDynamicTestingModule,
        testingBrowser.platformBrowserDynamicTesting());
}).then(function() {
    return Promise.all(
            return System.import(app/test.spec.ts); //"app" stands for // './src' in the config.js file for SystemJS
        );
})

这是Plunkr: https://plnkr.co/edit/K0IyBnR8F4F7zOp6LETi?p=preview

1 个答案:

答案 0 :(得分:1)

似乎您忘记了rxjs,您还需要更新zonejs并添加其他一些zonejs脚本:

<强> config.json

map: {
  'app': './src',
  'typescript': 'npm:typescript@1.8.0/lib/typescript.js',
  '@angular/core': 'npm:@angular/core@2.0.0/bundles/core.umd.js',
  '@angular/common': 'npm:@angular/common@2.0.0/bundles/common.umd.js',
  '@angular/compiler': 'npm:@angular/compiler@2.0.0/bundles/compiler.umd.js',
  '@angular/platform-browser': 'npm:@angular/platform-browser@2.0.0/bundles/platform-browser.umd.js',
  '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@2.0.0/bundles/platform-browser-dynamic.umd.js',
  '@angular/http': 'npm:@angular/http@2.0.0/bundles/http.umd.js',
  '@angular/router': 'npm:@angular/router@2.0.0/bundles/router.umd.js',
  '@angular/forms': 'npm:@angular/forms@2.0.0/bundles/forms.umd.js',
  '@angular/upgrade': 'npm:@angular/upgrade@2.0.0/bundles/upgrade.umd.js',
  '@angular/core/testing': 'npm:@angular/core@2.0.0/bundles/core-testing.umd.js',
  '@angular/common/testing': 'npm:@angular/common@2.0.0/bundles/common-testing.umd.js',
  '@angular/compiler/testing': 'npm:@angular/compiler@2.0.0/bundles/compiler-testing.umd.js',
  '@angular/platform-browser/testing': 'npm:@angular/platform-browser@2.0.0/bundles/platform-browser-testing.umd.js',
  '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic@2.0.0/bundles/platform-browser-dynamic-testing.umd.js',
  '@angular/http/testing': 'npm:@angular/http@2.0.0/bundles/http-testing.umd.js',
  '@angular/router/testing': 'npm:@angular/router@2.0.0/bundles/router-testing.umd.js',
  '@angular/forms/testing': 'npm:@angular/forms@2.0.0/bundles/forms-testing.umd.js',

  'rxjs': 'npm:rxjs'
},

<强>的index.html

<script src="https://unpkg.com/zone.js@0.6.25/dist/zone.js"></script>
<script src="https://unpkg.com/zone.js@0.6.25/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/zone.js@0.6.25/dist/async-test.js"></script>
<script src="https://unpkg.com/zone.js@0.6.25/dist/fake-async-test.js"></script>
<script src="https://unpkg.com/zone.js@0.6.25/dist/sync-test.js"></script>
<script src="https://unpkg.com/zone.js@0.6.25/dist/proxy.js"></script>
<script src="https://unpkg.com/zone.js@0.6.25/dist/jasmine-patch.min.js"></script>

除此之外,您的组件中也有错误:

<强>的src / component.ts

export class myCmp {
  this._testVar = "initial value";

您应该删除this.

此处 Plunker Example 适合您的情况。希望它会对你有所帮助!