Zajmuję się repozytorium GitHub (z kątowym 7 i kątowego-CLI) i mam kilka testów z Karma i Jasmine pracuje w gałęzi master.
Teraz próbuję dodać funkcję leniwego ładowania, chodzi o to, że testy, które wcześniej przeszły, teraz nie. To zabawne, bo tylko testy z modułu leniwego ładowania kończą się niepowodzeniem ...
Oto kod i błąd:
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();
}));
});
Błąd jest następujący:
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)
Możesz zobaczyć cały projekt, jeśli potrzebujesz więcej szczegółów.
UPDATE: dodano deklarację taką jak ta:
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
AppModule
],
declarations: [HeroDetailComponent],
providers: [
{provide: APP_BASE_HREF, useValue: '/'}
],
}).compileComponents();
}));
Teraz pojawiają się nowe błędy:
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'.
I więcej ... to tak, jakby wszystkie dyrektywy i komponenty z materiału kątowego, a rura tłumaczona z ngx-translate / core nie wydaje się być uwzględniona ...
AKTUALIZACJA: OSTATECZNE ROZWIĄZANIE
Problem polegał na tym, że HeroesModule nie został nigdzie zaimportowany. To działa, ponieważ HeroesModule deklaruje HeroDetailComponent, co było początkowym problemem :
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();
}));
});
źródło
Odpowiedzi:
Przeszedłeś
HeroDetailComponent
doTestBed.createComponent()
bez uprzedniego deklarowania komponentu:TestBed.configureTestingModule({ imports: [AppModule, CommonModule, FormsModule, SharedModule, HeroRoutingModule, ReactiveFormsModule ], providers: [ {provide: APP_BASE_HREF, useValue: '/'} ], declarations: [HeroDetailComponent] }).compileComponents();
Mam nadzieję, że to pomoże.
Aktualizacja dotycząca następujących błędów w twoim teście: Dodano więcej importu (po prostu weź swój HeroModule jako plan, ponieważ w zasadzie to chcesz importować i udostępniać).
źródło
Brakuje deklaracji, musisz dodać testowaną klasę do deklaracji.
źródło
Mój współpracownik i ja mieliśmy ten problem, ale poprawka była inna niż cokolwiek innego w Internecie.
Używamy Visual Studio Code i w nazwach folderów nie jest rozróżniana wielkość liter. Z tego powodu poprosiliśmy wszystkich o użycie konwencji nazewnictwa pisanych małymi literami, ale ostatecznie nazwa pisana wielkimi literami trafiła do kontroli źródła. Zmieniliśmy jego nazwę w okrężny sposób i wszystko było w porządku.
Miesiąc później mój współpracownik zaczął otrzymywać określony test jednostkowy, aby zerwać z tym komunikatem o błędzie. Podczas tego testu psował się tylko jego komputer. Dosłownie wykomentowaliśmy cały kod, który mógł wpływać na test, i nadal otrzymujemy błąd. Wreszcie przeszukałem globalnie klasę i zdaliśmy sobie sprawę, że nazwa folderu powróciła do nazwy pisanej wielkimi literami. Zmieniliśmy nazwę z powrotem na nazwę zapisaną małymi literami, bez rozpoznania żadnych oczekujących zmian, czy mogę dodać ... i test zadziałał.
Niech to będzie lekcja do podążania za wskazówkami dotyczącymi stylu. :)
Dla jasności poprawka była podobna do zmiany nazwy folderu
FOO
nafoo
.źródło
Ten typ błędu jest zgłaszany z powodu braku dodawania składnika w deklaracjach i usługach u dostawcy konfiguracji TestBed.
beforeEach(() => { TestBed.configureTestingModule({ imports: [RouterTestingModule.withRoutes([ { path: 'home', component: DummyComponent }, { path: 'patients/find', component: DummyComponent } ])], declarations: [RoutingComponent, DummyComponent,BreadcrumbComponent], providers : [BreadCrumbService] });
źródło
musisz zaimportować komponent HeroDetailComponent we właściwy sposób. Zauważ, że nawet wielkość liter ma znaczenie w ścieżkach. tzn. („@ angular / Forms” jest poprawne, ALE „@ angular / Forms” nie.
źródło
Dla tych, którzy wciąż mają z tym problemy - przeczytałem osobny numer na githubie, w którym omówiono zmiany wprowadzone przez zespół Angulara w funkcji wywołania zwrotnego beforeEach.
Oto co zrobiłem:
beforeAll(async(() => { TestBed.configureTestingModule({ declarations: [BannerNotificationComponent] }).compileComponents() fixture = TestBed.createComponent(BannerNotificationComponent); component = fixture.componentInstance; fixture.detectChanges(); }));
Użycie beforeAll rozwiązuje problem. Mam nadzieję, że pomoże to innym, ponieważ rozwiązanie tego niejasnego błędu zajęło mi około dnia.
źródło
Jeśli chcesz przetestować komponent bez kompilowania go, możesz zadeklarować go jako dostawcę:
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); });
Zobacz: https://angular.io/guide/testing#component-test-basics
źródło