From d86cfc59018a2e5dcff0b2f5728683fc4e4861e6 Mon Sep 17 00:00:00 2001 From: Ben Amor Aymen Date: Tue, 9 Jun 2020 16:38:28 +0200 Subject: [PATCH] fix(form-core): on reset the submitted values becomes false (#753) --- .../form-core/src/InteractionStateMixin.js | 1 + .../InteractionStateMixin.suite.js | 4 + .../docs/17-validation-examples.md | 98 ++++++++++++ .../form-integrations/test/form-reset.test.js | 147 ++++++++++++++++++ yarn.lock | 25 --- 5 files changed, 250 insertions(+), 25 deletions(-) create mode 100644 packages/form-integrations/test/form-reset.test.js diff --git a/packages/form-core/src/InteractionStateMixin.js b/packages/form-core/src/InteractionStateMixin.js index b8c38a703..66a5c9f33 100644 --- a/packages/form-core/src/InteractionStateMixin.js +++ b/packages/form-core/src/InteractionStateMixin.js @@ -141,6 +141,7 @@ export const InteractionStateMixin = dedupeMixin( */ resetInteractionState() { this.touched = false; + this.submitted = false; this.dirty = false; this.prefilled = !this._isEmpty(); } diff --git a/packages/form-core/test-suites/InteractionStateMixin.suite.js b/packages/form-core/test-suites/InteractionStateMixin.suite.js index 7a38202a3..488332845 100644 --- a/packages/form-core/test-suites/InteractionStateMixin.suite.js +++ b/packages/form-core/test-suites/InteractionStateMixin.suite.js @@ -168,19 +168,23 @@ export function runInteractionStateMixinSuite(customConfig) { el.dirty = true; el.touched = true; el.prefilled = true; + el.submitted = true; el.resetInteractionState(); expect(el.dirty).to.be.false; expect(el.touched).to.be.false; expect(el.prefilled).to.be.false; + expect(el.submitted).to.be.false; el.dirty = true; el.touched = true; el.prefilled = false; + el.submitted = true; el.modelValue = 'Some value'; el.resetInteractionState(); expect(el.dirty).to.be.false; expect(el.touched).to.be.false; expect(el.prefilled).to.be.true; + expect(el.submitted).to.be.false; }); it('has a method initInteractionState()', async () => { diff --git a/packages/form-integrations/docs/17-validation-examples.md b/packages/form-integrations/docs/17-validation-examples.md index 47b9672dc..fe71ecb81 100644 --- a/packages/form-integrations/docs/17-validation-examples.md +++ b/packages/form-integrations/docs/17-validation-examples.md @@ -410,3 +410,101 @@ export const disabledInputsValidation = () => html` > `; ``` + +### Form Validation Reset + +```js preview-story +export const FormValidationReset = () => html` + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Submit + { + console.log(ev.currentTarget.parentElement.parentElement.parentElement); + ev.currentTarget.parentElement.parentElement.parentElement.resetGroup(); + }} + >Reset +
+
+ +`; +``` diff --git a/packages/form-integrations/test/form-reset.test.js b/packages/form-integrations/test/form-reset.test.js new file mode 100644 index 000000000..b8bf9f945 --- /dev/null +++ b/packages/form-integrations/test/form-reset.test.js @@ -0,0 +1,147 @@ +import { elementUpdated, expect, fixture, html } from '@open-wc/testing'; + +import '@lion/input-amount/lion-input-amount'; +import '@lion/input-date/lion-input-date'; +import '@lion/textarea/lion-textarea'; +import '@lion/input-datepicker/lion-input-datepicker'; +import '@lion/input-email/lion-input-email'; +import '@lion/input-iban/lion-input-iban'; +import '@lion/input-range/lion-input-range'; +import '@lion/input/lion-input'; +import '@lion/checkbox-group/lion-checkbox-group'; +import '@lion/checkbox-group/lion-checkbox'; +import '@lion/radio-group/lion-radio-group'; +import '@lion/radio-group/lion-radio'; +import '@lion/select/lion-select'; +import '@lion/switch/lion-switch'; +import '@lion/form/lion-form'; +import '@lion/button/lion-button'; +import { Required, MinLength } from '@lion/form-core'; + +describe(`Submitting/Resetting Form`, async () => { + let el; + beforeEach(async () => { + el = await fixture(html` + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Submit + + Reset + +
+
+ + `); + }); + + it('Submitting a form should make submitted true for all fields', async () => { + el.querySelector('#submit_button').click(); + await elementUpdated(el); + el.formElements.forEach(field => { + console.log(field); + console.log(field.submitted); + expect(field.submitted).to.be.true; + }); + }); + + it('Resetting a form should reset metadata of all fields', async () => { + el.querySelector('#submit_button').click(); + el.querySelector('#reset_button').click(); + await elementUpdated(el); + expect(el.submitted).to.be.false; + el.formElements.forEach(field => { + expect(field.submitted).to.be.false; + expect(field.touched).to.be.false; + expect(field.dirty).to.be.false; + }); + }); +}); diff --git a/yarn.lock b/yarn.lock index 365033702..e8341c915 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1998,31 +1998,6 @@ npmlog "^4.1.2" write-file-atomic "^2.3.0" -"@lion/field@0.13.1": - version "0.13.1" - resolved "https://registry.yarnpkg.com/@lion/field/-/field-0.13.1.tgz#566244c16fbac8e46d59e5a2eca7024cc6c8bfdc" - integrity sha512-ecAzZt4qq4VA+BCrxS9wcE5Vzy3yK6ETdHQlnmIZKuJwaACbtx+FKTkDovwxkYy4jpohWB2g+etQevz4F6GOzw== - dependencies: - "@lion/core" "0.6.0" - "@lion/validate" "0.11.0" - -"@lion/localize@0.10.0": - version "0.10.0" - resolved "https://registry.yarnpkg.com/@lion/localize/-/localize-0.10.0.tgz#f3608baeb9ae65ac4e0c3efdd6208208220a6153" - integrity sha512-oAy07yvNkFlsMxW3TBwrHvj1QEcjVDJ50vazuekzpc0M6v9c+00/6Y3U3TnH/H5V5qjKmOHnfhqYZoVqkmaqhA== - dependencies: - "@bundled-es-modules/message-format" "6.0.4" - "@lion/core" "0.6.0" - singleton-manager "1.0.0" - -"@lion/validate@0.11.0": - version "0.11.0" - resolved "https://registry.yarnpkg.com/@lion/validate/-/validate-0.11.0.tgz#634465b2a90461024e913698f60505cd0b774a19" - integrity sha512-pphmYoWZZyybjLo0kdZ8jBSDwS2yh4Kjuanu6Qv8YJCK1gK1d7CvMIqBdFAPlRvZ5DSpz7eoHMrY/iYbo6edog== - dependencies: - "@lion/core" "0.6.0" - "@lion/localize" "0.10.0" - "@marionebl/sander@^0.6.0": version "0.6.1" resolved "https://registry.yarnpkg.com/@marionebl/sander/-/sander-0.6.1.tgz#1958965874f24bc51be48875feb50d642fc41f7b"