Question

我目前正在使用Angular 2和Jasmine并且有一个简单的输入字段。我正在尝试编写单元测试并使用Angular.io站点中的example。鉴于它提供了更多信息，您可以看到plnkr 。查找app-＆gt; dashboard-＆gt; dasboard-hero.component.ts。

该示例使用select，我使用输入并且无法触发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

更改if (cuser.ToLower() == uname.ToLower() && cpass.ToLower() == upass.ToLower())

的值后，尝试向您的灯具添加detectChanges()

comp.myBind

您可以在此处阅读测试中的变更检测：

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

Answer 2

最后，我不得不在测试用例中更改一行。

卸下：

ele.triggerEventHandler('keypress', null);  //Is the event triggered?

替换为：

ele.myBind('Nikki');

这会触发发射器，boundString会更新，允许测试用例通过。

Angular 2 / Jasmine测试输入字段绑定

2 个答案: