Add test-suite using SlimerJS

2015-04-02 12:11:03 +02:00
parent 28a13e3b26
commit 8e0c21eb58
13 changed files with 394 additions and 26 deletions
@@ -0,0 +1,24 @@
+# Rendering tests
+
+This directory contains rendering tests which compare a rendered map with a
+reference image using [resemble.js](http://huddle.github.io/Resemble.js/).
+
+Similar to the unit tests, there are two ways to run the tests: directly in the
+browser or using [SlimerJS](http://slimerjs.org/) from the command-line.
+
+To run the tests in the browser, make sure the development server is running
+(`./build.py serve`) and open the URL
+[http://localhost:3000/test_rendering/index.html](http://localhost:3000/test_rendering/index.html).
+
+From the command-line the tests can be run with the build target `./build.py test-rendering`.
+
+## Adding new tests
+When creating a new test case, a reference image has to be created. By appending `?generate`
+to the URL, a canvas with the rendered map will be shown on the page. Then the reference
+image can simply be created with a right-click and "Save image as".
+
+It is recommended to only run a single test case when generating the reference image.
+
+## Image difference
+When a test fails, an image showing the difference between the reference image and the
+rendered map can be displayed by appending `?showdiff` to the URL.
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>OL Rendering Test Runner</title>
+  <meta charset="utf-8">
+  <link rel="stylesheet" type="text/css" href="../node_modules/mocha/mocha.css">
+</head>
+
+<body>
+  <div id="mocha"></div>
+
+  <script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
+  <script type="text/javascript" src="../node_modules/expect.js/index.js"></script>
+  <script type="text/javascript" src="../node_modules/sinon/pkg/sinon.js"></script>
+  <script type="text/javascript" src="../node_modules/mocha/mocha.js"></script>
+  <script type="text/javascript" src="../node_modules/proj4/dist/proj4.js"></script>
+  <script type="text/javascript" src="../node_modules/resemblejs/resemble.js"></script>
+  <script type="text/javascript" src="../test/test-extensions.js"></script>
+  <script>
+    mocha.setup({
+      ui: 'bdd',
+      bail: false
+    });
+  </script>
+
+  <!-- This script is provided by the debug server (start with `build.py serve`) -->
+  <script type="text/javascript" src="loader.js"></script>
+
+  <script type="text/javascript">
+
+    /**
+     * The goog.dom.ViewportSizeMonitor (used in map.js) creates a global leak
+     * by setting goog.UID_PROPERTY_ on the monitored window.  In order to test
+     * that we don't have other global leaks, we preemptively set the property
+     * so Mocha can compare the global before and after our tests.
+     *
+     * In addition, calling goog.events.listen on the global object (as done
+     * in deviceorientation.js) creates a second leak by setting
+     * goog.events.LISTENER_MAP_PROP_ on the global object.
+     *
+     * We preemptively set both of these properties so Mocha can compare the
+     * global before and after tests.  The call to goog.events.listen also
+     * calls goog.getUid.
+     */
+    goog.events.listen(this, 'test', function() {});
+
+    var errors = [];
+    var runner = mocha.run(function(evt) {
+      if (window.callPhantom) {
+        window.callPhantom(errors);
+      }
+    });
+
+    window.showDiff = false;
+    if (window.location.search.indexOf('showdiff') >= 0) {
+      // show a difference image if '?showdiff' is in the URL
+      window.showDiff = true;
+    }
+
+    window.showMap = false;
+    if (window.location.search.indexOf('generate') >= 0) {
+      // show the canvas of the test map if '?generate' is in the URL
+      window.showMap = true;
+    }
+
+    if (window.console && console.log) {
+      // write stacks to the console for failed tests
+      runner.on('fail', function(test, err) {
+        if (test.duration > test._timeout) {
+          var titles = [];
+          for (var p = test; p; p = p.parent) {
+            if (p.title) {
+              titles.unshift(p.title);
+            }
+          }
+          console.log('Test timed out:', titles.join(' > '));
+        }
+        errors.push({
+          title: test.fullTitle(),
+          errorStack: test.err
+        });
+        console.log(test.fullTitle());
+        console.error(test.err.stack);
+      });
+    }
+  </script>
+  <!--
+    Tests should not depend on any specific markup and should instead create
+    whatever elements are needed (cleaning up when done).
+  -->
+  <div id="debug"></div>
+</body>
+</html>
@@ -0,0 +1,3 @@
+user_pref("webgl.force-enabled", true);
+user_pref("webgl.disabled", false);
+user_pref("webgl.msaa-force", true);
@@ -0,0 +1,3 @@
+{
+"created": 1427803527460
+}
@@ -0,0 +1,30 @@
+var url = phantom.args[0];
+var page = require("webpage").create();
+
+var v = slimer.geckoVersion;
+console.log('Gecko: ' + v.major + '.' + v.minor + '.' + v.patch);
+
+page.open(url).
+    then(function(status){
+        if (status == "success") {
+            page.onCallback = function(failedTests) {
+                if (failedTests.length > 0) {
+                    for (var i = 0; i < failedTests.length; i++) {
+                        var test = failedTests[i];
+                        console.log(test.title);
+                        console.error(test.errorStack);
+                        console.log('');
+                    }
+                    console.error(failedTests.length + ' test(s) failed.');
+                } else {
+                    console.log('All tests passed.');
+                }
+                page.close();
+                phantom.exit(failedTests.length === 0 ? 0 : 1);
+            }
+         } else {
+            console.error("The tests could not be started. Is the server running?");
+            page.close();
+            phantom.exit(1);
+         }
+    });