Lazily create the WebGL helper

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

@@ -5,24 +5,53 @@ import Point from '../../../../../src/ol/geom/Point.js';
 import VectorSource from '../../../../../src/ol/source/Vector.js';
 import View from '../../../../../src/ol/View.js';
 
-describe('ol.layer.Heatmap', function () {
+describe('ol/layer/Heatmap', function () {
   describe('constructor', function () {
+    let target, map;
+    beforeEach(() => {
+      target = document.createElement('div');
+      target.style.width = '300px';
+      target.style.height = '300px';
+      document.body.appendChild(target);
+
+      map = new Map({
+        view: new View({
+          center: [0, 0],
+          resolution: 0.1,
+        }),
+        target: target,
+      });
+    });
+
+    afterEach(() => {
+      map.dispose();
+      document.body.removeChild(target);
+    });
+
     it('can be constructed without arguments', function () {
       const instance = new HeatmapLayer();
       expect(instance).to.be.an(HeatmapLayer);
     });
+
     it('has a default className', function () {
       const layer = new HeatmapLayer({
         source: new VectorSource(),
       });
+      map.addLayer(layer);
+      map.renderSync();
+
       const canvas = layer.getRenderer().helper.getCanvas();
       expect(canvas.className).to.eql('ol-layer');
     });
+
     it('accepts a custom className', function () {
       const layer = new HeatmapLayer({
         source: new VectorSource(),
         className: 'a-class-name',
       });
+      map.addLayer(layer);
+      map.renderSync();
+
       const canvas = layer.getRenderer().helper.getCanvas();
       expect(canvas.className).to.eql('a-class-name');
     });

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

@@ -4,6 +4,7 @@ import View from '../../../../../src/ol/View.js';
 import WebGLHelper from '../../../../../src/ol/webgl/Helper.js';
 import WebGLTileLayer from '../../../../../src/ol/layer/WebGLTile.js';
 import {createCanvasContext2D} from '../../../../../src/ol/dom.js';
+import {getForViewAndSize} from '../../../../../src/ol/extent.js';
 import {getRenderPixel} from '../../../../../src/ol/render.js';
 
 describe('ol/layer/WebGLTile', function () {
@@ -62,7 +63,21 @@ describe('ol/layer/WebGLTile', function () {
 
   it('creates fragment and vertex shaders', function () {
     const compileShaderSpy = sinon.spy(WebGLHelper.prototype, 'compileShader');
-    layer.createRenderer();
+    const renderer = layer.createRenderer();
+    const viewState = map.getView().getState();
+    const size = map.getSize();
+    const frameState = {
+      viewState: viewState,
+      extent: getForViewAndSize(
+        viewState.center,
+        viewState.resolution,
+        viewState.rotation,
+        size
+      ),
+      layerStatesArray: map.getLayerGroup().getLayerStatesArray(),
+      layerIndex: 0,
+    };
+    renderer.prepareFrame(frameState);
     compileShaderSpy.restore();
     expect(compileShaderSpy.callCount).to.be(2);
     expect(compileShaderSpy.getCall(0).args[0].replace(/[ \n]+/g, ' ')).to.be(