如何解决无头测试中未提供嵌套的 @Self() ngControl
我有一个带有构造函数的公共输入组件
constructor(private fg: FormGroupDirective,@Self() public ngControl: NgControl) {
if (this.ngControl) {
this.ngControl.valueAccessor = this;
}
}
这是在我的角度组件中使用的:
<!-- Email -->
<app-input
ngDefaultControl
formControlName="email"
[additionalClasses]="['mb-32']"
[idPrefix]="'email'"
[label]="'Email address'"
[maxLength]="100"
[size]="fullWidthInput">
</app-input>
自定义输入组件继承自 BaseInput 组件
@Component({ template: `` })
export abstract class BaseInputComponent implements ControlValueAccessor,OnDestroy {
@Input() additionalClasses: string[] = [];
@Input() additionalInputClasses: string[] = [];
@Input() additionalLabelClasses: string[] = [];
@Input() idPrefix: string;
@Input() label: string;
@Input() required = true;
@Input() size: InputSize = InputSize.Small;
protected ngUnsubscribe = new Subject<void>();
constructor(private fg: FormGroupDirective,@Self() protected ngControl: NgControl) {
if (this.ngControl) {
this.ngControl.valueAccessor = this;
}
}
get errorId(): string {
return `${this.idPrefix}-error`;
}
get errorMessage(): string {
return InputErrors.getErrorMessageForControl(this.ngControl,this.label);
}
get formControl(): AbstractControl | null {
return this.ngControl?.control;
}
get inputId(): string {
return `${this.idPrefix}-input`;
}
get labelClasses(): string {
return this.additionalLabelClasses.join(' ');
}
get isInvalid(): boolean {
return CustomValidation.isFormControlInvalid(this.ngControl,this.fg);
}
get labelId(): string {
return `${this.idPrefix}-label`;
}
get parentForm(): FormGroup {
return this.fg.form;
}
get value(): any {
return this.ngControl.value;
}
set value(v: any) {
this.propagateChange(v);
this.propagateTouched();
}
get wrapperClasses(): string[] {
const classes = ['input',this.size.toString(),...this.additionalClasses];
if (this.isInvalid) {
classes.push('ft-invalid');
}
return classes;
}
// propagate changes to form control
propagateChange = (_: string) => {};
// propagate touched changes to form control
propagateTouched = () => {};
// From ControlValueAccessor interface
registerOnChange(fn: any): void {
this.propagateChange = fn;
}
// From ControlValueAccessor interface
registerOnTouched(fn: any): void {
this.propagateTouched = fn;
}
// From ControlValueAccessor interface
writeValue(value: string): void {
if (value && value !== this.value) {
this.value = value;
}
}
ngOnDestroy(): void {
this.ngUnsubscribe.next();
this.ngUnsubscribe.complete();
}
}
和自定义输入组件:
<mat-form-field [ngClass]="inputClasses" [floatLabel]="'never'" *ngIf="!readonly; else ReadonlyInput">
<mat-placeholder *ngIf="placeholder">{{ placeholder }}</mat-placeholder>
<input
matInput
[id]="inputId"
[formControl]="formControl"
[maxLength]="maxLength"
[type]="type"
[value]="value"
(input)="propagateChange($event.target.value)"
(keyup.enter)="onEnter()" />
<div *ngIf="isInvalid" [id]="errorId">
<mat-error>{{ errorMessage }}</mat-error>
</div>
</mat-form-field>
get value()
是导致错误的原因(我认为),因为注入的 ngControl
未定义。
我有一组 Karma/Jasmine 测试。在本地使用命令 ng test
运行时,浏览器会打开,所有测试都通过并且控制台中没有错误或警告。
在 DevOps 中运行命令时,ng test --codeCoverage=true --watch=false --browsers ChromeHeadless
,(在 DevOps 和本地),显示以下错误:
TypeError: Cannot read property 'value' of undefined
at <Jasmine>
at InputComponent.get value [as value] (http://localhost:9877/_karma_webpack_/src/app/shared/components/form/base-input.component.ts:72:4)
at InputComponent_mat_form_field_2_Template (ng:///InputComponent.js:83:62)
at executeTemplate (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:7447:1)
at refreshView (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:7316:1)
at refreshEmbeddedViews (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:8408:1)
at refreshView (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:7340:1)
at refreshComponent (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:8454:1)
at refreshChildComponents (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:7109:1)
at refreshView (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:7366:1)
at refreshComponent (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:8454:1)
TypeError: Cannot read property 'getCheckedValue' of undefined
at <Jasmine>
at http://localhost:9877/_karma_webpack_/src/app/users/components/new-user-dialog/new-user-dialog.component.spec.ts:101:55
at <Jasmine>
at http://localhost:9877/_karma_webpack_/main.js:364670:71
at new ZoneAwarePromise (http://localhost:9877/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:960:1)
at ./src/app/users/components/new-user-dialog/new-user-dialog.component.spec.ts.__awaiter (http://localhost:9877/_karma_webpack_/main.js:364666:12)
at UserContext.<anonymous> (http://localhost:9877/_karma_webpack_/src/app/users/components/new-user-dialog/new-user-dialog.component.spec.ts:100:47)
at ZoneDelegate.invoke (http://localhost:9877/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:364:1)
at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9877/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:292:1)
at ZoneDelegate.invoke (http://localhost:9877/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:363:1)
谁能帮我解决问题?这适用于浏览器的事实让我感到困惑 - 所有依赖项注入等似乎都配置正确。
解决方法
对于看到这一点的任何人,看到同样的问题,问题出在基础组件中的构造函数上。
在基础组件中:
constructor(private fg: FormGroupDirective,@Self() protected ngControl: NgControl) {
if (this.ngControl) {
this.ngControl.valueAccessor = this;
}
}
在输入组件中,根本没有构造函数。对于无头测试,这似乎是必需的。
constructor(fg: FormGroupDirective,@Self() ngControl: NgControl) {
super(fg,ngControl);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。