angular - ng 测试给出组件应该创建
问题描述
我已经在Angular 6
.
我还没有编写任何测试,但是在生成components
和services
.
当我使用运行自动生成的测试时
ng test
它给出了太多错误。其中一个错误就像
ChangeAvatarModalComponent should create
Failed: Template parse errors:
There is no directive with "exportAs" set to "ngForm" ("
<div class="modal-body">
<form [formGroup]="changeAvatarForm" id="avatar-form" [ERROR ->]#formDir="ngForm" (submit)="onSubmit()">
<div class="row">
<div class="col-md-12">
"): ng:///DynamicTestModule/ChangeAvatarModalComponent.html@8:56
Can't bind to 'formGroup' since it isn't a known property of 'form'. ("
<div class="modal-body">
我有一个具有ChangeAvatarModalComponent的帐户模块。
我在account.module.ts中有以下几行
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
RouterModule.forChild(AccountRoutes),
NgbModule
],
declarations: [
ChangeAvatarModalComponent
],
entryComponents: [
ChangeAvatarModalComponent
]
})
export class AccountModule { }
并且也FormsModule
被ReactiveFormsModule
导入app.module.ts
生成的日志中有很多这样的错误。
编辑 2:change-avatar-modal.component.spec.ts
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ChangeAvatarModalComponent } from './change-avatar-modal.component';
describe('ChangeAvatarModalComponent', () => {
let component: ChangeAvatarModalComponent;
let fixture: ComponentFixture<ChangeAvatarModalComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ChangeAvatarModalComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ChangeAvatarModalComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
解决方案
您没有.spec.ts
在您提供的代码中显示您的文件。
您遇到表单问题的原因是因为在您的规范文件中,您也需要像这样导入相关模块:
describe('ExampleComponent', () => {
let component: ExampleComponent
let fixture: ComponentFixture<ExampleComponent>
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule,
TranslateModule.forRoot({
loader: {provide: TranslateLoader, useClass: TranslateFakeLoader}
}),
HttpClientModule,
HttpClientTestingModule,
FormsModule,
SfFormModule,
ReactiveFormsModule,
NguiAutoCompleteModule,
NgxMyDatePickerModule,
NgxPermissionsModule.forRoot(),
PipeModule,
StoreModule.forRoot({}),
LayoutsModule
],
declarations: [
ExampleComponent
],
providers: [
{provide: APP_BASE_HREF, useValue: '/'},
{provide: ToastrService, MockToastrService},
ActionsSubject,
SimService
]
}).compileComponents()
}))
beforeEach(() => {
fixture = TestBed.createComponent(ExampleComponent)
component = fixture.componentInstance
fixture.detectChanges()
})
it('should create', () => {
expect(component).toBeTruthy()
})
})
在您的情况下,您需要在规范文件中导入 FormsModule 和/或 ReactiveFormsModule 并探测其他内容。
为了减少导入的数量,您可能只需将自己的模块导入规范文件 - 例如 AccountModule 和/或 AppModule - 因为这些已经导入表单内容。
推荐阅读
- java - 仅在具有 Windows 身份验证的两种情况之一中失败时如何解决“登录失败”错误(JDBC Java)
- python - 如何从羽毛字节对象读入数据帧
- sql - 需要帮助来理解下面的 oracle 代码
- python - Scipy 正弦拟合有错误的偏移量
- javascript - 从容器调用组件并根据父容器提供的输入参数呈现表单
- go - 安装 go 模块失败并显示“无效:模块包含 go.mod 文件,因此主要版本必须兼容”
- azure - 如何将 Azure 服务总线与事件中心集成?
- sql - SQL 中 AVG 函数后的重复行
- python - Tkinter 中的 ASCII 艺术与控制台中的不同
- python - Pandas Group-By 和 Sum 没有创建新的数据框