Comment changer la valeur d'une boîte de sélection dans un test d'unité angulaire2?

J'ai un Angular2 composant qui contient une boîte de sélection qui ressemble

<select [(ngModel)]="envFilter" class="form-control" name="envSelector" (ngModelChange)="onChangeFilter($event)">
    <option *ngFor="let env of envs" [ngValue]="env">{{env}}</option>
</select>

Je suis en train d'écrire un test unitaire pour le ngModelChange événement. Ceci est mon dernier échec de la tentative

it("should filter and show correct items", async(() => {
    fixture.detectChanges();
    fixture.whenStable().then(() => {
        el = fixture.debugElement.query(By.name("envSelector"));
        fixture.detectChanges();
        makeResponse([hist2, longhist]);
        comp.envFilter = 'env3';
        el.triggerEventHandler('change', {});
        fixture.whenStable().then(() => {
            fixture.detectChanges();
            expect(comp.displayedHistory).toEqual(longhist);
        });
    });

La partie que je vais avoir des ennuis avec, est que la modification de la valeur du sous-jacent modèle comp.envFilter = 'env3'; ne pas déclencher le changement de méthode. J'ai ajouté el.triggerEventHandler('change', {}); mais ce lève Failed: Uncaught (in promise): ReferenceError: By is not defined. Je ne trouve aucune indication dans la documentation... des idées?

source d'informationauteur Paul Becotte

  1. 17

    Aussi loin que l'erreur. Il semble que vous avez juste besoin d'importer By. Ce n'est pas quelque chose qui est mondial. Il doit être importé à partir du module suivant

    import { By } from '@angular/platform-browser';

    Autant que l'essai de la partie, c'est ce que j'ai pu comprendre. Lorsque vous modifiez une valeur dans un composant, vous devez déclencher un changement de détection de mettre à jour la vue. Vous faites cela avec fixture.detectChanges(). Une fois cela fait, normalement la vue doit être mis à jour avec la valeur.

    De tester quelque chose de similaire à votre exemple, il semble que ce n'est pas le cas. Il semble qu'il y ait encore une certaine tâche asynchrone passe après la détection du changement. Dire que nous avons les éléments suivants

    const comp = fixture.componentInstance;
const select = fixture.debugElement.query(By.css('select'));

comp.selectedValue = 'a value;
fixture.DetectChanges();
expect(select.nativeElement.value).toEqual('1: a value');

    Cela ne semble pas fonctionner. Il apparaît qu'il y a quelques async passe causant la valeur de ne pas être encore fixé. Nous avons donc besoin d'attendre la async tâches en appelant fixture.whenStable

    comp.selectedValue = 'a value;
fixture.DetectChanges();
fixture.whenStable().then(() => {
  expect(select.nativeElement.value).toEqual('1: a value');
});

    Ci-dessus serait de travailler. Mais maintenant nous avons besoin de déclencher le changement événement qui ne se produit pas automatiquement. 

    fixture.whenStable().then(() => {
  expect(select.nativeElement.value).toEqual('1: a value');

  dispatchEvent(select.nativeElement, 'change');
  fixture.detectChanges();
  fixture.whenStable().then(() => {
    //component expectations here
  });
});

    Maintenant nous avons une autre tâche asynchrone de l'événement. Nous avons donc besoin de se stabiliser à nouveau

    Ci-dessous est un test que j'ai testé avec. C'est un peu de remaniement de l'exemple de la le code source des tests d'intégration. Ils ont utilisé fakeAsync et tick qui est similaire à l'utilisation async et whenStable. Mais avec fakeAsyncvous ne pouvez pas utiliser templateUrldonc je pensais qu'il serait préférable de refactoriser le code à utiliser async.

    Aussi le code source des tests ne sorte de double d'une sorte de test, le premier modèle de test, puis afficher le modèle. Bien qu'il ressemble à votre test a été d'essayer de faire une sorte de deux-test, à partir du modèle autour de l'arrière du modèle. J'ai donc refait un peu à la suite de vos exemple mieux.

    import { Component } from '@angular/core';
import { TestBed, getTestBed, async } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { By } from '@angular/platform-browser';
import { dispatchEvent } from '@angular/platform-browser/testing/browser_util';
@Component({
selector: 'ng-model-select-form',
template: `
<select [(ngModel)]="selectedCity" (ngModelChange)="onSelected($event)">
<option *ngFor="let c of cities" [ngValue]="c"> {{c.name}} </option>
</select>
`
})
class NgModelSelectForm {
selectedCity: {[k: string]: string} = {};
cities: any[] = [];
onSelected(value) {
}
}
describe('component: NgModelSelectForm', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [ FormsModule ],
declarations: [ NgModelSelectForm ]
});
});
it('should go from model to change event', async(() => {
const fixture = TestBed.createComponent(NgModelSelectForm);
const comp = fixture.componentInstance;
spyOn(comp, 'onSelected');
comp.cities = [{'name': 'SF'}, {'name': 'NYC'}, {'name': 'Buffalo'}];
comp.selectedCity = comp.cities[1];
fixture.detectChanges();
const select = fixture.debugElement.query(By.css('select'));
fixture.whenStable().then(() => {
dispatchEvent(select.nativeElement, 'change');
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(comp.onSelected).toHaveBeenCalledWith({name : 'NYC'});
console.log('after expect NYC');
});
});
}));
});
  2. 5

    Regardez cet exemple, à partir angulaire de la source (template_integration_spec.ts)

    @Component({
selector: 'ng-model-select-form',
template: `
<select [(ngModel)]="selectedCity">
<option *ngFor="let c of cities" [ngValue]="c"> {{c.name}} </option>
</select>
`
})
class NgModelSelectForm {
selectedCity: {[k: string]: string} = {};
cities: any[] = [];
}
it('with option values that are objects', fakeAsync(() => {
const fixture = TestBed.createComponent(NgModelSelectForm);
const comp = fixture.componentInstance;
comp.cities = [{'name': 'SF'}, {'name': 'NYC'}, {'name': 'Buffalo'}];
comp.selectedCity = comp.cities[1];
fixture.detectChanges();
tick();
const select = fixture.debugElement.query(By.css('select'));
const nycOption = fixture.debugElement.queryAll(By.css('option'))[1];
//model -> view
expect(select.nativeElement.value).toEqual('1: Object');
expect(nycOption.nativeElement.selected).toBe(true);
select.nativeElement.value = '2: Object';
dispatchEvent(select.nativeElement, 'change');
fixture.detectChanges();
tick();
//view -> model
expect(comp.selectedCity['name']).toEqual('Buffalo');
}));
  3. 4

    J'ai trouvé peeskillet réponse très utile, mais malheureusement c'est un peu démodé, comme la façon de distribuer un Événement a été changé. J'ai aussi trouvé qu'il était inutile de faire appel à whenStable(). Voici donc une mise à jour de test à l'aide de peeskillet de l'installation:

        it('should go from model to change event', async(() => {
const fixture = TestBed.createComponent(NgModelSelectForm);
const comp = fixture.componentInstance;
spyOn(comp, 'onSelected');
comp.cities = [{'name': 'SF'}, {'name': 'NYC'}, {'name': 'Buffalo'}];
comp.selectedCity = comp.cities[1];
fixture.detectChanges();
const select = fixture.debugElement.query(By.css('select'));
fixture.whenStable().then(() => {
select.nativeElement.dispatchEvent(new Event('change'));
fixture.detectChanges();
expect(comp.onSelected).toHaveBeenCalledWith({name : 'NYC'});
console.log('after expect NYC');
});
}));