ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #7138 from ahocevar/pixelmatch-pixelratio

Browse Source 
Improvements to the new test setup
This commit is contained in:
Andreas Hocevar
2017-08-17 08:56:07 -04:00
committed by GitHub
parent 42680307cc 55be9b8d3c
commit 9b92fa1957
17 changed files with 99 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -75,8 +75,8 @@
"mocha-phantomjs-core": "^2.1.0",
"mustache": "2.3.0",
"phantomjs-prebuilt": "2.1.15",
"pixelmatch": "^4.0.2",
"proj4": "2.4.4",
"resemblejs": "2.2.4",
"serve-files": "1.0.1",
"sinon": "3.2.0",
"slimerjs": "0.10.3"

2
test/.eslintrc
View File

@@ -14,7 +14,7 @@
"expect": false,
"expectResemble": false,
"proj4": false,
"resemble": false,
"pixelmatch": false,
"resembleCanvas": false,
"sinon": false,
"where": false

2
test/README.md
View File

@@ -29,7 +29,7 @@ in Chrome by default).
# Rendering tests
The `test/rendering` directory contains rendering tests which compare a rendered map with a
reference image using [resemble.js](http://huddle.github.io/Resemble.js/).
reference image using [pixelmatch](https://github.com/mapbox/pixelmatch).
To run the tests in the browser, make sure the development server is running
(`make serve`) and open the URL

5
test/karma.config.js
View File

@@ -19,6 +19,9 @@ module.exports = function(karma) {
},
files: [
{
pattern: 'module-global.js',
watched: false
}, {
pattern: path.resolve(__dirname, require.resolve('jquery/dist/jquery.js')),
watched: false
}, {
@@ -31,7 +34,7 @@ module.exports = function(karma) {
pattern: path.resolve(__dirname, require.resolve('proj4/dist/proj4.js')),
watched: false
}, {
pattern: path.resolve(__dirname, require.resolve('resemblejs/resemble.js')),
pattern: path.resolve(__dirname, require.resolve('pixelmatch/index.js')),
watched: false
}, {
pattern: path.resolve(__dirname, './test-extensions.js')

1
test/module-global.js Normal file
View File

@@ -0,0 +1 @@
window.module = {};

1
test/rendering/ol/layer/clip.test.js
View File

@@ -41,6 +41,7 @@ describe('layer clipping', function() {
var map = null;
beforeEach(function() {
map = new ol.Map({
pixelRatio: 1,
target: createMapDiv(256, 256),
view: new ol.View({
center: [0, 0],

1
test/rendering/ol/layer/image.test.js
View File

@@ -15,6 +15,7 @@ describe('ol.rendering.layer.Image', function() {
function createMap(renderer) {
map = new ol.Map({
pixelRatio: 1,
target: createMapDiv(50, 50),
renderer: renderer,
view: new ol.View({

15
test/rendering/ol/layer/vector.test.js
View File

@@ -21,6 +21,7 @@ describe('ol.rendering.layer.Vector', function() {
var map;
function createMap(renderer) {
map = new ol.Map({
pixelRatio: 1,
target: createMapDiv(80, 80),
renderer: renderer,
view: new ol.View({
@@ -249,12 +250,12 @@ describe('ol.rendering.layer.Vector', function() {
map.once('postrender', function() {
var canvas = map.getRenderer().canvas_;
// take a snapshot of this `overlaps: true` image
var referenceImage = canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height);
var referenceImage = canvas.toDataURL('image/png');
// now render the same with `overlaps: false`
layer.setSource(createSource(false));
// result should be similar to `overlaps: true`
map.once('postrender', function() {
expectResemble(map, referenceImage, 2, done);
// result should be the same as with `overlaps: true`
map.once('postrender', function(e) {
expectResemble(map, referenceImage, 1e-9, done);
});
});
});
@@ -300,12 +301,12 @@ describe('ol.rendering.layer.Vector', function() {
map.once('postrender', function() {
var canvas = map.getRenderer().canvas_;
// take a snapshot of this `overlaps: true` image
var referenceImage = canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height);
var referenceImage = canvas.toDataURL('image/png');
// now render the same with `overlaps: false`
layer.setSource(createSource(false));
// result should be exactly the same as with `overlaps: true`
map.once('postrender', function() {
expectResemble(map, referenceImage, 0, done);
expectResemble(map, referenceImage, 1e-9, done);
});
});
});
@@ -316,6 +317,7 @@ describe('ol.rendering.layer.Vector', function() {
var map2;
beforeEach(function() {
map2 = new ol.Map({
pixelRatio: 1,
target: createMapDiv(128, 128),
view: new ol.View({
center: [0, 0],
@@ -404,6 +406,7 @@ describe('ol.rendering.layer.Vector', function() {
});
map3 = new ol.Map({
pixelRatio: 1,
layers: [layer],
target: createMapDiv(100, 100),
view: view

2
test/rendering/ol/layer/vectortile.test.js
View File

@@ -15,7 +15,7 @@ describe('ol.rendering.layer.VectorTile', function() {
function createMap(renderer, opt_pixelRatio) {
map = new ol.Map({
pixelRatio: opt_pixelRatio,
pixelRatio: opt_pixelRatio || 1,
target: createMapDiv(50, 50),
renderer: renderer,
view: new ol.View({

1
test/rendering/ol/map.test.js
View File

@@ -21,6 +21,7 @@ describe('ol.rendering.Map', function() {
});
map = new ol.Map({
pixelRatio: 1,
target: createMapDiv(50, 50),
renderer: renderer,
layers: [vectorLayer],

40
test/rendering/ol/render.test.js
View File

@@ -20,14 +20,20 @@ describe('ol.render', function() {
describe('ol.render.toContext()', function() {
it('creates a vector context from a Canvas 2d context', function() {
var vectorContext = ol.render.toContext(getContext(), {size: [100, 100]});
var vectorContext = ol.render.toContext(getContext(), {
pixelRatio: 1,
size: [100, 100]
});
expect(vectorContext).to.be.a(ol.render.VectorContext);
expect(vectorContext).to.be.a(ol.render.canvas.Immediate);
});
it('can be used to render a point geometry', function(done) {
var context = getContext();
var vectorContext = ol.render.toContext(context, {size: [100, 100]});
var vectorContext = ol.render.toContext(context, {
pixelRatio: 1,
size: [100, 100]
});
var style = new ol.style.Style({
image: new ol.style.Circle({
@@ -48,7 +54,10 @@ describe('ol.render', function() {
it('can be used to render a linestring geometry', function(done) {
var context = getContext();
var vectorContext = ol.render.toContext(context, {size: [100, 100]});
var vectorContext = ol.render.toContext(context, {
pixelRatio: 1,
size: [100, 100]
});
var style = new ol.style.Style({
stroke: new ol.style.Stroke({
@@ -69,7 +78,10 @@ describe('ol.render', function() {
it('respects lineCap for linestring', function(done) {
var context = getContext();
var vectorContext = ol.render.toContext(context, {size: [100, 100]});
var vectorContext = ol.render.toContext(context, {
pixelRatio: 1,
size: [100, 100]
});
var style = new ol.style.Style({
stroke: new ol.style.Stroke({
@@ -91,7 +103,10 @@ describe('ol.render', function() {
it('respects lineJoin for linestring', function(done) {
var context = getContext();
var vectorContext = ol.render.toContext(context, {size: [100, 100]});
var vectorContext = ol.render.toContext(context, {
pixelRatio: 1,
size: [100, 100]
});
var style = new ol.style.Style({
stroke: new ol.style.Stroke({
@@ -113,7 +128,10 @@ describe('ol.render', function() {
it('can be used to render a polygon geometry', function(done) {
var context = getContext();
var vectorContext = ol.render.toContext(context, {size: [100, 100]});
var vectorContext = ol.render.toContext(context, {
pixelRatio: 1,
size: [100, 100]
});
var style = new ol.style.Style({
stroke: new ol.style.Stroke({
@@ -139,7 +157,10 @@ describe('ol.render', function() {
it('supports lineDash styles', function(done) {
var context = getContext();
var vectorContext = ol.render.toContext(context, {size: [100, 100]});
var vectorContext = ol.render.toContext(context, {
pixelRatio: 1,
size: [100, 100]
});
var style = new ol.style.Style({
stroke: new ol.style.Stroke({
@@ -161,7 +182,10 @@ describe('ol.render', function() {
it('supports lineDashOffset', function(done) {
var context = getContext();
var vectorContext = ol.render.toContext(context, {size: [100, 100]});
var vectorContext = ol.render.toContext(context, {
pixelRatio: 1,
size: [100, 100]
});
var style = new ol.style.Style({
stroke: new ol.style.Stroke({

1
test/rendering/ol/style/circle.test.js
View File

@@ -23,6 +23,7 @@ describe('ol.rendering.style.Circle', function() {
});
map = new ol.Map({
pixelRatio: 1,
target: createMapDiv(50, 50),
renderer: renderer,
layers: [vectorLayer],

1
test/rendering/ol/style/icon.test.js
View File

@@ -30,6 +30,7 @@ describe('ol.rendering.style.Icon', function() {
});
map = new ol.Map({
pixelRatio: 1,
target: createMapDiv(width ? width : 50, height ? height : 50),
renderer: renderer,
layers: [vectorLayer],

1
test/rendering/ol/style/polygon.test.js
View File

@@ -24,6 +24,7 @@ describe('ol.rendering.style.Polygon', function() {
});
map = new ol.Map({
pixelRatio: 1,
target: createMapDiv(size, size),
renderer: renderer,
layers: [vectorLayer],

1
test/rendering/ol/style/regularshape.test.js
View File

@@ -23,6 +23,7 @@ describe('ol.rendering.style.RegularShape', function() {
});
map = new ol.Map({
pixelRatio: 1,
target: createMapDiv(50, 50),
renderer: renderer,
layers: [vectorLayer],

1
test/rendering/ol/style/text.test.js
View File

@@ -22,6 +22,7 @@ describe('ol.rendering.style.Text', function() {
});
map = new ol.Map({
pixelRatio: 1,
target: createMapDiv(200, 200),
renderer: renderer,
layers: [vectorLayer],

70
test/test-extensions.js
View File

@@ -386,35 +386,47 @@ goog.require('ol.renderer.webgl.Map');
};
function resembleCanvas(canvas, referenceImage, tolerance, done) {
if (showMap) {
var wrapper = document.createElement('div');
wrapper.style.width = canvas.width + 'px';
wrapper.style.height = canvas.height + 'px';
wrapper.appendChild(canvas);
document.body.appendChild(wrapper);
document.body.appendChild(document.createTextNode(referenceImage));
}
resemble(referenceImage)
.compareTo(canvas.getContext('2d').getImageData(
0, 0, canvas.width, canvas.height))
.onComplete(function(data) {
if (!data.isSameDimensions) {
expect().fail(
'The dimensions of the reference image and ' +
'the test canvas are not the same.');
}
if (data.misMatchPercentage > tolerance) {
if (showDiff) {
var diffImage = new Image();
diffImage.src = data.getImageDataUrl();
document.body.appendChild(diffImage);
}
expect(data.misMatchPercentage).to.be.below(tolerance);
}
done();
});
var width = canvas.width;
var height = canvas.height;
var image = new Image();
image.addEventListener('load', function() {
expect(image.width).to.be(width);
expect(image.height).to.be(height);
var referenceCanvas = document.createElement('CANVAS');
referenceCanvas.width = image.width;
referenceCanvas.height = image.height;
var referenceContext = referenceCanvas.getContext('2d');
referenceContext.drawImage(image, 0, 0, image.width, image.height);
if (showMap) {
var wrapper = document.createElement('div');
wrapper.style.width = canvas.width + 'px';
wrapper.style.height = canvas.height + 'px';
wrapper.appendChild(canvas);
document.body.appendChild(wrapper);
document.body.appendChild(document.createTextNode(referenceImage));
}
var context = canvas.getContext('2d');
var output = context.createImageData(canvas.width, canvas.height);
var mismatchPx = pixelmatch(
context.getImageData(0, 0, width, height).data,
referenceContext.getImageData(0, 0, width, height).data,
output.data, width, height);
var mismatchPct = mismatchPx / (width * height) * 100;
if (showDiff && mismatchPct > tolerance) {
var diffCanvas = document.createElement('canvas');
diffCanvas.width = width;
diffCanvas.height = height;
diffCanvas.getContext('2d').putImageData(output, 0, 0);
document.body.appendChild(diffCanvas);
}
expect(mismatchPct).to.be.below(tolerance);
done();
});
image.addEventListener('error', function() {
expect().fail('Reference image could not be loaded');
done();
});
image.src = referenceImage;
}
global.resembleCanvas = resembleCanvas;