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

vaadin · Apr 19, 2023 · c68d385 · c68d385
1 parent 31fb6ff
commit c68d385
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 5 deletions.
diff --git a/src/vaadin-checkbox-group.html b/src/vaadin-checkbox-group.html
@@ -250,6 +250,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.
          *
@@ -258,9 +279,10 @@
          * @return {boolean} True if the value is valid.
          */
         validate() {
-          this.invalid = this.required && this.value.length === 0;
-          this.dispatchEvent(new CustomEvent('validated', {detail: {valid: !this.invalid}}));
-          return !this.invalid;
+          const isValid = !(this.required && this.value.length === 0);
+          this._setInvalid(!isValid);
+          this.dispatchEvent(new CustomEvent('validated', {detail: {valid: isValid}}));
+          return isValid;
         }
 
         /** @private */

diff --git a/test/.eslintrc b/test/.eslintrc
@@ -1,4 +1,7 @@
 {
+  "parserOptions": {
+    "ecmaVersion": 8
+  },
   "globals": {
     "WCT": false,
     "describe": false,
@@ -9,6 +12,7 @@
     "expect": false,
     "gemini": false,
     "MockInteractions": false,
-    "animationFrameFlush": false
+    "animationFrameFlush": false,
+    "nextRender": false
   }
 }
diff --git a/test/helpers.html b/test/helpers.html
@@ -0,0 +1,14 @@
+<!doctype html>
+
+<head>
+  <link rel="import" href="../../polymer/polymer.html">
+</head>
+<body>
+<script>
+  window.nextRender = (element) => {
+    return new Promise(resolve => {
+      Polymer.RenderStatus.afterNextRender(element, resolve);
+    });
+  };
+</script>
+</body>
diff --git a/test/validation.html b/test/validation.html
@@ -8,12 +8,13 @@
   <link rel="import" href="../../test-fixture/test-fixture.html">
   <link rel="import" href="../vaadin-checkbox.html">
   <link rel="import" href="../vaadin-checkbox-group.html">
+  <link rel="import" href="helpers.html">
 </head>
 
 <body>
   <test-fixture id="checkbox-group">
     <template>
-      <vaadin-checkbox-group>
+  	  <vaadin-checkbox-group>
         <vaadin-checkbox value="1">Checkbox <b>1</b></vaadin-checkbox>
         <vaadin-checkbox value="2">Checkbox <b>2</b></vaadin-checkbox>
         <vaadin-checkbox value="3">Checkbox <b>3</b></vaadin-checkbox>
@@ -49,5 +50,23 @@
       expect(event.detail.valid).to.be.false;
     });
   });
+  describe('invalid cannot be set to false', () => {
+    let group;
+
+    beforeEach(async() => {
+      group = fixture('checkbox-group');
+      group._shouldSetInvalid = (invalid) => invalid;
+      await nextRender();
+    });
+
+    it('should set invalid only when it is true', async() => {
+      group.required = true;
+      group.validate();
+      expect(group.invalid).to.be.true;
+      group.value = '2';
+      group.validate();
+      expect(group.invalid).to.be.true;
+    });
+  });
   </script>
 </body>