Как мне заставить Angular 2 final (2.0.0, после rc7) и TestBed работать в этом Plunkr?

Я просто хочу запустить TestBed, чтобы использовать функции TestBed. Я пробую это в моем src / test.spec.ts, и это не работает:

TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());

Я также попытался сделать System.import для TestBed, но это не сработало. Например, это не работало как тег скрипта в 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/a=preview


unit-testing angular plunker
person coder    schedule 12.10.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Похоже, вы забыли про rxjs, и вам также нужно обновить zonejs и включить некоторые другие zonejs скрипты:

config.json

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

  'rxjs': 'npm:rxjs'
},

index.html

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

Кроме того, у вас есть ошибка в вашем компоненте:

src / component.ts

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

Вам следует удалить this.

Вот пример Plunker для вашего случая. Надеюсь, это поможет вам!

person yurzui    schedule 12.10.2016
comment
Огромное спасибо! У меня недостаточно репутации, чтобы дать вам лучший ответ. - person coder; 13.10.2016
comment
Привет, юрзуи, не могли бы вы показать мне, как этот plunkr работал бы, если бы дочерний компонент в шаблоне нужно было обновить. - person coder; 20.10.2016
comment
Не могли бы вы ответить на этот вопрос, пожалуйста - stackoverflow.com/questions/40160036/ - person coder; 20.10.2016
comment
Спасибо, юрзуй! Однако в моем реальном коде не работает :(. Я использую MockChildComponent вместо родительского компонента, но я просто пытался сделать это с настоящим ChildComponent, и это тоже не сработало. - person coder; 20.10.2016
comment
* Я имел в виду, что использую MockChildComponent вместо настоящего дочернего компонента. - person coder; 20.10.2016
comment
Спасибо, yurzui, в моем тесте он работал, по крайней мере, для нормальных дочерних компонентов. Я буду спрашивать вас еще кое-что в ближайшее время, это когда директива дочернего компонента привязана к div или tr, например: ‹tr class = child-cml-selector * ngFor = let _data of _rows [_study] = _ data› ‹ / tr › - person coder; 20.10.2016
comment
* дочерний-cmp-селектор. Это в шаблоне родительского компонента. Поэтому я хочу, чтобы _data изменялся для каждого дочернего компонента, которому он назначен, при вызове метода родительского компонента. Вскоре я опубликую здесь Plunkr. - person coder; 20.10.2016
comment
* это сработало в моем тесте для дочерних компонентов и имитирующих дочерние компоненты, когда у нас есть ‹child-cmp› ‹child-cmp› на странице. Вместо того, чтобы привязывать дочерний компонент к классу. - person coder; 20.10.2016
comment
Привет, юрзуи, пожалуйста, помогите мне заставить этот Plunkr работать, тот же дочерний компонент назначен классу. plnkr.co/edit/dH5UVuqQOhBrSbqjZekN?p=preview - person coder; 20.10.2016
comment
Прошу прощения за отсутствие правок, поэтому много комментариев, я не мог понять, как редактировать существующие комментарии. Тот же Plunkr прямо над этим комментарием и то, что я прошу вас сделать, находится в этом вопросе Stackoverflow - stackoverflow.com/questions/40162607/ - person coder; 20.10.2016