web-dev-qa-db-de.com

Winkeleinheit Test-Eingabewert

Ich habe die offizielle Angular2-Dokumentation für Komponententests gelesen ( https://angular.io/docs/ts/latest/guide/testing.html ). Ich habe jedoch Schwierigkeiten damit, den Eingabefeldwert einer Komponente so einzustellen, dass sie reflektiert wird in der Komponenteneigenschaft (über ngModel gebunden). Der Bildschirm funktioniert gut im Browser, aber im Komponententest kann ich den Feldwert scheinbar nicht einstellen.

Ich verwende den folgenden Code. "Fixture" wird ordnungsgemäß initialisiert, da andere Tests einwandfrei funktionieren. "comp" ist eine Instanz meiner Komponente, und das Eingabefeld ist über ngModel an "user.username" gebunden.

it('should update model...', async(() => {
    let field: HTMLInputElement = fixture.debugElement.query(By.css('#user')).nativeElement;
    field.value = 'someValue'
    field.dispatchEvent(new Event('input'));
    fixture.detectChanges();

    expect(field.textContent).toBe('someValue');
    expect(comp.user.username).toBe('someValue');
  }));

Meine Version von Angular2: "@angular/core": "2.0.0"

23
Zyga

Eingaben haben keinen textContent, nur einen Wert. expect(field.textContent).toBe('someValue'); ist also nutzlos. Das ist wahrscheinlich das, was versagt. Die zweite Erwartung sollte jedoch vorübergehen. Hier ist ein kompletter Test.

@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');
    });
  }));
});
44
Paul Samsotha

Einfach hinzufügen

fixture.detectChanges();

fixture.whenStable().then(() => {
  // here your expectation
})
5
ktretyak

Verwenden Sie Ihre Expect/Assert-Funktion in der whenStable.then-Funktion wie folgt:

    component.label = 'blah';
    fixture.detectChanges();

    fixture.whenStable().then(() => {
             expect(component.label).toBe('blah');
        }
1
Akash Yellappa