I am creating a lesson on codeacademy that enables users to learn about the creation of HTML forms. This is mostly for my own entertainment, just so we're all on the same page. After reading the submission test guidelines and API I decided to use expect.js to handle the bulk of my validation since I need to traverse the DOM.
So the lesson I am creating asks the users to create two label elements (with content inside the label tags) and two input fields (with the type attribute defined and the value set to text). So again, the criteria are as follows:
- Create two
<label>elements inside the<form>element. Be sure to indicate what the user will be filling out! - Create two
<input>elements below each of the<label>elements. Be sure to include and define thetypeattribute!
Let's assume I have the following code:
<!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>
This will pass. From my understanding of how expect.js operates and my current validation, it should not pass because the user neglected to add the second type="text" attribute
My validation criteria are as follows:
// 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?");
If the user submits the HTML code then it should fail, however it is passing. My disconnect is when the user enters the second set of <label> and <input> tags. If they omit content within the second <label> and/or the type attribute with a value of text it will still pass.
Is there something special or unique that I am missing here? I have tried the validation code supplied above with and without out method chaining with no avail.
What I have Tried
- Looked on Codeacademy for any hints on how to rectify this issue
- Looked on expect.js README for any hints
- Looking on StackOverflow for any hints
- Removed method chaining and reestablished method chaining
I think you need the
that/whichfeature, which is terribly documented.