feat: fire a validated event on validation (#206)

vaadin · Apr 18, 2023 · a14045e · a14045e
1 parent 3b4144c
commit a14045e
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 3 deletions.
diff --git a/src/vaadin-time-picker.html b/src/vaadin-time-picker.html
@@ -686,12 +686,15 @@
         }
 
         /**
-         * Returns true if `value` is valid, and sets the `invalid` flag appropriately.
+         * Validates the field and sets the `invalid` property based on the result.
          *
-         * @return {boolean} True if the value is valid and sets the `invalid` flag appropriately
+         * The method fires a `validated` event with the result of the validation.
          */
         validate() {
-          return !(this.invalid = !this.checkValidity());
+          const isValid = this.checkValidity();
+          this.invalid = !isValid;
+          this.dispatchEvent(new CustomEvent('validated', {detail: {valid: isValid}}));
+          return isValid;
         }
 
         /**
@@ -721,6 +724,14 @@
             (!this.value || this._timeAllowed(this.i18n.parseTime(this.value))) &&
             (!this.__dropdownElement.value || this.i18n.parseTime(this.__dropdownElement.value)));
         }
+
+        /**
+         * Fired whenever the field is validated.
+         *
+         * @event validated
+         * @param {Object} detail
+         * @param {boolean} detail.valid the result of the validation.
+         */
       }
 
       customElements.define(TimePickerElement.is, TimePickerElement);

diff --git a/test/validation.html b/test/validation.html
@@ -7,9 +7,15 @@
   <script src='../../webcomponentsjs/webcomponents-lite.js'></script>
   <link rel="import" href="../src/vaadin-time-picker.html">
   <link rel="import" href="helpers.html">
+  <link rel="import" href="../../test-fixture/test-fixture.html">
 </head>
 
 <body>
+  <test-fixture id="time-picker">
+    <template>
+      <vaadin-time-picker></vaadin-time-picker>
+    </template>
+  </test-fixture>
   <script>
   describe('initial validation', () => {
     let timePicker, validateSpy;
@@ -44,5 +50,33 @@
       expect(validateSpy.called).to.be.false;
     });
   });
+  describe('basic', () => {
+    let timePicker;
+
+    beforeEach(() => {
+      timePicker = fixture('time-picker');
+    });
+
+    it('should fire a validated event on validation success', () => {
+      const validatedSpy = sinon.spy();
+      timePicker.addEventListener('validated', validatedSpy);
+      timePicker.validate();
+
+      expect(validatedSpy.calledOnce).to.be.true;
+      const event = validatedSpy.firstCall.args[0];
+      expect(event.detail.valid).to.be.true;
+    });
+
+    it('should fire a validated event on validation failure', () => {
+      const validatedSpy = sinon.spy();
+      timePicker.addEventListener('validated', validatedSpy);
+      timePicker.required = true;
+      timePicker.validate();
+
+      expect(validatedSpy.calledOnce).to.be.true;
+      const event = validatedSpy.firstCall.args[0];
+      expect(event.detail.valid).to.be.false;
+    });
+  });
   </script>
 </body>