Test rendercomplete waits for icon load

test/browser/spec/ol/Map.test.js

@@ -25,6 +25,7 @@ import VectorSource from '../../../../src/ol/source/Vector.js';
 import View from '../../../../src/ol/View.js';
 import WebGLPointsLayer from '../../../../src/ol/layer/WebGLPoints.js';
 import XYZ from '../../../../src/ol/source/XYZ.js';
+import {Icon, Style} from '../../../../src/ol/style.js';
 import {LineString, Point, Polygon} from '../../../../src/ol/geom.js';
 import {TRUE} from '../../../../src/ol/functions.js';
 import {
@@ -403,12 +404,22 @@ describe('ol/Map', function () {
   });
 
   describe('rendercomplete event', function () {
-    let map;
+    let map, target;
+
     beforeEach(function () {
-      const target = document.createElement('div');
+      target = document.createElement('div');
       target.style.width = '100px';
       target.style.height = '100px';
       document.body.appendChild(target);
+    });
+
+    afterEach(function () {
+      disposeMap(map);
+      map.getLayers().forEach((layer) => layer.dispose());
+    });
+
+    describe('renderer ready property', function () {
+      beforeEach(function () {
         map = new Map({
           target: target,
           layers: [
@@ -465,13 +476,6 @@ describe('ol/Map', function () {
         });
       });
 
-    afterEach(function () {
-      document.body.removeChild(map.getTargetElement());
-      map.setTarget(null);
-      map.dispose();
-      map.getLayers().forEach((layer) => layer.dispose());
-    });
-
       it('triggers when all tiles and sources are loaded and faded in', function (done) {
         const layers = map.getLayers().getArray();
         expect(layers[6].getRenderer().ready).to.be(false);
@@ -491,10 +495,9 @@ describe('ol/Map', function () {
           })
         );
       });
+
       it('ignores invisible layers', function (done) {
-      map.getLayers().forEach(function (layer, i) {
-        layer.setVisible(i === 4);
-      });
+        map.getLayers().forEach((layer, i) => layer.setVisible(i === 4));
         map.setView(
           new View({
             center: [0, 0],
@@ -505,6 +508,85 @@ describe('ol/Map', function () {
       });
     });
 
+    describe('icon loading', function () {
+      /** @type {Icon} */
+      let icon;
+      beforeEach(function () {
+        icon = new Icon({
+          src: 'spec/ol/data/dot.png',
+        });
+
+        const delay = 100;
+        // Delay icon change events
+        let states = [{state: icon.getImageState()}];
+        icon.listenImageChange = function (listener) {
+          if (!listener._delay) {
+            listener._delay = (e) => {
+              const key = setTimeout(() => {
+                states.shift();
+                listener.call(this, e);
+              }, delay);
+              Object.assign(states[states.length - 1], {key, listener});
+              states.push({
+                state: Icon.prototype.getImageState.call(this),
+              });
+            };
+          }
+          return Icon.prototype.listenImageChange.call(this, listener._delay);
+        };
+        icon.unlistenImageChange = function (listener) {
+          states = states.filter((state) => {
+            if (state.listener !== listener) {
+              return true;
+            }
+            clearTimeout(listener.key);
+            return false;
+          });
+          const addedListener = listener._delay;
+          delete listener._delay;
+          return Icon.prototype.unlistenImageChange.call(this, addedListener);
+        };
+        icon.getImageState = function () {
+          return states[0].state;
+        };
+      });
+
+      it('waits for icons to load', function (done) {
+        map = new Map({
+          target: target,
+          view: new View({
+            center: [0, 0],
+            resolution: 1,
+          }),
+          layers: [
+            new VectorLayer({
+              source: new VectorSource({
+                features: [new Feature(new Point([0, 0]))],
+              }),
+              style: new Style({
+                image: icon,
+              }),
+            }),
+          ],
+        });
+        let loaded = false;
+        icon.listenImageChange(function (e) {
+          if (e.target.getImageState() === ImageState.LOADED) {
+            loaded = true;
+          }
+        });
+        map.once('rendercomplete', function () {
+          try {
+            expect(loaded).to.be(true);
+            done();
+          } catch (e) {
+            done(e);
+          }
+        });
+      });
+    });
+  });
+
   describe('loadstart/loadend event sequence', function () {
     let map;
     beforeEach(function () {