Upgrade render test (#1009)

.eslintrc.js

@@ -3,12 +3,12 @@ module.exports = {
   parser: 'babel-eslint',
   plugins: ['flowtype', 'react'],
   extends: ['uber-jsx', 'uber-es2015', 'prettier', 'prettier/react', 'prettier/flowtype', 'plugin:import/errors', 'plugin:flowtype/recommended'],
-  overrides: {
+  overrides: [{
     files: ['*.spec.js', 'webpack.config.js', '**/bundle/*.js'],
     rules: {
       'import/no-extraneous-dependencies': 0
     }
-  },
+  }],
   settings: {
     'import/core-modules': [
       'math.gl',

package.json

@@ -58,8 +58,8 @@
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.0.0",
-    "@probe.gl/bench": "^3.1.1",
-    "@probe.gl/test-utils": "^3.1.1",
+    "@probe.gl/bench": "^3.2.1",
+    "@probe.gl/test-utils": "^3.2.1",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.0",
     "coveralls": "^3.0.0",
@@ -70,7 +70,7 @@
     "flow-bin": "^0.98.1",
     "immutable": "^3.8.2",
     "jsdom": "^15.0.0",
-    "ocular-dev-tools": "0.0.29",
+    "ocular-dev-tools": "^0.1.0",
     "pre-commit": "^1.2.2",
     "react": "^16.3.0",
     "react-dom": "^16.3.0",

test/render/index.js

@@ -1,5 +1,5 @@
 /* global window, document */
-import test from 'tape-catch';
+import test from 'tape-promise/tape';
 import React from 'react';
 import MapGL from 'react-map-gl';
 import {render, unmountComponentAtNode} from 'react-dom';
@@ -19,13 +19,7 @@ function getBoundingBoxInPage(domElement) {
   };
 }
 
-function sleep(delay) {
-  return new Promise(resolve => {
-    window.setTimeout(resolve, delay);
-  });
-}
-
-function runTestCase({Component = MapGL, threshold = 0.99, props, goldenImage}) {
+async function runTestCase({Component = MapGL, props}) {
   const container = document.createElement('div');
   container.style.width = `${WIDTH}px`;
   container.style.height = `${HEIGHT}px`;
@@ -34,37 +28,24 @@ function runTestCase({Component = MapGL, threshold = 0.99, props, goldenImage})
   document.body.append(container);
 
   return new Promise((resolve, reject) => {
-    const onLoad = () => {
+    const unmount = () => {
+      unmountComponentAtNode(container);
+      container.remove();
+    };
+    const onLoad = ({target}) => {
       // Wait for mapbox's animation to finish
-      sleep(500)
-        .then(() =>
-          window.browserTestDriver_captureAndDiffScreen({
-            threshold,
-            goldenImage,
-            region: getBoundingBoxInPage(container),
-            tolerance: 0.05
-            // Uncomment to save screenshot
-            // , saveOnFail: true
-          })
-        )
-        .then(result => {
-          // clean up
-          unmountComponentAtNode(container);
-          container.remove();
-
-          if (result.error) {
-            reject(result.error);
-          } else {
-            resolve(result);
-          }
-        });
+      target.once('idle', () =>
+        resolve({
+          map: target,
+          boundingBox: getBoundingBoxInPage(container),
+          unmount
+        })
+      );
     };
 
     const onError = evt => {
       // clean up
-      unmountComponentAtNode(container);
-      container.remove();
-
+      unmount();
       reject(evt.error);
     };
 
@@ -75,35 +56,43 @@ function runTestCase({Component = MapGL, threshold = 0.99, props, goldenImage})
   });
 }
 
-test('Render test', t => {
+test('Render test', async t => {
   // Default tape test timeout is 500ms - allow enough time for render and screenshot
   t.timeoutAfter(TEST_CASES.length * 4000);
 
-  let testCaseIndex = 0;
-
-  function nextTestCase() {
-    const testCase = TEST_CASES[testCaseIndex];
-    if (!testCase) {
-      t.end();
-      return;
-    }
+  for (const testCase of TEST_CASES) {
     t.comment(testCase.title);
-    runTestCase(testCase)
-      .then(result => {
-        t.ok(result.success, `Render test matched ${result.matchPercentage}`);
-      })
-      .catch(error => {
-        if (testCase.mapError) {
-          t.ok(testCase.mapError.test(error.message), 'Map should throw error');
-        } else {
-          t.fail(error.message);
-        }
-      })
-      .finally(() => {
-        testCaseIndex++;
-        nextTestCase();
+
+    const {threshold = 0.99, goldenImage} = testCase;
+    let result;
+    let error;
+
+    try {
+      const {boundingBox, unmount} = await runTestCase(testCase);
+
+      result = await window.browserTestDriver_captureAndDiffScreen({
+        threshold,
+        goldenImage,
+        region: boundingBox,
+        tolerance: 0.05
+        // Uncomment to save screenshot
+        // , saveOnFail: true
       });
+
+      error = result.error;
+      unmount();
+    } catch (err) {
+      error = err;
+    }
+
+    if (testCase.mapError) {
+      t.ok(error && testCase.mapError.test(error.message), 'Map should throw error');
+    } else if (error) {
+      t.fail(error.message);
+    } else {
+      t.ok(result && result.success, `Render test matched ${result.matchPercentage}`);
+    }
   }
 
-  nextTestCase();
+  t.end();
 });