javascript - Angular 2/Jasmine 测试输入字段绑定(bind)

Question

我目前正在使用 Angular 2 和 Jasmine，并且有一个简单的输入字段。我正在尝试编写一个单元测试并使用这个 example来自 Angular.io 网站。鉴于它的信息更丰富，您可以看到 plnkr 。查找 app->dashboard->dasboard-hero.component.ts。

该示例使用选择，我在其中使用输入并且无法触发 eventEmitter。

我的组件:

export class MyInputComponent implements OnInit {
  private _myBind: string;
  @Output() myBindChange = new EventEmitter();

  @Input()
  set myBind(bindField: string) {
    this.myBindChange.emit(bindField);
    this._myBind = bindField;
  }

  get myBind(): string {
    return this._myBind;
  }

HTML:

<p><input type="text"  [(ngModel)]="myBind"></p>

当包含在演示 HTML 页面中时，效果很好。

测试用例:

  describe('Testing the Bind', () => { 
   let fix: ComponentFixture<MyInputComponent>;
   let ele: DebugElement;  
   let comp: MyInputComponent;

     beforeEach(() => {
       fix = TestBed.createComponent(MyInputComponent);
       comp = fix.componentInstance;
       ele = fix.debugElement.query(By.css('input'));
       comp.myBind = 'Nikki';  
     });

     it('should emit when input added', () => {
       let boundString: string;
       boundString = 'zzz';  //Dummy value so bound is not null.
       comp.myBindChange.subscribe((str: string) 
            => boundString = str);  //Listen for the event.
       ele.triggerEventHandler('keypress', null);  //Is the event triggered?
       expect(boundString).toBe('Nikki');  //fails, it's still zzz.
     });  });

我可能做错了什么，或者我可能触发了错误的事件。

事件有错吗？
我的测试有问题吗？

顺便说一句，我会投票给好的答案。

Answer 1

在更改 comp.myBind 的值后，尝试向您的装置添加 detectChanges()

fix.detectChanges()

您可以在此处阅读有关测试中的更改检测的信息:

https://angular.io/docs/ts/latest/guide/testing.html#!#detect-changes