checkValidity() returns true instead of false for min length on input

[cmttan]

Current behavior:

checkValidity() returns true for min length on input field.

Desired behavior:

checkValidity() should return false when min length requirement is not met.

Steps to reproduce:

demo of bug created here: https://github.com/cmttan/cyp-demo

Versions

cypress ^3.0.1
chrome 67
macOS high sierra 10.13.5 (17F77)

[jennifer-shehane]

I ran the demo app in Cypress and am seeing the results below. Could you be more specific about what is wrong? Where is this checkValidity()? What it supposed to happen?

[cmttan]

@jennifer-shehane the test should pass because an error should be shown if the form is not valid. For some reason, when checkValidity() is called on the form, it returns true even though it shouldn't be. This only happens through the automated test runner. If I run the app and perform the steps manually by typing in some text to the input that doesn't meet the min length requirements and click submit, an error message appears.

checkValidity() happens in app.js (line 13). when the form is submitted, checkValidity() is called on the form DOM node.

You can also view the log in the console when the form is submitted.

We should see this if the min length requirement is not met:

[kuceb]

@cmttan this is a bug in Cypress.
cause:
You're using a native DOM validity check, which does not respond to simulated events, and would require native events

[cmttan]

@bkucera awesome. thanks for the explanation!

[kuceb]

@cmttan
After experimenting with this, this has nothing to do with bad simulated events... However, this should be fixed by Native Events, in progress!

[tyomasson]

Seems, I have the same issue
react app, chrome 76, cypress 3.4.1