Refs #4189, adding Overlay screenshot tests:

- Make 'idsite' parameter in certain Overlay URLs 'idSite'.
- Make sure Overlay sidebar has width so screenshot test framework can find position.
- Add overlay test site so Overlay can be loaded in phantomjs.
- Remove createSuperUser call from TrackerTest (done in Fixture setUp).
- Make sure piwik.js link is created for screenshot tests & make sure the test environment JSON file is loaded after the database is setup.
- Modify logic that waits for images to load in screenshot testing framework's page renderer to wait for CSS image URLs.

4 files changed, 47 insertions, 7 deletions

diff --git a/tests/lib/screenshot-testing/support/app.js b/tests/lib/screenshot-testing/support/app.js
index 73eade6892..da76557805 100644
--- a/tests/lib/screenshot-testing/support/app.js
+++ b/tests/lib/screenshot-testing/support/app.js
@@ -166,11 +166,13 @@ Application.prototype.setupDatabase = function () {
 Application.prototype.doRunTests = function () {
     var self = this;
 
+    testEnvironment.reload();
+
     // run tests
     this.runner = mocha.run(function () {
         // remove symlinks
         if (!options['keep-symlinks']) {
-            var symlinks = ['libs', 'plugins', 'tests'];
+            var symlinks = ['libs', 'plugins', 'tests', 'piwik.js'];
 
             symlinks.forEach(function (item) {
                 var file = path.join(uiTestsDir, '..', 'proxy', item);
diff --git a/tests/lib/screenshot-testing/support/page-renderer.js b/tests/lib/screenshot-testing/support/page-renderer.js
index 3c99751faf..7292205abc 100644
--- a/tests/lib/screenshot-testing/support/page-renderer.js
+++ b/tests/lib/screenshot-testing/support/page-renderer.js
@@ -9,6 +9,7 @@
 
 var VERBOSE = false;
 
+// TODO: should refactor, move all event queueing logic to PageAutomation class and add .frame method to change context
 var PageRenderer = function (baseUrl) {
     this.webpage = null;
 
@@ -16,6 +17,7 @@ var PageRenderer = function (baseUrl) {
     this.pageLogs = [];
     this.aborted = false;
     this.baseUrl = baseUrl;
+    this.currentFrame = null;
 
     this.defaultWaitTime = 1000;
     this._isLoading = false;
@@ -44,6 +46,10 @@ PageRenderer.prototype.wait = function (waitTime) {
     this.queuedEvents.push([this._wait, waitTime]);
 };
 
+PageRenderer.prototype.sendMouseEvent = function (type, pos, waitTime) {
+    this.queuedEvents.push([this._sendMouseEvent, waitTime, type, pos]);
+};
+
 PageRenderer.prototype.click = function () {
     var selector = arguments[0],
         waitTime = null,
@@ -94,6 +100,11 @@ PageRenderer.prototype._wait = function (callback) {
     callback();
 };
 
+PageRenderer.prototype._sendMouseEvent = function (type, pos, callback) {
+    this.webpage.sendEvent(type, pos.x, pos.y);
+    callback();
+};
+
 PageRenderer.prototype._click = function (selector, modifiers, callback) {
     var position = this._getPosition(selector);
 
@@ -257,13 +268,36 @@ PageRenderer.prototype._getImageLoadingCount = function () {
     return this.webpage.evaluate(function () {
         var count = 0;
 
-        // check <img> elements
-        var imgs = document.getElementsByTagName('img');
-        for (var i = 0; i != imgs.length; ++i) {
-            var element = imgs.item(i);
-            if (element.complete === false) {
+        var cssImageProperties = ['backgroundImage', 'listStyleImage', 'borderImage', 'borderCornerImage', 'cursor'],
+            matchUrl = /url\(\s*(['"]?)(.*?)\1\s*\)/g;
+
+        // check <img> elements and background URLs
+        var elements = document.getElementsByTagName('*');
+        for (var i = 0; i != elements.length; ++i) {
+            var element = elements.item(i);
+            if (element.tagName == 'img' // handle <img> elements
+                && element.complete === false
+            ) {
                 count = count + 1;
             }
+
+            for (var j = 0; j != cssImageProperties.length; ++j) { // handle CSS image URLs
+                var prop = $(element).css(cssImageProperties[j]);
+
+                if (!prop) {
+                    continue;
+                }
+
+                while (match = matchUrl.exec(prop)) {
+                    var src = match[2],
+                        img = new Image();
+                    img.src = src;
+
+                    if (img.complete === false) {
+                        count = count + 1;
+                    }
+                }
+            }
         }
 
         return count;
diff --git a/tests/lib/screenshot-testing/support/setupDatabase.php b/tests/lib/screenshot-testing/support/setupDatabase.php
index bbd7c979f2..db926e5163 100644
--- a/tests/lib/screenshot-testing/support/setupDatabase.php
+++ b/tests/lib/screenshot-testing/support/setupDatabase.php
@@ -28,7 +28,7 @@ $fixture->printToScreen = true;
 $fixture->performSetUp("");
 
 // make sure symbolic links exist (phantomjs doesn't support symlink-ing yet)
-foreach (array('libs', 'plugins', 'tests') as $linkName) {
+foreach (array('libs', 'plugins', 'tests', 'piwik.js') as $linkName) {
     $linkPath = PIWIK_INCLUDE_PATH . '/tests/PHPUnit/proxy/' . $linkName;
     if (!file_exists($linkPath)) {
         symlink(PIWIK_INCLUDE_PATH . '/' . $linkName, $linkPath);
diff --git a/tests/lib/screenshot-testing/support/test-environment.js b/tests/lib/screenshot-testing/support/test-environment.js
index 637bfed510..288dc0a886 100644
--- a/tests/lib/screenshot-testing/support/test-environment.js
+++ b/tests/lib/screenshot-testing/support/test-environment.js
@@ -11,6 +11,10 @@ var fs = require('fs'),
     testingEnvironmentOverridePath = path.join(PIWIK_INCLUDE_PATH, '/tmp/testingPathOverride.json');
 
 var TestingEnvironment = function () {
+    this.reload();
+};
+
+TestingEnvironment.prototype.reload = function () {
     if (fs.exists(testingEnvironmentOverridePath)) {
         var data = JSON.parse(fs.read(testingEnvironmentOverridePath));
         for (var key in data) {