From c61e6cffce7f6b05bdadd879451beba911e3ac67 Mon Sep 17 00:00:00 2001 From: Jennifer Kirsch Date: Thu, 15 Feb 2024 12:54:33 +0100 Subject: [PATCH 1/2] Set errors returned by setMultipleFieldValuesAndValidate --- README.md | 2 +- .../components/meta/FormiflyContext.test.tsx | 17 +++++++++++++---- src/js/components/meta/FormiflyContext.tsx | 11 +++++++++-- 3 files changed, 23 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index b39fffa..45ed1d5 100644 --- a/README.md +++ b/README.md @@ -593,7 +593,7 @@ They will return an object containing/ add the following props: You can also optionally call this function with an object to override the previous field values as second parameter. This function returns a promise that resolves with all values after the change. Note that this does not trigger validation. -- `setMultipleFieldValuesAndValidate` Exactly the same as `setMultipleFieldValues` but it does trigger validation and returns a promise with the validation result +- `setMultipleFieldValuesAndValidate` Exactly the same as `setMultipleFieldValues` but it does trigger validation of all fields, sets the errors and returns a promise with the validation result - `validateField` A function that allows you to trigger validation for a specific field by passing its name and optionally, to improve performance, the field's value. This function returns a promise that will be resolved with either `true` or `false` depending on if the value is valid. diff --git a/src/js/__tests__/components/meta/FormiflyContext.test.tsx b/src/js/__tests__/components/meta/FormiflyContext.test.tsx index e40b4ac..1703cb6 100644 --- a/src/js/__tests__/components/meta/FormiflyContext.test.tsx +++ b/src/js/__tests__/components/meta/FormiflyContext.test.tsx @@ -88,7 +88,8 @@ describe('FormiflyContext', () => { foo: new StringValidator('bar'), }); - render( {}} defaultValues={{fruit: [{name: 'banana', tasty: true}]}}> + render( { + }} defaultValues={{fruit: [{name: 'banana', tasty: true}]}}> @@ -487,7 +488,7 @@ describe('FormiflyContext', () => { it('provides a setMultipleFieldValuesAndValidate function that can validate correct values', async () => { const TestForm = () => { - const {setMultipleFieldValuesAndValidate, values} = useFormiflyContext(); + const {setMultipleFieldValuesAndValidate, values, errors} = useFormiflyContext(); const [validationSuccess, setValidationSuccess] = React.useState(false); const setAndValidate = () => { setMultipleFieldValuesAndValidate([['foo', 'bar'], ['bla', 'blub']]).then(() => setValidationSuccess(true)); @@ -495,26 +496,32 @@ describe('FormiflyContext', () => { return

Foo: {values.foo}

+

Foo error: {errors.foo}

Bla: {values.bla}

+

Validation success: {validationSuccess ? 'true' : 'false'}

; }; - const shape = new ObjectValidator({foo: new StringValidator(), bla: new StringValidator()}); + const shape = new ObjectValidator({foo: new StringValidator().required(), bla: new StringValidator()}); const renderResult = render( ); + fireEvent.blur(renderResult.getByLabelText('Foo input')); + const errorMsg = await renderResult.findByText('Foo error: This field is required'); + expect(errorMsg).toBeInTheDocument(); fireEvent.click(renderResult.getByText('Set and validate')); const success = await renderResult.findByText('Validation success: true'); expect(success).toBeInTheDocument(); expect(renderResult.getByText('Foo: bar')).toBeInTheDocument(); expect(renderResult.getByText('Bla: blub')).toBeInTheDocument(); + expect(renderResult.queryByText('Foo error: This field is required')).not.toBeInTheDocument(); }); it('provides a setMultipleFieldValuesAndValidate function that can validate incorrect values', async () => { const TestForm = () => { - const {setMultipleFieldValuesAndValidate, values} = useFormiflyContext(); + const {setMultipleFieldValuesAndValidate, values, errors} = useFormiflyContext(); const [validationSuccess, setValidationSuccess] = React.useState(true); const setAndValidate = () => { setMultipleFieldValuesAndValidate([['foo', 'bar'], ['bla', '']]) @@ -526,6 +533,7 @@ describe('FormiflyContext', () => {

Validation success: {validationSuccess ? 'true' : 'false'}

Foo: {values.foo}

Bla: {values.bla === '' ? 'empty string' : values.bla}

+

Bla error: {errors.bla}

; }; @@ -539,5 +547,6 @@ describe('FormiflyContext', () => { expect(success).toBeInTheDocument(); expect(renderResult.getByText('Foo: bar')).toBeInTheDocument(); expect(renderResult.getByText('Bla: empty string')).toBeInTheDocument(); + expect(renderResult.getByText('Bla error: This field is required')).toBeInTheDocument(); }); }); diff --git a/src/js/components/meta/FormiflyContext.tsx b/src/js/components/meta/FormiflyContext.tsx index f0e82de..4eea1dd 100644 --- a/src/js/components/meta/FormiflyContext.tsx +++ b/src/js/components/meta/FormiflyContext.tsx @@ -124,7 +124,15 @@ export const FormiflyProvider = >(props: Formifly pairs: [string, V][], oldValues: ValueOfValidator = values, ): Promise> | undefined> => { return setMultipleFieldValues(pairs, oldValues).then((newValues) => { - return validateAll(newValues); + return validateAll(newValues) + .then(() => { + setErrors({}); + return Promise.resolve(newValues); + }) + .catch((validationErrors: UnpackedErrors) => { + setErrors(validationErrors); + return Promise.reject(validationErrors); + }); }); }; @@ -330,7 +338,6 @@ export const FormiflyProvider = >(props: Formifly const result = shape.validate(valuesToValidate, valuesToValidate, valuesToValidate, t); if (result[0]) { resolve(result[1]); - } else { reject(unpackErrors(result)); } From 0ba6fdbc5ab0f5e81ed759b237360ac944f92d14 Mon Sep 17 00:00:00 2001 From: Jennifer Kirsch Date: Thu, 15 Feb 2024 12:54:49 +0100 Subject: [PATCH 2/2] 2.8.5 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 011d2ab..4436c39 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "formifly", - "version": "2.8.4", + "version": "2.8.5", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "formifly", - "version": "2.8.4", + "version": "2.8.5", "license": "MIT", "devDependencies": { "@binary-butterfly/eslint-config": "^0.0.6", diff --git a/package.json b/package.json index 531e4bf..2f6a8eb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "formifly", - "version": "2.8.4", + "version": "2.8.5", "description": "React form handling as light as a butterfly", "main": "dist/formifly.umd.js", "module": "dist/formifly.js",