web-dev-qa-db-fra.com

Angular Test de 2 unités - @ViewChild n'est pas défini

Je vous écris un Angular 2 unités de test. J'ai un sous-composant @ViewChild Que je dois reconnaître après l'initialisation du composant. Dans ce cas, il s'agit d'un composant Timepicker de la bibliothèque ng2-bootstrap, même si les détails ne devraient pas avoir d'importance. Après I detectChanges(), l'occurrence 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 timepickerChild n'est pas défini. Pourquoi cela arrive-t-il?

unit-testingangularangular2-templateng2-bootstrap
33
ebakunin

Je pense que ça devrait marcher. 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 de Plunker

19
yurzui

Dans la plupart des cas, ajoutez-le simplement à la décélération et vous êtes prêt à partir.

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

Assurez-vous que votre composant enfant ne possède pas un * ngIf évalué à false. Si tel est le cas, le composant enfant sera indéfini.

1
Zobair Saleem