I have the following component:
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]
});
}
}
Its template code:
<h3><span>Basic form data</span></h3>
<mat-divider></mat-divider>
<form *ngIf="true" [formGroup]="basicFormGroup">
<!-- its content does not matter-->
</form>
This is the test:
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();
});
});
When it runs, I get the following error when the createComponent
method is called:
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)
I tried the following:
- When I use
ngIf='false'
, the test succeeds --> so it probably fails because of the form - When I replace the
[formGroup]='basicFormGroup'
property with[formGroup]='undefined'
, the test fails --> so it fails with any form
The app.module.ts file contains the FormsModule
import.
It looks like the test engine can't find the abstract base of the forms.
What could cause this?
You need to add "ReactiveFormsModule" to the TestBed imports!
RépondreSupprimer