Codeacademy课上的Expect.js验证问题

Expect.js validation issue on Codeacademy Lesson

本文关键字：js 验证 问题 Expect Codeacademy      更新时间：2023-09-26

我正在codeacademy上创建一个课程，使用户能够学习如何创建HTML表单。这主要是为了我自己的娱乐，这样我们就能达成一致了。在阅读了提交测试指南和API之后，我决定使用expect.js来处理大部分验证，因为我需要遍历DOM。

因此，我正在创建的课程要求用户创建两个标签元素(标签标签内的内容)和两个输入字段(定义了type属性并将值设置为text)。因此，再一次，标准如下:

  1. 在<form>元素中创建两个<label>元素。一定要注明用户将要填写的内容!
  2. 在每个<label>元素下面创建两个<input>元素。一定要包含并定义type属性!

让我们假设我有以下代码:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <form>
            <label>Foo</label>
            <input type="text">
            <label>Bar</label>
            <!-- should below here here -->
            <input>
        </form>
    </body>
</html>

这将通过。从我对expect.js如何操作和我当前验证的理解来看，它应该不通过，因为用户忽略了添加第二个type="text"属性

我的验证标准如下:

// do the items exist?
$expect('form > label').to.have.items(2, 'Did you forget to create two <label></label> tags?').and.to.have.text(/[a-zA-Z0-9]{1,}/i, 'Do the label tags have information inside of them? <label>My Label</label>');
$expect('form > input').to.have.items(2, 'Did you forget to create two <input> tags?').and.to.have.attr('type', 'text');
// do input fields exist below labels?
$expect('label').to.have.siblings('input', "Are the input fields below the labels?");

如果用户提交HTML代码，那么它应该失败，但是它通过了。我的断开是当用户输入<label>和<input>标签的第二组时。如果省略第二个<label>和/或type属性中值为text的内容，它仍然会通过。

我在这里错过了什么特别或独特的东西吗?我已经尝试了上面提供的验证代码，无论是否使用out方法链接，都无济于事。

What I have try

  1. 查看Codeacademy关于如何纠正此问题的任何提示
  2. 查看expect.js自述me中的任何提示
  3. 在StackOverflow上寻找任何提示
  4. 删除方法链并重新建立方法链

我认为您需要that/which特性，这是非常有文档的。

$expect('form > input').to.have.items(2, 'Did you forget to create two <input> tags?').that.has.attr('type', 'text');
相关文章：