add a simple backstop test

.gitignore

@@ -1 +1,4 @@
 bower_components
+.idea
+backstop_data/bitmaps_test
+backstop_data/html_report

backstop.json

@@ -0,0 +1,42 @@
+{
+  "id": "d3-bubble",
+  "viewports": [
+    {
+      "label": "standard",
+      "width": 1024,
+      "height": 768
+    }
+  ],
+  "scenarios": [
+    {
+      "label": "Simple chart",
+      "url": "./test/visual/d3-bubble.html",
+      "selectors": ["d3-bubble"],
+      "delay": 100,
+      "selectorExpansion": true,
+      "misMatchThreshold" : 0.1,
+      "requireSameDimensions": true
+    }
+  ],
+  "paths": {
+    "bitmaps_reference": "backstop_data/bitmaps_reference",
+    "bitmaps_test": "backstop_data/bitmaps_test",
+    "engine_scripts": "backstop_data/engine_scripts",
+    "html_report": "backstop_data/html_report",
+    "ci_report": "backstop_data/ci_report"
+  },
+  "report": ["browser"],
+  "engine": "chrome",
+  "engineFlags": [
+    "--incognito",
+    "--disable-web-security",
+    "--user-data-dir",
+    "--disable-gpu",
+    "--force-device-scale-factor=1",
+    "--disable-infobars=true"
+  ],
+  "asyncCaptureLimit": 5,
+  "asyncCompareLimit": 50,
+  "debug": false,
+  "debugWindow": false
+}

backstop_data/engine_scripts/casper/clickAndHoverHelper.js

@@ -0,0 +1,25 @@
+var WAIT_TIMEOUT = 5000;
+
+module.exports = function(casper, scenario) {
+  var waitFor = require('./waitForHelperHelper')(casper, WAIT_TIMEOUT);
+  var hoverSelector = scenario.hoverSelector,
+      clickSelector = scenario.clickSelector,
+      postInteractionWait = scenario.postInteractionWait;
+
+  if (hoverSelector) {
+    waitFor(hoverSelector);
+    casper.then(function () {
+      casper.mouse.move(hoverSelector);
+    });
+  }
+
+  if (clickSelector) {
+    waitFor(clickSelector);
+    casper.then(function () {
+      casper.click(clickSelector);
+    });
+  }
+
+  // TODO: if postInteractionWait === integer then do ==> wait(postInteractionWait) || elsevvv
+  waitFor(postInteractionWait);
+};

backstop_data/engine_scripts/casper/loadCookies.js

@@ -0,0 +1,15 @@
+var fs = require('fs');
+
+module.exports = function (casper, scenario) {
+  var cookies = [];
+  var cookiePath = scenario.cookiePath;
+
+  // READ COOKIES FROM FILE IF EXISTS
+  if (fs.exists(cookiePath)) {
+    cookies = JSON.parse(fs.read(cookiePath));
+  }
+
+  casper.page.cookies = cookies;
+  console.log('Cookie state restored with cookies:', JSON.stringify(cookies, null, 2));
+  casper.userAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36');
+};

backstop_data/engine_scripts/casper/onBefore.js

@@ -0,0 +1,4 @@
+module.exports = function (casper, scenario, vp) {
+  require('./loadCookies')(casper, scenario);
+  casper.userAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36');
+};

backstop_data/engine_scripts/casper/onReady.js

@@ -0,0 +1,5 @@
+module.exports = function(casper, scenario, vp) {
+  console.log('SCENARIO> ' + scenario.label);
+  require('./clickAndHoverHelper')(casper, scenario);
+  // add more helpers here...
+};

backstop_data/engine_scripts/casper/waitForHelperHelper.js

@@ -0,0 +1,18 @@
+var TIMEOUT_DEFAULT = 2000;
+
+module.exports = function (casper, timeout) {
+  var TIMEOUT = timeout || TIMEOUT_DEFAULT;
+
+  return function waitFor (selector) {
+    if (selector) {
+      casper.waitForSelector(
+        selector,
+        function () {},
+        function () {
+          console.error('NOT FOUND > ' + selector);
+        },
+        TIMEOUT
+      );
+    }
+  };
+};

backstop_data/engine_scripts/chromy/clickAndHoverHelper.js

@@ -0,0 +1,24 @@
+module.exports = function (chromy, scenario) {
+  var hoverSelector = scenario.hoverSelector;
+  var clickSelector = scenario.clickSelector;
+  var postInteractionWait = scenario.postInteractionWait; // selector [str] | ms [int]
+
+  if (hoverSelector) {
+    chromy
+      .wait(hoverSelector)
+      .rect(hoverSelector)
+      .result(function (rect) {
+        chromy.mouseMoved(rect.left, rect.top);
+      });
+  }
+
+  if (clickSelector) {
+    chromy
+      .wait(clickSelector)
+      .click(clickSelector);
+  }
+
+  if (postInteractionWait) {
+    chromy.wait(postInteractionWait);
+  }
+};

backstop_data/engine_scripts/chromy/loadCookies.js

@@ -0,0 +1,22 @@
+var fs = require('fs');
+
+module.exports = function (chromy, scenario) {
+  var cookies = [];
+  var cookiePath = scenario.cookiePath;
+
+  // READ COOKIES FROM FILE IF EXISTS
+  if (fs.existsSync(cookiePath)) {
+    cookies = JSON.parse(fs.readFileSync(cookiePath));
+  }
+
+  // MUNGE COOKIE DOMAIN FOR CHROMY USAGE
+  cookies = cookies.map(cookie => {
+    cookie.url = 'https://' + cookie.domain;
+    delete cookie.domain;
+    return cookie;
+  });
+
+  // SET COOKIES VIA CHROMY
+  chromy.setCookie(cookies);
+  console.log('Cookie state restored with:', JSON.stringify(cookies, null, 2));
+};

backstop_data/engine_scripts/chromy/onBefore.js

@@ -0,0 +1,6 @@
+module.exports = function (chromy, scenario, vp) {
+  require('./loadCookies')(chromy, scenario);
+
+  // IGNORE ANY CERT WARNINGS
+  chromy.ignoreCertificateErrors();
+};

backstop_data/engine_scripts/chromy/onReady.js

@@ -0,0 +1,5 @@
+module.exports = function (chromy, scenario, vp) {
+  console.log('SCENARIO > ' + scenario.label);
+  require('./clickAndHoverHelper')(chromy, scenario);
+  // add more ready handlers here...
+};

backstop_data/engine_scripts/cookies.json

@@ -0,0 +1,14 @@
+[
+  {
+    "domain": ".www.yourdomain.com",
+    "path": "/",
+    "name": "yourCookieName",
+    "value": "yourCookieValue",
+    "expirationDate": 1798790400,
+    "hostOnly": false,
+    "httpOnly": false,
+    "secure": false,
+    "session": false,
+    "sameSite": "no_restriction"
+  }
+]

backstop_data/engine_scripts/onBefore.js

@@ -0,0 +1,4 @@
+module.exports = function (engine, scenario, vp) {
+  // This script runs before your app loads. Edit here to log-in, load cookies or set other states required for your test.
+  console.log('onBefore.js has run for ' + vp.label + '.');
+};

backstop_data/engine_scripts/onReady.js

@@ -0,0 +1,6 @@
+module.exports = function (engine, scenario, vp) {
+  engine.evaluate(function () {
+    // Your web-app is now loaded. Edit here to simulate user interacions or other state changes in the browser window context.
+  });
+  console.log('onReady.js has run for: ', vp.label);
+};

d3-bubble.html

@@ -14,22 +14,26 @@
 -->
 
 <dom-module id="d3-bubble">
-  <style>
-    .tooltip {
-      position: absolute;
-      padding: 0.5em 1em;
-      font-size: 0.8em;
-      background: black;
-      color: #fff;
-      border-radius: 0.5em;
-      pointer-events: none;
-      opacity: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  </style>
   <template>
+    <style>
+      :host {
+        display: block;
+      }
+
+      .tooltip {
+        position: absolute;
+        padding: 0.5em 1em;
+        font-size: 0.8em;
+        background: black;
+        color: #fff;
+        border-radius: 0.5em;
+        pointer-events: none;
+        opacity: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    </style>
     <svg></svg>
     <div class="tooltip"></div>
   </template>

test/visual/d3-bubble.html

@@ -0,0 +1,90 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport"
+        content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <title>d3-bubble</title>
+  <script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
+  <script src="../../bower_components/d3/d3.min.js"></script>
+  <link rel="import"
+        href="../../bower_components/polymer/polymer.html">
+  <link rel="import"
+        href="../../d3-bubble.html">
+</head>
+
+<body unresolved>
+
+<p>An example of <code>&lt;d3-bubble&gt;</code>:</p>
+
+<div class="small">
+  <d3-bubble height="200"
+             width="200">
+  </d3-bubble>
+</div>
+
+<div class="medium">
+  <d3-bubble height="400"
+             width="400">
+  </d3-bubble>
+</div>
+
+<div class="large">
+  <d3-bubble height="600"
+             width="600">
+  </d3-bubble>
+</div>
+
+<script>
+  let charts = document.querySelectorAll('d3-bubble');
+  charts.forEach(chart => {
+    chart.data = [{
+      key: 'A',
+      value: 44
+    }, {
+      key: 'B',
+      value: 60
+    }, {
+      key: 'C',
+      value: 40
+    }, {
+      key: 'D',
+      value: 64
+    }, {
+      key: 'E',
+      value: 56
+    }, {
+      key: 'F',
+      value: 42
+    }, {
+      key: 'G',
+      value: 36
+    }, {
+      key: 'H',
+      value: 74
+    }, {
+      key: 'I',
+      value: 68
+    }, {
+      key: 'J',
+      value: 51
+    }, {
+      key: 'K',
+      value: 36
+    }];
+  });
+</script>
+
+</body>
+
+</html>