我目前正在解决提交时表单中第一个错误字段的焦点问题。尽管成功实现了在提交时关注表单中第一个错误字段的功能,但我在实现后遇到了挑战。以下是详细概述:
环境设置:Ember 3.14 在 Node 10.8.0 上运行,并使用 Mirage 进行服务器 API 模拟。
目标:主要目的是确保在提交表单时,初始错误字段会引起用户注意。
采用的方法: 为了实现此功能,我成功地实现了代码来识别指定表单中标有错误类的所有元素。随后,我有效地关注了第一个识别出的错误元素。这种方法按预期发挥作用,在提交表单时无缝突出显示第一个错误字段。
遇到的挑战: 成功实施后,许多测试用例始终失败并显示错误消息:未捕获的类型错误:无法读取未定义的属性“charAt”。值得注意的是,手动测试确认了修复程序的正确功能。然而,这些失败都可以追溯到 Vendor.js 文件。有趣的是,失败的 charAt() 调用并不存在于原始供应商代码中,而是出现在编译后的vendor.js 文件中,尤其是在 polyfill 中。此外,由于 eval 语句中存在 charAt() 调用,调试一直具有挑战性。
测试用例的性质: 更新并提交:验证请求操作在用户提交后是否更新为“提交”。 已完成的请求只读:检查已完成的请求是否将特定元素呈现为禁用或只读。 编辑请求:确保用户可以编辑请求、更新说明并顺利离开页面。 打开和关闭请求:测试打开和关闭请求是否保留当前页面 URL,而不会出现任何停留提示。
我尝试过的: 我成功实现了在提交时关注表单中第一个错误字段的功能,解决了最初的错误。这涉及识别指定表单中标有错误类的所有元素,并确保第一个识别的错误元素获得焦点。
期望: 实现后,我希望实现的功能能够无缝工作,重点关注预期的第一个错误字段。然而,虽然实现本身运行正常,但我在某些测试用例方面面临着挑战。尽管功能按预期工作,但这些测试用例始终失败。目的仍然是提供有关输入错误的即时反馈并促进更顺畅的表单交互。
这里是代码参考,所有测试用例都运行良好,但是当我们添加代码以聚焦第一个输入时,达到了预期结果,但测试用例开始失败:
focusFirstErrorInForm(element) {
const parentForm = this.gettingParticularForm(element);
console.log(parentForm);
if (parentForm) {
setTimeout(() => {
const errorContainer = this.gettingErrorContainer(parentForm);
if (errorContainer) {
if (errorContainer.length > 0) {
let firstInput = this.gettingFirstErrorFromContainer(errorContainer);
if (firstInput !== null || firstInput !== undefined) {
firstInput.focus();
}
} else {
this.getErrorKcContainer(parentForm);
}
}
}, 100);
}
}
测试用例失败消息 - 留言:> 未捕获的类型错误:无法读取未定义的属性“charAt” 负面:> 错误的 浏览器日志:|
还在测试用例之间添加控制台日志进行调试,令人惊讶的是所有控制台都被记录下来。
空检查的逻辑对我来说看起来不正确。我只是检查该对象是否真实
if (firstInput) {
firstInput.focus();
}
也许检查它是否有焦点方法......
if (firstInput && firstInput.focus) {
firstInput.focus();
}
如果你真的想明确的话我 认为你应该使用 && (和)而不是 || (或)...
if (firstInput !== null && firstInput !== undefined) {
firstInput.focus();
}