chore: add error message to setValue callback

CHANGELOG.md

@@ -10,7 +10,7 @@ ___Note:__ Yet to be released changes appear here._
 
 __Breaking Changes__
 
-* `setValue` is now also called when `validate` returns an error. Ensure that your `setValue` callback can handle invalid values.
+* `setValue` is now also called when `validate` returns an error. The error message is provided as a second argument to the `setValue` callback.
 
 ## 2.2.1
 

src/components/entries/FEEL/Feel.js

@@ -511,7 +511,7 @@ export default function FeelEntry(props) {
 
     // don't create multiple commandStack entries for the same value
     if (newValue !== value) {
-      setValue(newValue);
+      setValue(newValue, newValidationError);
     }
 
     setValidationError(newValidationError);

src/components/entries/NumberField.js

@@ -139,7 +139,7 @@ export default function NumberFieldEntry(props) {
       newValidationError = validate(newValue) || null;
     }
 
-    setValue(newValue);
+    setValue(newValue, newValidationError);
     setLocalError(newValidationError);
   };
 

src/components/entries/Select.js

@@ -160,7 +160,7 @@ export default function SelectEntry(props) {
       newValidationError = validate(newValue) || null;
     }
 
-    setValue(newValue);
+    setValue(newValue, newValidationError);
     setLocalError(newValidationError);
   };
 

src/components/entries/TextArea.js

@@ -149,7 +149,7 @@ export default function TextAreaEntry(props) {
       newValidationError = validate(newValue) || null;
     }
 
-    setValue(newValue);
+    setValue(newValue, newValidationError);
 
     setLocalError(newValidationError);
   };

src/components/entries/TextField.js

@@ -120,7 +120,7 @@ export default function TextfieldEntry(props) {
       newValidationError = validate(newValue) || null;
     }
 
-    setValue(newValue);
+    setValue(newValue, newValidationError);
 
     setLocalError(newValidationError);
   };

src/components/entries/templating/Templating.js

@@ -59,7 +59,7 @@ export default function TemplatingEntry(props) {
 
     // don't create multiple commandStack entries for the same value
     if (newValue !== value) {
-      setValue(newValue);
+      setValue(newValue, newValidationError);
     }
 
     setValidationError(newValidationError);

test/spec/components/Feel.spec.js

@@ -277,6 +277,29 @@ describe('<FeelField>', function() {
         expect(error.innerText).to.eql('error');
       });
 
+
+      it('should pass error to `setValue`', function() {
+
+        // given
+        const setValueSpy = sinon.spy();
+        const validate = (v) => {
+          if (v === 'bar') {
+            return 'error';
+          }
+        };
+
+        const result = createFeelField({ container, validate, setValue: setValueSpy });
+
+        const entry = domQuery('.bio-properties-panel-entry', result.container);
+        const input = domQuery('.bio-properties-panel-input', entry);
+
+        // when
+        changeInput(input, 'bar');
+
+        // then
+        expect(setValueSpy).to.have.been.calledWith('bar', 'error');
+      });
+
     });
 
 
@@ -756,6 +779,28 @@ describe('<FeelField>', function() {
         expect(error.innerText).to.eql('error');
       });
 
+
+      it('should pass error to `setValue`', function() {
+
+        // given
+        const setValueSpy = sinon.spy();
+        const validate = (v) => {
+          if (v === 3) {
+            return 'error';
+          }
+        };
+
+        const result = createFeelNumber({ container, validate, setValue: setValueSpy });
+
+        const entry = domQuery('.bio-properties-panel-entry', result.container);
+        const input = domQuery('.bio-properties-panel-input', entry);
+
+        // when
+        changeInput(input, 3);
+
+        // then
+        expect(setValueSpy).to.have.been.calledWith(3, 'error');
+      });
     });
 
 
@@ -1194,6 +1239,29 @@ describe('<FeelField>', function() {
         expect(error.innerText).to.eql('error');
       });
 
+
+      it('should pass error to `setValue`', function() {
+
+        // given
+        const setValueSpy = sinon.spy();
+        const validate = (v) => {
+          if (v === 'bar') {
+            return 'error';
+          }
+        };
+
+        const result = createFeelTextArea({ container, validate, setValue: setValueSpy });
+
+        const entry = domQuery('.bio-properties-panel-entry', result.container);
+        const input = domQuery('.bio-properties-panel-input', entry);
+
+        // when
+        changeInput(input, 'bar');
+
+        // then
+        expect(setValueSpy).to.have.been.calledWith('bar', 'error');
+      });
+
     });
 
 
@@ -2046,6 +2114,31 @@ describe('<FeelField>', function() {
         });
       });
 
+
+      it('should pass error to `setValue`', async function() {
+
+        // given
+        const setValueSpy = sinon.spy();
+        const validate = (v) => {
+          if (v === '=bar') {
+            return 'error';
+          }
+        };
+
+        const result = createFeelTextArea({ container, validate, setValue: setValueSpy, feel: 'required' });
+
+        const entry = domQuery('.bio-properties-panel-entry', result.container);
+        const input = domQuery('[role="textbox"]', entry);
+
+        // when
+        await act(() => {
+          input.textContent = 'bar';
+        });
+
+        // then
+        expect(setValueSpy).to.have.been.calledWith('=bar', 'error');
+      });
+
     });
 
 

test/spec/components/NumberField.spec.js

@@ -297,7 +297,7 @@ describe('<NumberField>', function() {
     });
 
 
-    it('should call setValue if validation succeeds', function() {
+    it('should pass error to `setValue`', function() {
 
       // given
       const validate = (v) => {
@@ -312,32 +312,10 @@ describe('<NumberField>', function() {
       const entry = domQuery('.bio-properties-panel-entry .bio-properties-panel-input', result.container);
 
       // when
-      changeInput(entry, 2);
+      changeInput(entry, 1);
 
       // then
-      expect(setValueSpy).to.have.been.calledWith(2);
-    });
-
-
-    it('should call setValue even if validation fails', function() {
-
-      // given
-      const validate = (v) => {
-        if (v % 2 !== 0) {
-          return 'should be even';
-        }
-      };
-
-      const setValueSpy = sinon.spy();
-
-      const result = createNumberField({ container, validate, setValue: setValueSpy });
-      const entry = domQuery('.bio-properties-panel-entry .bio-properties-panel-input', result.container);
-
-      // when
-      changeInput(entry, 3);
-
-      // then
-      expect(setValueSpy).to.have.been.called;
+      expect(setValueSpy).to.have.been.calledWith(1, 'should be even');
     });
 
   });

test/spec/components/Select.spec.js

@@ -419,6 +419,29 @@ describe('<Select>', function() {
       expect(error.innerText).to.eql('error');
     });
 
+
+    it('should pass error to `setValue`', function() {
+
+      // given
+      const setValueSpy = sinon.spy();
+      const validate = (v) => {
+        if (v === 'A') {
+          return 'error';
+        }
+      };
+      const getOptions = () => createOptions();
+
+      const result = createSelect({ container, validate, getOptions, setValue: setValueSpy });
+
+      const entry = domQuery('.bio-properties-panel-entry', result.container);
+      const input = domQuery('.bio-properties-panel-input', entry);
+
+      // when
+      changeInput(input, 'A');
+
+      // then
+      expect(setValueSpy).to.have.been.calledWith('A', 'error');
+    });
   });
 
 

test/spec/components/Templating.spec.js

@@ -390,6 +390,31 @@ describe('<Templating>', function() {
         });
       });
 
+
+      it('should set invalid', async function() {
+
+        // given
+        const setValueSpy = sinon.spy();
+        const validate = (v) => {
+          if (v === '{{bar}}') {
+            return 'error';
+          }
+        };
+
+        const result = createTemplatingEntry({ container, validate, setValue: setValueSpy });
+
+        const entry = domQuery('.bio-properties-panel-entry', result.container);
+        const input = domQuery('[role="textbox"]', entry);
+
+        // when
+        await act(() => input.textContent = '{{bar}}');
+
+        // then
+        return await waitFor(() => {
+          expect(setValueSpy).to.have.been.calledWith('{{bar}}', 'error');
+        });
+      });
+
     });
 
 

test/spec/components/TextArea.spec.js

@@ -397,6 +397,28 @@ describe('<TextArea>', function() {
       expect(error.innerText).to.eql('error');
     });
 
+    it('should set invalid', function() {
+
+      // given
+      const setValueSpy = sinon.spy();
+      const validate = (v) => {
+        if (v === 'bar') {
+          return 'error';
+        }
+      };
+
+      const result = createTextArea({ container, validate, setValue: setValueSpy });
+
+      const entry = domQuery('.bio-properties-panel-entry', result.container);
+      const input = domQuery('.bio-properties-panel-input', entry);
+
+      // when
+      changeInput(input, 'bar');
+
+      // then
+      expect(setValueSpy).to.have.been.calledWith('bar', 'error');
+    });
+
   });
 
 

test/spec/components/TextField.spec.js

@@ -276,6 +276,29 @@ describe('<TextField>', function() {
       expect(error.innerText).to.eql('error');
     });
 
+
+    it('should set invalid', function() {
+
+      // given
+      const setValueSpy = sinon.spy();
+      const validate = (v) => {
+        if (v === 'bar') {
+          return 'error';
+        }
+      };
+
+      const result = createTextField({ container, validate, setValue: setValueSpy });
+
+      const entry = domQuery('.bio-properties-panel-entry', result.container);
+      const input = domQuery('.bio-properties-panel-input', entry);
+
+      // when
+      changeInput(input, 'bar');
+
+      // then
+      expect(setValueSpy).to.have.been.calledWith('bar', 'error');
+    });
+
   });