Angular单元测试输入值

输入没有文本内容，只有一个值.所以expect(field.textContent).toBe('someValue');是没用的.这可能就是失败的地方.第二个期望应该会过go .这是一个完整的测试.

@Component({
  template: `<input type="text" [(ngModel)]="user.username"/>`
})
class TestComponent {
  user = { username: 'peeskillet' };
}

describe('component: TestComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [FormsModule],
      declarations: [ TestComponent ]
    });
  });

  it('should be ok', async(() => {
    let fixture = TestBed.createComponent(TestComponent);
    fixture.detectChanges();
    fixture.whenStable().then(() => {
      let input = fixture.debugElement.query(By.css('input'));
      let el = input.nativeElement;

      expect(el.value).toBe('peeskillet');

      el.value = 'someValue';
      el.dispatchEvent(new Event('input'));

      expect(fixture.componentInstance.user.username).toBe('someValue');
    });
  }));
});

重要的是前fixture.whenStable()名.发生的表单有一些异步设置，所以我们需要在执行fixture.detectChanges()之后等待完成.如果您使用fakeAsync()而不是async()，那么您可以在fixture.detectChanges()之后直接呼叫tick().