Winkel-Karma, Jasmine Error: Illegal Status: Konnte nicht geladen, in der Zusammenfassung nach der Richtlinie
Entwickle ich ein github-repository (mit Winkel 7 und eckig-cli), und ich habe einige tests mit Karma und Jasmine arbeiten im master-Zweig.
Nun bin ich versucht, hinzuzufügen lazy loading-Funktion, die Sache ist die, dass die tests, die vorher bestanden, jetzt sind Sie nicht. Es ist lustig, weil nur die tests von den lazy loading-Modul Versagen...
Hier ist der code und die Fehlermeldung:
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();
}));
});
Der Fehler ist dieser:
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)
Können Sie sehen, das gesamte Projekt, für mehr details, wenn Sie es brauchen.
UPDATE: hinzugefügte Erklärung, wie diese:
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
AppModule
],
declarations: [HeroDetailComponent],
providers: [
{provide: APP_BASE_HREF, useValue: '/'}
],
}).compileComponents();
}));
Nun neue Fehler angezeigt:
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'.
Mehr... es ist wie bei allen Richtlinien und Komponenten kantige material, und die pipe übersetzen von ngx-übersetzen/Kern, die anscheinend nicht enthalten...
AKTUALISIERT: ENDGÜLTIGE LÖSUNG
Das problem war, dass HeroesModule wurde nicht importiert wurden, überall. Dies funktioniert, weil HeroesModule erklärt HeroDetailComponent, das war das anfängliche problem:
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();
}));
});
- Sie brauchen nicht zu erklären, dass die Komponente zu testen, die Sie gerade brauchen, um das setup der test-Bett etwas anders: github.com/angular/angular/issues/17477#issuecomment-510397690
Du musst angemeldet sein, um einen Kommentar abzugeben.
Übergeben
HeroDetailComponent
zuTestBed.createComponent()
ohne die Deklaration der Komponente:Hoffe, es hilft.
Update für die folgenden Fehler in Ihrem test: Hinzugefügt einige mehr Importe (nur nehmen Sie Ihre HeroModule als Blaupause, weil das ist im Grunde, was Sie wollen, zu importieren und zur Verfügung stellen).
Ihnen fehlen die Erklärungen, die Sie hinzufügen müssen, um die Klasse getestet, die in den Erklärungen.
Diese Art von Fehler, die durch fehlende hinzufügen Komponente in Erklärungen und Dienstleistungen in Anbieter von TestBed-Konfiguration.
Mein Kollege und ich hatten dieses Problem, aber das Update war anders als alles andere auf dem internet.
Sind wir mit Visual Studio Code und die Ordner-Namen werden groß-und Kleinschreibung. Deshalb sind wir gefragt, jeder Nutzung einen Kleinbuchstaben, Namenskonvention, die aber schließlich einen Großbuchstaben name kam in die Quellcodeverwaltung ein. Wir umbenannt, in einen Kreisverkehr, und alles war in Ordnung.
Einen Monat später, mein Kollege begann sich ein bestimmtes Gerät testen, um zu brechen mit dieser Fehlermeldung. Nur sein computer war zu brechen auf diesen test. Wir buchstäblich auskommentiert den code, könnte möglich sein, Einfluss auf die test-und wir haben ja noch den Fehler. Schließlich habe ich weltweit gesucht für die Klasse und wir haben gemerkt, dass die Ordner Namen hatte, wird wieder zu den Großbuchstaben Namen. Wir umbenannt es wieder zu einem Kleinbuchstaben den Namen, mit keine ausstehenden änderungen erkannt, könnte ich hinzufügen..., und der test hat funktioniert.
Lassen, dass eine Lektion zu Folgen, style guides. 🙂
Für Klarheit, das Update war ähnlich wie das ändern der Ordner-name
FOO
zufoo
.müssen Sie importieren Sie die Komponente HeroDetailComponent in der richtigen Weise. Bemerken, dass auch bei Buchstaben ist die Materie im Wege. ich.e ('@Winkel/forms' ist richtig, ABER'@eckig/Formulare' nicht.
Wenn Sie testen möchten, eine Komponente ohne kompilieren, dann können Sie durch die Deklaration als Anbieter:
Finden Sie unter: https://angular.io/guide/testing#component-test-basics