unit testing - test - Prueba de unidad Angular 2-@ViewChild no está definido

testing angular 2

Question

Estoy escribiendo una prueba de Angular 2 unit. Tengo un subcomponente @ViewChild que necesito reconocer después de que el componente se inicializa. En este caso, es un componente Timepicker de la biblioteca ng2-bootstrap, aunque los detalles no deberían importar. Después de que detectChanges() la instancia del subcomponente aún no está definida.

Pseudo-código:

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

El pseudocódigo funciona como se espera hasta que llegue al registro de la consola. El timepickerChild no está definido. ¿Por qué está pasando esto?

Answer 1

Creo que debería funcionar. Quizás olvidó importar algún módulo en su configuración. Aquí está el código completo para la prueba:

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

Ejemplo de Plunker

Answer 2

En la mayoría de los casos, simplemente agréguelo a la desaceleración y estará listo para comenzar.

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