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

vaadin · Apr 17, 2023 · 92931ed · 92931ed
1 parent 3eb1b2e
commit 92931ed
Show file tree

Hide file tree

Showing 7 changed files with 143 additions and 14 deletions.
diff --git a/src/vaadin-text-field-mixin.html b/src/vaadin-text-field-mixin.html
@@ -618,7 +618,7 @@
       }
 
       if (!required && !minlength && !maxlength && !pattern) {
-        this.invalid = false;
+        this._setInvalid(false);
       } else {
         this.validate();
       }
@@ -712,6 +712,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.
      *
@@ -721,7 +742,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/email-field-validation.html b/test/email-field-validation.html
@@ -12,7 +12,7 @@
 </head>
 
 <body>
-  <test-fixture id="basic">
+  <test-fixture id="email-field">
     <template>
       <vaadin-email-field></vaadin-email-field>
     </template>
@@ -55,7 +55,7 @@
     let emailField;
 
     beforeEach(() => {
-      emailField = fixture('basic');
+      emailField = fixture('email-field');
     });
 
     it('should fire a validated event on validation success', () => {
@@ -79,5 +79,23 @@
       expect(event.detail.valid).to.be.false;
     });
   });
+  describe('invalid cannot be set to false', () => {
+    let emailField;
+
+    beforeEach(async() => {
+      emailField = fixture('email-field');
+      emailField._shouldSetInvalid = (invalid) => invalid;
+      await nextRender();
+    });
+
+    it('should set invalid only when it is true', async() => {
+      emailField.required = true;
+      emailField.validate();
+      expect(emailField.invalid).to.be.true;
+      emailField.value = 'email@example.com';
+      emailField.validate();
+      expect(emailField.invalid).to.be.true;
+    });
+  });
 </script>
 </body>
diff --git a/test/integer-field-validation.html b/test/integer-field-validation.html
@@ -12,7 +12,7 @@
 </head>
 
 <body>
-  <test-fixture id="basic">
+  <test-fixture id="integer-field">
     <template>
       <vaadin-integer-field></vaadin-integer-field>
     </template>
@@ -55,7 +55,7 @@
     let integerField;
 
     beforeEach(() => {
-      integerField = fixture('basic');
+      integerField = fixture('integer-field');
     });
 
     it('should fire a validated event on validation success', () => {
@@ -79,5 +79,23 @@
       expect(event.detail.valid).to.be.false;
     });
   });
+  describe('invalid cannot be set to false', () => {
+    let integerField;
+
+    beforeEach(async() => {
+      integerField = fixture('integer-field');
+      integerField._shouldSetInvalid = (invalid) => invalid;
+      await nextRender();
+    });
+
+    it('should set invalid only when it is true', async() => {
+      integerField.required = true;
+      integerField.validate();
+      expect(integerField.invalid).to.be.true;
+      integerField.value = 5;
+      integerField.validate();
+      expect(integerField.invalid).to.be.true;
+    });
+  });
 </script>
 </body>
diff --git a/test/number-field-validation.html b/test/number-field-validation.html
@@ -12,7 +12,7 @@
 </head>
 
 <body>
- <test-fixture id="basic">
+ <test-fixture id="number-field">
     <template>
       <vaadin-number-field></vaadin-number-field>
     </template>
@@ -55,7 +55,7 @@
     let numberField;
 
     beforeEach(() => {
-      numberField = fixture('basic');
+      numberField = fixture('number-field');
     });
 
     it('should fire a validated event on validation success', () => {
@@ -79,5 +79,23 @@
       expect(event.detail.valid).to.be.false;
     });
   });
+  describe('invalid cannot be set to false', () => {
+    let numberField;
+
+    beforeEach(async() => {
+      numberField = fixture('number-field');
+      numberField._shouldSetInvalid = (invalid) => invalid;
+      await nextRender();
+    });
+
+    it('should set invalid only when it is true', async() => {
+      numberField.required = true;
+      numberField.validate();
+      expect(numberField.invalid).to.be.true;
+      numberField.value = 5;
+      numberField.validate();
+      expect(numberField.invalid).to.be.true;
+    });
+  });
 </script>
 </body>
diff --git a/test/password-field-validation.html b/test/password-field-validation.html
@@ -12,7 +12,7 @@
 </head>
 
 <body>
-  <test-fixture id="basic">
+  <test-fixture id="password-field">
     <template>
       <vaadin-password-field></vaadin-password-field>
     </template>
@@ -55,7 +55,7 @@
     let passwordField;
 
     beforeEach(() => {
-      passwordField = fixture('basic');
+      passwordField = fixture('password-field');
     });
 
     it('should fire a validated event on validation success', () => {
@@ -79,5 +79,23 @@
       expect(event.detail.valid).to.be.false;
     });
   });
+  describe('invalid cannot be set to false', () => {
+    let passwordField;
+
+    beforeEach(async() => {
+      passwordField = fixture('password-field');
+      passwordField._shouldSetInvalid = (invalid) => invalid;
+      await nextRender();
+    });
+
+    it('should set invalid only when it is true', async() => {
+      passwordField.required = true;
+      passwordField.validate();
+      expect(passwordField.invalid).to.be.true;
+      passwordField.value = 'value';
+      passwordField.validate();
+      expect(passwordField.invalid).to.be.true;
+    });
+  });
 </script>
 </body>
diff --git a/test/text-area-validation.html b/test/text-area-validation.html
@@ -12,7 +12,7 @@
 </head>
 
 <body>
-  <test-fixture id="basic">
+  <test-fixture id="text-area">
     <template>
       <vaadin-text-area></vaadin-text-area>
     </template>
@@ -55,7 +55,7 @@
     let textArea;
 
     beforeEach(() => {
-      textArea = fixture('basic');
+      textArea = fixture('text-area');
     });
 
     it('should fire a validated event on validation success', () => {
@@ -79,5 +79,23 @@
       expect(event.detail.valid).to.be.false;
     });
   });
+  describe('invalid cannot be set to false', () => {
+    let textArea;
+
+    beforeEach(async() => {
+      textArea = fixture('text-area');
+      textArea._shouldSetInvalid = (invalid) => invalid;
+      await nextRender();
+    });
+
+    it('should set invalid only when it is true', async() => {
+      textArea.required = true;
+      textArea.validate();
+      expect(textArea.invalid).to.be.true;
+      textArea.value = 'value';
+      textArea.validate();
+      expect(textArea.invalid).to.be.true;
+    });
+  });
 </script>
 </body>
diff --git a/test/text-field-validation.html b/test/text-field-validation.html
@@ -12,7 +12,7 @@
 </head>
 
 <body>
-  <test-fixture id="basic">
+  <test-fixture id="text-field">
     <template>
       <vaadin-text-field></vaadin-text-field>
     </template>
@@ -55,7 +55,7 @@
     let textField;
 
     beforeEach(() => {
-      textField = fixture('basic');
+      textField = fixture('text-field');
     });
 
     it('should fire a validated event on validation success', () => {
@@ -79,5 +79,23 @@
       expect(event.detail.valid).to.be.false;
     });
   });
+  describe('invalid cannot be set to false', () => {
+    let textField;
+
+    beforeEach(async() => {
+      textField = fixture('text-field');
+      textField._shouldSetInvalid = (invalid) => invalid;
+      await nextRender();
+    });
+
+    it('should set invalid only when it is true', async() => {
+      textField.required = true;
+      textField.validate();
+      expect(textField.invalid).to.be.true;
+      textField.value = 'value';
+      textField.validate();
+      expect(textField.invalid).to.be.true;
+    });
+  });
 </script>
 </body>