Merge branch 'master' into felix/website-mapbox-v3

modules/test-utils/src/index.ts

@@ -18,5 +18,6 @@ export {SnapshotTestRunner} from './snapshot-test-runner';
 // A utility that emulates input events
 export {InteractionTestRunner} from './interaction-test-runner';
 
+export type {LayerTestCase} from './lifecycle-test';
 export type {SnapshotTestCase} from './snapshot-test-runner';
 export type {InteractionTestCase} from './interaction-test-runner';

modules/test-utils/src/lifecycle-test.ts

@@ -150,7 +150,7 @@ type Spy = ReturnType<typeof makeSpy>;
 export type LayerClass<LayerT extends Layer> = {
   new (...args): LayerT;
   layerName: string;
-  defaultProps: Partial<LayerT['props']>;
+  defaultProps: any;
 };
 
 export type LayerTestCase<LayerT extends Layer> = {

test/modules/carto/index.ts

@@ -1,16 +1,16 @@
 import './api/carto-api-error.spec';
 import './api/layer-map.spec';
 // import './api/parseMap.spec';
-import './config.spec';
+// import './config.spec';
 import './utils.spec';
 import './layers/carto-vector-tile.spec';
 import './layers/h3-tile-layer.spec';
 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';

test/modules/core/lib/deck.spec.ts

@@ -233,7 +233,7 @@ test('Deck#resourceManager', async t => {
     device,
     width: 1,
     height: 1,
-    // This is required because the jsdom canvas does not have client width/height
+    // @ts-expect-error This is required because the jsdom canvas does not have client width/height
     autoResizeDrawingBuffer: device.canvasContext.canvas.clientWidth > 0,
 
     viewState: {
@@ -247,7 +247,7 @@ test('Deck#resourceManager', async t => {
     onError: () => null
   });
 
-  function update(props) {
+  function update(props = {}) {
     return new Promise(resolve => {
       deck.setProps({
         ...props,
@@ -257,6 +257,7 @@ test('Deck#resourceManager', async t => {
   }
 
   await update();
+  // @ts-expect-error Accessing private member
   const {resourceManager} = deck.layerManager;
   t.is(layer1.getNumInstances(), 0, 'layer subscribes to global data resource');
   t.ok(resourceManager.contains('cities.json'), 'data url is cached');

test/modules/geo-layers/mvt-layer.spec.ts

@@ -203,7 +203,7 @@ test('ClipExtension', t => {
       },
       onAfterUpdate: ({subLayers}) => {
         for (const layer of subLayers) {
-          const uniforms = layer.getModels()[0].getUniforms();
+          const uniforms = layer.getModels()[0].uniforms;
           if (layer.id.includes('-points-')) {
             t.ok(uniforms.clip_bounds && uniforms.clip_bounds[0] === 0, 'has clip_bounds uniform');
           } else {

test/modules/google-maps/google-maps-overlay.spec.ts

@@ -148,25 +148,27 @@ test.skip('GoogleMapsOverlay#style', t => {
 
   const overlay = new GoogleMapsOverlay({
     style: {zIndex: 10},
-    layers: []
-  });
+    layers: [],
+    onLoad: () => {
+      const deck = overlay._deck;
 
-  overlay.setMap(map);
-  map.emit({type: 'renderingtype_changed'});
-  const deck = overlay._deck;
+      t.is(deck.props.parent.style.zIndex, '10', 'parent zIndex is set');
+      t.is(deck.canvas.style.zIndex, '', 'canvas zIndex is not set');
 
-  t.is(deck.props.parent.style.zIndex, '10', 'parent zIndex is set');
-  t.is(deck.canvas.style.zIndex, '', 'canvas zIndex is not set');
+      overlay.setProps({
+        style: {zIndex: 5}
+      });
+      t.is(deck.props.parent.style.zIndex, '5', 'parent zIndex is set');
+      t.is(deck.canvas.style.zIndex, '', 'canvas zIndex is not set');
 
-  overlay.setProps({
-    style: {zIndex: 5}
-  });
-  t.is(deck.props.parent.style.zIndex, '5', 'parent zIndex is set');
-  t.is(deck.canvas.style.zIndex, '', 'canvas zIndex is not set');
+      overlay.finalize();
 
-  overlay.finalize();
+      t.end();
+    }
+  });
 
-  t.end();
+  overlay.setMap(map);
+  map.emit({type: 'renderingtype_changed'});
 });
 
 function drawPickTest(renderingType) {

test/modules/index.ts

@@ -20,15 +20,15 @@
 
 import './aggregation-layers';
 import './core';
-// import './carto';
+import './carto';
 // import './extensions';
-// import './geo-layers';
+import './geo-layers';
 import './google-maps';
 import './imports-spec';
 import './json';
 // import './jupyter-widget';
 import './layers';
-import './main/bundle';
-// import './mapbox';
+import './mapbox';
 import './mesh-layers';
-// import './react';
+import './react';
+import './main/bundle';

test/modules/layers/bitmap-layer.spec.ts

@@ -24,6 +24,7 @@ test('BitmapLayer#constructor', t => {
         props: {id: 'null', data: null}
       },
       {
+        title: 'positions from 3D bounds',
         updateProps: {
           bounds: [
             [2, 4, 1],
@@ -35,20 +36,21 @@ test('BitmapLayer#constructor', t => {
         onAfterUpdate({layer, oldState}) {
           t.ok(layer.state, 'should update layer state');
           t.deepEqual(
-            layer.getAttributeManager().attributes.positions.value,
+            layer.getAttributeManager()!.attributes.positions.value,
             positionsWithZ,
             'should update positions'
           );
         }
       },
       {
+        title: 'positions from 2D bounds',
         updateProps: {
           bounds: [2, 4, 16, 8]
         },
         onAfterUpdate({layer, oldState}) {
           t.ok(layer.state, 'should update layer state');
           t.deepEqual(
-            layer.getAttributeManager().attributes.positions.value,
+            layer.getAttributeManager()!.attributes.positions.value,
             positions,
             'should update positions'
           );
@@ -68,36 +70,33 @@ test('BitmapLayer#imageCoordinateSystem', t => {
     onError: t.notOk,
     testCases: [
       {
+        title: 'MapView + default imageCoordinateSystem',
         props: {
           bounds: [-180, -90, 180, 90]
         },
         onAfterUpdate({layer}) {
-          t.comment('MapView + default imageCoordinateSystem');
-
           const {coordinateConversion, bounds} = layer.state;
           t.is(coordinateConversion, 0, 'No coordinate conversion');
           t.deepEqual(bounds, [0, 0, 0, 0], 'Default bounds');
         }
       },
       {
+        title: 'MapView + imageCoordinateSystem: CARTESIAN',
         updateProps: {
           _imageCoordinateSystem: COORDINATE_SYSTEM.CARTESIAN
         },
         onAfterUpdate({layer}) {
-          t.comment('MapView + imageCoordinateSystem: CARTESIAN');
-
           const {coordinateConversion, bounds} = layer.state;
           t.is(coordinateConversion, 0, 'No coordinate conversion');
           t.deepEqual(bounds, [0, 0, 0, 0], 'Default bounds');
         }
       },
       {
+        title: 'MapView + imageCoordinateSystem: LNGLAT',
         updateProps: {
           _imageCoordinateSystem: COORDINATE_SYSTEM.LNGLAT
         },
         onAfterUpdate({layer}) {
-          t.comment('MapView + imageCoordinateSystem: LNGLAT');
-
           const {coordinateConversion, bounds} = layer.state;
           t.is(coordinateConversion, -1, 'Convert image coordinate from LNGLAT');
           t.deepEqual(bounds, [-180, -90, 180, 90], 'Generated LNGLAT bounds');
@@ -112,36 +111,33 @@ test('BitmapLayer#imageCoordinateSystem', t => {
     viewport: new GlobeViewport({width: 800, height: 600, latitude: 0, longitude: 0, zoom: 1}),
     testCases: [
       {
+        title: 'GlobeView + default imageCoordinateSystem',
         props: {
           bounds: [0, -30, 45, 0]
         },
         onAfterUpdate({layer}) {
-          t.comment('GlobeView + default imageCoordinateSystem');
-
           const {coordinateConversion, bounds} = layer.state;
           t.is(coordinateConversion, 0, 'No coordinate conversion');
           t.deepEqual(bounds, [0, 0, 0, 0], 'Default bounds');
         }
       },
       {
+        title: 'GlobeView + imageCoordinateSystem: CARTESIAN',
         updateProps: {
           _imageCoordinateSystem: COORDINATE_SYSTEM.CARTESIAN
         },
         onAfterUpdate({layer}) {
-          t.comment('GlobeView + imageCoordinateSystem: CARTESIAN');
-
           const {coordinateConversion, bounds} = layer.state;
           t.is(coordinateConversion, 1, 'Convert image coordinates from WebMercator');
           t.deepEqual(bounds, [256, 211.23850847154438, 320, 256], 'Generated bounds');
         }
       },
       {
+        title: 'GlobeView + imageCoordinateSystem: LNGLAT',
         updateProps: {
           _imageCoordinateSystem: COORDINATE_SYSTEM.LNGLAT
         },
         onAfterUpdate({layer}) {
-          t.comment('GlobeView + imageCoordinateSystem: LNGLAT');
-
           const {coordinateConversion, bounds} = layer.state;
           t.is(coordinateConversion, 0, 'No coordinate conversion');
           t.deepEqual(bounds, [0, 0, 0, 0], 'Default bounds');
@@ -215,10 +211,10 @@ test('BitmapLayer#picking', async t => {
             },
             'info.bitmap populated'
           );
-          const uniforms = layer.getModels()[0].getUniforms();
-          t.is(uniforms.picking_uSelectedColorValid, 1, `auto highlight is set`);
+          const uniforms = layer.getModels()[0].shaderInputs.getUniformValues();
+          t.is(uniforms.picking.isHighlightActive, true, `auto highlight is set`);
           t.deepEqual(
-            uniforms.picking_uSelectedColor,
+            uniforms.picking.highlightedObjectColor,
             [1, 0, 0],
             'highlighted index is set correctly'
           );
@@ -230,8 +226,8 @@ test('BitmapLayer#picking', async t => {
         mode: 'hover',
         onAfterUpdate: ({layer, subLayers, info}) => {
           t.notOk(info.bitmap, 'info.bitmap not populated');
-          const uniforms = layer.getModels()[0].getUniforms();
-          t.is(uniforms.picking_uSelectedColorValid, 0, `auto highlight is cleared`);
+          const uniforms = layer.getModels()[0].shaderInputs.getUniformValues();
+          t.is(uniforms.picking.isHighlightActive, false, `auto highlight is cleared`);
         }
       }
     ]

test/modules/layers/core-layers.spec.ts

@@ -73,7 +73,7 @@ test('ScatterplotLayer', t => {
     onBeforeUpdate: ({testCase}) => t.comment(testCase.title),
     onAfterUpdate: ({layer}) => {
       t.is(
-        layer.state.model.getUniforms().radiusScale,
+        layer.getModels()[0].uniforms.radiusScale,
         layer.props.radiusScale,
         'should update radiusScale'
       );
@@ -113,7 +113,7 @@ test('PointCloudLayer', t => {
     onBeforeUpdate: ({testCase}) => t.comment(testCase.title),
     onAfterUpdate: ({layer}) => {
       t.is(
-        layer.state.model.getUniforms().pointSize,
+        layer.getModels()[0].uniforms.pointSize,
         layer.props.radiusPixels,
         'should update pointSize'
       );
@@ -215,7 +215,7 @@ test('PathLayer', t => {
     onBeforeUpdate: ({testCase}) => t.comment(testCase.title),
     onAfterUpdate: ({layer}) => {
       t.is(
-        layer.state.model.getUniforms().widthMinPixels,
+        layer.getModels()[0].uniforms.widthMinPixels,
         layer.props.widthMinPixels,
         'should update widthMinPixels'
       );

test/modules/layers/geojson-layer.spec.ts

@@ -256,15 +256,15 @@ test('GeoJsonLayer#picking', async t => {
           t.is(info.object.geometry.type, 'Point', 'info.object populated');
 
           for (const subLayer of subLayers) {
-            const uniforms = subLayer.getModels()[0].getUniforms();
+            const uniforms = subLayer.getModels()[0].shaderInputs.getUniformValues();
             t.is(
-              uniforms.picking_uSelectedColorValid,
-              subLayer.id === 'geojson-points-circle' ? 1 : 0,
+              uniforms.picking.isHighlightActive,
+              subLayer.id === 'geojson-points-circle',
               `auto highlight is set for ${subLayer.id}`
             );
-            if (uniforms.picking_uSelectedColorValid) {
+            if (uniforms.picking.isHighlightActive) {
               t.deepEqual(
-                uniforms.picking_uSelectedColor,
+                uniforms.picking.highlightedObjectColor,
                 [1, 0, 0],
                 'highlighted index is set correctly'
               );
@@ -283,15 +283,15 @@ test('GeoJsonLayer#picking', async t => {
           t.is(info.object.geometry.type, 'Point', 'info.object populated');
 
           for (const subLayer of subLayers) {
-            const uniforms = subLayer.getModels()[0].getUniforms();
+            const uniforms = subLayer.getModels()[0].shaderInputs.getUniformValues();
             t.is(
-              uniforms.picking_uSelectedColorValid,
-              subLayer.id === 'geojson-points-circle' ? 1 : 0,
+              uniforms.picking.isHighlightActive,
+              subLayer.id === 'geojson-points-circle',
               `auto highlight is set for ${subLayer.id}`
             );
-            if (uniforms.picking_uSelectedColorValid) {
+            if (uniforms.picking.isHighlightActive) {
               t.deepEqual(
-                uniforms.picking_uSelectedColor,
+                uniforms.picking.highlightedObjectColor,
                 [2, 0, 0],
                 'highlighted index is set correctly'
               );
@@ -310,15 +310,15 @@ test('GeoJsonLayer#picking', async t => {
           t.is(info.object.geometry.type, 'Polygon', 'info.object populated');
 
           for (const subLayer of subLayers) {
-            const uniforms = subLayer.getModels()[0].getUniforms();
+            const uniforms = subLayer.getModels()[0].shaderInputs.getUniformValues();
             t.is(
-              uniforms.picking_uSelectedColorValid,
-              subLayer.id === 'geojson-points-circle' ? 0 : 1,
+              uniforms.picking.isHighlightActive,
+              subLayer.id !== 'geojson-points-circle',
               `auto highlight is set for ${subLayer.id}`
             );
-            if (uniforms.picking_uSelectedColorValid) {
+            if (uniforms.picking.isHighlightActive) {
               t.deepEqual(
-                uniforms.picking_uSelectedColor,
+                uniforms.picking.highlightedObjectColor,
                 [6, 0, 0],
                 'highlighted index is set correctly'
               );
@@ -336,10 +336,10 @@ test('GeoJsonLayer#picking', async t => {
           t.notOk(info.object, 'info.object is null');
 
           for (const subLayer of subLayers) {
-            const uniforms = subLayer.getModels()[0].getUniforms();
+            const uniforms = subLayer.getModels()[0].shaderInputs.getUniformValues();
             t.is(
-              uniforms.picking_uSelectedColorValid,
-              0,
+              uniforms.picking.isHighlightActive,
+              false,
               `auto highlight is set for ${subLayer.id}`
             );
           }