web-dev-qa-db-fra.com

Angular Erreur de Karma Jasmine: État incorrect: Impossible de charger le résumé de la directive

Je développe un référentiel github (avec angular 7 et angular-cli), et j'ai quelques tests avec Karma et Jasmine travaillant dans la branche master.

Maintenant, j'essaie d'ajouter une fonctionnalité de chargement paresseux, le fait est que les tests passés auparavant ne le sont plus. C'est amusant car seuls les tests du module de chargement paresseux échouent ...

Voici le code et l'erreur:

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

L'erreur est la suivante:

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)

Vous pouvez voir le projet entier, pour plus de détails si vous en avez besoin.

UPDATE: déclaration ajoutée comme ceci: 

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

Maintenant, de nouvelles erreurs apparaissent:

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'.

Et plus encore ... c'est comme toutes les directives et tous les composants du matériel angular, et le tuyau translaté de ngx-translate/core ne semble pas être inclus ...

MISE À JOUR: SOLUTION FINALE

Le problème était que HeroesModule n'avait été importé nulle part. Cela fonctionne car HeroesModule déclare HeroDetailComponent, qui était le problème initial :

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();
  }));
});
javascriptangularkarma-runnerkarma-jasmineangular-cli
72
ismaestro

Vous avez passé HeroDetailComponent à TestBed.createComponent() sans d'abord déclarer le composant:

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

J'espère que ça aide.

Mise à jour des erreurs suivantes dans votre test: ajout de quelques importations supplémentaires (prenez simplement votre modèle HeroModule comme modèle, car c’est essentiellement ce que vous souhaitez importer et fournir).

131
lexith

Vous manquez les déclarations, vous devez ajouter la classe en cours de test dans les déclarations.

declarations: [component]
5
Akash Yellappa

Mon collègue et moi avons eu ce problème, mais le correctif était très différent de tout ce qui existe sur Internet.

Nous utilisons le code Visual Studio et les noms de dossier ne sont pas sensibles à la casse. À cause de cela, nous avons demandé à tout le monde d'utiliser une convention de dénomination minuscule, mais un nom majuscule a fini par entrer dans le contrôle de code source. Nous l'avons renommé, de manière détournée, et tout allait bien.

Un mois plus tard, mon collègue a commencé à demander à un test unitaire spécifique de rompre avec ce message d'erreur. Seul son ordinateur était en panne lors de ce test. Nous avons littéralement commenté tout le code qui pourrait effectuer le test et nous avons tout de même eu l'erreur. Finalement, j'ai globalement cherché la classe et nous nous sommes rendus compte que le nom du dossier était revenu au nom majuscule. Nous l'avons renommé en minuscule, sans modifications en attente reconnues que je pourrais ajouter ..., et le test a fonctionné.

Que ce soit une leçon à suivre les guides de style. :)

Par souci de clarté, le correctif ressemblait à changer le nom du dossier FOO en foo.

2
christo8989

Ce type d'erreur est provoqué par l'ajout manquant de composant dans les déclarations et les services dans le fournisseur de configuration TestBed.

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

vous devez importer le composant HeroDetailComponent correctement. Avis que même le cas des lettres est une matière dans les chemins. i.e ('@ angular/forms' est correct, MAIS '@ @ angular/Forms' ne l’est pas.

1
sami

Si vous souhaitez tester un composant sans le compiler, vous pouvez le déclarer en tant que fournisseur:

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

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

0
Stevanicus