Merge pull request #606 from vaadin/fix/required-invalid

Bypass default value validation by checking if value has changed
vaadin · Sep 24, 2018 · 8627c28 · 8627c28
2 parents 78287c9 + 04d4992
commit 8627c28
Show file tree

Hide file tree

Showing 13 changed files with 48 additions and 21 deletions.
diff --git a/src/vaadin-date-picker-mixin.html b/src/vaadin-date-picker-mixin.html
@@ -439,8 +439,11 @@
         this.__dispatchChange = true;
       }
       const inputValue = selectedDate && formatDate(Vaadin.DatePickerHelper._extractDateParts(selectedDate));
-      this.validate(inputValue);
-      this.value = this._formatISO(selectedDate);
+      const value = this._formatISO(selectedDate);
+      if (value !== this.value) {
+        this.validate(inputValue);
+        this.value = value;
+      }
       this.__userInputOccurred = false;
       this.__dispatchChange = false;
       this._focusedDate = selectedDate;

diff --git a/test/basic.html b/test/basic.html
@@ -3,8 +3,8 @@
 
 <head>
   <meta charset="utf-8">
-  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <link rel="import" href="../../test-fixture/test-fixture.html">
 
   <link rel="import" href="../vaadin-date-picker.html">

diff --git a/test/custom-input.html b/test/custom-input.html
@@ -3,8 +3,8 @@
 
 <head>
   <meta charset="utf-8">
-  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../iron-test-helpers/mock-interactions.js"></script>
   <link rel="import" href="../../test-fixture/test-fixture.html">
   <script src="common.js"></script>

diff --git a/test/dropdown.html b/test/dropdown.html
@@ -3,20 +3,13 @@
 
 <head>
   <meta charset="utf-8">
-  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../iron-test-helpers/mock-interactions.js"></script>
   <link rel="import" href="../../test-fixture/test-fixture.html">
   <link rel="import" href="../vaadin-date-picker.html">
   <link rel="import" href="not-animated-styles.html">
   <script src="common.js"></script>
-  <script>
-    HTMLImports.whenReady(() => {
-      Polymer({
-        is: 'vaadin-date-picker-wrapper'
-      });
-    });
-  </script>
 </head>
 
 <body>
@@ -37,6 +30,13 @@
     <template>
       <vaadin-date-picker id="datepicker" label="foo"></vaadin-date-picker>
     </template>
+    <script>
+      customElements.whenDefined('vaadin-date-picker').then(() => {
+        Polymer({
+          is: 'vaadin-date-picker-wrapper'
+        });
+      });
+    </script>
   </dom-module>
 
   <script>

diff --git a/test/form-input.html b/test/form-input.html
@@ -3,8 +3,8 @@
 
 <head>
   <meta charset="utf-8">
-  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="common.js"></script>
   <link rel="import" href="../../test-fixture/test-fixture.html">
 
@@ -37,6 +37,12 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="datepicker-required">
+    <template>
+      <vaadin-date-picker required></vaadin-date-picker>
+    </template>
+  </test-fixture>
+
   <test-fixture id="datepicker-in-form">
     <template>
       <iron-form>
@@ -218,6 +224,24 @@
       });
     });
 
+    describe('required', () => {
+      let datepicker;
+
+      beforeEach(done => {
+        datepicker = fixture('datepicker-required');
+        setTimeout(done);
+      });
+
+      it('should not be invalid without user interactions', () => {
+        expect(datepicker.invalid).to.be.false;
+      });
+
+      it('should be invalid after validate() if value is not set', () => {
+        datepicker.validate();
+        expect(datepicker.invalid).to.be.true;
+      });
+    });
+
     describe('using as a field in an iron-form', () => {
       var datepicker, ironForm;
 

diff --git a/test/keyboard-input.html b/test/keyboard-input.html
@@ -3,8 +3,8 @@
 
 <head>
   <meta charset="utf-8">
-  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="common.js"></script>
   <script src="../../iron-test-helpers/mock-interactions.js"></script>
   <link rel="import" href="../../test-fixture/test-fixture.html">

diff --git a/test/keyboard-navigation.html b/test/keyboard-navigation.html
@@ -3,8 +3,8 @@
 
 <head>
   <meta charset="utf-8">
-  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="common.js"></script>
   <script src="../../iron-test-helpers/mock-interactions.js"></script>
   <link rel="import" href="../../test-fixture/test-fixture.html">

diff --git a/test/late-upgrade.html b/test/late-upgrade.html
@@ -3,8 +3,8 @@
 
 <head>
   <meta charset="utf-8">
-  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="common.js"></script>
   <link rel="import" href="../../test-fixture/test-fixture.html">
 

diff --git a/test/month-calendar.html b/test/month-calendar.html
@@ -3,8 +3,8 @@
 
 <head>
   <meta charset="utf-8">
-  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <link rel="import" href="../../test-fixture/test-fixture.html">
 
   <link rel="import" href="../src/vaadin-month-calendar.html">

diff --git a/test/overlay.html b/test/overlay.html
@@ -3,8 +3,8 @@
 
 <head>
   <meta charset="utf-8">
-  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../iron-test-helpers/mock-interactions.js"></script>
   <script src="common.js"></script>
   <link rel="import" href="../../test-fixture/test-fixture.html">

diff --git a/test/scroller.html b/test/scroller.html
@@ -3,8 +3,8 @@
 
 <head>
   <meta charset="utf-8">
-  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="common.js"></script>
   <link rel="import" href="../../test-fixture/test-fixture.html">
 

diff --git a/test/visual/default.html b/test/visual/default.html
@@ -9,7 +9,7 @@
     document.write(`<link rel="import" href="../../theme/${theme}/vaadin-date-picker.html">`);
 
     window.addEventListener('WebComponentsReady', function() {
-      setTimeout(function() {
+      customElements.whenDefined('vaadin-date-picker').then(() => {
         window.ShadyDOM && window.ShadyDOM.flush(); // Force DOM composition
         window.webComponentsAreReady = true; // Checked in gemini before capture callback
       });

diff --git a/test/wai-aria.html b/test/wai-aria.html
@@ -3,8 +3,8 @@
 
 <head>
   <meta charset="utf-8">
-  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <link rel="import" href="../../test-fixture/test-fixture.html">
 
   <link rel="import" href="../vaadin-date-picker.html">