如何解决ngmodel在茉莉花测试中未填充输入元素值?
我正在尝试对托管的AngularComponent DetailCellComponent进行一些测试,以在测试过程中动态创建的DetailCellHostComponent内部进行测试。
我进行测试以确保通过[(ngModel)]
向输入元素提供值的Component绑定正确填充了正确的值(请参见下面的茉莉花测试),
但尽管如此,输入框的值仍为null。 (当我在应用程序中运行ng-serve并使用该组件时,效果很好,只是不在测试环境中使用。)
这是DetailCellComponent的模板。
<mat-form-field class="input-cell" [ngClass]='inputClass'
*ngIf="hasRowFocus && (inputControlType==InputControlType.textInput || inputControlType==InputControlType.selectInput )">
<mat-label>{{fieldNameIndicator}}</mat-label>
<!-- Form Field for enums (currency selection) -->
<mat-select *ngIf="inputControlType == InputControlType.selectInput" [(ngModel)]="elValue"
(focusin)="focusIn()"
(focus)="gotInputFocus()"
(click)="inputClick($event)"
(mouSEOver)="mouSEOver()"
(mouSEOut)="mouSEOut()"
[disabled]="readOnly"
(blur)="lostInputFocus($event)" #inputSelect
(keydown)="inputKeyDown($event)"
trackFocus>
<mat-option *ngFor="let curr of currs" [value]=curr.key>
{{curr.key}}
</mat-option>
</mat-select>
<!-- FormField for text and numbers -->
<----------- This is the input element that's not working. -------------------->
<input *ngIf="inputControlType != InputControlType.selectInput"
class="input-element textinput" matInput placeHolder="placeholder"
[(ngModel)]="elValue" <<--------------------This is not working...
(focusin)="focusIn()" (focus)="gotInputFocus()"
(click)="inputClick($event)"
[disabled]="readOnly"
(blur)="lostInputFocus($event)" [errorStateMatcher]="matcher" #cellInput
(keydown)="inputKeyDown($event)"
trackFocus
>
<--------------------------------------------------------------->
<mat-error>{{errorText}}</mat-error>
</mat-form-field>
<div tabindex=0 *ngIf="!hasRowFocus" class="display-cell" (keydown)="onSelectKeyDown($event)"
(click)=selectCellClick($event) (dblclick)=editRow($event)
[ngClass]='selectClass'
(mouSEOver)="mouSEOver()"
(mouSEOut)="mouSEOut()"
#cellSelect >
<div (dragenter) = "mousedragenter($event)" (dragleave) = "mouseDragLeave($event)">{{elValue}}</div>
</div>
这是测试的代码。
fdescribe('DetailCellComponent',() => {
let fixture: ComponentFixture<DetailCellHostComponent>;
let detailCellHostComponent: DetailCellHostComponent;
beforeEach(async(() => {
Testbed.configureTestingModule({
// declarations: [ DetailCellComponent],declarations: [DetailCellHostComponent,DetailCellComponent],providers: [CurrencyPipe]
})
.compileComponents()
}));
beforeEach(() => {
fixture = Testbed.createComponent(DetailCellHostComponent);
detailCellHostComponent = fixture.componentInstance
});
it('change to row focus mode.',() => {
fixture.detectChanges();
let cellCommandSubject$ = detailCellHostComponent.commandSubject$;
let evt = <CellCommandEvent>{};
evt.eventType = CellCommands.SetToRowSelected;
evt.target = FieldCol.all;
cellCommandSubject$.next(evt);
fixture.detectChanges();
fixture.whenStable().then(() => { // wait for async getQuote
let cellComponentDE = fixture.debugElement.query(By.directive(DetailCellComponent));
let cellComponent = cellComponentDE.componentInstance;
expect(cellComponent).toBeTruthy();
expect(cellComponent.elValue).toBe("100");
/** This test passes. 'elValue' is the binding property for the input element. **/
let el : HTMLInputElement = cellComponentDE.query(By.css(".textinput")).nativeElement;
expect(el).toBeTruthy();
expect(el.value).toBe("100");
/** This test fails. The value property of the element is not populated by the
*. [(ngModel)] directive.
})
});
});
这是在调试器中停止测试时在Karma测试页上描绘的元素的图片,如图所示。如您所见,input元素正在显示占位符文本,而不是模型值。
如何修复此测试?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。