Unit testing 导致比赛状态的Angular2单元测试

我正在测试输入字段是否正确更新了组件的UI字段。我正在经历一场比赛，一次测试的结果与另一次测试的预期进行比较

我的单元测试代码：

从'@angular/core/testing'导入{ComponentFixture，TestBed}；
从“@angular/platform browser”导入{By}”；
从“”导入{EntityEditorComponent，EntityEditorModule}；
从“..”导入{Entity，EntityType}；
描述（'EntityEditorComponent模板'，（）=>{
let目标：实体编辑器组件；
let夹具：组件夹具；
let namelement:HTMLInputElement；
let-typeElement:HTMLSelectElement；
在每个之前（（）=>{
configureTestingModule（{imports:[EntityEditorModule]}）；
fixture=TestBed.createComponent（EntityEditorComponent）；
目标=fixture.componentInstance；
nameElement=fixture.debugElement.query（By.css（'#name'））.nativeElement作为HTMLInputElement；
typeElement=fixture.debugElement.query（By.css（'#type'））.nativeElement作为HTMLSelectElement；
});
[
{期望值：'null'，名称：null，期望值：null}，
{期望值：'set'，名称：'unittest'，期望值：'unittest'}，
].forEach（（测试，i，测试）=>{
它（'#name在'+test.expectation，（）=>{
target.entity.name=test.name；
fixture.detectChanges（）；
fixture.whenStable（）然后（（）=>{
让实际值=namelement.textContent；
预期（实际）。toEqual（测试。预期）；
});
});
});
[
{期望值：'null'，类型：null，期望值：null}，
{期望值：'set'，类型：EntityType.Company，期望值：'Company'}，
].forEach（（测试，i，测试）=>{
它（'#type在'+test.expectation，（）=>{
target.entity.type=test.type；
fixture.detectChanges（）；
fixture.whenStable（）然后（（）=>{
让实际值=typeElement.value；
预期（实际）。toEqual（测试。预期）；
});
});
});
});

我看到的错误总结如下：

FAILED TESTS:
  EntityEditorComponent template
    × #type displays Entity.type when null
    Expected '' to equal null.

    × #type displays Entity.type when set
    Expected '' to equal 'Unit Test'.

#type如何显示实体。type测试如何查看

单元测试的预期值？我能看到的唯一方法是它来自#name displays Entity.name测试

很明显我做错了什么。如何测试检测到的更改而不引起争用条件？
如果没有plunker或代码片段，调查起来有点困难，但是您确实进行了具有异步expect运行的测试。这保证您将回调传递给it（）函数（按照惯例，这通常称为done）

尝试以下方法：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { EntityEditorComponent, EntityEditorModule } from '.';
import { Entity, EntityType } from '..';

describe('EntityEditorComponent template', () => {
  let target: EntityEditorComponent;
  let fixture: ComponentFixture<EntityEditorComponent>;
  let nameElement: HTMLInputElement;
  let typeElement: HTMLSelectElement;

  beforeEach(() => {
    TestBed.configureTestingModule({ imports: [ EntityEditorModule ] }).compileComponents();

    fixture = TestBed.createComponent(EntityEditorComponent);
    target = fixture.componentInstance;
    nameElement = fixture.debugElement.query(By.css('#name')).nativeElement as HTMLInputElement;
    typeElement = fixture.debugElement.query(By.css('#type')).nativeElement as HTMLSelectElement;
  });

  [
    { expectation: 'null', name: null       , expected: null        },
    { expectation: 'set' , name: 'Unit Test', expected: 'Unit Test' },
  ].forEach((test, i, tests) => {
    it('#name displays Entity.name when ' + test.expectation, done => {
      target.entity.name = test.name;

      fixture.detectChanges();
      fixture.whenStable().then(() => {
        let actual = nameElement.textContent;
        expect(actual).toEqual(test.expected);
        done();
      });
    });
  });

  [
    { expectation: 'null', type: null              , expected: null      },
    { expectation: 'set' , type: EntityType.Company, expected: 'Company' },
  ].forEach((test, i, tests) => {
    it('#type displays Entity.type when ' + test.expectation, done => {
      target.entity.type = test.type;

      fixture.detectChanges();
      fixture.whenStable().then(() => {
        let actual = typeElement.value;
        expect(actual).toEqual(test.expected);
        done();
      });
    });
  });
});

从'@angular/core/testing'导入{ComponentFixture，TestBed}；
从“@angular/platform browser”导入{By}”；
从“”导入{EntityEditorComponent，EntityEditorModule}；
从“..”导入{Entity，EntityType}；
描述（'EntityEditorComponent模板'，（）=>{
let目标：实体编辑器组件；
let夹具：组件夹具；
let namelement:HTMLInputElement；
let-typeElement:HTMLSelectElement；
在每个之前（（）=>{
configureTestingModule（{imports:[EntityEditorModule]}）；
fixture=TestBed.createComponent（EntityEditorComponent）；
目标=fixture.componentInstance；
nameElement=fixture.debugElement.query（By.css（'#name'））.nativeElement作为HTMLInputElement；
typeElement=fixture.debugElement.query（By.css（'#type'））.nativeElement作为HTMLSelectElement；
});
[
{期望值：'null'，名称：null，期望值：null}，
{期望值：'set'，名称：'unittest'，期望值：'unittest'}，
].forEach（（测试，i，测试）=>{
它（'#name在'+test.expectation，done=>{
target.entity.name=test.name；
fixture.detectChanges（）；
fixture.whenStable（）然后（（）=>{
让实际值=namelement.textContent；
预期（实际）。toEqual（测试。预期）；
完成（）；
});
});
});
[
{期望值：'null'，类型：null，期望值：null}，
{期望值：'set'，类型：EntityType.Company，期望值：'Company'}，
].forEach（（测试，i，测试）=>{
它（'#type在'+test.expectation，done=>{
target.entity.type=test.type；
fixture.detectChanges（）；
fixture.whenStable（）然后（（）=>{
让实际值=typeElement.value；
预期（实际）。toEqual（测试。预期）；
完成（）；
});
});
});
});
我认为，当您使用whenStable时，您需要将其包装为异步。当然，这是不可能的。从一个测试到另一个测试应该“泄漏”。规范显然是异步的（有承诺），但没有任何
*async
帮助程序。不幸的是，我们使用的es5编译器不支持
async
。