Lazily create the WebGL helper

test/browser/spec/ol/renderer/webgl/PointsLayer.test.js

@@ -75,7 +75,7 @@ const hitFragmentShader = `
     gl_FragColor = v_hitColor;
   }`;
 
-describe('ol.renderer.webgl.PointsLayer', function () {
+describe('ol/renderer/webgl/PointsLayer', function () {
   describe('constructor', function () {
     let target;
 
@@ -116,16 +116,16 @@ describe('ol.renderer.webgl.PointsLayer', function () {
         hitVertexShader: hitVertexShader,
         hitFragmentShader: hitFragmentShader,
       });
-      frameState = Object.assign(
-        {
-          size: [2, 2],
-          extent: [-100, -100, 100, 100],
-        },
-        baseFrameState
-      );
+      frameState = Object.assign({}, baseFrameState, {
+        size: [2, 2],
+        extent: [-100, -100, 100, 100],
+        layerStatesArray: [layer.getLayerState()],
+      });
     });
 
     it('calls WebGlHelper#prepareDraw', function () {
+      renderer.prepareFrame(frameState);
+
       const spy = sinon.spy(renderer.helper, 'prepareDraw');
       renderer.prepareFrame(frameState);
       expect(spy.called).to.be(true);
@@ -327,14 +327,12 @@ describe('ol.renderer.webgl.PointsLayer', function () {
         0,
         0
       );
-      const frameState = Object.assign(
-        {
-          extent: [-20, -20, 20, 20],
-          size: [40, 40],
-          coordinateToPixelTransform: transform,
-        },
-        baseFrameState
-      );
+      const frameState = Object.assign({}, baseFrameState, {
+        extent: [-20, -20, 20, 20],
+        size: [40, 40],
+        coordinateToPixelTransform: transform,
+        layerStatesArray: [layer.getLayerState()],
+      });
 
       renderer.prepareFrame(frameState);
       renderer.worker_.addEventListener('message', function () {
@@ -391,15 +389,14 @@ describe('ol.renderer.webgl.PointsLayer', function () {
         0,
         0
       );
-      const frameState = Object.assign(
-        {
-          pixelRatio: 3,
-          extent: [-20, -20, 20, 20],
-          size: [40, 40],
-          coordinateToPixelTransform: transform,
-        },
-        baseFrameState
-      );
+      const frameState = Object.assign({}, baseFrameState, {
+        pixelRatio: 3,
+        extent: [-20, -20, 20, 20],
+        size: [40, 40],
+        coordinateToPixelTransform: transform,
+        layerStatesArray: [layer.getLayerState()],
+      });
+
       let found;
       const cb = function (feature) {
         found = feature;
@@ -446,6 +443,13 @@ describe('ol.renderer.webgl.PointsLayer', function () {
         fragmentShader: simpleFragmentShader,
       });
 
+      const frameState = Object.assign({}, baseFrameState, {
+        size: [2, 2],
+        extent: [-100, -100, 100, 100],
+        layerStatesArray: [layer.getLayerState()],
+      });
+      renderer.prepareFrame(frameState);
+
       const spyHelper = sinon.spy(renderer.helper, 'disposeInternal');
       const spyWorker = sinon.spy(renderer.worker_, 'terminate');
       renderer.disposeInternal();

test/browser/spec/ol/renderer/webgl/TileLayer.test.js

@@ -7,7 +7,7 @@ import {create} from '../../../../../../src/ol/transform.js';
 import {createCanvasContext2D} from '../../../../../../src/ol/dom.js';
 import {get} from '../../../../../../src/ol/proj.js';
 
-describe('ol.renderer.webgl.TileLayer', function () {
+describe('ol/renderer/webgl/TileLayer', function () {
   /** @type {import("../../../../../../src/ol/renderer/webgl/TileLayer.js").default} */
   let renderer;
   /** @type {WebGLTileLayer} */
@@ -74,6 +74,9 @@ describe('ol.renderer.webgl.TileLayer', function () {
   });
 
   it('#renderFrame()', function () {
+    const ready = renderer.prepareFrame(frameState);
+    expect(ready).to.be(true);
+
     const rendered = renderer.renderFrame(frameState);
     expect(rendered).to.be.a(HTMLCanvasElement);
     expect(frameState.tileQueue.getCount()).to.be(1);