87 lines
3.2 KiB
JavaScript
87 lines
3.2 KiB
JavaScript
/* eslint-env browser */
|
|
/* global tape:readonly, mapboxgl:readonly */
|
|
/* eslint-disable import/no-unresolved */
|
|
// fixtures.json is automatically generated before this file gets built
|
|
// refer testem.js#before_tests()
|
|
import fixtures from '../dist/fixtures.json';
|
|
import ignores from '../../ignores.json';
|
|
import {applyOperations} from './operation-handlers';
|
|
import {deepEqual, generateDiffLog} from './json-diff';
|
|
|
|
for (const testName in fixtures) {
|
|
if (testName in ignores) {
|
|
tape.skip(testName, testFunc);
|
|
} else {
|
|
tape(testName, {timeout: 20000}, testFunc);
|
|
}
|
|
}
|
|
|
|
function testFunc(t) {
|
|
// This needs to be read from the `t` object because this function runs async in a closure.
|
|
const currentTestName = t.name;
|
|
const style = fixtures[currentTestName].style;
|
|
const expected = fixtures[currentTestName].expected;
|
|
const options = style.metadata.test;
|
|
const skipLayerDelete = style.metadata.skipLayerDelete;
|
|
|
|
window.devicePixelRatio = options.pixelRatio;
|
|
|
|
//1. Create and position the container, floating at the bottom right
|
|
const container = document.createElement('div');
|
|
container.style.position = 'fixed';
|
|
container.style.bottom = '10px';
|
|
container.style.right = '10px';
|
|
container.style.width = `${options.width}px`;
|
|
container.style.height = `${options.height}px`;
|
|
document.body.appendChild(container);
|
|
|
|
//2. Initialize the Map
|
|
const map = new mapboxgl.Map({
|
|
container,
|
|
style,
|
|
classes: options.classes,
|
|
interactive: false,
|
|
attributionControl: false,
|
|
preserveDrawingBuffer: true,
|
|
axonometric: options.axonometric || false,
|
|
skew: options.skew || [0, 0],
|
|
fadeDuration: options.fadeDuration || 0,
|
|
localIdeographFontFamily: options.localIdeographFontFamily || false,
|
|
crossSourceCollisions: typeof options.crossSourceCollisions === "undefined" ? true : options.crossSourceCollisions
|
|
});
|
|
map.repaint = true;
|
|
map.once('load', () => {
|
|
//3. Run the operations on the map
|
|
applyOperations(map, options.operations, () => {
|
|
|
|
//4. Perform query operation and compare results from expected values
|
|
const results = options.queryGeometry ?
|
|
map.queryRenderedFeatures(options.queryGeometry, options.queryOptions || {}) :
|
|
[];
|
|
|
|
const actual = results.map((feature) => {
|
|
const featureJson = JSON.parse(JSON.stringify(feature.toJSON()));
|
|
if (!skipLayerDelete) delete featureJson.layer;
|
|
return featureJson;
|
|
});
|
|
|
|
const testMetaData = {
|
|
name: t.name,
|
|
actual: map.getCanvas().toDataURL()
|
|
};
|
|
const success = deepEqual(actual, expected);
|
|
if (success) {
|
|
t.pass(JSON.stringify(testMetaData));
|
|
} else {
|
|
testMetaData['difference'] = generateDiffLog(expected, actual);
|
|
t.fail(JSON.stringify(testMetaData));
|
|
}
|
|
//Cleanup WebGL context
|
|
map.remove();
|
|
delete map.painter.context.gl;
|
|
document.body.removeChild(container);
|
|
t.end();
|
|
});
|
|
});
|
|
}
|