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