angular - 如何在带有角度和引导的表单输入中测试客户端验证?
问题描述
我正在尝试测试此标记的必需属性
<div id="div_formDeviceName" class="form-group was-validated" [ngClass]="{'has-error': !isNameUnique || !(myName.valid || myName.pristine)}">
<label id="lbl_deviceName" >Name *</label>
<input id="in_deviceName" name="in_alias" #myName="ngModel" maxlength="255" [(ngModel)]="device.name" (blur)="trimName($event)" required>
<div class="invalid-feedback text-danger" id="div_deviceRequired"
*ngIf="(myName.errors && myName.errors.required)" translate>Required
</div>
</div>
因此,如果用户删除输入字段中的名称,则会显示错误消息。
这工作正常,我想测试它。
it("client error validation", async(() => {
component.device = new Device();
component.device.name = "My unit test device";
fixture.detectChanges();
const deviceName: DebugElement =
fixture.debugElement.query(By.css("#in_deviceName"));
const input: HTMLInputElement = deviceName.nativeElement;
console.debug(input.value);
expect(input.attributes
.getNamedItem("ng-reflect model").value)
.toBe(component.device.name);
input.value = "";
input.dispatchEvent(new Event("input"));
fixture.whenStable().then(() => {
fixture.detectChanges();
const divError: DebugElement =
fixture.debugElement.query(By.css("#div_deviceRequired"));
const divErrRequired: HTMLInputElement = divError.nativeElement;
expect(divErrRequired).toBeDefined();
});
但是测试中的输入值永远不会改变并且div查询失败......
解决方案
推荐阅读
- python - 按键盘上的 Q 键无法完成游戏
- javascript - 出于 SEO 原因,Django 模板 + Vue 模板用于相同的内容
- excel - 如何修改代码以粘贴到下一个空白行而不是列?
- java - android studio中的私有字段
- twilio-flex - 将 Twilio Flex 嵌入到自定义应用程序中
- python - 在 50 个变量 x 100k 行数据集上优化 K-最近邻算法
- android - 作为开发人员,我有什么办法可以防止电话夜间模式设置强行关闭我的应用程序?
- python - 如何获得元组和元组列表之间的最近距离?
- apache-beam - 无法对 GroupByKey 转换输出进行多次迭代
- android - 获取缓存的文档快照 localWriteTime