Add regression test for #4738

test/unit/style/style.test.js

@@ -1,10 +1,12 @@
 'use strict';
 
 const test = require('mapbox-gl-js-test').test;
+const sinon = require('sinon');
 const proxyquire = require('proxyquire');
 const Style = require('../../../src/style/style');
 const SourceCache = require('../../../src/source/source_cache');
 const StyleLayer = require('../../../src/style/style_layer');
+const Transform = require('../../../src/geo/transform');
 const util = require('../../../src/util/util');
 const Evented = require('../../../src/util/evented');
 const window = require('../../../src/util/window');
@@ -1012,6 +1014,67 @@ test('Style#moveLayer', (t) => {
     t.end();
 });
 
+test('Style#setPaintProperty', (t) => {
+    t.test('#4738 postpones source reload until layers have been broadcast to workers', (t) => {
+        const style = new Style(util.extend(createStyleJSON(), {
+            "sources": {
+                "geojson": {
+                    "type": "geojson",
+                    "data": {"type": "FeatureCollection", "features": []}
+                }
+            },
+            "layers": [
+                {
+                    "id": "circle",
+                    "type": "circle",
+                    "source": "geojson"
+                }
+            ]
+        }));
+
+        const tr = new Transform();
+        tr.resize(512, 512);
+
+        style.once('style.load', () => {
+            style.update();
+            style._recalculate(tr.zoom);
+            const sourceCache = style.sourceCaches['geojson'];
+            const source = style.getSource('geojson');
+
+            let begun = false;
+            let styleUpdateCalled = false;
+
+            // once the source has loaded, call SourceCache#update(tr) to load
+            // some initial tiles.
+            source.on('data', (e) => setImmediate(() => {
+                if (!begun && sourceCache.loaded()) {
+                    begun = true;
+                    sinon.stub(sourceCache, 'reload').callsFake(() => {
+                        t.ok(styleUpdateCalled, 'loadTile called before layer data broadcast');
+                        t.end();
+                    });
+
+                    source.setData({"type": "FeatureCollection", "features": []});
+                    style.setPaintProperty('circle', 'circle-color', {type: 'identity', property: 'foo'});
+                }
+
+                if (begun && e.sourceDataType === 'content') {
+                    // setData() worker-side work is complete; simulate an
+                    // animation frame a few ms later, so that this test can
+                    // confirm that SourceCache#reload() isn't called until
+                    // after the next Style#update()
+                    setTimeout(() => {
+                        styleUpdateCalled = true;
+                        style.update();
+                    }, 50);
+                }
+            }));
+        });
+    });
+
+    t.end();
+});
+
 test('Style#setFilter', (t) => {
     function createStyle() {
         return new Style({