Angular 在角9中使用FormGroup时测试发动机故障
我有以下组成部分:Angular 在角9中使用FormGroup时测试发动机故障,angular,typescript,testing,angular9,Angular,Typescript,Testing,Angular9,我有以下组成部分: export class BaseFormComponent implements OnInit { basicFormGroup: FormGroup; constructor( protected basicProviderService: BasicProviderService, protected formBuilder: FormBuilder, protected dialog: MatDialog, protected
export class BaseFormComponent implements OnInit {
basicFormGroup: FormGroup;
constructor(
protected basicProviderService: BasicProviderService,
protected formBuilder: FormBuilder,
protected dialog: MatDialog,
protected spinner: NgxSpinnerService
) {
this.basicFormGroup = this.formBuilder.group({
name:[''],
note: ['', Validators.required],
description: ['', Validators.required]
});
}
}
其模板代码:
<h3><span>Basic form data</span></h3>
<mat-divider></mat-divider>
<form *ngIf="true" [formGroup]="basicFormGroup">
<!-- its content does not matter-->
</form>
我尝试了以下方法:
- 当我使用
时,测试会成功-->因此它可能会因为表单错误而失败ngIf='false'
- 当我将
属性替换为[formGroup]='basicFormGroup'
时,测试失败-->因此任何表单都会失败[formGroup]='undefined'
表单模块
导入
看起来测试引擎无法找到表单的抽象基础
这是什么原因造成的 被动表单需要导入
ReactiveFormsModule
,模板驱动表单需要导入FormsModule
这里使用的是一个formGroup
指令,它是反应式表单的一部分,因此需要ReactiveFormsModule
有关这两种表单之间的差异,请参阅“角度”选项卡。尝试导入ReactiveFormsModule@AnandBhushan它看起来很有效:)你能告诉我为什么
FormsModule
不够,为什么测试需要ReactiveFormsModule
?将您的评论升级为答案,并请解释解决方案。formGroup是ReactiveFormsModule的一部分,而不是FormsModule的一部分
fdescribe('BasicFormComponent', () => {
let component: BasicFormComponent;
let fixture: ComponentFixture<BasicFormComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [BasicFormComponent],
imports: [
FormsModule,
MatDialogModule,
MatAutocompleteModule,
MatSnackBarModule,
MatExpansionModule,
MatStepperModule,
MatFormFieldModule,
TextFieldModule,
MatInputModule,
MatDatepickerModule,
MatNativeDateModule,
MatListModule,
MatSelectModule,
HttpClientTestingModule,
RouterTestingModule,
BrowserAnimationsModule,
CoreModule
],
providers: [
{ provide: BasicProviderService, useClass: BasicProviderServiceStub }
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(BasicFormComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
HeadlessChrome 80.0.3987 (Windows 10.0.0) BasicFormComponent should create FAILED
Error: NodeInjector: NOT_FOUND [ControlContainer]
at getOrCreateInjectable (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:5467:1)
at Module.ɵɵdirectiveInject (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:20759:1)
at NodeInjectorFactory.NgControlStatusGroup_Factory [as factory] (http://localhost:9877/_karma_webpack_/node_modules/@angular/forms/__ivy_ngcc__/fesm2015/forms.js:1013:135)
at getNodeInjectable (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:5598:1)
at instantiateAllDirectives (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:12645:1)
at createDirectivesInstances (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11881:1)
at ɵɵelementStart (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:20943:1)
at BasicFormComponent_Template (ng:///BasicFormComponent.js:192:9)
at executeTemplate (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11841:1)
at renderView (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11627:1)
Expected undefined to be truthy.
at UserContext.<anonymous> (http://localhost:9877/_karma_webpack_/src/app/basic-form/basic-form.component.spec.ts:62:23)
at ZoneDelegate.invoke (http://localhost:9877/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:365:1)
at ProxyZoneSpec.onInvoke (http://localhost:9877/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:305:1)
at ZoneDelegate.invoke (http://localhost:9877/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:364:1)
HeadlessChrome 80.0.3987 (Windows 10.0.0): Executed 1 of 181 (1 FAILED) (0 secs / 0.293 secs)