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>