runValidations async testing helper?

[codeincontext]

As discussed here, async validation checks don't run in Enzyme. However, we are able to access the form in the test and should be able to wait for an async validation in that context.

Is it a good idea to expose a function to call runValidations when testing? You could await on its result before querying the enzyme wrapper

Upsides: Can test component markup and behaviour using simulate
Downsides: Have to remember to await on runValidations before querying the component

[jaredpalmer]

Can you write an up a fake test that shows the behavior you want?

[codeincontext]

Something like:

const wrapper = shallow(<MyForm />);
const getForm = () => wrapper.find('InnerForm');
const diveFind = query => wrapper.dive().find(query);

diveFind('input[name="title"]').simulate('change', {
  persist: () => {},
  target: { name: 'title', value: '' }, // invalid
});

await getForm().props().runValidations();
console.log(getForm().prop('errors')) // {name: 'Is invalid'}
expect(diveFind('input[type="submit"]').prop('disabled')).to.equal(true);

diveFind('input[name="title"]').simulate('change', {
  persist: () => {},
  target: { name: 'title', value: 'James' }, // valid
});

await getForm().props().runValidations();
console.log(getForm().prop('errors')) // {}
expect(diveFind('input[type="submit"]').prop('disabled')).to.equal(false);

[codeincontext]

Probably want to expose it on wrapper.instance() rather than passing it down as a prop to the inner form

[jaredpalmer]

isn't it there already?

[codeincontext]

Interesting. runValidationSchema actually takes a success callback which could be used in this way, but it doesn't feel like a stable, documented API

[jaredpalmer]

@skattyadz can we hop on slack and discuss this and also onSubmit promise? I feel like we can check to see if onSubmit returns a promise, if it does we can .then it and then deal with setSubmitting for ppl. However, I think we would want ppl to use the then(success=>,err=>) pattern, so that they stay in control of their own errors.

[xpressivecode]

Was there any progress made on this? It's nice that we can use setError etc. but I would like to test that my form was setup correctly and properly validates when a user enters an invalid email (triggering the type mismatch error, or required) etc.

Right now with my test, it seems like I'm only validating that when an error does occur, that said error is displayed to the user (which is great).

[codeincontext]

@jaredpalmer it looks like I missed your reply at the time. Still looking for input?

…

On Fri, 12 Jan 2018, 13:19 Mike Fitzgerald, ***@***.***> wrote: Was there any progress made on this? It's nice that we can use setError etc. but I would like to test that my form was setup correctly and properly validates when a user enters an invalid email (triggering the type mismatch error, or required) etc. Right now with my test, it seems like I'm only validating that when an error does occur, that said error is displayed to the user (which is great). — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#110 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAFj601xymtfDt8RPVyY90HedcBVA5WGks5tJ8xugaJpZM4Op0Th> .

[xpressivecode]

For now I've just gone ahead and used a snippet of code from another example you posted @skattyadz

await new Promise(r => setImmediate(r));

Having that allows me to test the functionality of my form without my tests having any knowledge of Formik. So thanks for that.

[jaredpalmer]

validateForm shipped with 0.11

[buchanaf]

Browsing through a handful of these testing issues, I wasn't able to determine if "errors" could be triggered with validationSchema/Yup in Enzyme/Jest. Is that something that is now possible with the validateForm? Currently, my "errors" object is always empty regardless of how I try and trigger the validation.

[capsule5]

same, can't manage to have errors object filled after input change / submit / blur ... made it async, wait, update wrapper don't help