diff --git a/test/modules/carto/index.ts b/test/modules/carto/index.ts index 90357b9f855..10371b2b1ea 100644 --- a/test/modules/carto/index.ts +++ b/test/modules/carto/index.ts @@ -9,11 +9,11 @@ import './layers/h3-tileset-2d.spec'; import './layers/raster.spec'; import './layers/raster-tile-layer.spec'; import './layers/spatialjson.spec'; -// import './layers/point-label-layer.spec'; -// import './layers/quadbin-layer.spec'; +import './layers/point-label-layer.spec'; +import './layers/quadbin-layer.spec'; import './layers/quadbin-tile-layer.spec'; import './layers/quadbin-tileset-2d.spec'; -// import './layers/vector-tile-layer.spec'; +import './layers/vector-tile-layer.spec'; import './sources/boundary-query-source.spec'; import './sources/boundary-table-source.spec'; import './sources/h3-query-source.spec'; diff --git a/test/modules/carto/layers/vector-tile-layer.spec.ts b/test/modules/carto/layers/vector-tile-layer.spec.ts index 70dd2a1ce90..34609b1b5fd 100644 --- a/test/modules/carto/layers/vector-tile-layer.spec.ts +++ b/test/modules/carto/layers/vector-tile-layer.spec.ts @@ -1,8 +1,9 @@ import test from 'tape-promise/tape'; -import {VectorTileLayer} from '@deck.gl/carto'; +import {VectorTileLayer, vectorTableSource} from '@deck.gl/carto'; import {geojsonToBinary} from '@loaders.gl/gis'; import {testPickingLayer} from '../../layers/test-picking-layer'; import {WebMercatorViewport} from '@deck.gl/core'; +import {withMockFetchMapsV3} from '../mock-fetch'; const geoJSONData = [ { @@ -22,63 +23,68 @@ const geoJSONData = [ const geoJSONBinaryData = geojsonToBinary(JSON.parse(JSON.stringify(geoJSONData))); test(`VectorTileLayer#picking`, async t => { - class TestVectorTileLayer extends VectorTileLayer { - getTileData() { - return geoJSONBinaryData; + await withMockFetchMapsV3(async () => { + class TestVectorTileLayer extends VectorTileLayer { + static readonly layerName = 'TestVectorTileLayer'; + async getTileData() { + return geoJSONBinaryData; + } } - } - - TestVectorTileLayer.layerName = 'TestVectorTileLayer'; - await testPickingLayer({ - layer: new TestVectorTileLayer({ - id: 'mvt', - binary: true, - data: ['https://json_2/{z}/{x}/{y}.mvt'], - uniqueIdProperty: 'cartodb_id', - autoHighlight: true - }), - viewport: new WebMercatorViewport({ - latitude: 0, - longitude: 0, - zoom: 1 - }), - testCases: [ - { - pickedColor: new Uint8Array([1, 0, 0, 0]), - pickedLayerId: 'mvt-0-0-1-points-circle', - mode: 'hover', - onAfterUpdate: ({layer, subLayers, info}) => { - t.comment('hover over polygon'); - t.ok(info.object, 'info.object is populated'); - t.ok(info.object.properties, 'info.object.properties is populated'); - t.ok(info.object.geometry, 'info.object.geometry is populated'); - t.deepEqual( - info.object.geometry.coordinates, - [-123, 45], - 'picked coordinates are correct' - ); - t.ok( - subLayers.every(l => l.props.highlightedObjectIndex === 0), - 'set sub layers highlightedObjectIndex' - ); + await testPickingLayer({ + layer: new TestVectorTileLayer({ + id: 'mvt', + binary: true, + data: vectorTableSource({ + accessToken: 'XXX', + connectionName: 'carto_dw', + tableName: 'carto-demo-data.demo_tables.test' + }), + uniqueIdProperty: 'cartodb_id', + autoHighlight: true + }), + viewport: new WebMercatorViewport({ + latitude: 0, + longitude: 0, + zoom: 1 + }), + testCases: [ + { + pickedColor: new Uint8Array([1, 0, 0, 0]), + pickedLayerId: 'mvt-0-0-1-points-circle', + mode: 'hover', + onAfterUpdate: ({layer, subLayers, info}) => { + t.comment('hover over polygon'); + t.ok(info.object, 'info.object is populated'); + t.ok(info.object.properties, 'info.object.properties is populated'); + t.ok(info.object.geometry, 'info.object.geometry is populated'); + t.deepEqual( + info.object.geometry.coordinates, + [-123, 45], + 'picked coordinates are correct' + ); + t.ok( + subLayers.every(l => l.props.highlightedObjectIndex === 0), + 'set sub layers highlightedObjectIndex' + ); + } + }, + { + pickedColor: new Uint8Array([0, 0, 0, 0]), + pickedLayerId: '', + mode: 'hover', + onAfterUpdate: ({layer, subLayers, info}) => { + t.comment('pointer leave'); + t.notOk(info.object, 'info.object is not populated'); + t.ok( + subLayers.every(l => l.props.highlightedObjectIndex === -1), + 'cleared sub layers highlightedObjectIndex' + ); + } } - }, - { - pickedColor: new Uint8Array([0, 0, 0, 0]), - pickedLayerId: '', - mode: 'hover', - onAfterUpdate: ({layer, subLayers, info}) => { - t.comment('pointer leave'); - t.notOk(info.object, 'info.object is not populated'); - t.ok( - subLayers.every(l => l.props.highlightedObjectIndex === -1), - 'cleared sub layers highlightedObjectIndex' - ); - } - } - ] - }); + ] + }); + }).catch(t.fail); t.end(); }); diff --git a/test/modules/layers/test-picking-layer.ts b/test/modules/layers/test-picking-layer.ts index 65d9c6641c1..4c7cb8c9cd8 100644 --- a/test/modules/layers/test-picking-layer.ts +++ b/test/modules/layers/test-picking-layer.ts @@ -1,7 +1,12 @@ import {device} from '@deck.gl/test-utils'; import {processPickInfo} from '@deck.gl/core/lib/picking/pick-info'; -import LayerManager from '@deck.gl/core/lib/layer-manager'; -import type {Layer, Viewport, PickingInfo} from '@deck.gl/core'; +import { + type Layer, + type Viewport, + type PickingInfo, + type CompositeLayer, + LayerManager +} from '@deck.gl/core'; // Test getPickingInfo and updateAutoHighlight methods // @param layer {Layer} - a layer instance @@ -63,15 +68,15 @@ export async function testPickingLayer({ onAfterUpdate({ layer, - subLayers: layer.isComposite && layer.getSubLayers(), - info: Array.from(infos.values()).pop() + subLayers: (layer.isComposite && (layer as CompositeLayer).getSubLayers()) || [], + info: Array.from(infos.values()).pop() as PickingInfo }); } layerManager.finalize(); } -async function updateAll(layerManager) { +async function updateAll(layerManager): Promise { return new Promise(resolve => { const onAnimationFrame = () => { if (layerManager.needsUpdate()) {