我正在使用Formly并创建了几个自定义模板。组件中包含的唯一代码是对通用错误处理服务的调用,因此除了可以创建组件之外几乎没有什么要测试的。我只使用 Jest 进行单元测试,但无法弄清楚我需要包含什么才能使组件成功编译。
我得到的错误是:TypeError:无法读取未定义的属性'formControl'。我不确定我在测试中缺少什么。
对于最简单的组件(主要是样式和指令 - 现在已删除),我有以下内容:
零件:
@Component({
selector: 'my-formly-field-input',
templateUrl: './formly-field-input.component.html',
styleUrls: ['./formly-field-input.component.scss']
})
export class FormlyFieldInputComponent extends FieldType {
constructor(private formErrorService: FormErrorHandlerService) {
super();
}
getError(formItem: FormControl | FormGroup | FormArray): string {
return this.formErrorService.getFormError(formItem);
}
}
看法:
<mat-form-field [floatLabel]="'always'"
class="w-100"
[appearance]="'fill'">
<mat-label>{{field.templateOptions.label}}</mat-label>
<input matInput
[formControl]="formControl"
[type]="field.templateOptions.type || 'text'"
[step]="field.templateOptions.step || 1"
[max]="field.templateOptions.max || undefined"/>
<mat-error *ngIf="formControl.errors">
{{getError(formControl)}}
</mat-error>
</mat-form-field>
单元测试:
describe('FormlyFieldInputComponent', () => {
let component: FormlyFieldInputComponent;
let fixture: ComponentFixture<FormlyFieldInputComponent>;
const formHelperServiceStub: Partial<FormErrorHandlerService> = {
getFormError: (formItem) => 'Error Happened'
};
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
FormlyFieldInputComponent
],
imports: [
MyHelpersModule,
BrowserAnimationsModule,
FormlyModule.forRoot(),
FormlyMaterialModule,
MatFormFieldModule,
MatInputModule,
ReactiveFormsModule,
],
providers: [
{ provide: FormErrorHandlerService, useValue: formHelperServiceStub }
],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(FormlyFieldInputComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
提前致谢!!