Add visual tests

vaadin · May 29, 2018 · 1619063 · 1619063
1 parent 0b09400
commit 1619063
Show file tree

Hide file tree

Showing 32 changed files with 239 additions and 2 deletions.
diff --git a/.gemini-chrome.yml b/.gemini-chrome.yml
@@ -0,0 +1,17 @@
+rootUrl: http://localhost:8080/components/vaadin-date-picker/test/visual/
+gridUrl: http://localhost:4444/wd/hub
+screenshotsDir: ./test/visual/screens
+windowSize: 1024x768
+
+system:
+  plugins:
+    polyserve:
+      port: 8080
+    sauce: true
+
+browsers:
+  chrome:
+    desiredCapabilities:
+      browserName: "chrome"
+      version: "61.0"
+      platform: "Windows 10"
diff --git a/.gemini.yml b/.gemini.yml
@@ -0,0 +1,55 @@
+rootUrl: http://localhost:8080/components/vaadin-date-picker/test/visual/
+gridUrl: http://localhost:4444/wd/hub
+screenshotsDir: ./test/visual/screens
+windowSize: 1024x768
+
+system:
+  plugins:
+    polyserve:
+      port: 8080
+    sauce: true
+
+browsers:
+  firefox:
+    desiredCapabilities:
+      browserName: "firefox"
+      version: "47.0"
+      platform: "Windows 10"
+
+  ie:
+    desiredCapabilities:
+      browserName: "internet explorer"
+      version: "11.0"
+      platform: "Windows 10"
+
+  edge:
+    desiredCapabilities:
+      browserName: "microsoftedge"
+      version: "15"
+      platform: "Windows 10"
+
+  android:
+    desiredCapabilities:
+      browserName: "chrome"
+      platform: "Android"
+
+  # The following setups don't currently work due to Selenium SafariDriver issue
+  # https://github.com/vaadin/vaadin-element-skeleton/issues/19
+  #
+  # safari:
+  #   desiredCapabilities:
+  #     browserName: "safari"
+  #     version: "10.0"
+  #     platform: "OS X 10.11"
+  #
+  # iphone:
+  #   desiredCapabilities:
+  #     browserName: "iphone"
+  #     version: "9.2"
+  #     platform: "OS X 10.11"
+  #
+  # ipad:
+  #   desiredCapabilities:
+  #     browserName: "ipad"
+  #     version: "9.2"
+  #     platform: "OS X 10.11"
diff --git a/.travis.yml b/.travis.yml
@@ -20,10 +20,22 @@ before_script:
   - polymer lint --rules polymer-2 --input ./src/*.html ./theme/**/*.html
   - xvfb-run -s '-screen 0 1024x768x24' wct
 
+env:
+  - TEST_SUITE=visual_tests
+  - TEST_SUITE=unit_tests
+
 script:
   - if [[ "$TRAVIS_EVENT_TYPE" != "pull_request" && "$TRAVIS_BRANCH" != quick/* ]]; then
-      wct --env saucelabs;
+      if [[ "$TEST_SUITE" = "visual_tests" ]]; then
+        npm i --no-save gemini@^4.0.0 gemini-sauce gemini-polyserve &&
+        gemini test test/visual && gemini test test/visual -c .gemini-chrome.yml;
+      fi &&
+      if [[ "$TEST_SUITE" = "unit_tests" ]]; then
+        wct --env saucelabs;
+      fi;
     fi
   - if [ "$TRAVIS_EVENT_TYPE" = "cron" ]; then
-      wct --env saucelabs-cron;
+      if [[ "$TEST_SUITE" = "unit_tests" ]]; then
+        wct --env saucelabs-cron;
+      fi;
     fi
diff --git a/test/.eslintrc.json b/test/.eslintrc.json
@@ -2,5 +2,8 @@
   "rules": {
     "no-undef": 0,
     "no-unused-vars": 0
+  },
+  "globals": {
+    "gemini": false
   }
 }
diff --git a/test/visual/default.html b/test/visual/default.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+
+<head lang="en">
+  <meta charset="UTF-8">
+
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link href="../../vaadin-date-picker.html" rel="import">
+</head>
+
+<body>
+
+  <div id="default-tests" style="padding: 10px;">
+    Plain
+    <vaadin-date-picker></vaadin-date-picker>
+
+    <br>Label
+    <vaadin-date-picker label="Pick a date"></vaadin-date-picker>
+
+    <br>Placeholder
+    <vaadin-date-picker placeholder="Pick a date"></vaadin-date-picker>
+
+    <br>Disabled
+    <vaadin-date-picker disabled></vaadin-date-picker>
+
+    <br>Read-only
+    <vaadin-date-picker readonly></vaadin-date-picker>
+
+    <br>Value
+    <vaadin-date-picker value="1991-12-20"></vaadin-date-picker>
+  </div>
+
+</body>
diff --git a/test/visual/dropdown.html b/test/visual/dropdown.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+
+<head lang="en">
+  <meta charset="UTF-8">
+
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+
+  <dom-module id="text-field-styles" theme-for="vaadin-text-field">
+    <template>
+      <style>
+        /* Hide caret */
+        :host [part="value"] {
+          font-size: 0;
+          height: 24px;
+        }
+      </style>
+    </template>
+  </dom-module>
+
+  <dom-module id="month-calendar-test-styles" theme-for="vaadin-month-calendar">
+    <template>
+      <style>
+        :host(:not([focused])) [part="date"][focused]::before {
+          animation: none !important;
+        }
+      </style>
+    </template>
+  </dom-module>
+
+  <link href="../../vaadin-date-picker.html" rel="import">
+</head>
+
+<body style="height: 100vh;">
+
+  <div id="dropdown-tests" style="padding: 10px;">
+    Plain
+    <vaadin-date-picker id="plain" initial-position="2013-04-27"></vaadin-date-picker>
+
+    <br>Pre-selected value
+    <vaadin-date-picker value="1991-12-20" id="selected-value"></vaadin-date-picker>
+
+    <br>Date limit
+    <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>    
+  </div>
+
+  <script>
+    window.addEventListener('WebComponentsReady', function() {
+      var datepicker = document.querySelector('vaadin-date-picker#weeks');
+      datepicker.set('i18n.firstDayOfWeek', 1);
+    });
+
+    function closeDatePickers() {
+      var datePickers = document.querySelectorAll('vaadin-date-picker');
+
+      [].forEach.call(datePickers, function(datePicker) {
+        datePicker.close();
+      });
+    }
+  </script>
+
+</body>
diff --git a/test/visual/screens/vaadin-date-picker/default-tests/default/android.png b/test/visual/screens/vaadin-date-picker/default-tests/default/android.png
diff --git a/test/visual/screens/vaadin-date-picker/default-tests/default/chrome.png b/test/visual/screens/vaadin-date-picker/default-tests/default/chrome.png
diff --git a/test/visual/screens/vaadin-date-picker/default-tests/default/edge.png b/test/visual/screens/vaadin-date-picker/default-tests/default/edge.png
diff --git a/test/visual/screens/vaadin-date-picker/default-tests/default/firefox.png b/test/visual/screens/vaadin-date-picker/default-tests/default/firefox.png
diff --git a/test/visual/screens/vaadin-date-picker/default-tests/default/ie.png b/test/visual/screens/vaadin-date-picker/default-tests/default/ie.png
diff --git a/test/visual/screens/vaadin-date-picker/dropdown/date-limit/android.png b/test/visual/screens/vaadin-date-picker/dropdown/date-limit/android.png
diff --git a/test/visual/screens/vaadin-date-picker/dropdown/date-limit/chrome.png b/test/visual/screens/vaadin-date-picker/dropdown/date-limit/chrome.png
diff --git a/test/visual/screens/vaadin-date-picker/dropdown/date-limit/edge.png b/test/visual/screens/vaadin-date-picker/dropdown/date-limit/edge.png
diff --git a/test/visual/screens/vaadin-date-picker/dropdown/date-limit/firefox.png b/test/visual/screens/vaadin-date-picker/dropdown/date-limit/firefox.png
diff --git a/test/visual/screens/vaadin-date-picker/dropdown/date-limit/ie.png b/test/visual/screens/vaadin-date-picker/dropdown/date-limit/ie.png
diff --git a/test/visual/screens/vaadin-date-picker/dropdown/default/android.png b/test/visual/screens/vaadin-date-picker/dropdown/default/android.png
diff --git a/test/visual/screens/vaadin-date-picker/dropdown/default/chrome.png b/test/visual/screens/vaadin-date-picker/dropdown/default/chrome.png
diff --git a/test/visual/screens/vaadin-date-picker/dropdown/default/edge.png b/test/visual/screens/vaadin-date-picker/dropdown/default/edge.png
diff --git a/test/visual/screens/vaadin-date-picker/dropdown/default/firefox.png b/test/visual/screens/vaadin-date-picker/dropdown/default/firefox.png
diff --git a/test/visual/screens/vaadin-date-picker/dropdown/default/ie.png b/test/visual/screens/vaadin-date-picker/dropdown/default/ie.png
diff --git a/test/visual/screens/vaadin-date-picker/dropdown/selected-value/android.png b/test/visual/screens/vaadin-date-picker/dropdown/selected-value/android.png
diff --git a/test/visual/screens/vaadin-date-picker/dropdown/selected-value/chrome.png b/test/visual/screens/vaadin-date-picker/dropdown/selected-value/chrome.png
diff --git a/test/visual/screens/vaadin-date-picker/dropdown/selected-value/edge.png b/test/visual/screens/vaadin-date-picker/dropdown/selected-value/edge.png
diff --git a/test/visual/screens/vaadin-date-picker/dropdown/selected-value/firefox.png b/test/visual/screens/vaadin-date-picker/dropdown/selected-value/firefox.png
diff --git a/test/visual/screens/vaadin-date-picker/dropdown/selected-value/ie.png b/test/visual/screens/vaadin-date-picker/dropdown/selected-value/ie.png
diff --git a/test/visual/screens/vaadin-date-picker/dropdown/week-numbers/android.png b/test/visual/screens/vaadin-date-picker/dropdown/week-numbers/android.png
diff --git a/test/visual/screens/vaadin-date-picker/dropdown/week-numbers/chrome.png b/test/visual/screens/vaadin-date-picker/dropdown/week-numbers/chrome.png
diff --git a/test/visual/screens/vaadin-date-picker/dropdown/week-numbers/edge.png b/test/visual/screens/vaadin-date-picker/dropdown/week-numbers/edge.png
diff --git a/test/visual/screens/vaadin-date-picker/dropdown/week-numbers/firefox.png b/test/visual/screens/vaadin-date-picker/dropdown/week-numbers/firefox.png
diff --git a/test/visual/screens/vaadin-date-picker/dropdown/week-numbers/ie.png b/test/visual/screens/vaadin-date-picker/dropdown/week-numbers/ie.png
diff --git a/test/visual/test.js b/test/visual/test.js
@@ -0,0 +1,54 @@
+gemini.suite('vaadin-date-picker', function(rootSuite) {
+  function wait(actions, find) {
+    actions.wait(5000);
+  }
+
+  function goToAboutBlank(actions, find) {
+    // Firefox stops responding on socket after a test, workaround:
+    return actions.executeJS(function(window) {
+      window.location.href = 'about:blank'; // just go away, please!
+    });
+  }
+
+  rootSuite
+    .before(wait)
+    .after(goToAboutBlank);
+
+  gemini.suite('default-tests', function(suite) {
+    suite
+      .setUrl('default.html')
+      .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();
+        });
+      })
+      .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();
+        });
+      });
+  });
+
+});