Merge pull request #87 from vaadin/fix/enable-visual-tests

Enable visual tests with Lumo
vaadin · May 21, 2018 · 3f273c5 · 3f273c5
2 parents 4f22048 + d00ef67
commit 3f273c5
Show file tree

Hide file tree

Showing 48 changed files with 384 additions and 280 deletions.
diff --git a/.gemini-chrome.yml b/.gemini-chrome.yml
@@ -0,0 +1,16 @@
+rootUrl: http://localhost:8080/components/vaadin-button/test/visual/
+gridUrl: http://localhost:4444/wd/hub
+screenshotsDir: ./test/visual/screens
+
+system:
+  plugins:
+    polyserve:
+      port: 8080
+    sauce: true
+
+browsers:
+  chrome:
+    desiredCapabilities:
+      browserName: "chrome"
+      version: "61.0"
+      platform: "Windows 10"
diff --git a/.gemini-ie.yml b/.gemini-ie.yml
diff --git a/.gemini.yml b/.gemini.yml
@@ -9,24 +9,29 @@ system:
     sauce: true
 
 browsers:
-  chrome:
-    desiredCapabilities:
-      browserName: "chrome"
-      version: "59.0"
-      platform: "Windows 10"
-
   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
   #
@@ -46,4 +51,4 @@ browsers:
   #   desiredCapabilities:
   #     browserName: "ipad"
   #     version: "9.2"
-  #     platform: "OS X 10.11"
+  #     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/visual/colors.html b/test/visual/colors.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+
+<head lang="en">
+  <meta charset="UTF-8">
+
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../vaadin-button.html">
+
+  <custom-style>
+    <style include="lumo-typography lumo-color">
+      body {
+        margin: 2em;
+      }
+    </style>
+  </custom-style>
+
+</head>
+
+<body>
+  <h2>Colors</h2>
+
+  Contrast:
+
+  <vaadin-button theme="primary contrast">
+    <span>Button</span>
+  </vaadin-button>
+
+  <vaadin-button theme="contrast">
+    <span>Button</span>
+  </vaadin-button>
+
+  <vaadin-button theme="tertiary contrast">
+    <span>Button</span>
+  </vaadin-button>
+
+
+  <br>Success:
+
+  <vaadin-button theme="primary success">
+    <span>Button</span>
+  </vaadin-button>
+
+  <vaadin-button theme="success">
+    <span>Button</span>
+  </vaadin-button>
+
+  <vaadin-button theme="tertiary success">
+    <span>Button</span>
+  </vaadin-button>
+
+  <br>Error:
+
+  <vaadin-button theme="primary error">
+    <span>Button</span>
+  </vaadin-button>
+
+  <vaadin-button theme="error">
+    <span>Button</span>
+  </vaadin-button>
+
+  <vaadin-button theme="tertiary error">
+    <span>Button</span>
+  </vaadin-button>
+
+</body>
diff --git a/test/visual/default.html b/test/visual/default.html
@@ -17,7 +17,7 @@
       </vaadin-button>
 
       <vaadin-button tabindex="2">
-        <img src="../../demo/vaadin-logo.svg">
+        <img src="vaadin-logo.svg">
       </vaadin-button>
 
       <vaadin-button autofocus tabindex="1">

diff --git a/test/visual/icons.html b/test/visual/icons.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+
+<head lang="en">
+  <meta charset="UTF-8">
+
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../vaadin-button.html">
+  <link rel="import" href="../../../vaadin-lumo-styles/icons.html">
+
+  <custom-style>
+    <style include="lumo-typography lumo-color">
+      body {
+        margin: 2em;
+      }
+    </style>
+  </custom-style>
+
+</head>
+
+<body>
+  <h2>Icons and size presets</h2>
+
+  <vaadin-button aria-label="Icon-only button" theme="large icon">
+    <iron-icon slot="prefix" icon="lumo:plus"></iron-icon>
+  </vaadin-button>
+
+  <vaadin-button theme="large">
+    <iron-icon slot="prefix" icon="lumo:edit"></iron-icon>
+    <span>Icon prefix</span>
+  </vaadin-button>
+
+  <vaadin-button theme="large">
+    <span>Icon suffix</span>
+    <iron-icon slot="suffix" icon="lumo:arrow-right"></iron-icon>
+  </vaadin-button>
+
+  <vaadin-button aria-label="Icon-only button" theme="icon">
+    <iron-icon slot="prefix" icon="lumo:plus"></iron-icon>
+  </vaadin-button>
+
+  <vaadin-button>
+    <iron-icon slot="prefix" icon="lumo:edit"></iron-icon>
+    <span>Icon prefix</span>
+  </vaadin-button>
+
+  <vaadin-button>
+    <span>Icon suffix</span>
+    <iron-icon slot="suffix" icon="lumo:arrow-right"></iron-icon>
+  </vaadin-button>
+
+  <vaadin-button aria-label="Icon-only button" theme="small icon">
+    <iron-icon slot="prefix" icon="lumo:plus"></iron-icon>
+  </vaadin-button>
+
+  <vaadin-button theme="small">
+    <iron-icon slot="prefix" icon="lumo:edit"></iron-icon>
+    <span>Icon prefix</span>
+  </vaadin-button>
+
+  <vaadin-button theme="small">
+    <span>Icon suffix</span>
+    <iron-icon slot="suffix" icon="lumo:arrow-right"></iron-icon>
+  </vaadin-button>
+</body>