Added visual tests for Material theme.

vaadin · Sep 3, 2018 · 9a02fc8 · 9a02fc8
1 parent e0d1949
commit 9a02fc8
Show file tree

Hide file tree

Showing 23 changed files with 59 additions and 44 deletions.
diff --git a/test/visual/default.html b/test/visual/default.html
@@ -4,7 +4,10 @@
   <meta charset="UTF-8">
 
   <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
-  <link href="../../vaadin-date-picker.html" rel="import">
+  <script>
+    const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
+    document.write(`<link rel="import" href="../../theme/${theme}/vaadin-date-picker.html">`);
+  </script>
 </head>
 
 <body>
@@ -29,4 +32,4 @@
     <vaadin-date-picker value="1991-12-20"></vaadin-date-picker>
   </div>
 
-</body>
+</body>
diff --git a/test/visual/dropdown.html b/test/visual/dropdown.html
@@ -27,7 +27,10 @@
     </template>
   </dom-module>
 
-  <link href="../../vaadin-date-picker.html" rel="import">
+  <script>
+    const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
+    document.write(`<link rel="import" href="../../theme/${theme}/vaadin-date-picker.html">`);
+  </script>
 </head>
 
 <body style="height: 100vh;">
@@ -43,22 +46,29 @@
     <vaadin-date-picker min="2017-06-10" max="2017-06-29" initial-position="2017-06-15" id="date-limit"></vaadin-date-picker>
 
     <br>Week numbers
-    <vaadin-date-picker show-week-numbers id="weeks" initial-position="2018-04-28"></vaadin-date-picker>    
+    <vaadin-date-picker show-week-numbers id="weeks" initial-position="2018-04-28"></vaadin-date-picker>
   </div>
 
   <script>
+    var datePickers = document.querySelectorAll('vaadin-date-picker');
+
     window.addEventListener('WebComponentsReady', function() {
-      var datepicker = document.querySelector('vaadin-date-picker#weeks');
-      datepicker.set('i18n.firstDayOfWeek', 1);
+      const weeksDatepicker = document.querySelector('vaadin-date-picker#weeks');
+      weeksDatepicker.set('i18n.firstDayOfWeek', 1);
+
+      [].forEach.call(datePickers, function(datePicker) {
+        datePicker.$.input.addEventListener('focus', function(e) {
+          // Make sure the input doesn't have a blinking caret that might fail the test
+          e.target.blur();
+        });
+      });
     });
 
     function closeDatePickers() {
-      var datePickers = document.querySelectorAll('vaadin-date-picker');
-
       [].forEach.call(datePickers, function(datePicker) {
-        datePicker.close();
+        datePicker.close && datePicker.close();
       });
     }
   </script>
 
-</body>
+</body>
diff --git a/...e-picker/default-tests/default/chrome.png → ...ker/default-tests-lumo/default/chrome.png b/...e-picker/default-tests/default/chrome.png → ...ker/default-tests-lumo/default/chrome.png
diff --git a/...-picker/default-tests/default/firefox.png → ...er/default-tests-lumo/default/firefox.png b/...-picker/default-tests/default/firefox.png → ...er/default-tests-lumo/default/firefox.png
diff --git a/test/visual/screens/vaadin-date-picker/default-tests-material/default/chrome.png b/test/visual/screens/vaadin-date-picker/default-tests-material/default/chrome.png
diff --git a/test/visual/screens/vaadin-date-picker/default-tests-material/default/firefox.png b/test/visual/screens/vaadin-date-picker/default-tests-material/default/firefox.png
diff --git a/...ate-picker/dropdown/date-limit/chrome.png → ...icker/dropdown-lumo/date-limit/chrome.png b/...ate-picker/dropdown/date-limit/chrome.png → ...icker/dropdown-lumo/date-limit/chrome.png
diff --git a/...te-picker/dropdown/date-limit/firefox.png → ...cker/dropdown-lumo/date-limit/firefox.png b/...te-picker/dropdown/date-limit/firefox.png → ...cker/dropdown-lumo/date-limit/firefox.png
diff --git a/...n-date-picker/dropdown/default/chrome.png → ...e-picker/dropdown-lumo/default/chrome.png b/...n-date-picker/dropdown/default/chrome.png → ...e-picker/dropdown-lumo/default/chrome.png
diff --git a/...-date-picker/dropdown/default/firefox.png → ...-picker/dropdown-lumo/default/firefox.png b/...-date-picker/dropdown/default/firefox.png → ...-picker/dropdown-lumo/default/firefox.png
diff --git a/...picker/dropdown/selected-value/chrome.png → ...r/dropdown-lumo/selected-value/chrome.png b/...picker/dropdown/selected-value/chrome.png → ...r/dropdown-lumo/selected-value/chrome.png
diff --git a/...icker/dropdown/selected-value/firefox.png → .../dropdown-lumo/selected-value/firefox.png b/...icker/dropdown/selected-value/firefox.png → .../dropdown-lumo/selected-value/firefox.png
diff --git a/...e-picker/dropdown/week-numbers/chrome.png → ...ker/dropdown-lumo/week-numbers/chrome.png b/...e-picker/dropdown/week-numbers/chrome.png → ...ker/dropdown-lumo/week-numbers/chrome.png
diff --git a/...-picker/dropdown/week-numbers/firefox.png → ...er/dropdown-lumo/week-numbers/firefox.png b/...-picker/dropdown/week-numbers/firefox.png → ...er/dropdown-lumo/week-numbers/firefox.png
diff --git a/test/visual/screens/vaadin-date-picker/dropdown-material/date-limit/chrome.png b/test/visual/screens/vaadin-date-picker/dropdown-material/date-limit/chrome.png
diff --git a/test/visual/screens/vaadin-date-picker/dropdown-material/date-limit/firefox.png b/test/visual/screens/vaadin-date-picker/dropdown-material/date-limit/firefox.png
diff --git a/test/visual/screens/vaadin-date-picker/dropdown-material/default/chrome.png b/test/visual/screens/vaadin-date-picker/dropdown-material/default/chrome.png
diff --git a/test/visual/screens/vaadin-date-picker/dropdown-material/default/firefox.png b/test/visual/screens/vaadin-date-picker/dropdown-material/default/firefox.png
diff --git a/test/visual/screens/vaadin-date-picker/dropdown-material/selected-value/chrome.png b/test/visual/screens/vaadin-date-picker/dropdown-material/selected-value/chrome.png
diff --git a/.../visual/screens/vaadin-date-picker/dropdown-material/selected-value/firefox.png b/.../visual/screens/vaadin-date-picker/dropdown-material/selected-value/firefox.png
diff --git a/test/visual/screens/vaadin-date-picker/dropdown-material/week-numbers/chrome.png b/test/visual/screens/vaadin-date-picker/dropdown-material/week-numbers/chrome.png
diff --git a/test/visual/screens/vaadin-date-picker/dropdown-material/week-numbers/firefox.png b/test/visual/screens/vaadin-date-picker/dropdown-material/week-numbers/firefox.png
diff --git a/test/visual/test.js b/test/visual/test.js
@@ -14,41 +14,43 @@ gemini.suite('vaadin-date-picker', function(rootSuite) {
     .before(wait)
     .after(goToAboutBlank);
 
-  gemini.suite('default-tests', function(suite) {
-    suite
-      .setUrl('default.html')
-      .setCaptureElements('#default-tests')
-      .capture('default');
-  });
+  ['lumo', 'material'].forEach(theme => {
+    gemini.suite(`default-tests-${theme}`, function(suite) {
+      suite
+        .setUrl(`default.html?theme=${theme}`)
+        .setCaptureElements('#default-tests')
+        .capture('default');
+    });
 
-  gemini.suite('dropdown', function(suite) {
-    suite
-      .setUrl('dropdown.html')
-      .setCaptureElements('body')
-      .capture('default', function(actions) {
-        actions.executeJS(function(window) {
-          window.closeDatePickers();
-          window.document.querySelector('#plain').open();
-        });
-      })
-      .capture('selected-value', function(actions) {
-        actions.executeJS(function(window) {
-          window.closeDatePickers();
-          window.document.querySelector('#selected-value').open();
+    gemini.suite(`dropdown-${theme}`, function(suite) {
+      suite
+        .setUrl(`dropdown.html?theme=${theme}`)
+        .setCaptureElements('body')
+        .capture('default', function(actions) {
+          actions.executeJS(function(window) {
+            window.closeDatePickers();
+            window.document.querySelector('#plain').open();
+          });
+        })
+        .capture('selected-value', function(actions) {
+          actions.executeJS(function(window) {
+            window.closeDatePickers();
+            window.document.querySelector('#selected-value').open();
+          });
+        })
+        .capture('date-limit', function(actions) {
+          actions.executeJS(function(window) {
+            window.closeDatePickers();
+            window.document.querySelector('#date-limit').open();
+          });
+        })
+        .capture('week-numbers', function(actions) {
+          actions.executeJS(function(window) {
+            window.closeDatePickers();
+            window.document.querySelector('#weeks').open();
+          });
         });
-      })
-      .capture('date-limit', function(actions) {
-        actions.executeJS(function(window) {
-          window.closeDatePickers();
-          window.document.querySelector('#date-limit').open();
-        });
-      })
-      .capture('week-numbers', function(actions) {
-        actions.executeJS(function(window) {
-          window.closeDatePickers();
-          window.document.querySelector('#weeks').open();
-        });
-      });
+    });
   });
 
-});
+});