From 61a1dbb1a8699b684bd164e1dcdaf79274c1a8ce Mon Sep 17 00:00:00 2001 From: Martin Stamm Date: Tue, 4 Jul 2023 10:08:01 +0200 Subject: [PATCH] chore: add error message to `setValue` callback --- CHANGELOG.md | 2 +- src/components/entries/FEEL/Feel.js | 2 +- src/components/entries/NumberField.js | 2 +- src/components/entries/Select.js | 2 +- src/components/entries/TextArea.js | 2 +- src/components/entries/TextField.js | 2 +- .../entries/templating/Templating.js | 2 +- test/spec/components/Feel.spec.js | 93 +++++++++++++++++++ test/spec/components/NumberField.spec.js | 28 +----- test/spec/components/Select.spec.js | 23 +++++ test/spec/components/Templating.spec.js | 25 +++++ test/spec/components/TextArea.spec.js | 22 +++++ test/spec/components/TextField.spec.js | 23 +++++ 13 files changed, 196 insertions(+), 32 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9bc86d43..454e32dc 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/components/entries/FEEL/Feel.js b/src/components/entries/FEEL/Feel.js index ce83583c..b722d21d 100644 --- a/src/components/entries/FEEL/Feel.js +++ b/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); diff --git a/src/components/entries/NumberField.js b/src/components/entries/NumberField.js index 1ef0a987..5b7f8c2e 100644 --- a/src/components/entries/NumberField.js +++ b/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); }; diff --git a/src/components/entries/Select.js b/src/components/entries/Select.js index 046c9e38..b771510e 100644 --- a/src/components/entries/Select.js +++ b/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); }; diff --git a/src/components/entries/TextArea.js b/src/components/entries/TextArea.js index 71208166..716f8e4a 100644 --- a/src/components/entries/TextArea.js +++ b/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); }; diff --git a/src/components/entries/TextField.js b/src/components/entries/TextField.js index 0e6cfb74..60ea0044 100644 --- a/src/components/entries/TextField.js +++ b/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); }; diff --git a/src/components/entries/templating/Templating.js b/src/components/entries/templating/Templating.js index cde808e3..7884125a 100644 --- a/src/components/entries/templating/Templating.js +++ b/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); diff --git a/test/spec/components/Feel.spec.js b/test/spec/components/Feel.spec.js index 297378d2..90ee5cd2 100644 --- a/test/spec/components/Feel.spec.js +++ b/test/spec/components/Feel.spec.js @@ -277,6 +277,29 @@ describe('', 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('', 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('', 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('', 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'); + }); + }); diff --git a/test/spec/components/NumberField.spec.js b/test/spec/components/NumberField.spec.js index a9b10fee..f5bf98bc 100644 --- a/test/spec/components/NumberField.spec.js +++ b/test/spec/components/NumberField.spec.js @@ -297,7 +297,7 @@ describe('', 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('', 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'); }); }); diff --git a/test/spec/components/Select.spec.js b/test/spec/components/Select.spec.js index b42f108b..0fd30fc4 100644 --- a/test/spec/components/Select.spec.js +++ b/test/spec/components/Select.spec.js @@ -419,6 +419,29 @@ describe('