feat: add methods to make setting invalid overridable (#128)

vaadin · Apr 20, 2023 · b23ef79 · b23ef79
1 parent d0f6fad
commit b23ef79
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 3 deletions.
diff --git a/src/vaadin-custom-field.html b/src/vaadin-custom-field.html
@@ -225,6 +225,27 @@
           }
         }
 
+        /**
+         * @param {boolean} invalid
+         * @protected
+         */
+        _setInvalid(invalid) {
+          if (this._shouldSetInvalid(invalid)) {
+            this.invalid = invalid;
+          }
+        }
+
+        /**
+         * Override this method to define whether the given `invalid` state should be set.
+         *
+         * @param {boolean} _invalid
+         * @return {boolean}
+         * @protected
+         */
+        _shouldSetInvalid(_invalid) {
+          return true;
+        }
+
         /**
          * Validates the field and sets the `invalid` property based on the result.
          *
@@ -234,7 +255,7 @@
          */
         validate() {
           const isValid = this.checkValidity();
-          this.invalid = !isValid;
+          this._setInvalid(!isValid);
           this.dispatchEvent(new CustomEvent('validated', {detail: {valid: isValid}}));
           return isValid;
         }

diff --git a/test/.eslintrc.json b/test/.eslintrc.json
@@ -1,4 +1,7 @@
 {
+  "parserOptions": {
+    "ecmaVersion": 8
+  },
   "globals": {
     "WCT": false,
     "describe": false,
@@ -10,6 +13,7 @@
     "sinon": false,
     "dispatchChange": false,
     "dispatchSlotChange": false,
-    "MockInteractions": false
+    "MockInteractions": false,
+    "nextRender": false
   }
 }
diff --git a/test/helpers.html b/test/helpers.html
@@ -1,6 +1,19 @@
+<!doctype html>
+
+<head>
+  <link rel="import" href="../../polymer/polymer.html">
+</head>
+<body>
 <script>
   window.dispatchChange = function(el) {
     const evt = new CustomEvent('change', {bubbles: true});
     el.dispatchEvent(evt);
   };
+
+  window.nextRender = (element) => {
+    return new Promise(resolve => {
+      Polymer.RenderStatus.afterNextRender(element, resolve);
+    });
+  };
 </script>
+</body>
diff --git a/test/validation.html b/test/validation.html
@@ -7,14 +7,14 @@
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <link rel="import" href="../../test-fixture/test-fixture.html">
   <link rel="import" href="../vaadin-custom-field.html">
+  <link rel="import" href="helpers.html">
 </head>
 
 <body>
   <test-fixture id="custom-field">
     <template>
       <vaadin-custom-field>
         <input type="text">
-        <input type="number">
       </vaadin-custom-field>
     </template>
   </test-fixture>
@@ -47,5 +47,23 @@
       expect(event.detail.valid).to.be.false;
     });
   });
+  describe('invalid cannot be set to false', () => {
+    let customField;
+
+    beforeEach(async() => {
+      customField = fixture('custom-field');
+      customField._shouldSetInvalid = (invalid) => invalid;
+      await nextRender();
+    });
+
+    it('should set invalid only when it is true', async() => {
+      customField.required = true;
+      customField.validate();
+      expect(customField.invalid).to.be.true;
+      customField.value = 'value';
+      customField.validate();
+      expect(customField.invalid).to.be.true;
+    });
+  });
   </script>
 </body>