javascript - tutorial - Error angular de jazmín de karma: estado ilegal: no se pudo cargar el resumen de la directiva

unit test angular 6

Question

Estoy desarrollando un repositorio github (con angular 7 y angular-cli), y tengo algunas pruebas con Karma y Jasmine trabajando en la rama maestra.

Ahora estoy tratando de agregar la función de carga diferida, la cuestión es que las pruebas que antes pasaban, ahora no. Es divertido porque solo fallan las pruebas del módulo de carga diferida ...

Aquí está el código y el error:

import {async, TestBed} from ''@angular/core/testing'';
import {APP_BASE_HREF} from ''@angular/common'';
import {AppModule} from ''../../app.module'';
import {HeroDetailComponent} from ''./hero-detail.component'';

describe(''HeroDetailComponent'', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [AppModule
      ],
      providers: [
        {provide: APP_BASE_HREF, useValue: ''/''}
      ],
    }).compileComponents();
  }));

  it(''should create hero detail component'', (() => {
    const fixture = TestBed.createComponent(HeroDetailComponent);
    const component = fixture.debugElement.componentInstance;
    expect(component).toBeTruthy();
  }));
});

El error es este:

Chrome 58.0.3029 (Mac OS X 10.12.6) HeroDetailComponent should create hero detail component FAILED
    Error: Illegal state: Could not load the summary for directive HeroDetailComponent.
        at syntaxError Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/compiler/@angular/compiler.es5.js:1690:22)
        at CompileMetadataResolver.getDirectiveSummary Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/compiler/@angular/compiler.es5.js:15272:1)
        at JitCompiler.getComponentFactory Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/compiler/@angular/compiler.es5.js:26733:26)
        at TestingCompilerImpl.getComponentFactory Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/compiler/@angular/compiler/testing.es5.js:484:1)
        at TestBed.createComponent Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/core/@angular/core/testing.es5.js:874:1)
        at Function.TestBed.createComponent Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/core/@angular/core/testing.es5.js:652:1)
        at UserContext.it Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/src/app/heroes/hero-detail/hero-detail.component.spec.ts:18:29)
        at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/zone.js/dist/zone.js:391:1)
        at ProxyZoneSpec.onInvoke Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/zone.js/dist/proxy.js:79:1)
        at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/zone.js/dist/zone.js:390:1)

Puede ver el proyecto completo, para más detalles si lo necesita.

ACTUALIZACIÓN: declaración agregada como esta:

beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        AppModule
      ],
      declarations: [HeroDetailComponent],
      providers: [
        {provide: APP_BASE_HREF, useValue: ''/''}
      ],
    }).compileComponents();
  }));

Ahora, aparecen nuevos errores:

The pipe ''translate'' could not be found ("<h1 class="section-title">{{[ERROR ->]''heroDetail'' | translate}}</h1>
    <md-progress-spinner *ngIf="!hero"
                         class="progre"): ng:///DynamicTestModule/HeroDetailComponent.html@0:28
    Can''t bind to ''color'' since it isn''t a known property of ''md-progress-spinner''.

Y más ... es como todas las directivas y componentes de material angular, y la traducción de tubería de ngx-translate / core no parece estar incluida ...

ACTUALIZADO: SOLUCIÓN FINAL

El problema era que HeroesModule no se había importado a ningún lado. Esto funciona, porque HeroesModule declara HeroDetailComponent, que fue el problema inicial :

import {async, TestBed} from ''@angular/core/testing'';
import {APP_BASE_HREF} from ''@angular/common'';
import {AppModule} from ''../../app.module'';
import {HeroDetailComponent} from ''./hero-detail.component'';
import {HeroesModule} from ''../heroes.module'';

describe(''HeroDetailComponent'', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        AppModule,
        HeroesModule
      ],
      providers: [
        {provide: APP_BASE_HREF, useValue: ''/''}
      ],
    }).compileComponents();
  }));

  it(''should create hero detail component'', (() => {
    const fixture = TestBed.createComponent(HeroDetailComponent);
    const component = fixture.debugElement.componentInstance;
    expect(component).toBeTruthy();
  }));
});

Answer 1

Este tipo de error surgió debido a la falta de un componente agregado en declaraciones y servicios en el proveedor de configuración de TestBed.

beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule.withRoutes([
        { path: ''home'', component: DummyComponent },
        { path: ''patients/find'', component: DummyComponent }
      ])],
      declarations: [RoutingComponent, DummyComponent,BreadcrumbComponent],
      providers : [BreadCrumbService]
    });

Answer 2

Mi compañero de trabajo y yo tuvimos este problema, pero la solución fue muy diferente a cualquier otra cosa en Internet.

Estamos utilizando Visual Studio Code y los nombres de las carpetas distinguen entre mayúsculas y minúsculas. Debido a eso, les pedimos a todos que usaran una convención de nomenclatura en minúsculas, pero finalmente un nombre en mayúsculas entró en control de fuente. Le cambiamos el nombre, de forma indirecta, y todo estuvo bien.

Un mes después, mi compañero de trabajo comenzó a recibir una prueba de unidad específica para romper con este mensaje de error. Solo su computadora se estaba rompiendo en esa prueba. Literalmente comentamos todo el código que podría estar afectando la prueba y aún recibimos el error. Finalmente, busqué globalmente la clase y nos dimos cuenta de que el nombre de la carpeta había vuelto al nombre en mayúsculas. Cambiamos el nombre a un nombre en minúscula, sin que se reconozcan cambios pendientes, podría agregar ..., y la prueba funcionó.

Que sea una lección para seguir las guías de estilo. :)

Para mayor claridad, la solución fue similar a cambiar el nombre de la carpeta FOO a foo .

Answer 3

Pasó HeroDetailComponent a TestBed.createComponent() sin declarar primero el componente:

TestBed.configureTestingModule({
  imports: [AppModule,
     CommonModule,
     FormsModule,
     SharedModule,
     HeroRoutingModule,
     ReactiveFormsModule
  ],
  providers: [
    {provide: APP_BASE_HREF, useValue: ''/''}
  ],
  declarations: [HeroDetailComponent]
}).compileComponents();

Espero eso ayude.

Actualización para los siguientes errores en su prueba: Se agregaron algunas importaciones más (solo tome su HeroModule como modelo porque eso es básicamente lo que desea importar y proporcionar).

Answer 4

Si desea probar un componente sin compilarlo, puede declararlo como proveedor:

beforeEach(() => {
  TestBed.configureTestingModule({
    // provide the component-under-test and dependent service
    providers: [
      WelcomeComponent,
      { provide: UserService, useClass: MockUserService }
    ]
  });
  // inject both the component and the dependent service.
  comp = TestBed.get(WelcomeComponent);
  userService = TestBed.get(UserService);
});

Ver: https://angular.io/guide/testing#component-test-basics

Answer 5

Te faltan las declaraciones, debes agregar la clase que se está probando en las declaraciones.

declarations: [component]

Answer 6

debe importar el componente HeroDetailComponent de la manera correcta. Tenga en cuenta que incluso el caso de las letras es materia en las rutas. es decir (''@ angular / formas'' es correcto, PERO ''@ angular / Formas'' no lo es.