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>