Tests unitaires d'Angular 2 - @ViewChild est indéfini

Question

Je suis en train d'écrire un test unitaire Angular 2. J'ai un @ViewChild que je dois reconnaître après l'initialisation du composant. Dans ce cas, il s'agit d'un Timepicker de la bibliothèque ng2-bootstrap, mais les spécificités ne devraient pas avoir d'importance. Après avoir detectChanges() l'instance du sous-composant n'est toujours pas définie.

Pseudo-code :

@Component({
    template: `
        <form>
            <timepicker
                #timepickerChild
                [(ngModel)]="myDate">
            </timepicker>
        </form>
    `
})
export class ExampleComponent implements OnInit {
    @ViewChild('timepickerChild') timepickerChild: TimepickerComponent;
    public myDate = new Date();
}

// Spec
describe('Example Test', () => {
    let exampleComponent: ExampleComponent;
    let fixture: ComponentFixture<ExampleComponent>;

    beforeEach(() => {
        TestBed.configureTestingModel({
            // ... whatever needs to be configured
        });
        fixture = TestBed.createComponent(ExampleComponent);
    });

    it('should recognize a timepicker'. async(() => {
        fixture.detectChanges();
        const timepickerChild: Timepicker = fixture.componentInstance.timepickerChild;
        console.log('timepickerChild', timepickerChild)
    }));
});

Le pseudo-code fonctionne comme prévu jusqu'à ce que vous atteigniez le journal de la console. Le pseudo-code fonctionne comme prévu jusqu'à ce que vous atteigniez le journal de la console. timepickerChild n'est pas défini. Pourquoi cela se produit-il ?

Answer 1

Pour une autre façon de procéder, reportez-vous à cet article :

https://stackoverflow.com/a/70966565/11797105