Formkit submission in tests causing failed tests #988
Replies: 2 comments 1 reply
-
After a bit more experimentation, adding two flushPromises calls works, which is very strange to me
|
Beta Was this translation helpful? Give feedback.
-
This actually isn’t terribly complex, but it can be a bit brain melty to read in written text, so i’ll do my best to explain. All inputs in FormKit are debounced. This means each input has its own lifecycle events. At the most basic level they consist of:
This internal debounce timing is fundamental and critical. It allows for inputs to defer expensive computation to a later time and ensures the all the form logic like state tracking is defered to when the main thread has time to work on it while an input is being interacted with. However, there are complexities that arise because of this. For example, what if a a child input is still in performing this lifecycle when a user clicks "submit" — what should happen? Well the form should wait for those async behaviors to resolve and then proceed with the submit logic. There can be plenty of these behaviors too by the way, like async validation rules — we call these "disturbances" and these are the kinds of frustrating challenges that FormKit attempts to solve "out of the box" — most developers using FormKit wont even know this problem exists and is being solved for them 😂 To handle these edge cases FormKit implements a "disturbance counting" mechanism — meaning each form tree is aware of how many child nodes are currently in a disturbed state. This is done purely with integer logic so it is very fast, it occurs on every keystroke and is one way the form is always aware of its current "state". When you click the "Submit" button — we check the disturbance count to determine if the form has "settled" or not, and we await all settlement to complete as tabulated by the top of the form tree. During this time there may be multiple async events that occur. This means that something as simple as a Unfortunately, as of yet, I don’t know of any great mechanism to work around this — thus the reason you’ll see simple delay calls in our tests pretty frequently too. Hope that helps at least explain the mechanism behind what is going on here 👍 |
Beta Was this translation helpful? Give feedback.
-
Hi,
I'm writing some tests for some components which are using FormKit. Upon submission of the form in this component, a value in a store gets updated. For example, I expect something like this to work:
However, this doesn't work (i.e. the test store value is not set after the form is submitted), and I suspect it's because as described here, nodejs exited before the submission could finish.
So I attempted to remedy this through several methods, such as adding nextTick():
or adding flushPromises from the
flush-promises
package:The solution I stumbled upon is the following, after looking through the code and tests for the formkit package itself:
My questions are: is this solution correct and expected for me to use? If so, why does this work, but something like flushing promises does not?
Beta Was this translation helpful? Give feedback.
All reactions