Angular 2 测试：从 ngModel 获取价值

Question

我正在尝试编写一个断言 Angular 的 ngModel 属性的测试。此时，我可以轻松测试标签。但是，我无法 select 来自 ngModel

的值

Question What is the best way to get the value from ngModel?

HTML:

<div name="customerName">
    <label>Customer Name: </label>
    <div>
        <input type="text" class="form-control" [ngModel]="customer.name" asInline disabled />
    </div>
</div>

测试

it('bindings', () => {
    fixture = TestBed.createComponent(CustomerComponent);
    fixture.detectChanges();

    // this works
    expect(fixture.debugElement.nativeElement.querySelector('[name=customerName] label').textContent).toEqual('Customer Name: '); 
    // this assert fails
    expect(fixture.debugElement.nativeElement.querySelector('[name=customerName] div input').value).toEqual('Bobby Tables'); 
});

Answer 1

将async与whenStable

一起使用

it('should recognize a timepicker', async(() => {
  fixture = TestBed.createComponent(ExampleComponent);
  fixture.detectChanges();

  fixture.whenStable().then(() => {
    expect(fixture.debugElement.nativeElement.querySelector('[name=customerName] label').textContent).toEqual('Customer Name: ');

    expect(fixture.debugElement.nativeElement.querySelector('[name=customerName] div input').value).toEqual('Bobby Tables');
  });   
}));

Plunker Example

或 fakeAsync 与 tick:

it('should recognize a timepicker', fakeAsync(() => {
  fixture = TestBed.createComponent(ExampleComponent);
  fixture.detectChanges();
  tick();

  expect(fixture.debugElement.nativeElement.querySelector('[name=customerName] label').textContent).toEqual('Customer Name: ');

  expect(fixture.debugElement.nativeElement.querySelector('[name=customerName] div input').value).toEqual('Bobby Tables');
}));

Plunker Example

并且不要忘记导入 FormsModule:

TestBed.configureTestingModule({
    imports: [FormsModule],
    ...

Angular 2 测试：从 ngModel 获取价值

Angular 2 Testing: Get Value from ngModel

angular4

angular