我正在开发一个github repository(有角度7和角度cli),我有一些测试,Karma和Jasmine在主分支中工作。
现在我正在尝试添加延迟加载功能,事情是,之前通过的测试,现在他们没有。这很有趣,因为只有延迟加载模块的测试失败了......
这是代码和错误:
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();
}));
});
错误是这样的:
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)
如果需要,您可以查看整个项目,了解更多详细信息。
更新:添加如下声明:
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
AppModule
],
declarations: [HeroDetailComponent],
providers: [
{provide: APP_BASE_HREF, useValue: '/'}
],
}).compileComponents();
}));
现在,出现新错误:
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'.
还有更多...就像角度材料中的所有指令和组件一样,并且ngx-translate / core的管道转换似乎不包括在内......
更新:最终解决方案
问题是HeroesModule没有被导入任何地方。这是有效的,因为HeroesModule声明了HeroDetailComponent,这是最初的问题:
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();
}));
});
您将HeroDetailComponent
传递给TestBed.createComponent()
而未先声明该组件:
TestBed.configureTestingModule({
imports: [AppModule,
CommonModule,
FormsModule,
SharedModule,
HeroRoutingModule,
ReactiveFormsModule
],
providers: [
{provide: APP_BASE_HREF, useValue: '/'}
],
declarations: [HeroDetailComponent]
}).compileComponents();
希望能帮助到你。
更新您的测试中的以下错误:添加了一些更多的导入(只需将您的HeroModule作为蓝图,因为这基本上是您要导入和提供的)。
您缺少声明,需要将正在测试的类添加到声明中。
declarations: [component]
由于缺少在TestBed配置的提供程序中的声明和服务中添加组件而引发此类错误。
beforeEach(() => {
TestBed.configureTestingModule({
imports: [RouterTestingModule.withRoutes([
{ path: 'home', component: DummyComponent },
{ path: 'patients/find', component: DummyComponent }
])],
declarations: [RoutingComponent, DummyComponent,BreadcrumbComponent],
providers : [BreadCrumbService]
});
我的同事和我有这个问题,但修复方式与互联网上的其他任何东西都不同。
我们使用的是Visual Studio Code,文件夹名称不区分大小写。因此,我们要求每个人使用小写命名约定,但最终大写名称进入源代码控制。我们以迂回的方式将其重命名,一切都很好。
一个月后,我的同事开始进行特定的单元测试以打破此错误消息。只有他的电脑打破了那个测试。我们确实注释掉了可能影响测试的所有代码,但我们仍然遇到了错误。最后,我全局搜索了该类,我们意识到文件夹名称已恢复为大写名称。我们将其重命名为小写名称,未添加任何未决更改,我可以添加...,并且测试工作正常。
让这成为遵循风格指南的一课。 :)
为清楚起见,修复类似于将文件夹名称FOO
更改为foo
。
您必须以正确的方式导入组件HeroDetailComponent。请注意,即使是字母也是路径中的问题。即('@ angular / forms'是正确的,但'@ angular / Forms'不是。
如果要在不编译组件的情况下测试组件,则可以将其声明为提供者:
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);
});