Texture Unit Tests via Skia-Canvas (#6944)

* Enable loading of texture assets in unit tests (#6928) * Update package.json and import statements * Refactor asset loading test in AssetRegistry --------- Co-authored-by: Will Eastcott <will@playcanvas.com>
playcanvas · Sep 17, 2024 · f0be74f · f0be74f
1 parent 394c689
commit f0be74f
Show file tree

Hide file tree

Showing 29 changed files with 810 additions and 143 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -69,7 +69,6 @@
     "@babel/core": "^7.24.4",
     "@babel/eslint-parser": "^7.25.1",
     "@babel/preset-env": "^7.24.4",
-    "@playcanvas/canvas-mock": "^1.0.1",
     "@playcanvas/eslint-config": "^2.0.2",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-node-resolve": "^15.2.3",
@@ -96,6 +95,7 @@
     "rollup-plugin-visualizer": "^5.12.0",
     "serve": "^14.2.2",
     "sinon": "^18.0.0",
+    "skia-canvas": "^1.0.2",
     "typedoc": "^0.26.3",
     "typedoc-plugin-mdn-links": "^3.2.2",
     "typescript": "^5.5.3",

diff --git a/test/core/math/quat.test.mjs b/test/core/math/quat.test.mjs
@@ -504,7 +504,7 @@ describe('Quat', function () {
             [1, 2, 3],
             [10, 10, 0]
         ].forEach(([x, y, z]) => {
-            it(`sets the quaternion from ${x}°, ${y}°, ${z}°`, () => {
+            it(`sets the quaternion from ${x}°, ${y}°, ${z}°`, function () {
                 const q1 = new Quat();
                 const q2 = new Quat();
                 const q3 = new Quat();

diff --git a/test/fixtures.mjs b/test/fixtures.mjs
@@ -1,12 +1,16 @@
+import globalJsdom from 'global-jsdom';
 import handler from 'serve-handler';
 import http from 'http';
 import XMLHttpRequest from 'xhr2';
-
-import 'global-jsdom/register';
-
+import { Image } from 'skia-canvas';
 let server;
 
 export const mochaGlobalSetup = () => {
+    globalJsdom(undefined, {
+        resources: 'usable'
+    });
+    globalThis.Image = Image;
+
     // Provide a polyfill for XMLHttpRequest required by the engine
     global.XMLHttpRequest = XMLHttpRequest;
 

diff --git a/test/framework/anim/controller/anim-controller.test.mjs b/test/framework/anim/controller/anim-controller.test.mjs
@@ -9,16 +9,16 @@ import { AnimCurve } from '../../../../src/framework/anim/evaluator/anim-curve.j
 import { INTERPOLATION_LINEAR } from '../../../../src/framework/anim/constants.js';
 import { ANIM_LESS_THAN } from '../../../../src/framework/anim/controller/constants.js';
 import { NullGraphicsDevice } from '../../../../src/platform/graphics/null/null-graphics-device.js';
-import { HTMLCanvasElement } from '@playcanvas/canvas-mock';
+import { Canvas } from 'skia-canvas';
 import { expect } from 'chai';
 
 describe('AnimController', function () {
 
     let app;
     let controller;
 
-    beforeEach(() => {
-        const canvas = new HTMLCanvasElement(500, 500);
+    beforeEach(function () {
+        const canvas = new Canvas(500, 500);
         app = new Application(canvas, { graphicsDevice: new NullGraphicsDevice(canvas) });
         const states = [
             {
@@ -99,7 +99,7 @@ describe('AnimController', function () {
         controller.assignAnimation('Other State 2', new AnimTrack('otherState2Track', 4, inputs, outputs, curves), 1, true);
     });
 
-    afterEach(() => {
+    afterEach(function () {
         app.destroy();
     });
 

diff --git a/test/framework/anim/evaluator/anim-clip.test.mjs b/test/framework/anim/evaluator/anim-clip.test.mjs
@@ -9,7 +9,7 @@ import { expect } from 'chai';
 describe('AnimClip', function () {
     let animClip;
 
-    beforeEach(() => {
+    beforeEach(function () {
         const curves = [new AnimCurve(['path/to/entity'], 0, 0, INTERPOLATION_LINEAR)];
         const inputs = [new AnimData(1, [0, 1, 2])];
         const outputs = [new AnimData(3, [0, 0, 0, 1, 2, 3, 2, 4, 6])];

diff --git a/test/framework/anim/evaluator/anim-evaluator.test.mjs b/test/framework/anim/evaluator/anim-evaluator.test.mjs
@@ -10,14 +10,14 @@ import { DefaultAnimBinder } from '../../../../src/framework/anim/binder/default
 import { GraphNode } from '../../../../src/scene/graph-node.js';
 import { NullGraphicsDevice } from '../../../../src/platform/graphics/null/null-graphics-device.js';
 
-import { HTMLCanvasElement } from '@playcanvas/canvas-mock';
+import { Canvas } from 'skia-canvas';
 
 import { expect } from 'chai';
 
 describe('AnimEvaluator', function () {
 
     it('AnimEvaluator: update with clip blending', function () {
-        const canvas = new HTMLCanvasElement(500, 500);
+        const canvas = new Canvas(500, 500);
         const app = new Application(canvas, { graphicsDevice: new NullGraphicsDevice(canvas) });
 
         // build the graph to be animated
@@ -90,7 +90,7 @@ describe('AnimEvaluator', function () {
     });
 
     it('AnimEvaluator: update without clip blending', function () {
-        const canvas = new HTMLCanvasElement(500, 500);
+        const canvas = new Canvas(500, 500);
         const app = new Application(canvas, { graphicsDevice: new NullGraphicsDevice(canvas) });
 
         // build the graph to be animated

diff --git a/test/framework/application.test.mjs b/test/framework/application.test.mjs
@@ -14,7 +14,7 @@ import { ScriptRegistry } from '../../src/framework/script/script-registry.js';
 import { XrManager } from '../../src/framework/xr/xr-manager.js';
 import { NullGraphicsDevice } from '../../src/platform/graphics/null/null-graphics-device.js';
 
-import { HTMLCanvasElement } from '@playcanvas/canvas-mock';
+import { Canvas } from 'skia-canvas';
 
 import { expect } from 'chai';
 
@@ -23,7 +23,7 @@ describe('Application', function () {
     describe('#constructor', function () {
 
         it('support no options', function () {
-            const canvas = new HTMLCanvasElement(500, 500);
+            const canvas = new Canvas(500, 500);
             const app = new Application(canvas, { graphicsDevice: new NullGraphicsDevice(canvas) });
 
             expect(app.assets).to.be.instanceOf(AssetRegistry);
@@ -56,7 +56,7 @@ describe('Application', function () {
     describe('#destroy', function () {
 
         it('destroys the application', function () {
-            const canvas = new HTMLCanvasElement(500, 500);
+            const canvas = new Canvas(500, 500);
             const app = new Application(canvas, { graphicsDevice: new NullGraphicsDevice(canvas) });
 
             app.destroy();

diff --git a/test/framework/asset/asset-list-loader.test.mjs b/test/framework/asset/asset-list-loader.test.mjs
@@ -3,7 +3,7 @@ import { AssetListLoader } from '../../../src/framework/asset/asset-list-loader.
 import { Asset } from '../../../src/framework/asset/asset.js';
 import { NullGraphicsDevice } from '../../../src/platform/graphics/null/null-graphics-device.js';
 
-import { HTMLCanvasElement } from '@playcanvas/canvas-mock';
+import { Canvas } from 'skia-canvas';
 
 import { expect } from 'chai';
 
@@ -12,12 +12,12 @@ describe('AssetListLoader', function () {
     let app;
     const assetPath = 'http://localhost:3000/test/test-assets/';
 
-    beforeEach(() => {
-        const canvas = new HTMLCanvasElement(500, 500);
+    beforeEach(function () {
+        const canvas = new Canvas(500, 500);
         app = new Application(canvas, { graphicsDevice: new NullGraphicsDevice(canvas) });
     });
 
-    afterEach(() => {
+    afterEach(function () {
         app.destroy();
     });
 

diff --git a/test/framework/asset/asset-localized.test.mjs b/test/framework/asset/asset-localized.test.mjs
@@ -3,20 +3,20 @@ import { Application } from '../../../src/framework/application.js';
 import { Asset } from '../../../src/framework/asset/asset.js';
 import { NullGraphicsDevice } from '../../../src/platform/graphics/null/null-graphics-device.js';
 
-import { HTMLCanvasElement } from '@playcanvas/canvas-mock';
+import { Canvas } from 'skia-canvas';
 
 import { expect } from 'chai';
 
 describe('LocalizedAsset', function () {
 
     let app;
 
-    beforeEach(() => {
-        const canvas = new HTMLCanvasElement(500, 500);
+    beforeEach(function () {
+        const canvas = new Canvas(500, 500);
         app = new Application(canvas, { graphicsDevice: new NullGraphicsDevice(canvas) });
     });
 
-    afterEach(() => {
+    afterEach(function () {
         app.destroy();
     });
 

diff --git a/test/framework/asset/asset-registry.test.mjs b/test/framework/asset/asset-registry.test.mjs
@@ -3,10 +3,11 @@ import { Asset } from '../../../src/framework/asset/asset.js';
 import { AssetRegistry } from '../../../src/framework/asset/asset-registry.js';
 import { GlbContainerResource } from '../../../src/framework/parsers/glb-container-resource.js';
 import { ResourceLoader } from '../../../src/framework/handlers/loader.js';
+import { Texture } from '../../../src/platform/graphics/texture.js';
 import { http, Http } from '../../../src/platform/net/http.js';
 import { NullGraphicsDevice } from '../../../src/platform/graphics/null/null-graphics-device.js';
 
-import { HTMLCanvasElement } from '@playcanvas/canvas-mock';
+import { Canvas } from 'skia-canvas';
 
 import { expect } from 'chai';
 import { restore, spy } from 'sinon';
@@ -16,14 +17,14 @@ describe('AssetRegistry', function () {
     let app;
     let retryDelay;
 
-    beforeEach(() => {
+    beforeEach(function () {
         retryDelay = Http.retryDelay;
         Http.retryDelay = 1;
-        const canvas = new HTMLCanvasElement(500, 500);
+        const canvas = new Canvas(500, 500);
         app = new Application(canvas, { graphicsDevice: new NullGraphicsDevice(canvas) });
     });
 
-    afterEach(() => {
+    afterEach(function () {
         app.destroy();
         Http.retryDelay = retryDelay;
         restore();
@@ -320,6 +321,15 @@ describe('AssetRegistry', function () {
             });
         });
 
+        it('loads texture assets', (done) => {
+            app.assets.loadFromUrl(`${assetPath}test.png`, 'texture', (err, asset) => {
+                expect(err).to.be.null;
+                expect(asset).to.be.instanceof(Asset);
+                expect(asset.resource).to.be.instanceof(Texture);
+                done();
+            });
+        });
+
     });
 
     describe('#remove', function () {

diff --git a/test/framework/asset/asset.test.mjs b/test/framework/asset/asset.test.mjs
@@ -2,20 +2,20 @@ import { Application } from '../../../src/framework/application.js';
 import { Asset } from '../../../src/framework/asset/asset.js';
 import { NullGraphicsDevice } from '../../../src/platform/graphics/null/null-graphics-device.js';
 
-import { HTMLCanvasElement } from '@playcanvas/canvas-mock';
+import { Canvas } from 'skia-canvas';
 
 import { expect } from 'chai';
 
 describe('Asset', function () {
 
     let app;
 
-    beforeEach(() => {
-        const canvas = new HTMLCanvasElement(500, 500);
+    beforeEach(function () {
+        const canvas = new Canvas(500, 500);
         app = new Application(canvas, { graphicsDevice: new NullGraphicsDevice(canvas) });
     });
 
-    afterEach(() => {
+    afterEach(function () {
         app.destroy();
     });
 

diff --git a/test/framework/components/element/component.test.mjs b/test/framework/components/element/component.test.mjs
@@ -3,19 +3,19 @@ import { Application } from '../../../../src/framework/application.js';
 import { Entity } from '../../../../src/framework/entity.js';
 import { NullGraphicsDevice } from '../../../../src/platform/graphics/null/null-graphics-device.js';
 
-import { HTMLCanvasElement } from '@playcanvas/canvas-mock';
+import { Canvas } from 'skia-canvas';
 
 import { expect } from 'chai';
 
 describe('ElementComponent', function () {
     let app;
 
-    beforeEach(() => {
-        const canvas = new HTMLCanvasElement(500, 500);
+    beforeEach(function () {
+        const canvas = new Canvas(500, 500);
         app = new Application(canvas, { graphicsDevice: new NullGraphicsDevice(canvas) });
     });
 
-    afterEach(() => {
+    afterEach(function () {
         app.destroy();
     });
 

diff --git a/test/framework/components/element/draworder.test.mjs b/test/framework/components/element/draworder.test.mjs
@@ -3,15 +3,16 @@ import { Entity } from '../../../../src/framework/entity.js';
 import { NullGraphicsDevice } from '../../../../src/platform/graphics/null/null-graphics-device.js';
 import { ScreenComponent } from '../../../../src/framework/components/screen/component.js';
 
-import { HTMLCanvasElement } from '@playcanvas/canvas-mock';
+import { Canvas } from 'skia-canvas';
 
 import { expect } from 'chai';
 
 describe('ElementComponent Draw Order', function () {
     let app;
 
     beforeEach(function () {
-        const canvas = new HTMLCanvasElement(500, 500);
+        const canvas = new Canvas(500, 500);
+        canvas.getBoundingClientRect = () => ({ left: 0, top: 0, width: 500, height: 500 });
         app = new Application(canvas, { graphicsDevice: new NullGraphicsDevice(canvas) });
     });
 

diff --git a/test/framework/components/element/maks.test.mjs b/test/framework/components/element/maks.test.mjs
@@ -2,15 +2,16 @@ import { Application } from '../../../../src/framework/application.js';
 import { Entity } from '../../../../src/framework/entity.js';
 import { NullGraphicsDevice } from '../../../../src/platform/graphics/null/null-graphics-device.js';
 
-import { HTMLCanvasElement } from '@playcanvas/canvas-mock';
+import { Canvas } from 'skia-canvas';
 
 import { expect } from 'chai';
 
 describe('ElementComponent Masks', function () {
     let app;
 
     beforeEach(function () {
-        const canvas = new HTMLCanvasElement(500, 500);
+        const canvas = new Canvas(500, 500);
+        canvas.getBoundingClientRect = () => ({ left: 0, top: 0, width: 500, height: 500 });
         app = new Application(canvas, { graphicsDevice: new NullGraphicsDevice(canvas) });
     });
 

diff --git a/test/framework/components/layout-group/component.test.mjs b/test/framework/components/layout-group/component.test.mjs
@@ -3,7 +3,7 @@ import { Application } from '../../../../src/framework/application.js';
 import { Entity } from '../../../../src/framework/entity.js';
 import { NullGraphicsDevice } from '../../../../src/platform/graphics/null/null-graphics-device.js';
 
-import { HTMLCanvasElement } from '@playcanvas/canvas-mock';
+import { Canvas } from 'skia-canvas';
 
 import { expect } from 'chai';
 import { restore, spy, stub } from 'sinon';
@@ -31,8 +31,8 @@ describe('LayoutGroupComponent', function () {
         return entity;
     };
 
-    beforeEach(() => {
-        const canvas = new HTMLCanvasElement(500, 500);
+    beforeEach(function () {
+        const canvas = new Canvas(500, 500);
         app = new Application(canvas, { graphicsDevice: new NullGraphicsDevice(canvas) });
         system = app.systems.layoutgroup;
 
@@ -51,7 +51,7 @@ describe('LayoutGroupComponent', function () {
         spy(entity0_0_0.layoutgroup, 'reflow');
     });
 
-    afterEach(() => {
+    afterEach(function () {
         restore();
         app.destroy();
     });

diff --git a/test/framework/components/layout-group/layout-calculator.test.mjs b/test/framework/components/layout-group/layout-calculator.test.mjs
@@ -8,7 +8,7 @@ import { Vec2 } from '../../../../src/core/math/vec2.js';
 import { Vec4 } from '../../../../src/core/math/vec4.js';
 import { NullGraphicsDevice } from '../../../../src/platform/graphics/null/null-graphics-device.js';
 
-import { HTMLCanvasElement } from '@playcanvas/canvas-mock';
+import { Canvas } from 'skia-canvas';
 
 import { expect } from 'chai';
 
@@ -61,8 +61,8 @@ describe('LayoutCalculator', function () {
         });
     };
 
-    beforeEach(() => {
-        const canvas = new HTMLCanvasElement(500, 500);
+    beforeEach(function () {
+        const canvas = new Canvas(500, 500);
         app = new Application(canvas, { graphicsDevice: new NullGraphicsDevice(canvas) });
         calculator = new LayoutCalculator();
 
@@ -242,7 +242,7 @@ describe('LayoutCalculator', function () {
         ]);
     });
 
-    afterEach(() => {
+    afterEach(function () {
         app.destroy();
     });