diff --git a/engine/lib/loadImage.test.ts b/engine/lib/loadImage.test.ts index dd3b1c0..07e0f68 100644 --- a/engine/lib/loadImage.test.ts +++ b/engine/lib/loadImage.test.ts @@ -1,5 +1,6 @@ import { afterEach, beforeEach, expect, test } from "vitest"; import { loadImage } from "./loadImage.ts"; +import missingTextureSrc from "./missingTexture.svg?url"; class MockImage { static instances: MockImage[] = []; @@ -47,9 +48,16 @@ test("loadImage error", async () => { const promise = loadImage("missing.png"); const image = MockImage.instances[0]; - image.onerror!("missing"); + image.onerror!("boom"); - // errors are logged, but the promise still resolves with the image - await expect(promise).resolves.toBe(image); - expect(errors).toEqual([["missing"]]); + const placeholder = MockImage.instances[1]; + + expect(errors).toEqual([["boom"]]); + expect(placeholder.src).toBe(missingTextureSrc); + + placeholder.onload!(); + + // errors are logged, but the promise still resolves + // with a drawable placeholder texture + await expect(promise).resolves.toBe(placeholder); }); diff --git a/engine/lib/loadImage.ts b/engine/lib/loadImage.ts index 1ff4c0d..311a703 100644 --- a/engine/lib/loadImage.ts +++ b/engine/lib/loadImage.ts @@ -1,3 +1,8 @@ +import missingTextureSrc from "./missingTexture.svg?url"; + +const placeholder = new Image(); +placeholder.src = missingTextureSrc; + export function loadImage(src: string): Promise { return new Promise((resolve) => { const image = new Image(); @@ -5,7 +10,7 @@ export function loadImage(src: string): Promise { image.onload = () => resolve(image); image.onerror = (error) => { console.error(error); - resolve(image); + resolve(placeholder); }; image.src = src; diff --git a/engine/lib/missingTexture.svg b/engine/lib/missingTexture.svg new file mode 100644 index 0000000..086052d --- /dev/null +++ b/engine/lib/missingTexture.svg @@ -0,0 +1,5 @@ + + + + +