mayoiga 0.1.6 → 0.1.7

package/dist/index.js

@@ -54,7 +54,8 @@ function createFormStore(initialState, schema) {
         },
         pushFormErrors: (validator) => (prev) => {
             const pushedErrors = validator(prev.value);
-            return { ...prev, errors: { ...prev.errors, ...pushedErrors } };
+            const allErrors = { ...prev.errors, ...pushedErrors };
+            return { ...prev, isValid: Object.keys(allErrors).length === 0, errors: allErrors };
         },
         reduceFormErrors: (reducer) => (prev) => {
             return { ...prev, errors: reducer(prev.errors) };

package/dist/index.test.js

@@ -89,3 +89,25 @@ test('User is able to re-initialize the form state', async () => {
     TestFormHook.actions.initializeForm({}, { cleanup: true });
     expect(TestFormHook.api.getState().isDirty).toBeFalsy();
 });
+test('User is able to push server side validation', async () => {
+    const TestFormHook = createTestHook();
+    const Top = () => {
+        return (React.createElement("div", null,
+            React.createElement(AgeInputComponent, { controller: TestFormHook.controller })));
+    };
+    render(React.createElement(Top, null));
+    const ageInput = screen.getByTestId('age-input');
+    await userEvent.type(ageInput, '9999');
+    TestFormHook.actions.pushFormErrors((_s) => ({ age: 'server side error' }));
+    const state1 = TestFormHook.api.getState();
+    expect(state1.isDirty).toBeTruthy();
+    expect(state1.isValid).toBeFalsy();
+    expect(state1.errors.age).toEqual('server side error');
+    await userEvent.type(ageInput, 'hgoehoge');
+    // confirm empty field won't overwrite any messages
+    TestFormHook.actions.pushFormErrors((_s) => ({}));
+    const state2 = TestFormHook.api.getState();
+    expect(state2.isDirty).toBeTruthy();
+    expect(state2.isValid).toBeFalsy();
+    expect(state2.errors.age).toEqual('Invalid input');
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mayoiga",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Type safe hook based form library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/index.test.tsx

@@ -142,3 +142,35 @@ test('User is able to re-initialize the form state', async () => {
   TestFormHook.actions.initializeForm({}, {cleanup: true});
   expect(TestFormHook.api.getState().isDirty).toBeFalsy();
 });
+
+test('User is able to push server side validation', async () => {
+  const TestFormHook = createTestHook();
+
+  const Top = () => {
+    return (
+      <div>
+        <AgeInputComponent controller={TestFormHook.controller} />
+      </div>
+    );
+  };
+
+  render(<Top />);
+
+  const ageInput: HTMLInputElement = screen.getByTestId('age-input');
+  await userEvent.type(ageInput, '9999');
+
+  TestFormHook.actions.pushFormErrors((_s) => ({age: 'server side error'}));
+  const state1 = TestFormHook.api.getState();
+  expect(state1.isDirty).toBeTruthy();
+  expect(state1.isValid).toBeFalsy();
+  expect(state1.errors.age).toEqual('server side error');
+
+  await userEvent.type(ageInput, 'hgoehoge');
+
+  // confirm empty field won't overwrite any messages
+  TestFormHook.actions.pushFormErrors((_s) => ({}));
+  const state2 = TestFormHook.api.getState();
+  expect(state2.isDirty).toBeTruthy();
+  expect(state2.isValid).toBeFalsy();
+  expect(state2.errors.age).toEqual('Invalid input');
+});

package/src/index.ts

@@ -178,7 +178,8 @@ function createFormStore<StateBeforeValidation extends StateRestriction, Schema
     },
     pushFormErrors: (validator) => (prev) => {
       const pushedErrors = validator(prev.value);
-      return {...prev, errors: {...prev.errors, ...pushedErrors}};
+      const allErrors = {...prev.errors, ...pushedErrors};
+      return {...prev, isValid: Object.keys(allErrors).length === 0, errors: allErrors};
     },
     reduceFormErrors: (reducer) => (prev) => {
       return {...prev, errors: reducer(prev.errors)};