Organize tests
This commit is contained in:
Tim Schaub
@@ -0,0 +1,136 @@
|
||||
import CircleStyle from '../../../../../src/ol/style/Circle.js';
|
||||
import Fill from '../../../../../src/ol/style/Fill.js';
|
||||
import Stroke from '../../../../../src/ol/style/Stroke.js';
|
||||
|
||||
describe('ol.style.Circle', function () {
|
||||
describe('#constructor', function () {
|
||||
it('creates a canvas (no fill-style)', function () {
|
||||
const style = new CircleStyle({radius: 10});
|
||||
expect(style.getImage(1)).to.be.an(HTMLCanvasElement);
|
||||
expect(style.getSize()).to.eql([21, 21]);
|
||||
expect(style.getImageSize()).to.eql([21, 21]);
|
||||
expect(style.getOrigin()).to.eql([0, 0]);
|
||||
expect(style.getAnchor()).to.eql([10.5, 10.5]);
|
||||
// no hit-detection image is created, because no fill style is set
|
||||
expect(style.getImage(1)).to.be(style.getHitDetectionImage());
|
||||
expect(style.getHitDetectionImage()).to.be.an(HTMLCanvasElement);
|
||||
expect(style.getHitDetectionImageSize()).to.eql([21, 21]);
|
||||
});
|
||||
|
||||
it('creates a canvas (transparent fill-style)', function () {
|
||||
const style = new CircleStyle({
|
||||
radius: 10,
|
||||
fill: new Fill({
|
||||
color: 'transparent',
|
||||
}),
|
||||
});
|
||||
expect(style.getImage(1)).to.be.an(HTMLCanvasElement);
|
||||
expect(style.getSize()).to.eql([21, 21]);
|
||||
expect(style.getImageSize()).to.eql([21, 21]);
|
||||
expect(style.getOrigin()).to.eql([0, 0]);
|
||||
expect(style.getAnchor()).to.eql([10.5, 10.5]);
|
||||
// hit-detection image is created, because transparent fill style is set
|
||||
expect(style.getImage(1)).to.not.be(style.getHitDetectionImage());
|
||||
expect(style.getHitDetectionImage()).to.be.an(HTMLCanvasElement);
|
||||
expect(style.getHitDetectionImageSize()).to.eql([21, 21]);
|
||||
});
|
||||
|
||||
it('creates a canvas (non-transparent fill-style)', function () {
|
||||
const style = new CircleStyle({
|
||||
radius: 10,
|
||||
fill: new Fill({
|
||||
color: '#FFFF00',
|
||||
}),
|
||||
});
|
||||
expect(style.getImage(1)).to.be.an(HTMLCanvasElement);
|
||||
expect(style.getSize()).to.eql([21, 21]);
|
||||
expect(style.getImageSize()).to.eql([21, 21]);
|
||||
expect(style.getOrigin()).to.eql([0, 0]);
|
||||
expect(style.getAnchor()).to.eql([10.5, 10.5]);
|
||||
// no hit-detection image is created, because non-transparent fill style is set
|
||||
expect(style.getImage(1)).to.be(style.getHitDetectionImage());
|
||||
expect(style.getHitDetectionImage()).to.be.an(HTMLCanvasElement);
|
||||
expect(style.getHitDetectionImageSize()).to.eql([21, 21]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#clone', function () {
|
||||
it('creates a new ol.style.Circle', function () {
|
||||
const original = new CircleStyle();
|
||||
const clone = original.clone();
|
||||
expect(clone).to.be.an(CircleStyle);
|
||||
expect(clone).to.not.be(original);
|
||||
});
|
||||
|
||||
it('copies all values', function () {
|
||||
const original = new CircleStyle({
|
||||
fill: new Fill({
|
||||
color: '#319FD3',
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#319FD3',
|
||||
}),
|
||||
radius: 5,
|
||||
scale: [1.5, 1],
|
||||
rotation: 2,
|
||||
rotateWithView: true,
|
||||
displacement: [10, 20],
|
||||
});
|
||||
original.setOpacity(0.5);
|
||||
const clone = original.clone();
|
||||
expect(original.getFill().getColor()).to.eql(clone.getFill().getColor());
|
||||
expect(original.getOpacity()).to.eql(clone.getOpacity());
|
||||
expect(original.getRadius()).to.eql(clone.getRadius());
|
||||
expect(original.getRotation()).to.eql(clone.getRotation());
|
||||
expect(original.getRotateWithView()).to.eql(clone.getRotateWithView());
|
||||
expect(original.getScale()[0]).to.eql(clone.getScale()[0]);
|
||||
expect(original.getScale()[1]).to.eql(clone.getScale()[1]);
|
||||
expect(original.getStroke().getColor()).to.eql(
|
||||
clone.getStroke().getColor()
|
||||
);
|
||||
expect(original.getDisplacement()[0]).to.eql(clone.getDisplacement()[0]);
|
||||
expect(original.getDisplacement()[1]).to.eql(clone.getDisplacement()[1]);
|
||||
});
|
||||
|
||||
it('the clone does not reference the same objects as the original', function () {
|
||||
const original = new CircleStyle({
|
||||
fill: new Fill({
|
||||
color: '#319FD3',
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#319FD3',
|
||||
}),
|
||||
scale: [1.5, 1],
|
||||
displacement: [0, 5],
|
||||
});
|
||||
const clone = original.clone();
|
||||
expect(original.getFill()).to.not.be(clone.getFill());
|
||||
expect(original.getStroke()).to.not.be(clone.getStroke());
|
||||
expect(original.getScale()).to.not.be(clone.getScale());
|
||||
expect(original.getDisplacement()).to.not.be(clone.getDisplacement());
|
||||
|
||||
clone.getFill().setColor('#012345');
|
||||
clone.getStroke().setColor('#012345');
|
||||
expect(original.getFill().getColor()).to.not.eql(
|
||||
clone.getFill().getColor()
|
||||
);
|
||||
expect(original.getStroke().getColor()).to.not.eql(
|
||||
clone.getStroke().getColor()
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#setRadius', function () {
|
||||
it('changes the circle radius', function () {
|
||||
const style = new CircleStyle({
|
||||
radius: 10,
|
||||
fill: new Fill({
|
||||
color: '#FFFF00',
|
||||
}),
|
||||
});
|
||||
expect(style.getRadius()).to.eql(10);
|
||||
style.setRadius(20);
|
||||
expect(style.getRadius()).to.eql(20);
|
||||
});
|
||||
});
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,31 @@
|
||||
import Fill from '../../../../../src/ol/style/Fill.js';
|
||||
|
||||
describe('ol.style.Fill', function () {
|
||||
describe('#clone', function () {
|
||||
it('creates a new ol.style.Fill', function () {
|
||||
const original = new Fill();
|
||||
const clone = original.clone();
|
||||
expect(clone).to.be.an(Fill);
|
||||
expect(clone).to.not.be(original);
|
||||
});
|
||||
|
||||
it('copies all values', function () {
|
||||
const original = new Fill({
|
||||
color: '#319FD3',
|
||||
});
|
||||
const clone = original.clone();
|
||||
expect(original.getColor()).to.eql(clone.getColor());
|
||||
});
|
||||
|
||||
it('the clone does not reference the same objects as the original', function () {
|
||||
const original = new Fill({
|
||||
color: [63, 255, 127, 0.7],
|
||||
});
|
||||
const clone = original.clone();
|
||||
expect(original.getColor()).to.not.be(clone.getColor());
|
||||
|
||||
clone.getColor()[2] = 0;
|
||||
expect(original.getColor()).to.not.eql(clone.getColor());
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,289 @@
|
||||
import Icon from '../../../../../src/ol/style/Icon.js';
|
||||
import IconImage, {
|
||||
get as getIconImage,
|
||||
} from '../../../../../src/ol/style/IconImage.js';
|
||||
import {getUid} from '../../../../../src/ol/util.js';
|
||||
import {shared as iconImageCache} from '../../../../../src/ol/style/IconImageCache.js';
|
||||
|
||||
describe('ol.style.Icon', function () {
|
||||
const size = [36, 48];
|
||||
const src =
|
||||
'data:image/gif;base64,' +
|
||||
'R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=';
|
||||
|
||||
describe('constructor', function () {
|
||||
it('caches canvas images with a uid as src', function () {
|
||||
const canvas = document.createElement('canvas');
|
||||
new Icon({
|
||||
img: canvas,
|
||||
imgSize: size,
|
||||
});
|
||||
expect(getIconImage(canvas, getUid(canvas), size, '').getImage()).to.eql(
|
||||
canvas
|
||||
);
|
||||
});
|
||||
|
||||
it('imgSize overrides img.width and img.height', function (done) {
|
||||
const style = new Icon({
|
||||
src: src,
|
||||
imgSize: size,
|
||||
});
|
||||
const iconImage = style.iconImage_;
|
||||
iconImage.addEventListener('change', function () {
|
||||
expect([iconImage.image_.width, iconImage.image_.height]).to.eql(size);
|
||||
done();
|
||||
});
|
||||
style.load();
|
||||
});
|
||||
});
|
||||
|
||||
describe('#clone', function () {
|
||||
it('creates a new ol.style.Icon', function () {
|
||||
const original = new Icon({
|
||||
src: src,
|
||||
});
|
||||
const clone = original.clone();
|
||||
expect(clone).to.be.an(Icon);
|
||||
expect(clone).to.not.be(original);
|
||||
});
|
||||
|
||||
it('copies all values ', function () {
|
||||
const canvas = document.createElement('canvas');
|
||||
const original = new Icon({
|
||||
anchor: [1, 0],
|
||||
anchorOrigin: 'bottom-right',
|
||||
anchorXUnits: 'pixels',
|
||||
anchorYUnits: 'pixels',
|
||||
color: '#319FD3',
|
||||
crossOrigin: 'Anonymous',
|
||||
img: canvas,
|
||||
imgSize: size,
|
||||
offset: [1, 2],
|
||||
offsetOrigin: 'bottom-left',
|
||||
opacity: 0.5,
|
||||
scale: 2,
|
||||
rotation: 4,
|
||||
size: [10, 12],
|
||||
});
|
||||
|
||||
const clone = original.clone();
|
||||
expect(original.getImage(1)).to.be(clone.getImage(1));
|
||||
expect(original.iconImage_).to.be(clone.iconImage_);
|
||||
expect(original.getAnchor()).to.eql(clone.getAnchor());
|
||||
expect(original.anchorOrigin_).to.eql(clone.anchorOrigin_);
|
||||
expect(original.anchorXUnits_).to.eql(clone.anchorXUnits_);
|
||||
expect(original.anchorYUnits_).to.eql(clone.anchorYUnits_);
|
||||
expect(original.crossOrigin_).to.eql(clone.crossOrigin_);
|
||||
expect(original.getColor()).to.eql(clone.getColor());
|
||||
expect(original.offset_).to.eql(clone.offset_);
|
||||
expect(original.offsetOrigin_).to.eql(clone.offsetOrigin_);
|
||||
expect(original.getSize()).to.eql(clone.getSize());
|
||||
expect(original.getSrc()).to.eql(clone.getSrc());
|
||||
expect(original.getOpacity()).to.eql(clone.getOpacity());
|
||||
expect(original.getRotation()).to.eql(clone.getRotation());
|
||||
expect(original.getRotateWithView()).to.eql(clone.getRotateWithView());
|
||||
|
||||
const original2 = new Icon({
|
||||
src: src,
|
||||
});
|
||||
const clone2 = original2.clone();
|
||||
expect(original2.getImage(1)).to.be(clone2.getImage(1));
|
||||
expect(original2.iconImage_).to.be(clone2.iconImage_);
|
||||
expect(original2.getSrc()).to.eql(clone2.getSrc());
|
||||
});
|
||||
|
||||
it('the clone does not reference the same objects as the original', function () {
|
||||
const original = new Icon({
|
||||
anchor: [1, 0],
|
||||
color: [1, 2, 3, 0.4],
|
||||
src: src,
|
||||
offset: [1, 2],
|
||||
size: [10, 12],
|
||||
displacement: [5, 6],
|
||||
});
|
||||
const clone = original.clone();
|
||||
expect(original.getAnchor()).not.to.be(clone.getAnchor());
|
||||
expect(original.offset_).not.to.be(clone.offset_);
|
||||
expect(original.getColor()).not.to.be(clone.getColor());
|
||||
expect(original.getSize()).not.to.be(clone.getSize());
|
||||
expect(original.getDisplacement()).not.to.be(clone.getDisplacement());
|
||||
|
||||
clone.anchor_[0] = 0;
|
||||
clone.offset_[0] = 0;
|
||||
clone.color_[0] = 0;
|
||||
clone.size_[0] = 5;
|
||||
clone.displacement_[0] = 10;
|
||||
expect(original.anchor_).not.to.eql(clone.anchor_);
|
||||
expect(original.offset_).not.to.eql(clone.offset_);
|
||||
expect(original.color_).not.to.eql(clone.color_);
|
||||
expect(original.size_).not.to.eql(clone.size_);
|
||||
expect(original.displacement_).not.to.eql(clone.displacement_);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#getAnchor', function () {
|
||||
const fractionAnchor = [0.25, 0.25];
|
||||
|
||||
it('uses fractional units by default', function () {
|
||||
const iconStyle = new Icon({
|
||||
src: 'test.png',
|
||||
size: size,
|
||||
anchor: fractionAnchor,
|
||||
});
|
||||
expect(iconStyle.getAnchor()).to.eql([9, 12]);
|
||||
});
|
||||
|
||||
it('uses pixels units', function () {
|
||||
const iconStyle = new Icon({
|
||||
src: 'test.png',
|
||||
size: size,
|
||||
anchor: [2, 18],
|
||||
anchorXUnits: 'pixels',
|
||||
anchorYUnits: 'pixels',
|
||||
});
|
||||
expect(iconStyle.getAnchor()).to.eql([2, 18]);
|
||||
});
|
||||
|
||||
it('uses a bottom left anchor origin', function () {
|
||||
const iconStyle = new Icon({
|
||||
src: 'test.png',
|
||||
size: size,
|
||||
anchor: fractionAnchor,
|
||||
anchorOrigin: 'bottom-left',
|
||||
});
|
||||
expect(iconStyle.getAnchor()).to.eql([9, 36]);
|
||||
});
|
||||
|
||||
it('uses a bottom right anchor origin', function () {
|
||||
const iconStyle = new Icon({
|
||||
src: 'test.png',
|
||||
size: size,
|
||||
anchor: fractionAnchor,
|
||||
anchorOrigin: 'bottom-right',
|
||||
});
|
||||
expect(iconStyle.getAnchor()).to.eql([27, 36]);
|
||||
});
|
||||
|
||||
it('uses a top right anchor origin', function () {
|
||||
const iconStyle = new Icon({
|
||||
src: 'test.png',
|
||||
size: size,
|
||||
anchor: fractionAnchor,
|
||||
anchorOrigin: 'top-right',
|
||||
});
|
||||
expect(iconStyle.getAnchor()).to.eql([27, 12]);
|
||||
});
|
||||
|
||||
it('uses a top right anchor origin + displacement', function () {
|
||||
const iconStyle = new Icon({
|
||||
src: 'test.png',
|
||||
size: size,
|
||||
anchor: fractionAnchor,
|
||||
anchorOrigin: 'top-right',
|
||||
displacement: [20, 10],
|
||||
});
|
||||
expect(iconStyle.getAnchor()).to.eql([
|
||||
size[0] * (1 - fractionAnchor[0]) - 20,
|
||||
size[1] * fractionAnchor[1] + 10,
|
||||
]);
|
||||
});
|
||||
|
||||
it('uses displacement', function () {
|
||||
const iconStyle = new Icon({
|
||||
src: 'test.png',
|
||||
size: size,
|
||||
displacement: [20, 10],
|
||||
});
|
||||
expect(iconStyle.getAnchor()).to.eql([
|
||||
size[0] / 2 - 20,
|
||||
size[1] / 2 + 10,
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#setAnchor', function () {
|
||||
it('resets the cached anchor', function () {
|
||||
const iconStyle = new Icon({
|
||||
src: 'test.png',
|
||||
size: size,
|
||||
anchor: [0.25, 0.25],
|
||||
});
|
||||
expect(iconStyle.getAnchor()).to.eql([9, 12]);
|
||||
|
||||
iconStyle.setAnchor([0.5, 0.5]);
|
||||
expect(iconStyle.getAnchor()).to.eql([18, 24]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#getOrigin', function () {
|
||||
const offset = [16, 20];
|
||||
const imageSize = [144, 192];
|
||||
|
||||
it('uses a top left offset origin (default)', function () {
|
||||
const iconStyle = new Icon({
|
||||
src: 'test.png',
|
||||
size: size,
|
||||
offset: offset,
|
||||
});
|
||||
expect(iconStyle.getOrigin()).to.eql([16, 20]);
|
||||
});
|
||||
|
||||
it('uses a bottom left offset origin', function () {
|
||||
const iconStyle = new Icon({
|
||||
src: 'test.png',
|
||||
size: size,
|
||||
offset: offset,
|
||||
offsetOrigin: 'bottom-left',
|
||||
});
|
||||
iconStyle.iconImage_.size_ = imageSize;
|
||||
expect(iconStyle.getOrigin()).to.eql([16, 124]);
|
||||
});
|
||||
|
||||
it('uses a bottom right offset origin', function () {
|
||||
const iconStyle = new Icon({
|
||||
src: 'test.png',
|
||||
size: size,
|
||||
offset: offset,
|
||||
offsetOrigin: 'bottom-right',
|
||||
});
|
||||
iconStyle.iconImage_.size_ = imageSize;
|
||||
expect(iconStyle.getOrigin()).to.eql([92, 124]);
|
||||
});
|
||||
|
||||
it('uses a top right offset origin', function () {
|
||||
const iconStyle = new Icon({
|
||||
src: 'test.png',
|
||||
size: size,
|
||||
offset: offset,
|
||||
offsetOrigin: 'top-right',
|
||||
});
|
||||
iconStyle.iconImage_.size_ = imageSize;
|
||||
expect(iconStyle.getOrigin()).to.eql([92, 20]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#getImageSize', function () {
|
||||
const imgSize = [144, 192];
|
||||
|
||||
it('takes the real image size', function () {
|
||||
// pretend that the image is already in the cache,
|
||||
// this image will be used for the icon.
|
||||
const src = 'test.png';
|
||||
const iconImage = new IconImage(null, 'test.png', imgSize);
|
||||
iconImageCache.set(src, null, null, iconImage);
|
||||
|
||||
const iconStyle = new Icon({
|
||||
src: 'test.png',
|
||||
});
|
||||
expect(iconStyle.getImageSize()).to.eql(imgSize);
|
||||
});
|
||||
|
||||
it('uses the given image size', function () {
|
||||
const iconStyle = new Icon({
|
||||
img: {src: 'test.png'},
|
||||
imgSize: imgSize,
|
||||
});
|
||||
expect(iconStyle.getImageSize()).to.eql(imgSize);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,80 @@
|
||||
import IconImage from '../../../../../src/ol/style/IconImage.js';
|
||||
import {VOID} from '../../../../../src/ol/functions.js';
|
||||
import {shared as iconImageCache} from '../../../../../src/ol/style/IconImageCache.js';
|
||||
import {listen} from '../../../../../src/ol/events.js';
|
||||
|
||||
describe('ol.style.IconImageCache', function () {
|
||||
let originalMaxCacheSize;
|
||||
|
||||
beforeEach(function () {
|
||||
iconImageCache.clear();
|
||||
originalMaxCacheSize = iconImageCache.maxCacheSize;
|
||||
iconImageCache.maxCacheSize_ = 4;
|
||||
});
|
||||
|
||||
afterEach(function () {
|
||||
iconImageCache.maxCacheSize_ = originalMaxCacheSize;
|
||||
iconImageCache.clear();
|
||||
});
|
||||
|
||||
describe('#expire', function () {
|
||||
it('expires images when expected', function () {
|
||||
let i, src, iconImage;
|
||||
|
||||
for (i = 0; i < 4; ++i) {
|
||||
src = i + '';
|
||||
iconImage = new IconImage(null, src);
|
||||
iconImageCache.set(src, null, null, iconImage);
|
||||
}
|
||||
|
||||
expect(iconImageCache.cacheSize_).to.eql(4);
|
||||
|
||||
iconImageCache.expire();
|
||||
expect(iconImageCache.cacheSize_).to.eql(4);
|
||||
|
||||
src = '4';
|
||||
iconImage = new IconImage(null, src);
|
||||
iconImageCache.set(src, null, null, iconImage);
|
||||
expect(iconImageCache.cacheSize_).to.eql(5);
|
||||
|
||||
iconImageCache.expire(); // remove '0' and '4'
|
||||
expect(iconImageCache.cacheSize_).to.eql(3);
|
||||
|
||||
src = '0';
|
||||
iconImage = new IconImage(null, src);
|
||||
listen(iconImage, 'change', VOID, false);
|
||||
iconImageCache.set(src, null, null, iconImage);
|
||||
expect(iconImageCache.cacheSize_).to.eql(4);
|
||||
|
||||
src = '4';
|
||||
iconImage = new IconImage(null, src);
|
||||
listen(iconImage, 'change', VOID, false);
|
||||
iconImageCache.set(src, null, null, iconImage);
|
||||
expect(iconImageCache.cacheSize_).to.eql(5);
|
||||
|
||||
// check that '0' and '4' are not removed from the cache
|
||||
iconImageCache.expire();
|
||||
expect(iconImageCache.get('0', null, null)).to.not.be(null);
|
||||
expect(iconImageCache.get('4', null, null)).to.not.be(null);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#setSize', function () {
|
||||
it('sets max cache size and expires cache', function () {
|
||||
let i, src, iconImage;
|
||||
|
||||
for (i = 0; i < 3; ++i) {
|
||||
src = i + '';
|
||||
iconImage = new IconImage(null, src);
|
||||
iconImageCache.set(src, null, null, iconImage);
|
||||
}
|
||||
|
||||
expect(iconImageCache.cacheSize_).to.eql(3);
|
||||
|
||||
iconImageCache.setSize(2);
|
||||
|
||||
expect(iconImageCache.maxCacheSize_).to.eql(2);
|
||||
expect(iconImageCache.cacheSize_).to.eql(2);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,176 @@
|
||||
import Fill from '../../../../../src/ol/style/Fill.js';
|
||||
import RegularShape from '../../../../../src/ol/style/RegularShape.js';
|
||||
import Stroke from '../../../../../src/ol/style/Stroke.js';
|
||||
|
||||
describe('ol.style.RegularShape', function () {
|
||||
describe('#constructor', function () {
|
||||
it('can use rotateWithView', function () {
|
||||
const style = new RegularShape({
|
||||
rotateWithView: true,
|
||||
radius: 0,
|
||||
});
|
||||
expect(style.getRotateWithView()).to.be(true);
|
||||
});
|
||||
|
||||
it('can use radius', function () {
|
||||
const style = new RegularShape({
|
||||
radius: 5,
|
||||
radius2: 10,
|
||||
});
|
||||
expect(style.getRadius()).to.eql(5);
|
||||
expect(style.getRadius2()).to.eql(10);
|
||||
});
|
||||
|
||||
it('can use radius1 as an alias for radius', function () {
|
||||
const style = new RegularShape({
|
||||
radius1: 5,
|
||||
radius2: 10,
|
||||
});
|
||||
expect(style.getRadius()).to.eql(5);
|
||||
expect(style.getRadius2()).to.eql(10);
|
||||
});
|
||||
|
||||
it('creates a canvas (no fill-style)', function () {
|
||||
const style = new RegularShape({radius: 10});
|
||||
expect(style.getImage(1)).to.be.an(HTMLCanvasElement);
|
||||
expect(style.getSize()).to.eql([21, 21]);
|
||||
expect(style.getImageSize()).to.eql([21, 21]);
|
||||
expect(style.getOrigin()).to.eql([0, 0]);
|
||||
expect(style.getAnchor()).to.eql([10.5, 10.5]);
|
||||
// no hit-detection image is created, because no fill style is set
|
||||
expect(style.getImage(1)).to.be(style.getHitDetectionImage());
|
||||
expect(style.getHitDetectionImage()).to.be.an(HTMLCanvasElement);
|
||||
expect(style.getHitDetectionImageSize()).to.eql([21, 21]);
|
||||
});
|
||||
|
||||
it('creates a canvas (transparent fill-style)', function () {
|
||||
const style = new RegularShape({
|
||||
radius: 10,
|
||||
fill: new Fill({
|
||||
color: 'transparent',
|
||||
}),
|
||||
});
|
||||
expect(style.getImage(1)).to.be.an(HTMLCanvasElement);
|
||||
expect(style.getImage(1).width).to.be(21);
|
||||
expect(style.getImage(2).width).to.be(42);
|
||||
expect(style.getPixelRatio(2)).to.be(2);
|
||||
expect(style.getSize()).to.eql([21, 21]);
|
||||
expect(style.getImageSize()).to.eql([21, 21]);
|
||||
expect(style.getOrigin()).to.eql([0, 0]);
|
||||
expect(style.getAnchor()).to.eql([10.5, 10.5]);
|
||||
// hit-detection image is created, because transparent fill style is set
|
||||
expect(style.getImage(1)).to.not.be(style.getHitDetectionImage());
|
||||
expect(style.getHitDetectionImage()).to.be.an(HTMLCanvasElement);
|
||||
expect(style.getHitDetectionImageSize()).to.eql([21, 21]);
|
||||
expect(style.getHitDetectionImage().width).to.be(21);
|
||||
});
|
||||
|
||||
it('creates a canvas (non-transparent fill-style)', function () {
|
||||
const style = new RegularShape({
|
||||
radius: 10,
|
||||
fill: new Fill({
|
||||
color: '#FFFF00',
|
||||
}),
|
||||
});
|
||||
expect(style.getImage(1)).to.be.an(HTMLCanvasElement);
|
||||
expect(style.getSize()).to.eql([21, 21]);
|
||||
expect(style.getImageSize()).to.eql([21, 21]);
|
||||
expect(style.getOrigin()).to.eql([0, 0]);
|
||||
expect(style.getAnchor()).to.eql([10.5, 10.5]);
|
||||
// no hit-detection image is created, because non-transparent fill style is set
|
||||
expect(style.getImage(1)).to.be(style.getHitDetectionImage());
|
||||
expect(style.getHitDetectionImage()).to.be.an(HTMLCanvasElement);
|
||||
expect(style.getHitDetectionImageSize()).to.eql([21, 21]);
|
||||
});
|
||||
|
||||
it('sets default displacement [0, 0]', function () {
|
||||
const style = new RegularShape({
|
||||
radius: 5,
|
||||
});
|
||||
expect(style.getDisplacement()).to.an('array');
|
||||
expect(style.getDisplacement()[0]).to.eql(0);
|
||||
expect(style.getDisplacement()[1]).to.eql(0);
|
||||
});
|
||||
|
||||
it('can use offset', function () {
|
||||
const style = new RegularShape({
|
||||
radius: 5,
|
||||
displacement: [10, 20],
|
||||
});
|
||||
expect(style.getDisplacement()).to.an('array');
|
||||
expect(style.getDisplacement()[0]).to.eql(10);
|
||||
expect(style.getDisplacement()[1]).to.eql(20);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#clone', function () {
|
||||
it('creates a new ol.style.RegularShape', function () {
|
||||
const original = new RegularShape({
|
||||
points: 5,
|
||||
});
|
||||
const clone = original.clone();
|
||||
expect(clone).to.be.an(RegularShape);
|
||||
expect(clone).to.not.be(original);
|
||||
});
|
||||
|
||||
it('copies all values', function () {
|
||||
const original = new RegularShape({
|
||||
fill: new Fill({
|
||||
color: '#319FD3',
|
||||
}),
|
||||
points: 5,
|
||||
radius: 4,
|
||||
radius2: 6,
|
||||
angle: 1,
|
||||
stroke: new Stroke({
|
||||
color: '#319FD3',
|
||||
}),
|
||||
rotation: 2,
|
||||
rotateWithView: true,
|
||||
displacement: [10, 20],
|
||||
});
|
||||
original.setOpacity(0.5);
|
||||
original.setScale(1.5);
|
||||
const clone = original.clone();
|
||||
expect(original.getAngle()).to.eql(clone.getAngle());
|
||||
expect(original.getFill().getColor()).to.eql(clone.getFill().getColor());
|
||||
expect(original.getOpacity()).to.eql(clone.getOpacity());
|
||||
expect(original.getPoints()).to.eql(clone.getPoints());
|
||||
expect(original.getRadius()).to.eql(clone.getRadius());
|
||||
expect(original.getRadius2()).to.eql(clone.getRadius2());
|
||||
expect(original.getRotation()).to.eql(clone.getRotation());
|
||||
expect(original.getRotateWithView()).to.eql(clone.getRotateWithView());
|
||||
expect(original.getScale()).to.eql(clone.getScale());
|
||||
expect(original.getStroke().getColor()).to.eql(
|
||||
clone.getStroke().getColor()
|
||||
);
|
||||
expect(original.getDisplacement()[0]).to.eql(clone.getDisplacement()[0]);
|
||||
expect(original.getDisplacement()[1]).to.eql(clone.getDisplacement()[1]);
|
||||
});
|
||||
|
||||
it('the clone does not reference the same objects as the original', function () {
|
||||
const original = new RegularShape({
|
||||
fill: new Fill({
|
||||
color: '#319FD3',
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#319FD3',
|
||||
}),
|
||||
displacement: [0, 5],
|
||||
});
|
||||
const clone = original.clone();
|
||||
expect(original.getFill()).to.not.be(clone.getFill());
|
||||
expect(original.getStroke()).to.not.be(clone.getStroke());
|
||||
expect(original.getDisplacement()).to.not.be(clone.getDisplacement());
|
||||
|
||||
clone.getFill().setColor('#012345');
|
||||
clone.getStroke().setColor('#012345');
|
||||
expect(original.getFill().getColor()).to.not.eql(
|
||||
clone.getFill().getColor()
|
||||
);
|
||||
expect(original.getStroke().getColor()).to.not.eql(
|
||||
clone.getStroke().getColor()
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,47 @@
|
||||
import Stroke from '../../../../../src/ol/style/Stroke.js';
|
||||
|
||||
describe('ol.style.Stroke', function () {
|
||||
describe('#clone', function () {
|
||||
it('creates a new ol.style.Stroke', function () {
|
||||
const original = new Stroke();
|
||||
const clone = original.clone();
|
||||
expect(clone).to.be.an(Stroke);
|
||||
expect(clone).to.not.be(original);
|
||||
});
|
||||
|
||||
it('copies all values', function () {
|
||||
const original = new Stroke({
|
||||
color: '#319FD3',
|
||||
lineCap: 'square',
|
||||
lineJoin: 'miter',
|
||||
lineDash: [1, 2, 3],
|
||||
lineDashOffset: 2,
|
||||
miterLimit: 20,
|
||||
width: 5,
|
||||
});
|
||||
const clone = original.clone();
|
||||
expect(original.getColor()).to.eql(clone.getColor());
|
||||
expect(original.getLineCap()).to.eql(clone.getLineCap());
|
||||
expect(original.getLineJoin()).to.eql(clone.getLineJoin());
|
||||
expect(original.getLineDash()).to.eql(clone.getLineDash());
|
||||
expect(original.getLineDashOffset()).to.eql(clone.getLineDashOffset());
|
||||
expect(original.getMiterLimit()).to.eql(clone.getMiterLimit());
|
||||
expect(original.getWidth()).to.eql(clone.getWidth());
|
||||
});
|
||||
|
||||
it('the clone does not reference the same objects as the original', function () {
|
||||
const original = new Stroke({
|
||||
color: [1, 2, 3, 0.4],
|
||||
lineDash: [1, 2, 3],
|
||||
});
|
||||
const clone = original.clone();
|
||||
expect(original.getColor()).to.not.be(clone.getColor());
|
||||
expect(original.getLineDash()).to.not.be(clone.getLineDash());
|
||||
|
||||
clone.getColor()[0] = 0;
|
||||
clone.getLineDash()[0] = 0;
|
||||
expect(original.getColor()).to.not.eql(clone.getColor());
|
||||
expect(original.getLineDash()).to.not.eql(clone.getLineDash());
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,290 @@
|
||||
import CircleStyle from '../../../../../src/ol/style/Circle.js';
|
||||
import Feature from '../../../../../src/ol/Feature.js';
|
||||
import Fill from '../../../../../src/ol/style/Fill.js';
|
||||
import Point from '../../../../../src/ol/geom/Point.js';
|
||||
import Stroke from '../../../../../src/ol/style/Stroke.js';
|
||||
import Style, {toFunction} from '../../../../../src/ol/style/Style.js';
|
||||
import Text from '../../../../../src/ol/style/Text.js';
|
||||
|
||||
describe('ol.style.Style', function () {
|
||||
const testFill = new Fill({
|
||||
color: 'rgba(255, 255, 255, 0.6)',
|
||||
});
|
||||
|
||||
const testStroke = new Stroke({
|
||||
color: '#319FD3',
|
||||
width: 1,
|
||||
});
|
||||
|
||||
const testText = new Text({
|
||||
font: '12px Calibri,sans-serif',
|
||||
fill: new Fill({
|
||||
color: '#000',
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#fff',
|
||||
width: 3,
|
||||
}),
|
||||
});
|
||||
|
||||
const testImage = new CircleStyle({
|
||||
radius: 5,
|
||||
});
|
||||
|
||||
describe('#clone', function () {
|
||||
it('creates a new ol.style.Style', function () {
|
||||
const original = new Style();
|
||||
const clone = original.clone();
|
||||
expect(clone).to.be.an(Style);
|
||||
expect(clone).to.not.be(original);
|
||||
});
|
||||
|
||||
it('copies all values', function () {
|
||||
const original = new Style({
|
||||
geometry: new Point([0, 0, 0]),
|
||||
fill: new Fill({
|
||||
color: '#319FD3',
|
||||
}),
|
||||
image: new CircleStyle({
|
||||
radius: 5,
|
||||
}),
|
||||
renderer: function (pixelCoordinates, state) {
|
||||
const geometry = state.geometry.clone();
|
||||
geometry.setCoordinates(pixelCoordinates);
|
||||
},
|
||||
stroke: new Stroke({
|
||||
color: '#319FD3',
|
||||
}),
|
||||
text: new Text({
|
||||
text: 'test',
|
||||
}),
|
||||
zIndex: 2,
|
||||
});
|
||||
const clone = original.clone();
|
||||
expect(original.getGeometry().getCoordinates()).to.eql(
|
||||
clone.getGeometry().getCoordinates()
|
||||
);
|
||||
expect(original.getFill().getColor()).to.eql(clone.getFill().getColor());
|
||||
expect(original.getImage().getRadius()).to.eql(
|
||||
clone.getImage().getRadius()
|
||||
);
|
||||
expect(original.getRenderer()).to.eql(clone.getRenderer());
|
||||
expect(original.getStroke().getColor()).to.eql(
|
||||
clone.getStroke().getColor()
|
||||
);
|
||||
expect(original.getText().getText()).to.eql(clone.getText().getText());
|
||||
expect(original.getZIndex()).to.eql(clone.getZIndex());
|
||||
});
|
||||
|
||||
it('the clone does not reference the same objects as the original', function () {
|
||||
const original = new Style({
|
||||
geometry: new Point([0, 0, 0]),
|
||||
fill: new Fill({
|
||||
color: '#319FD3',
|
||||
}),
|
||||
image: new CircleStyle({
|
||||
radius: 5,
|
||||
}),
|
||||
renderer: function (pixelCoordinates, state) {
|
||||
const geometry = state.geometry.clone();
|
||||
geometry.setCoordinates(pixelCoordinates);
|
||||
},
|
||||
stroke: new Stroke({
|
||||
color: '#319FD3',
|
||||
}),
|
||||
text: new Text({
|
||||
text: 'test',
|
||||
}),
|
||||
});
|
||||
const clone = original.clone();
|
||||
expect(original.getGeometry()).not.to.be(clone.getGeometry());
|
||||
expect(original.getFill()).not.to.be(clone.getFill());
|
||||
expect(original.getImage()).not.to.be(clone.getImage());
|
||||
expect(original.getStroke()).not.to.be(clone.getStroke());
|
||||
expect(original.getText()).not.to.be(clone.getText());
|
||||
|
||||
clone.getGeometry().setCoordinates([1, 1, 1]);
|
||||
clone.getFill().setColor('#012345');
|
||||
clone.getImage().setScale(2);
|
||||
clone.setRenderer(function (pixelCoordinates, state) {
|
||||
return;
|
||||
});
|
||||
clone.getStroke().setColor('#012345');
|
||||
clone.getText().setText('other');
|
||||
expect(original.getGeometry().getCoordinates()).not.to.eql(
|
||||
clone.getGeometry().getCoordinates()
|
||||
);
|
||||
expect(original.getFill().getColor()).not.to.eql(
|
||||
clone.getFill().getColor()
|
||||
);
|
||||
expect(original.getImage().getScale()).not.to.eql(
|
||||
clone.getImage().getScale()
|
||||
);
|
||||
expect(original.getRenderer()).not.to.eql(clone.getRenderer());
|
||||
expect(original.getStroke().getColor()).not.to.eql(
|
||||
clone.getStroke().getColor()
|
||||
);
|
||||
expect(original.getText().getText()).not.to.eql(
|
||||
clone.getText().getText()
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#setZIndex', function () {
|
||||
it('sets the zIndex', function () {
|
||||
const style = new Style();
|
||||
|
||||
style.setZIndex(0.7);
|
||||
expect(style.getZIndex()).to.be(0.7);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#getFill', function () {
|
||||
const style = new Style({
|
||||
fill: testFill,
|
||||
});
|
||||
|
||||
it('returns the fill style of a style', function () {
|
||||
expect(style.getFill()).to.eql(testFill);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#setFill', function () {
|
||||
const style = new Style();
|
||||
|
||||
it('sets the fill style of a style', function () {
|
||||
style.setFill(testFill);
|
||||
expect(style.getFill()).to.eql(testFill);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#getImage', function () {
|
||||
const style = new Style({
|
||||
image: testImage,
|
||||
});
|
||||
|
||||
it('returns the image style of a style', function () {
|
||||
expect(style.getImage()).to.eql(testImage);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#setImage', function () {
|
||||
const style = new Style();
|
||||
|
||||
it('sets the image style of a style', function () {
|
||||
style.setImage(testImage);
|
||||
expect(style.getImage()).to.eql(testImage);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#getStroke', function () {
|
||||
const style = new Style({
|
||||
stroke: testStroke,
|
||||
});
|
||||
|
||||
it('returns the stroke style of a style', function () {
|
||||
expect(style.getStroke()).to.eql(testStroke);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#setStroke', function () {
|
||||
const style = new Style();
|
||||
|
||||
it('sets the stroke style of a style', function () {
|
||||
style.setStroke(testStroke);
|
||||
expect(style.getStroke()).to.eql(testStroke);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#getText', function () {
|
||||
const style = new Style({
|
||||
text: testText,
|
||||
});
|
||||
|
||||
it('returns the text style of a style', function () {
|
||||
expect(style.getText()).to.eql(testText);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#setText', function () {
|
||||
const style = new Style();
|
||||
|
||||
it('sets the text style of a style', function () {
|
||||
style.setText(testText);
|
||||
expect(style.getText()).to.eql(testText);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#setGeometry', function () {
|
||||
const style = new Style();
|
||||
|
||||
it('creates a geometry function from a string', function () {
|
||||
const feature = new Feature();
|
||||
feature.set('myGeom', new Point([0, 0]));
|
||||
style.setGeometry('myGeom');
|
||||
expect(style.getGeometryFunction()(feature)).to.eql(
|
||||
feature.get('myGeom')
|
||||
);
|
||||
});
|
||||
|
||||
it('creates a geometry function from a geometry', function () {
|
||||
const geom = new Point([0, 0]);
|
||||
style.setGeometry(geom);
|
||||
expect(style.getGeometryFunction()()).to.eql(geom);
|
||||
});
|
||||
|
||||
it('returns the configured geometry function', function () {
|
||||
const geom = new Point([0, 0]);
|
||||
style.setGeometry(function () {
|
||||
return geom;
|
||||
});
|
||||
expect(style.getGeometryFunction()()).to.eql(geom);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#getGeometry', function () {
|
||||
it('returns whatever was passed to setGeometry', function () {
|
||||
const style = new Style();
|
||||
style.setGeometry('foo');
|
||||
expect(style.getGeometry()).to.eql('foo');
|
||||
const geom = new Point([1, 2]);
|
||||
style.setGeometry(geom);
|
||||
expect(style.getGeometry()).to.eql(geom);
|
||||
const fn = function () {
|
||||
return geom;
|
||||
};
|
||||
style.setGeometry(fn);
|
||||
expect(style.getGeometry()).to.eql(fn);
|
||||
style.setGeometry(null);
|
||||
expect(style.getGeometry()).to.eql(null);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('toFunction()', function () {
|
||||
const style = new Style();
|
||||
|
||||
it('creates a style function from a single style', function () {
|
||||
const styleFunction = toFunction(style);
|
||||
expect(styleFunction()).to.eql([style]);
|
||||
});
|
||||
|
||||
it('creates a style function from an array of styles', function () {
|
||||
const styleFunction = toFunction([style]);
|
||||
expect(styleFunction()).to.eql([style]);
|
||||
});
|
||||
|
||||
it('passes through a function', function () {
|
||||
const original = function () {
|
||||
return [style];
|
||||
};
|
||||
const styleFunction = toFunction(original);
|
||||
expect(styleFunction).to.be(original);
|
||||
});
|
||||
|
||||
it('throws on (some) unexpected input', function () {
|
||||
expect(function () {
|
||||
toFunction({bogus: 'input'});
|
||||
}).to.throwException();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,114 @@
|
||||
import Fill from '../../../../../src/ol/style/Fill.js';
|
||||
import Stroke from '../../../../../src/ol/style/Stroke.js';
|
||||
import Text from '../../../../../src/ol/style/Text.js';
|
||||
|
||||
describe('ol.style.Text', function () {
|
||||
describe('#constructor', function () {
|
||||
it('uses a default fill style if none passed', function () {
|
||||
const style = new Text();
|
||||
expect(style.getFill().getColor()).to.be('#333');
|
||||
});
|
||||
|
||||
it('uses a provided fill style if one passed', function () {
|
||||
const style = new Text({
|
||||
fill: new Fill({color: '#123456'}),
|
||||
});
|
||||
expect(style.getFill().getColor()).to.be('#123456');
|
||||
});
|
||||
|
||||
it('can always be resetted to no color', function () {
|
||||
const style = new Text();
|
||||
style.getFill().setColor();
|
||||
expect(style.getFill().getColor()).to.be(undefined);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#clone', function () {
|
||||
it('creates a new ol.style.Text', function () {
|
||||
const original = new Text();
|
||||
const clone = original.clone();
|
||||
expect(clone).to.be.an(Text);
|
||||
expect(clone).to.not.be(original);
|
||||
});
|
||||
|
||||
it('copies all values', function () {
|
||||
const original = new Text({
|
||||
font: '12px serif',
|
||||
offsetX: 4,
|
||||
offsetY: 10,
|
||||
scale: 2,
|
||||
rotateWithView: true,
|
||||
rotation: 1.5,
|
||||
text: 'test',
|
||||
textAlign: 'center',
|
||||
textBaseline: 'top',
|
||||
fill: new Fill({
|
||||
color: '#319FD3',
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#319FD3',
|
||||
}),
|
||||
backgroundFill: new Fill({
|
||||
color: 'white',
|
||||
}),
|
||||
backgroundStroke: new Stroke({
|
||||
color: 'black',
|
||||
}),
|
||||
padding: [10, 11, 12, 13],
|
||||
});
|
||||
const clone = original.clone();
|
||||
expect(original.getFont()).to.eql(clone.getFont());
|
||||
expect(original.getOffsetX()).to.eql(clone.getOffsetX());
|
||||
expect(original.getOffsetY()).to.eql(clone.getOffsetY());
|
||||
expect(original.getScale()).to.eql(clone.getScale());
|
||||
expect(original.getRotateWithView()).to.eql(clone.getRotateWithView());
|
||||
expect(original.getRotation()).to.eql(clone.getRotation());
|
||||
expect(original.getText()).to.eql(clone.getText());
|
||||
expect(original.getTextAlign()).to.eql(clone.getTextAlign());
|
||||
expect(original.getTextBaseline()).to.eql(clone.getTextBaseline());
|
||||
expect(original.getStroke().getColor()).to.eql(
|
||||
clone.getStroke().getColor()
|
||||
);
|
||||
expect(original.getFill().getColor()).to.eql(clone.getFill().getColor());
|
||||
expect(original.getBackgroundStroke().getColor()).to.eql(
|
||||
clone.getBackgroundStroke().getColor()
|
||||
);
|
||||
expect(original.getBackgroundFill().getColor()).to.eql(
|
||||
clone.getBackgroundFill().getColor()
|
||||
);
|
||||
expect(original.getPadding()).to.eql(clone.getPadding());
|
||||
});
|
||||
|
||||
it('the clone does not reference the same objects as the original', function () {
|
||||
const original = new Text({
|
||||
fill: new Fill({
|
||||
color: '#319FD3',
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: '#319FD3',
|
||||
}),
|
||||
});
|
||||
const clone = original.clone();
|
||||
expect(original.getFill()).to.not.be(clone.getFill());
|
||||
expect(original.getStroke()).to.not.be(clone.getStroke());
|
||||
|
||||
clone.getFill().setColor('#012345');
|
||||
clone.getStroke().setColor('#012345');
|
||||
expect(original.getFill().getColor()).to.not.eql(
|
||||
clone.getFill().getColor()
|
||||
);
|
||||
expect(original.getStroke().getColor()).to.not.eql(
|
||||
clone.getStroke().getColor()
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#setRotateWithView', function () {
|
||||
it('sets the rotateWithView property', function () {
|
||||
const textStyle = new Text();
|
||||
expect(textStyle.getRotateWithView()).to.eql(undefined);
|
||||
textStyle.setRotateWithView(true);
|
||||
expect(textStyle.getRotateWithView()).to.eql(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user