Merge 011e3fa into 67cdd2f

test/modules/core/lib/attribute-transition-utils.spec.js

@@ -0,0 +1,74 @@
+import test from 'tape-catch';
+import Attribute from '@deck.gl/core/lib/attribute';
+import {getShaders} from '@deck.gl/core/lib/attribute-transition-utils';
+import {gl} from '@deck.gl/test-utils';
+
+function cleanShader(source) {
+  return source
+    .split(';')
+    .map(line => line.trim().replace(/\s+/g, ' '))
+    .join('\n');
+}
+
+test('AttributeTransitionManager#getShaders', t => {
+  const transitions = {
+    instancePositions: {
+      attribute: new Attribute(gl, {
+        id: 'instancePositions',
+        size: 3,
+        accessor: 'getPosition'
+      })
+    },
+    instanceSizes: {
+      attribute: new Attribute(gl, {
+        id: 'instanceSizes',
+        size: 1,
+        accessor: 'getSize'
+      })
+    }
+  };
+
+  const result = getShaders(transitions);
+
+  t.is(
+    cleanShader(result.vs),
+    cleanShader(`
+    #define SHADER_NAME feedback-vertex-shader
+    attribute vec3 instancePositionsFrom;
+    attribute vec3 instancePositionsTo;
+    attribute float instanceSizesFrom;
+    attribute float instanceSizesTo;
+    uniform float instancePositionsTime;
+    uniform float instanceSizesTime;
+    varying vec3 instancePositions;
+    varying float instanceSizes;
+
+    void main(void) {
+      instancePositions = mix(instancePositionsFrom, instancePositionsTo, instancePositionsTime);
+    instanceSizes = mix(instanceSizesFrom, instanceSizesTo, instanceSizesTime);
+      gl_Position = vec4(0.0);
+    }
+  `),
+    'returns correct vertex shader'
+  );
+
+  t.is(
+    cleanShader(result.fs),
+    cleanShader(`
+    #define SHADER_NAME feedback-fragment-shader
+    precision highp float;
+
+    varying vec3 instancePositions;
+    varying float instanceSizes;
+
+    void main(void) {
+      gl_FragColor = vec4(0.0);
+    }
+  `),
+    'returns correct fragment shader'
+  );
+
+  t.deepEquals(result.varyings, ['instancePositions', 'instanceSizes'], 'returns correct varyings');
+
+  t.end();
+});

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

@@ -1,5 +1,5 @@
 import test from 'tape-catch';
-import {Deck} from '@deck.gl/core';
+import {Deck, log} from '@deck.gl/core';
 import {ScatterplotLayer} from '@deck.gl/layers';
 import {gl} from '@deck.gl/test-utils';
 
@@ -55,7 +55,10 @@ test('Deck#constructor', t => {
   t.pass('Deck constructor did not throw');
 });
 
-test('Deck#picking', t => {
+test('Deck#rendering, picking, logging', t => {
+  // Test logging functionalities
+  log.priority = 4;
+
   const deck = new Deck({
     gl,
     width: 1,
@@ -77,7 +80,7 @@ test('Deck#picking', t => {
       })
     ],
 
-    onLoad: () => {
+    onAfterRender: () => {
       const info = deck.pickObject({x: 0, y: 0});
       t.is(info && info.index, 1, 'Picked object');
 
@@ -88,6 +91,8 @@ test('Deck#picking', t => {
       t.is(infos.length, 1, 'Picked objects');
 
       deck.finalize();
+      log.priority = 0;
+
       t.end();
     }
   });

test/modules/core/lib/index.js

@@ -22,6 +22,7 @@ import './base-attribute.spec';
 import './attribute.spec';
 import './attribute-manager.spec';
 import './attribute-transition-manager.spec';
+import './attribute-transition-utils.spec';
 import './deck.spec';
 import './deck-picker.spec';
 import './layer.spec';

test/modules/index.js

@@ -25,13 +25,13 @@ import './layers';
 import './aggregation-layers';
 import './geo-layers';
 
+import './mapbox';
 import './json';
 import './react';
 import './jupyter-widget';
 
 if (typeof document !== 'undefined') {
   // Tests currently only work in browser
-  require('./react/deckgl.spec');
   require('./json/json-render.spec');
 
   require('./main/bundle');
@@ -48,6 +48,7 @@ if (typeof document !== 'undefined') {
   global.navigator = dom.window.navigator;
   global.document = dom.window.document;
   global.Element = dom.window.Element;
+  global.__JSDOM__ = true;
 
   const {gl} = require('@deck.gl/test-utils');
   // Create a dummy canvas for the headless gl context

test/modules/mapbox/index.js

@@ -0,0 +1 @@
+import './mapbox-layer.spec';

test/modules/mapbox/mapbox-layer.spec.js

@@ -0,0 +1,170 @@
+import test from 'tape-catch';
+
+import {Deck} from '@deck.gl/core';
+import {ScatterplotLayer} from '@deck.gl/layers';
+import {MapboxLayer} from '@deck.gl/mapbox';
+import {gl} from '@deck.gl/test-utils';
+
+class MockMapboxMap {
+  constructor(opts) {
+    this.opts = opts;
+    this._callbacks = {};
+    this._layers = {};
+  }
+
+  on(event, cb) {
+    this._callbacks[event] = this._callbacks[event] || [];
+    this._callbacks[event].push(cb);
+  }
+
+  emit(event) {
+    if (!this._callbacks[event]) {
+      return;
+    }
+    for (const func of this._callbacks[event]) {
+      func();
+    }
+  }
+
+  addLayer(layer) {
+    this._layers[layer.id] = layer;
+    layer.onAdd(this, gl);
+  }
+
+  removeLayer(layer) {
+    delete this._layers[layer.id];
+    layer.onRemove();
+  }
+
+  triggerRepaint() {
+    for (const id in this._layers) {
+      this._layers[id].render(gl);
+    }
+  }
+
+  getCenter() {
+    return this.opts.center;
+  }
+  getZoom() {
+    return this.opts.zoom;
+  }
+  getPitch() {
+    return this.opts.pitch || 0;
+  }
+  getBearing() {
+    return this.opts.bearing || 0;
+  }
+}
+
+test('MapboxLayer#onAdd, onRemove, setProps', t => {
+  const layers = Array.from(
+    {length: 2},
+    (_, i) =>
+      new MapboxLayer({
+        id: `scatterplot-layer-${i}`,
+        type: ScatterplotLayer,
+        data: [],
+        getPosition: d => d.position,
+        getRadius: 10,
+        getFillColor: [255, 0, 0]
+      })
+  );
+
+  const map = new MockMapboxMap({
+    center: {lng: -122.45, lat: 37.78},
+    zoom: 12
+  });
+
+  t.ok(layers[0] && layers[1], 'MapboxLayer constructor does not throw');
+
+  map.addLayer(layers[0]);
+  const {deck} = layers[0];
+
+  t.ok(deck, 'Deck is initialized');
+  t.ok(
+    deck.props.layers.find(
+      l => l.id === 'scatterplot-layer-0' && l.constructor === ScatterplotLayer
+    ),
+    'Layer is added to deck'
+  );
+
+  t.deepEqual(
+    deck.props.viewState,
+    {
+      longitude: -122.45,
+      latitude: 37.78,
+      zoom: 12,
+      bearing: 0,
+      pitch: 0
+    },
+    'viewState is set correctly'
+  );
+
+  map.removeLayer(layers[0]);
+  t.is(deck.props.layers.length, 0, 'Layer is removed from deck');
+
+  map.addLayer(layers[1]);
+  t.is(deck, layers[1].deck, 'Deck is reused');
+  t.is(deck.props.layers[0].props.getRadius, 10, 'Layer is added');
+
+  layers[1].setProps({
+    getRadius: 20
+  });
+
+  t.is(deck.props.layers[0].props.getRadius, 20, 'Layer is updated');
+
+  map.emit('render');
+  t.notOk(deck.layerManager, 'Deck is waiting initialization');
+  t.pass('Map render does not throw');
+
+  deck.props.onLoad = () => {
+    map.emit('render');
+    t.pass('Map render does not throw');
+
+    map.emit('remove');
+    t.notOk(deck.layerManager, 'Deck is finalized');
+
+    t.end();
+  };
+});
+
+test('MapboxLayer#external Deck', t => {
+  const deck = new Deck({
+    gl,
+    viewState: {
+      longitude: 0,
+      latitude: 0,
+      zoom: 1
+    },
+    layers: [
+      new ScatterplotLayer({
+        id: 'scatterplot-layer-0',
+        data: [],
+        getPosition: d => d.position,
+        getRadius: 10,
+        getFillColor: [255, 0, 0]
+      })
+    ]
+  });
+
+  const layer = new MapboxLayer({id: 'scatterplot-layer-0', deck});
+
+  const map = new MockMapboxMap({
+    center: {lng: -122.45, lat: 37.78},
+    zoom: 12
+  });
+
+  deck.props.onLoad = () => {
+    map.addLayer(layer);
+    t.is(layer.deck, deck, 'Used external Deck instance');
+
+    map.emit('render');
+    t.pass('Map render does not throw');
+
+    map.emit('remove');
+    t.ok(deck.layerManager, 'External Deck should not be finalized with map');
+
+    deck.finalize();
+    t.end();
+  };
+});