Test VectorTile layer not ready while loading needed icons

test/browser/spec/ol/layer/vectortile.test.js

@@ -1,9 +1,17 @@
+import Feature from '../../../../../src/ol/Feature.js';
 import GeoJSON from '../../../../../src/ol/format/GeoJSON.js';
+import ImageState from '../../../../../src/ol/ImageState.js';
 import Map from '../../../../../src/ol/Map.js';
 import VectorTileLayer from '../../../../../src/ol/layer/VectorTile.js';
 import VectorTileSource from '../../../../../src/ol/source/VectorTile.js';
 import View from '../../../../../src/ol/View.js';
-import {fromLonLat} from '../../../../../src/ol/proj.js';
+import {Icon, Style} from '../../../../../src/ol/style.js';
+import {Point} from '../../../../../src/ol/geom.js';
+import {create as createTransform} from '../../../../../src/ol/transform.js';
+import {createXYZ} from '../../../../../src/ol/tilegrid.js';
+import {fromLonLat, get as getProjection} from '../../../../../src/ol/proj.js';
+import {getUid} from '../../../../../src/ol/util.js';
+import {isEmpty} from '../../../../../src/ol/obj.js';
 
 describe('ol.layer.VectorTile', function () {
   describe('constructor (defaults)', function () {
@@ -150,4 +158,94 @@ describe('ol.layer.VectorTile', function () {
       });
     });
   });
+
+  describe('#renderFrame', function () {
+    /** @type {VectorTileLayer} */ let layer;
+
+    afterEach(function () {
+      layer.dispose();
+    });
+
+    it('sets ready property to false when icons are loading', function (done) {
+      const zoom = 1;
+      const tileSize = 32;
+      const projection = getProjection('EPSG:3857');
+      const tileGrid = createXYZ({tileSize: tileSize});
+      const resolution = tileGrid.getResolution(zoom);
+      layer = new VectorTileLayer({
+        renderBuffer: 0,
+        source: new VectorTileSource({
+          tileSize: tileSize,
+          tileUrlFunction: (tileCoord) => tileCoord.join('/'),
+          tileLoadFunction: function (tile, url) {
+            const coordinate = tileGrid.getTileCoordCenter(tile.getTileCoord());
+            tile.setFeatures([new Feature(new Point(coordinate))]);
+          },
+        }),
+        style: new Style({
+          image: new Icon({
+            src:
+              'data:image/svg+xml;base64,' +
+              window.btoa(`<svg width="10" height="10" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
+              <rect x="0" y="0" width="1" height="1"/>
+              </svg>`),
+          }),
+        }),
+      });
+      const renderer = layer.getRenderer();
+      const frameState =
+        /** @type {import("../../../../../src/ol/PluggableMap.js").FrameState} */ ({
+          pixelRatio: 1,
+          viewState: {
+            zoom: zoom,
+            resolution: resolution,
+            center: [0, 0],
+            rotation: 0,
+            projection: projection,
+          },
+          size: [2 * tileSize, 2 * tileSize],
+          extent: [-tileSize, -tileSize, tileSize, tileSize].map(
+            (n) => n * resolution
+          ),
+          viewHints: [0, 0],
+          layerStatesArray: layer.getLayerStatesArray(),
+          layerIndex: 0,
+          wantedTiles: {},
+          usedTiles: {},
+          tileQueue: {isKeyQueued: () => true},
+          pixelToCoordinateTransform: createTransform(),
+        });
+
+      renderer.renderFrame(frameState);
+      // Tiles not yet loaded, no icon queued
+      expect(renderer.ready).to.be(true);
+      const source = layer.getSource();
+      const wantedTiles = frameState.wantedTiles[getUid(source)];
+      expect(isEmpty(wantedTiles)).to.be(false);
+
+      // Tiles are loaded synchronously
+      source.tileCache.forEach((tile) => tile.load());
+
+      renderer.renderFrame(frameState);
+      // Tiles loaded, waiting for icon
+      expect(renderer.ready).to.be(false);
+
+      layer
+        .getStyle()
+        .getImage()
+        .listenImageChange(function (evt) {
+          if (evt.target.getImageState() !== ImageState.LOADED) {
+            return;
+          }
+          try {
+            renderer.renderFrame(frameState);
+            // Tiles and icon loaded
+            expect(renderer.ready).to.be(true);
+            done();
+          } catch (e) {
+            done(e);
+          }
+        });
+    });
+  });
 });