Merge pull request #735 from OpenGeoscience/test-with-chrome

Use Chrome for tests.

.travis.yml

@@ -10,6 +10,7 @@ node_js:
 addons:
   # firefox: latest  # version 55.0 has an issue.
   firefox: 54.0.1
+  chrome: stable
   apt:
     packages:
       # I suspect that not all of these are necessary
@@ -26,6 +27,8 @@ addons:
       - libxxf86vm-dev
       - libxrandr-dev
 
+      - optipng
+
 cache:
   directories:
     - node_modules
@@ -39,6 +42,8 @@ before_install:
 
 before_script:
   - export DISPLAY=:99.0
+  # Report on available GL support
+  - glxinfo
 
 script:
   - npm run build
@@ -47,6 +52,12 @@ script:
   - ctest -S cmake/travis_build.cmake -VV || true
   - if [ -f _build/test_failed ] ; then false ; fi
 
+after_failure:
+  # Upload test results.  First make them smaller with optipng.
+  - pip install --user --upgrade girder-client requests[security]
+  - find _build/images -name '*-test.png' | xargs optipng
+  - find _build/images -name '*-test.png' | xargs python scripts/upload_test_images.py
+
 after_success:
   - npm run codecov
   - pip install --user GitPython boto3

CMakeLists.txt

@@ -6,8 +6,8 @@ include(CTest)
 enable_testing()
 
 set(BUILD_TESTING ON CACHE BOOL "Enable geojs testing")
-set(PHANTOMJS_TESTS ON CACHE BOOL "Generate phantomjs unit tests.")
-set(FFHEADLESS_TESTS ON CACHE BOOL "Generate headless Firefox unit tests (requires xvfb to be running).")
+set(HEADLESS_TESTS ON CACHE BOOL "Generate headless browser unit tests.")
+set(WEBGLHEADLESS_TESTS ON CACHE BOOL "Generate headless WebGL unit tests (requires xvfb to be running).")
 set(TEST_SAVE_IMAGE "none" CACHE STRING "Save headless test images even if there aren't errors.  Valid options are none, all, or the a comma-separated list of test names.")
 set(ESLINT_TESTS ON CACHE BOOL "Generate eslint style tests for JS source files.")
 
@@ -24,6 +24,11 @@ set(NOTES_PATH "${CMAKE_CURRENT_BINARY_DIR}/build_notes.json")
 # set the path where webpack builds the sources
 set(GEOJS_DEPLOY_DIR "${CMAKE_CURRENT_SOURCE_DIR}/dist")
 
+find_program(NPM_EXECUTABLE npm)
+if(NOT NPM_EXECUTABLE)
+  message(FATAL_ERROR "npm is required for many tests")
+endif()
+
 function(add_geojs_test test_name)
   add_test(
     NAME "${test_name}"
@@ -64,26 +69,25 @@ set_property(TEST "notes-report" APPEND PROPERTY DEPENDS "notes-reset")
 add_test(
   NAME "total-coverage"
   WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
-  COMMAND npm run combine-coverage
+  COMMAND "${NPM_EXECUTABLE}" run combine-coverage
 )
 set_property(TEST "notes-report" APPEND PROPERTY DEPENDS "notes-reset")
 
-if(PHANTOMJS_TESTS)
-  find_program(NPM_EXECUTABLE npm)
+if(HEADLESS_TESTS)
   add_test(
-    NAME "phantomjs"
+    NAME "headless"
     WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
-    COMMAND npm run ci
+    COMMAND "${NPM_EXECUTABLE}" run test
   )
-  set_property(TEST "phantomjs" APPEND PROPERTY ENVIRONMENT "CTEST_NOTES_PATH=${CMAKE_CURRENT_BINARY_DIR}/notes")
-  set_property(TEST "phantomjs" APPEND PROPERTY DEPENDS "notes-reset")
-  set_property(TEST "notes-report" APPEND PROPERTY DEPENDS "phantomjs")
-  set_property(TEST "total-coverage" APPEND PROPERTY DEPENDS "phantomjs")
+  set_property(TEST "headless" APPEND PROPERTY ENVIRONMENT "CTEST_NOTES_PATH=${CMAKE_CURRENT_BINARY_DIR}/notes")
+  set_property(TEST "headless" APPEND PROPERTY DEPENDS "notes-reset")
+  set_property(TEST "notes-report" APPEND PROPERTY DEPENDS "headless")
+  set_property(TEST "total-coverage" APPEND PROPERTY DEPENDS "headless")
 
   add_test(
     NAME "tutorials"
     WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
-    COMMAND npm run tutorialsci
+    COMMAND "${NPM_EXECUTABLE}" run tutorialsci
   )
   set_property(TEST "tutorials" APPEND PROPERTY DEPENDS "build_tutorials")
   set_property(TEST "total-coverage" APPEND PROPERTY DEPENDS "tutorials")
@@ -98,7 +102,7 @@ add_test(NAME get_data_files COMMAND "${CMAKE_COMMAND}" --build ${CMAKE_BINARY_D
 
 add_custom_command(OUTPUT "${GEOJS_DEPLOY_DIR}/examples/bundle.js"
   WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
-  COMMAND npm run build-examples
+  COMMAND "${NPM_EXECUTABLE}" run build-examples
   COMMENT "Build examples"
   VERBATIM
 )
@@ -108,32 +112,31 @@ set_property(TEST "build_examples" APPEND PROPERTY DEPENDS "get_data_files")
 
 add_custom_command(OUTPUT "${GEOJS_DEPLOY_DIR}/tutorials/bundle.js"
   WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
-  COMMAND npm run build-tutorials
+  COMMAND "${NPM_EXECUTABLE}" run build-tutorials
   COMMENT "Build tutorials"
   VERBATIM
 )
 add_custom_target(tutorials DEPENDS "${GEOJS_DEPLOY_DIR}/tutorials/bundle.js")
 add_test(NAME build_tutorials COMMAND "${CMAKE_COMMAND}" --build ${CMAKE_BINARY_DIR} --target tutorials)
 set_property(TEST "build_tutorials" APPEND PROPERTY DEPENDS "get_data_files")
 
-if(FFHEADLESS_TESTS)
-  find_program(NPM_EXECUTABLE npm)
+if(WEBGLHEADLESS_TESTS)
   add_test(
-    NAME "ffheadless"
+    NAME "webglheadless"
     WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
-    COMMAND npm run ffci
+    COMMAND "${NPM_EXECUTABLE}" run glci
   )
-  set_property(TEST "ffheadless" APPEND PROPERTY ENVIRONMENT "CTEST_IMAGE_PATH=${CMAKE_CURRENT_BINARY_DIR}/images")
-  set_property(TEST "ffheadless" APPEND PROPERTY ENVIRONMENT "TEST_SAVE_IMAGE=${TEST_SAVE_IMAGE}")
-  set_property(TEST "total-coverage" APPEND PROPERTY DEPENDS "ffheadless")
-  set_property(TEST "ffheadless" APPEND PROPERTY DEPENDS "get_data_files")
-  # We use some of the example images in the ffheadless tests
-  set_property(TEST "ffheadless" APPEND PROPERTY DEPENDS "build_examples")
+  set_property(TEST "webglheadless" APPEND PROPERTY ENVIRONMENT "CTEST_IMAGE_PATH=${CMAKE_CURRENT_BINARY_DIR}/images")
+  set_property(TEST "webglheadless" APPEND PROPERTY ENVIRONMENT "TEST_SAVE_IMAGE=${TEST_SAVE_IMAGE}")
+  set_property(TEST "total-coverage" APPEND PROPERTY DEPENDS "webglheadless")
+  set_property(TEST "webglheadless" APPEND PROPERTY DEPENDS "get_data_files")
+  # We use some of the example images in the webglheadless tests
+  set_property(TEST "webglheadless" APPEND PROPERTY DEPENDS "build_examples")
 
   add_test(
     NAME "examplesheadless"
     WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
-    COMMAND npm run examplesci
+    COMMAND "${NPM_EXECUTABLE}" run examplesci
   )
   set_property(TEST "examplesheadless" APPEND PROPERTY ENVIRONMENT "CTEST_IMAGE_PATH=${CMAKE_CURRENT_BINARY_DIR}/images")
   set_property(TEST "examplesheadless" APPEND PROPERTY ENVIRONMENT "TEST_SAVE_IMAGE=${TEST_SAVE_IMAGE}")
@@ -151,12 +154,15 @@ add_custom_command(OUTPUT "${CMAKE_CURRENT_BINARY_DIR}/base-images.tgz"
   WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
   # Make sure we have the data files.
   COMMAND "${CMAKE_COMMAND}" --build ${CMAKE_BINARY_DIR} --target data_files
-  # Run the ffheadless test, asking to save all images
-  COMMAND TEST_SAVE_IMAGE=all npm run ffci
+  # Run the webglheadless test, asking to save all images
+  COMMAND TEST_SAVE_IMAGE=all "${NPM_EXECUTABLE}" run glci
   # Build examples to make sure that they are available.
-  COMMAND npm run build-examples
+  COMMAND "${NPM_EXECUTABLE}" run build-examples
   # Run the examplesheadless test, asking to save all images
-  COMMAND TEST_SAVE_IMAGE=all npm run examplesci
+  COMMAND TEST_SAVE_IMAGE=all "${NPM_EXECUTABLE}" run examplesci
+  # If optipng is available, reduce the size of the images
+  # COMMAND bash -c "optipng '${CMAKE_CURRENT_BINARY_DIR}'/images/*.png || true"
+  COMMAND bash -c "find '${CMAKE_CURRENT_BINARY_DIR}'/images -name '*.png' -a -not -name '*-test.png' -a -not -name '*-diff.png' -a -not -name '*-base.png' -a -not -name '*-screen.png' -print0 | xargs -0 -n 1 -P 8 optipng || true"
   # Make a tarball of all of the images
   COMMAND tar -zcvf "${CMAKE_CURRENT_BINARY_DIR}/base-images.tgz" --exclude=*-test.png --exclude=*-diff.png --exclude=*-base.png --exclude=*-screen.png -C "${CMAKE_CURRENT_BINARY_DIR}/images" .
   COMMENT "Create baseline images, then tar them into a single file"
@@ -169,11 +175,6 @@ add_test(NAME baseline_images CONFIGURATIONS "baseline_images" COMMAND "${CMAKE_
 set_property(TEST "baseline_images" APPEND PROPERTY ENVIRONMENT "CTEST_IMAGE_PATH=${CMAKE_CURRENT_BINARY_DIR}/images")
 
 if(${ESLINT_TESTS})
-
-  find_program(NPM_EXECUTABLE npm)
-  if(NOT NPM_EXECUTABLE)
-    message(FATAL_ERROR "npm is required for style checks")
-  endif()
   add_test(
     NAME "eslint"
     WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"

examples/contour/main.js

@@ -1,7 +1,11 @@
+/* globals utils */
+
 // Run after the DOM loads
 $(function () {
   'use strict';
 
+  var query = utils.getQuery();
+
   // Define a function we will use to generate contours.
   function makeContour(data, layer) {
     /* There are two example data sets.  One has a position array which
@@ -10,7 +14,7 @@ $(function () {
     var contour = layer.createFeature('contour')
       .data(data.position || data.values)
       .style({
-        opacity: 0.75
+        opacity: query.opacity ? +query.opacity : 0.75
       })
       .contour({
         gridWidth: data.gridWidth,
@@ -48,6 +52,29 @@ $(function () {
         x0: data.x0, y0: data.y0, dx: data.dx, dy: data.dy
       });
     }
+    switch (query.range) {
+      case 'nonlinear':
+        contour
+        .contour({
+          rangeValues: [0, 25, 50, 75, 100, 125, 250, 500, 750, 2000]
+        });
+        break;
+      case 'iso':
+        contour
+        .contour({
+          rangeValues: [100, 100, 200, 200, 300, 300, 400, 400, 500, 500],
+          opacityRange: [1, 0, 1, 0, 1, 0, 1, 0, 1],
+          minOpacity: 0,
+          maxOpacity: 0
+        });
+        break;
+    }
+    if (query.stepped) {
+      contour
+      .contour({
+        stepped: query.stepped !== 'false'
+      });
+    }
     return contour;
   }
 
@@ -76,21 +103,23 @@ $(function () {
 
   // Load the data
   $.ajax({
-    url: '../../data/oahu.json',
+    url: query.url ? query.url : '../../data/oahu.json',
     success: function (data) {
       var contour = makeContour(data, contourLayer);
       contour.draw();
       /* After 10 second, load a denser data set */
-      window.setTimeout(function () {
-        $.ajax({
-          url: '../../data/oahu-dense.json',
-          success: function (data) {
-            contourLayer.deleteFeature(contour);
-            contour = makeContour(data, contourLayer, contour);
-            contour.draw();
-          }
-        });
-      }, 10000);
+      if (!query.url) {
+        window.setTimeout(function () {
+          $.ajax({
+            url: '../../data/oahu-dense.json',
+            success: function (data) {
+              contourLayer.deleteFeature(contour);
+              contour = makeContour(data, contourLayer, contour);
+              contour.draw();
+            }
+          });
+        }, 10000);
+      }
     }
   });
 });

karma-base.js

@@ -71,7 +71,7 @@ function getScreenImage(name, left, top, width, height) {
     '-crop ' + width + 'x' + height + (left >= 0 ? '+' : '') + left +
     (top >= 0 ? '+' : '') + top + ' +repage ' +
     '\'' + dest.replace(/'/g, "'\\''") + '\'');
-  var xvfbImage = new Buffer(fs.readFileSync(dest)).toString('base64');
+  var xvfbImage = Buffer.from(fs.readFileSync(dest)).toString('base64');
   xvfbImage = 'data:image/png;base64,' + xvfbImage;
   return xvfbImage;
 }
@@ -92,7 +92,7 @@ function compareImage(name, image, threshold, callback) {
   if (!fs.existsSync(src)) {
     src = path.resolve(image_path, name + '.png');
   }
-  var refImage = new Buffer(fs.readFileSync(src)).toString('base64');
+  var refImage = Buffer.from(fs.readFileSync(src)).toString('base64');
   refImage = 'data:image/png;base64,' + refImage;
   resemble(image)
     .compareTo(refImage)
@@ -173,7 +173,7 @@ var notes_middleware = function (config) {
         });
       } else if (request.method === 'GET') {
         var src = path.resolve(image_path, query.name + '.png');
-        var img = new Buffer(fs.readFileSync(src)).toString('base64');
+        var img = Buffer.from(fs.readFileSync(src)).toString('base64');
         img = 'data:image/png;base64,' + img;
         response.writeHead(200);
         return response.end(img);
@@ -193,7 +193,7 @@ var osmtiles_middleware = function (config) {
     /* Serve tiles if they have been proxied */
     if (match && request.method === 'GET') {
       var imagePath = 'dist/data/tiles/' + match[1];
-      var img = new Buffer(fs.readFileSync(imagePath));
+      var img = Buffer.from(fs.readFileSync(imagePath));
       response.setHeader('Content-Type', 'image/png');
       response.setHeader('Content-Length', img.length);
       response.setHeader('Access-Control-Allow-Origin', '*');
@@ -229,8 +229,40 @@ module.exports = function (config) {
       'PhantomJS'
     ],
     customLaunchers: {
-      FirefoxWithProxy: {
+      ChromeHeadlessTouch: {
+        base: 'ChromeHeadless',
+        flags: [
+          '--no-sandbox',  // necessary to run tests in a docker
+          '--no-pings',    // no auditing pings
+          '--touch-events'
+        ]
+      },
+      ChromeFull: {
+        base: 'Chrome',
+        flags: [
+          '--no-sandbox',  // necessary to run tests in a docker
+          '--no-pings',    // no auditing pings
+          '--device-scale-factor=1',
+          '--window-position=0,0',
+          '--start-fullscreen',
+          '--kiosk',
+          '--incognito'
+        ]
+      },
+      ChromeWithProxy: {
+        base: 'ChromeFull',
+        flags: [
+          '--proxy-pac-url=' + config.protocol + '//' + config.hostname + ':' + config.port + '/testdata/proxy-for-tests.pac'
+        ]
+      },
+      FirefoxTouch: {
         base: 'Firefox',
+        prefs: {
+          'dom.w3c_touch_events.enabled': 1
+        }
+      },
+      FirefoxWithProxy: {
+        base: 'FirefoxTouch',
         prefs: {
           'network.proxy.type': 2,
           'network.proxy.autoconfig_url': config.protocol + '//' + config.hostname + ':' + config.port + '/testdata/proxy-for-tests.pac'

package.json

@@ -55,7 +55,8 @@
     "jstransformer-markdown-it": "^2.0.0",
     "karma": "^0.13.22",
     "karma-coverage": "^1.0.0",
-    "karma-firefox-launcher": "^1.0.0",
+    "karma-chrome-launcher": "^2.2.0",
+    "karma-firefox-launcher": "^1.0.1",
     "karma-jasmine": "^1.0.2",
     "karma-jasmine-html-reporter": "^0.2.0",
     "karma-phantomjs-launcher": "^1.0.0",
@@ -65,7 +66,7 @@
     "kdbush": "^1.0.1",
     "mousetrap": "^1.6.0",
     "nib": "^1.1.2",
-    "node-resemble": "^1.1.3",
+    "node-resemble": "^2.0.1",
     "phantomjs-prebuilt": "^2.1.5",
     "proj4": "2.3.16",
     "pug": "2.0.0-rc.2",
@@ -89,14 +90,17 @@
     "build-tutorials": "webpack --config webpack-tutorials.config.js",
     "lint": "eslint --cache .",
     "puglint": "pug-lint src examples",
-    "test": "GEOJS_TEST_CASE=tests/test-unit.js karma start karma-cov.conf.js --single-run --browsers PhantomJS",
+    "test": "GEOJS_TEST_CASE=tests/test-unit.js karma start karma-cov.conf.js --single-run --browsers ChromeHeadlessTouch,FirefoxTouch,PhantomJS",
+    "test-all": "GEOJS_TEST_CASE=tests/test-unit.js karma start karma-cov.conf.js --single-run --browsers ChromeHeadlessTouch,FirefoxTouch,PhantomJS",
     "start": "karma start karma.conf.js",
-    "ci": "GEOJS_TEST_CASE=tests/test-unit.js karma start karma-cov.conf.js --single-run --browsers PhantomJS",
-    "ffci": "GEOJS_TEST_CASE=tests/test-gl.js karma start karma-cov.conf.js --single-run --browsers Firefox",
-    "examplesci": "GEOJS_TEST_CASE=tests/test-examples.js karma start karma-cov.conf.js --single-run --browsers FirefoxWithProxy",
-    "tutorialsci": "GEOJS_TEST_CASE=tests/tutorials.js karma start karma-cov.conf.js --single-run --browsers PhantomJS",
-    "test-webgl": "GEOJS_TEST_CASE=tests/test-gl.js xvfb-run -s '-ac -screen 0 1280x1024x24' karma start karma-cov.conf.js --single-run --browsers Firefox",
-    "test-examples": "GEOJS_TEST_CASE=tests/test-examples.js xvfb-run -s '-ac -screen 0 1280x1024x24' karma start karma-cov.conf.js --single-run --browsers FirefoxWithProxy",
+    "glci": "GEOJS_TEST_CASE=tests/test-gl.js karma start karma-cov.conf.js --single-run --browsers ChromeFull",
+    "glci-all": "GEOJS_TEST_CASE=tests/test-gl.js karma start karma-cov.conf.js --single-run --browsers ChromeFull,FirefoxTouch",
+    "examplesci": "GEOJS_TEST_CASE=tests/test-examples.js karma start karma-cov.conf.js --single-run --browsers ChromeWithProxy",
+    "examplesci-all": "GEOJS_TEST_CASE=tests/test-examples.js karma start karma-cov.conf.js --single-run --browsers ChromeWithProxy,FirefoxWithProxy",
+    "tutorialsci": "GEOJS_TEST_CASE=tests/tutorials.js karma start karma-cov.conf.js --single-run --browsers ChromeHeadlessTouch,PhantomJS",
+    "tutorialsci-all": "GEOJS_TEST_CASE=tests/tutorials.js karma start karma-cov.conf.js --single-run --browsers ChromeHeadlessTouch,FirefoxTouch,PhantomJS",
+    "test-webgl": "GEOJS_TEST_CASE=tests/test-gl.js xvfb-run -s '-ac -screen 0 1280x1024x24' karma start karma-cov.conf.js --single-run --browsers ChromeFull",
+    "test-examples": "GEOJS_TEST_CASE=tests/test-examples.js xvfb-run -s '-ac -screen 0 1280x1024x24' karma start karma-cov.conf.js --single-run --browsers ChromeWithProxy",
     "codecov": "codecov",
     "combine-coverage": "istanbul-combine -d dist/cobertura -r cobertura 'dist/coverage/json/**/coverage-final.json'",
     "examples": "webpack-dev-server --config webpack-examples.config.js --host ${HOST-127.0.0.1} --port ${PORT-8082} --content-base dist/",