Additional tests, documentation and example

test/spec/ol/layer/vectortilelayer.test.js

@@ -0,0 +1,37 @@
+goog.provide('ol.test.layer.VectorTile');
+
+describe('ol.layer.VectorTile', function() {
+
+  describe('constructor (defaults)', function() {
+
+    var layer;
+
+    beforeEach(function() {
+      layer = new ol.layer.VectorTile({
+        source: new ol.source.VectorTile({})
+      });
+    });
+
+    afterEach(function() {
+      goog.dispose(layer);
+    });
+
+    it('creates an instance', function() {
+      expect(layer).to.be.a(ol.layer.VectorTile);
+    });
+
+    it('provides default preload', function() {
+      expect(layer.getPreload()).to.be(0);
+    });
+
+    it('provides default useInterimTilesOnError', function() {
+      expect(layer.getUseInterimTilesOnError()).to.be(true);
+    });
+
+  });
+
+});
+
+goog.require('goog.dispose');
+goog.require('ol.layer.VectorTile');
+goog.require('ol.source.VectorTile');

test/spec/ol/render/renderfeature.test.js

@@ -0,0 +1,90 @@
+goog.provide('ol.test.render.Feature');
+
+describe('ol.render.Feature', function() {
+
+  var renderFeature;
+  var type = 'Point';
+  var flatCoordinates = [0, 0];
+  var ends = null;
+  var properties = {foo: 'bar'};
+
+  describe('Constructor', function() {
+    it('creates an instance', function() {
+      renderFeature =
+          new ol.render.Feature(type, flatCoordinates, ends, properties);
+      expect(renderFeature).to.be.a(ol.render.Feature);
+    });
+  });
+
+  describe('#get()', function() {
+    it('returns a single property', function() {
+      expect(renderFeature.get('foo')).to.be('bar');
+    });
+  });
+
+  describe('#getEnds()', function() {
+    it('returns the ends it was created with', function() {
+      expect(renderFeature.getEnds()).to.equal(ends);
+    });
+  });
+
+  describe('#getExtent()', function() {
+    it('returns the correct extent for a point', function() {
+      expect(renderFeature.getExtent()).to.eql([0, 0, 0, 0]);
+    });
+    it('caches the extent', function() {
+      expect(renderFeature.getExtent()).to.equal(renderFeature.extent_);
+    });
+    it('returns the correct extent for a linestring', function() {
+      var feature =
+          new ol.render.Feature('LineString', [-1, -2, 2, 1], null, {});
+      expect(feature.getExtent()).to.eql([-1, -2, 2, 1]);
+    });
+  });
+
+  describe('#getFlatCoordinates()', function() {
+    it('returns the flat coordinates it was created with', function() {
+      expect(renderFeature.getFlatCoordinates()).to.equal(flatCoordinates);
+    });
+  });
+
+  describe('#getGeometry()', function() {
+    it('returns itself as geometry', function() {
+      expect(renderFeature.getGeometry()).to.equal(renderFeature);
+    });
+  });
+
+  describe('#getProperties()', function() {
+    it('returns the properties it was created with', function() {
+      expect(renderFeature.getProperties()).to.equal(properties);
+    });
+  });
+
+  describe('#getSimplifiedGeometry()', function() {
+    it('returns itself as simplified geometry', function() {
+      expect(renderFeature.getSimplifiedGeometry()).to.equal(renderFeature);
+    });
+  });
+
+  describe('#getStride()', function() {
+    it('returns 2', function() {
+      expect(renderFeature.getStride()).to.be(2);
+    });
+  });
+
+  describe('#getStyleFunction()', function() {
+    it('returns undefined', function() {
+      expect(renderFeature.getStyleFunction()).to.be(undefined);
+    });
+  });
+
+  describe('#getType()', function() {
+    it('returns the type it was created with', function() {
+      expect(renderFeature.getType()).to.equal(type);
+    });
+  });
+
+});
+
+
+goog.require('ol.render.Feature');

test/spec/ol/renderer/canvas/canvasvectortilelayerrenderer.test.js

@@ -0,0 +1,128 @@
+goog.provide('ol.test.renderer.canvas.VectorTileLayer');
+
+describe('ol.renderer.canvas.VectorTileLayer', function() {
+
+  describe('constructor', function() {
+
+    it('creates a new instance', function() {
+      var layer = new ol.layer.VectorTile({
+        source: new ol.source.VectorTile({})
+      });
+      var renderer = new ol.renderer.canvas.VectorTileLayer(layer);
+      expect(renderer).to.be.a(ol.renderer.canvas.VectorTileLayer);
+    });
+
+    it('gives precedence to feature styles over layer styles', function() {
+      var target = document.createElement('div');
+      target.style.width = '256px';
+      target.style.height = '256px';
+      document.body.appendChild(target);
+      var map = new ol.Map({
+        view: new ol.View({
+          center: [0, 0],
+          zoom: 0
+        }),
+        target: target
+      });
+      var layerStyle = [new ol.style.Style({
+        text: new ol.style.Text({
+          text: 'layer'
+        })
+      })];
+      var featureStyle = [new ol.style.Style({
+        text: new ol.style.Text({
+          text: 'feature'
+        })
+      })];
+      var feature1 = new ol.Feature(new ol.geom.Point([0, 0]));
+      var feature2 = new ol.Feature(new ol.geom.Point([0, 0]));
+      feature2.setStyle(featureStyle);
+      var TileClass = function() {
+        ol.VectorTile.apply(this, arguments);
+        this.setState('loaded');
+        this.setFeatures([feature1, feature2]);
+        this.setProjection(ol.proj.get('EPSG:3857'));
+      };
+      ol.inherits(TileClass, ol.VectorTile);
+      var source = new ol.source.VectorTile({
+        format: new ol.format.MVT(),
+        tileClass: TileClass,
+        tileGrid: ol.tilegrid.createXYZ()
+      });
+      var layer = new ol.layer.VectorTile({
+        source: source,
+        style: layerStyle
+      });
+      map.addLayer(layer);
+      var spy = sinon.spy(map.getRenderer().getLayerRenderer(layer),
+          'renderFeature');
+      map.renderSync();
+      expect(spy.getCall(0).args[2]).to.be(layerStyle);
+      expect(spy.getCall(1).args[2]).to.be(featureStyle);
+      document.body.removeChild(target);
+    });
+
+  });
+
+  describe('#forEachFeatureAtCoordinate', function() {
+    var layer, renderer, replayGroup;
+    var TileClass = function() {
+      ol.VectorTile.apply(this, arguments);
+      this.setState('loaded');
+      this.setProjection(ol.proj.get('EPSG:3857'));
+      this.replayState_.replayGroup = replayGroup;
+    };
+    ol.inherits(TileClass, ol.VectorTile);
+
+    beforeEach(function() {
+      replayGroup = {};
+      layer = new ol.layer.VectorTile({
+        source: new ol.source.VectorTile({
+          tileClass: TileClass,
+          tileGrid: ol.tilegrid.createXYZ()
+        })
+      });
+      renderer = new ol.renderer.canvas.VectorTileLayer(layer);
+      replayGroup.forEachFeatureAtCoordinate = function(coordinate,
+          resolution, rotation, skippedFeaturesUids, callback) {
+        var feature = new ol.Feature();
+        callback(feature);
+        callback(feature);
+      };
+    });
+
+    it('calls callback once per feature with a layer as 2nd arg', function() {
+      var spy = sinon.spy();
+      var coordinate = [0, 0];
+      var frameState = {
+        layerStates: {},
+        skippedFeatureUids: {},
+        viewState: {
+          resolution: 1,
+          rotation: 0
+        }
+      };
+      frameState.layerStates[goog.getUid(layer)] = {};
+      renderer.renderedTiles_ = [new TileClass([0, 0, -1])];
+      renderer.forEachFeatureAtCoordinate(
+          coordinate, frameState, spy, undefined);
+      expect(spy.callCount).to.be(1);
+      expect(spy.getCall(0).args[1]).to.equal(layer);
+    });
+  });
+
+});
+
+
+goog.require('ol.Feature');
+goog.require('ol.Map');
+goog.require('ol.VectorTile');
+goog.require('ol.View');
+goog.require('ol.format.MVT');
+goog.require('ol.geom.Point');
+goog.require('ol.layer.VectorTile');
+goog.require('ol.proj');
+goog.require('ol.renderer.canvas.VectorTileLayer');
+goog.require('ol.source.VectorTile');
+goog.require('ol.style.Style');
+goog.require('ol.style.Text');

test/spec/ol/source/urltilesource.test.js

@@ -0,0 +1,162 @@
+goog.provide('ol.test.source.UrlTile');
+
+
+describe('ol.source.UrlTile', function() {
+
+  describe('tileUrlFunction', function() {
+
+    var tileSource, tileGrid;
+
+    beforeEach(function() {
+      tileSource = new ol.source.UrlTile({
+        projection: 'EPSG:3857',
+        tileGrid: ol.tilegrid.createXYZ({maxZoom: 6}),
+        url: '{z}/{x}/{y}',
+        wrapX: true
+      });
+      tileGrid = tileSource.getTileGrid();
+    });
+
+    it('returns the expected URL', function() {
+
+      var coordinate = [829330.2064098881, 5933916.615134273];
+      var tileUrl;
+
+      tileUrl = tileSource.tileUrlFunction(
+          tileGrid.getTileCoordForCoordAndZ(coordinate, 0));
+      expect(tileUrl).to.eql('0/0/0');
+
+      tileUrl = tileSource.tileUrlFunction(
+          tileGrid.getTileCoordForCoordAndZ(coordinate, 1));
+      expect(tileUrl).to.eql('1/1/0');
+
+      tileUrl = tileSource.tileUrlFunction(
+          tileGrid.getTileCoordForCoordAndZ(coordinate, 2));
+      expect(tileUrl).to.eql('2/2/1');
+
+      tileUrl = tileSource.tileUrlFunction(
+          tileGrid.getTileCoordForCoordAndZ(coordinate, 3));
+      expect(tileUrl).to.eql('3/4/2');
+
+      tileUrl = tileSource.tileUrlFunction(
+          tileGrid.getTileCoordForCoordAndZ(coordinate, 4));
+      expect(tileUrl).to.eql('4/8/5');
+
+      tileUrl = tileSource.tileUrlFunction(
+          tileGrid.getTileCoordForCoordAndZ(coordinate, 5));
+      expect(tileUrl).to.eql('5/16/11');
+
+      tileUrl = tileSource.tileUrlFunction(
+          tileGrid.getTileCoordForCoordAndZ(coordinate, 6));
+      expect(tileUrl).to.eql('6/33/22');
+
+    });
+
+    describe('wrap x', function() {
+
+      it('returns the expected URL', function() {
+        var projection = tileSource.getProjection();
+        var tileUrl = tileSource.tileUrlFunction(
+            tileSource.getTileCoordForTileUrlFunction(
+                [6, -31, -23], projection));
+        expect(tileUrl).to.eql('6/33/22');
+
+        tileUrl = tileSource.tileUrlFunction(
+            tileSource.getTileCoordForTileUrlFunction(
+                [6, 33, -23], projection));
+        expect(tileUrl).to.eql('6/33/22');
+
+        tileUrl = tileSource.tileUrlFunction(
+            tileSource.getTileCoordForTileUrlFunction(
+                [6, 97, -23], projection));
+        expect(tileUrl).to.eql('6/33/22');
+      });
+
+    });
+
+    describe('crop y', function() {
+
+      it('returns the expected URL', function() {
+        var projection = tileSource.getProjection();
+        var tileUrl = tileSource.tileUrlFunction(
+            tileSource.getTileCoordForTileUrlFunction(
+                [6, 33, 0], projection));
+        expect(tileUrl).to.be(undefined);
+
+        tileUrl = tileSource.tileUrlFunction(
+            tileSource.getTileCoordForTileUrlFunction(
+                [6, 33, -23], projection));
+        expect(tileUrl).to.eql('6/33/22');
+
+        tileUrl = tileSource.tileUrlFunction(
+            tileSource.getTileCoordForTileUrlFunction(
+                [6, 33, -65], projection));
+        expect(tileUrl).to.be(undefined);
+      });
+
+    });
+
+  });
+
+  describe('#getUrls', function() {
+
+    var sourceOptions;
+    var source;
+    var url = 'http://geo.nls.uk/maps/towns/glasgow1857/{z}/{x}/{-y}.png';
+
+    beforeEach(function() {
+      sourceOptions = {
+        tileGrid: ol.tilegrid.createXYZ({
+          extent: ol.proj.get('EPSG:4326').getExtent()
+        })
+      };
+    });
+
+    describe('using a "url" option', function() {
+      beforeEach(function() {
+        sourceOptions.url = url;
+        source = new ol.source.UrlTile(sourceOptions);
+      });
+
+      it('returns the XYZ URL', function() {
+        var urls = source.getUrls();
+        expect(urls).to.be.eql([url]);
+      });
+
+    });
+
+    describe('using a "urls" option', function() {
+      beforeEach(function() {
+        sourceOptions.urls = ['some_xyz_url1', 'some_xyz_url2'];
+        source = new ol.source.UrlTile(sourceOptions);
+      });
+
+      it('returns the XYZ URLs', function() {
+        var urls = source.getUrls();
+        expect(urls).to.be.eql(['some_xyz_url1', 'some_xyz_url2']);
+      });
+
+    });
+
+    describe('using a "tileUrlFunction"', function() {
+      beforeEach(function() {
+        sourceOptions.tileUrlFunction = function() {
+          return 'some_xyz_url';
+        };
+        source = new ol.source.UrlTile(sourceOptions);
+      });
+
+      it('returns null', function() {
+        var urls = source.getUrls();
+        expect(urls).to.be(null);
+      });
+
+    });
+
+  });
+
+});
+
+goog.require('ol.TileCoord');
+goog.require('ol.proj');
+goog.require('ol.source.UrlTile');

test/spec/ol/source/vectortilesource.test.js

@@ -0,0 +1,43 @@
+goog.provide('ol.test.source.VectorTile');
+
+
+describe('ol.source.VectorTile', function() {
+
+  var format = new ol.format.MVT();
+  var source = new ol.source.VectorTile({
+    format: format,
+    tileGrid: ol.tilegrid.createXYZ(),
+    url: '{z}/{x}/{y}.pbf'
+  });
+  var tile;
+
+  describe('constructor', function() {
+    it('sets the format on the instance', function() {
+      expect(source.format_).to.equal(format);
+    });
+    it('uses ol.VectorTile as default tileClass', function() {
+      expect(source.tileClass).to.equal(ol.VectorTile);
+    });
+  });
+
+  describe('#getTile()', function() {
+    it('creates a tile with the correct tile class', function() {
+      tile = source.getTile(0, 0, 0, 1, ol.proj.get('EPSG:3857'));
+      expect(tile).to.be.a(ol.VectorTile);
+    });
+    it('sets the correct tileCoord on the created tile', function() {
+      expect(tile.getTileCoord()).to.eql([0, 0, 0]);
+    });
+    it('fetches tile from cache when requested again', function() {
+      expect(source.getTile(0, 0, 0, 1, ol.proj.get('EPSG:3857')))
+          .to.equal(tile);
+    });
+  });
+
+});
+
+
+goog.require('ol.VectorTile');
+goog.require('ol.format.MVT');
+goog.require('ol.proj');
+goog.require('ol.source.VectorTile');