Restore visual tests using gemini in SauceLabs

vaadin · Jun 3, 2019 · 32d84cb · 32d84cb
1 parent aa7585a
commit 32d84cb
Show file tree

Hide file tree

Showing 9 changed files with 1,490 additions and 305 deletions.
diff --git a/.gemini.yml b/.gemini.yml
@@ -0,0 +1,16 @@
+rootUrl: http://localhost:8080/test/visual/
+gridUrl: http://localhost:4444/wd/hub
+screenshotsDir: ./test/visual/screens
+
+system:
+  plugins:
+    esm:
+      port: 8080
+    sauce: true
+
+browsers:
+  chrome:
+    desiredCapabilities:
+      browserName: "chrome"
+      version: "66.0"
+      platform: "Windows 10"
diff --git a/.travis.yml b/.travis.yml
@@ -9,7 +9,7 @@ addons:
 
 script:
 - if [[ "$TRAVIS_EVENT_TYPE" != "pull_request" ]]; then
-    npm run test:sauce;
+    npm run test:sauce && npm run test:visual;
   else
     npm test;
   fi

diff --git a/package.json b/package.json
@@ -23,12 +23,14 @@
     "theme"
   ],
   "scripts": {
+    "gemini:update": "gemini update test/visual",
     "lint": "npm-run-all --parallel lint:*",
     "lint:css": "stylelint *.js src/*.js demo/*.js theme/**/*.js test/*.js",
     "lint:js": "eslint *.js src demo theme test",
     "lint:polymer": "polymer lint --rules polymer-3 --input ./src/*.js ./theme/**/*.js",
     "test": "karma start",
     "test:sauce": "cross-env TEST_PLATFORM=sauce karma start",
+    "test:visual": "gemini test test/visual",
     "prestart": "polymer analyze vaadin-* > analysis.json",
     "start": "polymer serve --npm --open",
     "preversion": "gulp version:update",
@@ -54,6 +56,9 @@
     "cross-env": "^5.2.0",
     "eslint": "^5.16.0",
     "eslint-config-vaadin": "^0.2.7",
+    "gemini": "^7.4.1",
+    "gemini-esm": "web-padawan/gemini-esm#master",
+    "gemini-sauce": "^1.0.2",
     "istanbul-instrumenter-loader": "^3.0.1",
     "karma": "^4.1.0",
     "karma-chrome-launcher": "^2.2.0",
@@ -67,7 +72,6 @@
     "karma-webpack": "^4.0.0-rc.6",
     "mocha": "^6.1.4",
     "npm-run-all": "^4.1.5",
-    "polymer-webpack-loader": "^2.0.3",
     "sinon": "^7.3.1",
     "sinon-chai": "^3.3.0",
     "stylelint": "^9.10.1",

diff --git a/test/.eslintrc.json b/test/.eslintrc.json
@@ -4,6 +4,7 @@
     "afterEach": false,
     "beforeEach": false,
     "it": false,
+    "gemini": false,
     "expect": false,
     "sinon": false,
     "MockInteractions": false

diff --git a/test/visual/default.html b/test/visual/default.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+  <meta charset="UTF-8">
+  <title></title>
+</head>
+
+<body>
+
+  <span id="default-tests">
+    <vaadin-element>
+      <button>Go Vaadin!</button>
+    </vaadin-element>
+  </span>
+
+  <script type="module">
+    const theme = location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
+    import('../../theme/' + theme + '/vaadin-element.js');
+  </script>
+</body>
+</html>
diff --git a/test/visual/screens/vaadin-element/default-tests-lumo/vaadin-element/chrome.png b/test/visual/screens/vaadin-element/default-tests-lumo/vaadin-element/chrome.png
diff --git a/.../visual/screens/vaadin-element/default-tests-material/vaadin-element/chrome.png b/.../visual/screens/vaadin-element/default-tests-material/vaadin-element/chrome.png
diff --git a/test/visual/test.js b/test/visual/test.js
@@ -0,0 +1,18 @@
+gemini.suite('vaadin-element', function(rootSuite) {
+  function wait(actions, find) {
+    return actions.wait(5000);
+  }
+
+  rootSuite
+    .before(wait);
+
+  ['lumo', 'material'].forEach(theme => {
+    gemini.suite(`default-tests-${theme}`, function(suite) {
+      suite
+        .setUrl(`default.html?theme=${theme}`)
+        .setCaptureElements('#default-tests')
+        .capture(`vaadin-element`);
+    });
+  });
+
+});