Running query tests in browser

.circleci/config.yml

@@ -89,7 +89,7 @@ workflows:
 
 defaults: &defaults
   docker:
-    - image: mbgl/80dbb7f452:linux
+    - image: circleci/node:10.16-browsers
   working_directory: ~/mapbox-gl-js
 
 jobs:
@@ -99,10 +99,10 @@ jobs:
       - checkout
       - restore_cache:
           keys:
-            - v2-yarn-{{ checksum "yarn.lock" }}
-      - run: yarn
+            - v3-yarn-{{ checksum "yarn.lock" }}
+      - run: sudo npm install -g yarn & yarn install
       - save_cache:
-          key: v2-yarn-{{ checksum "yarn.lock" }}
+          key: v3-yarn-{{ checksum "yarn.lock" }}
           paths:
             - '~/.yarn'
             - 'node_modules'
@@ -118,13 +118,13 @@ jobs:
           at: .
       - restore_cache:
           keys:
-            - v1-lint-{{ .Branch }}
-            - v1-lint
+            - v2-lint-{{ .Branch }}
+            - v2-lint
       - run: yarn run lint
       - run: yarn run lint-docs
       - run: yarn run lint-css
       - save_cache:
-          key: v1-lint-{{ .Branch }}-{{ .Revision }}
+          key: v2-lint-{{ .Branch }}-{{ .Revision }}
           paths:
             - '.eslintcache'
 
@@ -163,14 +163,14 @@ jobs:
     steps:
       - attach_workspace:
           at: .
-      - run: xvfb-run --server-args="-screen 0 1024x768x24" npm run test-unit
+      - run: yarn run test-unit
 
   test-render:
     <<: *defaults
     steps:
       - attach_workspace:
           at: .
-      - run: xvfb-run --server-args="-screen 0 1024x768x24" npm run test-render
+      - run: yarn run test-render
       - store_artifacts:
           path: "test/integration/render-tests/index.html"
 
@@ -179,9 +179,9 @@ jobs:
     steps:
       - attach_workspace:
           at: .
-      - run: xvfb-run --server-args="-screen 0 1024x768x24" npm run test-query
-      - store_artifacts:
-          path: "test/integration/query-tests/index.html"
+      - run: yarn run test-query-browser-ci
+      - store_test_results:
+          path: test/integration/query-tests
 
   test-expressions:
     <<: *defaults

.gitignore

@@ -17,6 +17,9 @@ test/integration/**/index*.html
 test/integration/**/actual.png
 test/integration/**/actual.json
 test/integration/**/diff.png
+test/integration/**/test-results.xml
+test/integration/dist/**/*.js
+test/integration/dist/**/*.json
 .eslintcache
 src/style-spec/dist/index.js
 _batfish_site

build/rollup_plugins.js

@@ -12,24 +12,26 @@ import { createFilter } from 'rollup-pluginutils';
 // Common set of plugins/transformations shared across different rollup
 // builds (main mapboxgl bundle, style-spec package, benchmarks bundle)
 
-export const plugins = (minified, production) => [
-    flow(),
-    minifyStyleSpec(),
-    json(),
-    glsl('./src/shaders/*.glsl', production),
-    buble({transforms: {dangerousForOf: true}, objectAssign: "Object.assign"}),
-    minified ? terser() : false,
-    production ? unassert() : false,
-    resolve({
-        browser: true,
-        preferBuiltins: false
-    }),
-    commonjs({
-        // global keyword handling causes Webpack compatibility issues, so we disabled it:
-        // https://github.com/mapbox/mapbox-gl-js/pull/6956
-        ignoreGlobal: true
-    })
-].filter(Boolean);
+export const plugins = (minified, production) => {
+    return [
+        flow(),
+        minifyStyleSpec(),
+        json(),
+        glsl('./src/shaders/*.glsl', production),
+        buble({transforms: {dangerousForOf: true}, objectAssign: "Object.assign"}),
+        minified ? terser() : false,
+        production ? unassert() : false,
+        resolve({
+            browser: true,
+            preferBuiltins: false
+        }),
+        commonjs({
+            // global keyword handling causes Webpack compatibility issues, so we disabled it:
+            // https://github.com/mapbox/mapbox-gl-js/pull/6956
+            ignoreGlobal: true
+        })
+    ].filter(Boolean);
+}
 
 // Using this instead of rollup-plugin-flow due to
 // https://github.com/leebyron/rollup-plugin-flow/issues/5

build/test/build-tape.js

@@ -0,0 +1,10 @@
+const browserify = require('browserify');
+const fs = require('fs');
+
+
+const b = browserify(require.resolve('../../test/util/tape_config.js'), { standalone: 'tape' })
+    .bundle((err, buff) => {
+        if(err) { throw err; }
+
+        fs.writeFileSync('test/integration/dist/tape.js', buff, { encoding: 'utf8'});
+    });

flow-typed/environment.js

@@ -0,0 +1,2 @@
+// @flow strict
+declare var GL_JS_ENV: 'production' | 'development' |'test';

package.json

@@ -52,8 +52,9 @@
     "@octokit/rest": "^15.15.1",
     "babel-eslint": "^10.0.1",
     "benchmark": "^2.1.4",
-    "browserify": "^16.2.3",
+    "browserify": "^16.3.0",
     "d3": "^4.12.0",
+    "diff": "^4.0.1",
     "documentation": "~9.1.1",
     "ejs": "^2.5.7",
     "eslint": "^5.15.3",
@@ -104,7 +105,10 @@
     "st": "^1.2.2",
     "stylelint": "^9.10.1",
     "stylelint-config-standard": "^18.2.0",
-    "tap": "~12.4.1"
+    "tap": "~12.4.1",
+    "tape": "^4.11.0",
+    "tape-filter": "^1.0.4",
+    "testem": "^2.17.0"
   },
   "browser": {
     "./src/shaders/index.js": "./src/shaders/shaders.js",
@@ -118,6 +122,9 @@
     "build-prod": "rollup -c --environment BUILD:production",
     "build-prod-min": "rollup -c --environment BUILD:production,MINIFY:true",
     "build-csp": "rollup -c rollup.config.csp.js",
+    "build-query-suite": "rollup -c rollup.config.test.js",
+    "build-test": "rollup -c --environment BUILD:test",
+    "build-tape": "node build/test/build-tape.js",
     "build-flow-types": "cp build/mapbox-gl.js.flow dist/mapbox-gl.js.flow && cp build/mapbox-gl.js.flow dist/mapbox-gl-dev.js.flow",
     "build-css": "postcss -o dist/mapbox-gl.css src/css/mapbox-gl.css",
     "build-style-spec": "cd src/style-spec && npm run build && cd ../.. && mkdir -p dist/style-spec && cp src/style-spec/dist/* dist/style-spec",
@@ -145,6 +152,7 @@
     "test-build": "build/run-tap --no-coverage test/build/**/*.test.js",
     "test-render": "node --max-old-space-size=2048 test/render.test.js",
     "test-query": "node test/query.test.js",
+    "test-query-browser-ci": "testem ci -R xunit > test/integration/query-tests/test-results.xml",
     "test-expressions": "build/run-node test/expression.test.js",
     "test-flow": "build/run-node build/generate-flow-typed-style-spec && flow .",
     "test-cov": "nyc --require=@mapbox/flow-remove-types/register --reporter=text-summary --reporter=lcov --cache run-s test-unit test-expressions test-query test-render",

rollup.config.js

@@ -6,9 +6,23 @@ import banner from './build/banner';
 const {BUILD, MINIFY} = process.env;
 const minified = MINIFY === 'true';
 const production = BUILD === 'production';
-const outputFile =
-    !production ? 'dist/mapbox-gl-dev.js' :
-    minified ? 'dist/mapbox-gl.js' : 'dist/mapbox-gl-unminified.js';
+const test = BUILD === 'test';
+
+const outputFile = (function() {
+    if(production) {
+        if (minified){
+            return 'dist/mapbox-gl.js';
+        }else{
+            return 'dist/mapbox-gl-unminified.js';
+        }
+    }
+
+    if(test) {
+        return 'test/integration/dist/mapbox-gl-test.js';
+    }
+
+    return 'dist/mapbox-gl-dev.js';
+})();
 
 export default [{
     // First, use code splitting to bundle GL JS into three "chunks":

rollup.config.test.js

@@ -0,0 +1,15 @@
+import {plugins} from './build/rollup_plugins';
+
+
+export default {
+    input: 'test/integration/lib/query-browser.js',
+    output: {
+        name: 'queryTests',
+        format: 'iife',
+        sourcemap: 'inline',
+        indent: false,
+        file: 'test/integration/dist/query-test.js'
+    },
+    plugins: plugins(false, false),
+    external: [ 'test', 'mapboxgl' ]
+}

test/integration/lib/generate-fixture-json.js

@@ -0,0 +1,98 @@
+/* eslint-disable import/no-commonjs */
+const path = require('path');
+const fs = require('fs');
+const glob = require('glob');
+const localizeURLs = require('./localize-urls');
+
+const OUTPUT_FILE = 'fixtures.json';
+
+/**
+ * Analyzes the contents of the specified `directory` ,and inlines
+ * the contents into a single json file which can then be imported and built into a bundle
+ * to be shipped to the browser.
+ *
+ * @param {string} directory
+ */
+module.exports = function (directory) {
+    const basePath = directory;
+    const jsonPaths = path.join(basePath, '/**/*.json');
+    const imagePaths = path.join(basePath, '/**/*.png');
+    //Extract the filedata into a flat dictionary
+    const allFiles = {};
+    const allPaths = glob.sync(jsonPaths).concat(glob.sync(imagePaths));
+
+    //A Set that stores test names that are malformed so they can be removed later
+    const malformedTests = {};
+
+    for (const fixturePath of allPaths) {
+        const testName = path.dirname(fixturePath);
+        const fileName = path.basename(fixturePath);
+        const extension = path.extname(fixturePath);
+        try {
+            if (extension === '.json') {
+                let json = parseJsonFromFile(fixturePath);
+
+                //Special case for style json which needs some preprocessing
+                if (fileName === 'style.json') {
+                    json = processStyle(testName, json);
+                }
+
+                allFiles[fixturePath] = json;
+            } else if (extension === '.png') {
+                allFiles[fixturePath] = pngToBase64Str(fixturePath);
+            } else {
+                throw new Error(`${extension} is incompatible , file path ${fixturePath}`);
+            }
+        } catch (e) {
+            console.log(`Error parsing file: ${fixturePath}`);
+            malformedTests[testName] = true;
+        }
+    }
+
+    // Re-nest by directory path, each directory path defines a testcase.
+    const result = {};
+    for (const fullPath in allFiles) {
+        const testName = path.dirname(fullPath).replace('test/integration/', '');
+        //Skip if test is malformed
+        if (malformedTests[testName]) { continue; }
+
+        //Lazily initaialize an object to store each file wihin a particular testName
+        if (result[testName] == null) {
+            result[testName] = {};
+        }
+        //Trim extension from filename
+        const fileName = path.basename(fullPath, path.extname(fullPath));
+        result[testName][fileName] = allFiles[fullPath];
+    }
+
+    const outputStr = JSON.stringify(result, null, 4);
+    const outputPath = path.join('test/integration/dist', OUTPUT_FILE);
+
+    fs.writeFileSync(outputPath, outputStr, { encoding: 'utf8'});
+};
+
+function parseJsonFromFile(filePath) {
+    return JSON.parse(fs.readFileSync(filePath, { encoding: 'utf8' }));
+}
+
+function pngToBase64Str(filePath) {
+    return fs.readFileSync(filePath).toString('base64');
+}
+
+function processStyle(testName, style) {
+    const clone = JSON.parse(JSON.stringify(style));
+    // 7357 is testem's default port
+    localizeURLs(clone, 7357);
+
+    clone.metadata = clone.metadata || {};
+    clone.metadata.test = Object.assign({
+        testName,
+        width: 512,
+        height: 512,
+        pixelRatio: 1,
+        recycleMap: false,
+        allowed: 0.00015
+    }, clone.metadata.test);
+
+    return clone;
+}

test/integration/lib/json-diff.js

@@ -0,0 +1,37 @@
+import diff from 'diff';
+
+export function generateDiffLog(expected, actual) {
+    return diff.diffJson(expected, actual).map((hunk) => {
+        if (hunk.added) {
+            return `+ ${hunk.value}`;
+        } else if (hunk.removed) {
+            return `- ${hunk.value}`;
+        } else {
+            return `  ${hunk.value}`;
+        }
+    }).join('');
+}
+
+export function deepEqual(a, b) {
+    if (typeof a !== typeof b)
+        return false;
+    if (typeof a === 'number')
+        return Math.abs(a - b) < 1e-10;
+    if (a === null || typeof a !== 'object')
+        return a === b;
+
+    const ka = Object.keys(a);
+    const kb = Object.keys(b);
+
+    if (ka.length !== kb.length)
+        return false;
+
+    ka.sort();
+    kb.sort();
+
+    for (let i = 0; i < ka.length; i++)
+        if (ka[i] !== kb[i] || !deepEqual(a[ka[i]], b[ka[i]]))
+            return false;
+
+    return true;
+}