web-dev-qa-db-fra.com

Valeur d'entrée du test unitaire angulaire

Je lisais la documentation officielle d'Angular2 pour les tests unitaires ( https://angular.io/docs/ts/latest/guide/testing.html ) mais je ne parviens pas à définir la valeur du champ d'entrée d'un composant dans la propriété du composant (lié via ngModel). L'écran fonctionne bien dans le navigateur, mais dans le test unitaire, il semble que je ne puisse pas définir la valeur des champs.

J'utilise le code ci-dessous. "fixture" est correctement initialisé car les autres tests fonctionnent bien. "comp" est une instance de mon composant et le champ de saisie est lié à "user.username" via ngModel.

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');
  }));

Ma version de Angular2: "@angular/core": "2.0.0"

angularunit-testingangular2-testing
23
Zyga

Les entrées n'ont pas textContent, seulement une valeur. Donc, expect(field.textContent).toBe('someValue'); est inutile. C'est probablement ce qui manque. La deuxième attente devrait passer cependant. Voici un test complet.

@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

Il suffit d'ajouter

fixture.detectChanges();

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

Utilisez votre expect/assert dans la fonction whenStable.then comme ceci:

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

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