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

Je pense que cela devrait fonctionner. Peut-être avez-vous oublié d'importer un module dans votre configuration. Voici le code complet pour le test :

import { TestBed, ComponentFixture, async } from '@angular/core/testing';

import { Component, DebugElement } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { ExampleComponent } from './test.component';
import { TimepickerModule, TimepickerComponent } from 'ng2-bootstrap/ng2-bootstrap';

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

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [FormsModule, TimepickerModule.forRoot()],
      declarations: [
        ExampleComponent
      ]
    });
    fixture = TestBed.createComponent(ExampleComponent);
  });

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

Exemple d'un plumitif

Answer 2

Assurez-vous que votre composant enfant n'a pas de *ngIf qui s'évalue à false. Si c'est le cas, le composant enfant sera indéfini.

Answer 3

Dans la plupart des cas, il suffit de l'ajouter à la déclaration et le tour est joué.

beforeEach(async(() => {
        TestBed
            .configureTestingModule({
                imports: [],
                declarations: [TimepickerComponent],
                providers: [],
            })
            .compileComponents()

Answer 4

Si vous souhaitez tester le composant principal à l'aide d'un talon vous devez ajouter un fournisseur au composant enfant stub ; comme expliqué dans l'article Test unitaire d'Angular @ViewChild .

import { Component } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-child',
  template: '',
  providers: [
    {
      provide: ChildComponent,
      useClass: ChildStubComponent
    }
  ]
})
export class ChildStubComponent {
  updateTimeStamp() {}
}

Notez que les fournisseurs pour utiliser la classe Composant ChildStub cuando Composant enfant est nécessaire.

Vous pouvez alors créer votre composant parent normalement, son enfant sera créé avec le type Composant ChildStub .

Answer 5

Même après avoir suivi toutes les instructions de la réponse acceptée, vous obtenez une instance non définie du composant enfant, alors vérifiez si ce composant est visible.

Dans mon cas, il y avait *ngIf appliqué sur le contrôle, c'est pourquoi l'instance de l'enfant était indéfinie, puis j'ai supprimé et vérifié et cela a fonctionné pour moi.