Move IE Detection to JS & Update Unit Tests

README.md

@@ -2,11 +2,19 @@
 
 *[Three.js](https://threejs.org/) + [TypeScript](https://www.typescriptlang.org/) + [SolidJS](https://www.solidjs.com/) + [Vite](https://vitejs.dev/) + [Vitest](https://vitest.dev/)*
 
-![GitHub deployments](https://img.shields.io/github/deployments/UstymUkhman/threejs-boilerplate/github-pages)
-![GitHub repo size](https://img.shields.io/github/repo-size/UstymUkhman/threejs-boilerplate)
-![](https://img.shields.io/badge/coverage-99.2%25-green)
-![GitHub package.json version](https://img.shields.io/github/package-json/v/UstymUkhman/threejs-boilerplate?color=brightgreen)
-![GitHub](https://img.shields.io/github/license/UstymUkhman/threejs-boilerplate?color=brightgreen)
+![](https://img.shields.io/github/package-json/dependency-version/UstymUkhman/threejs-boilerplate/animejs?style=flat-square)
+![](https://img.shields.io/github/package-json/dependency-version/UstymUkhman/threejs-boilerplate/solid-js?style=flat-square)
+![](https://img.shields.io/github/package-json/dependency-version/UstymUkhman/threejs-boilerplate/three?style=flat-square)
+
+<!-- ![](https://img.shields.io/github/release-date/UstymUkhman/threejs-boilerplate?color=yellow&style=flat-square) -->
+<!-- ![](https://img.shields.io/github/commit-activity/m/UstymUkhman/threejs-boilerplate?style=flat-square) -->
+<!-- ![](https://img.shields.io/github/last-commit/UstymUkhman/threejs-boilerplate?style=flat-square) -->
+
+![](https://img.shields.io/github/deployments/UstymUkhman/threejs-boilerplate/github-pages?style=flat-square)
+![](https://img.shields.io/github/repo-size/UstymUkhman/threejs-boilerplate?style=flat-square)
+![](https://img.shields.io/badge/coverage-99.2%25-green?style=flat-square)
+![](https://img.shields.io/github/package-json/v/UstymUkhman/threejs-boilerplate?color=brightgreen&style=flat-square)
+![](https://img.shields.io/github/license/UstymUkhman/threejs-boilerplate?color=brightgreen&style=flat-square)
 
 [![](./public/img/preview.jpg)](https://ustymukhman.github.io/threejs-boilerplate/dist)
 

dist/index.html

@@ -68,7 +68,7 @@
 
     <!-- Manifest: -->
     <link rel="manifest" href="./manifest.json" />
-    <script type="module" crossorigin src="./assets/index.5ca009a5.js"></script>
+    <script type="module" crossorigin src="./assets/index.d14d1cb9.js"></script>
     <link rel="stylesheet" href="./assets/index.64a40d91.css">
   </head>
 
@@ -94,6 +94,9 @@
     <!-- Application root container: -->
     <main id="root"></main>
 
+    <!-- Not supported browser check: -->
+    <script type="text/javascript" src="./js/initial.js"></script>
+
     <!-- Application entry script: -->
 
   </body>

dist/js/initial.js

@@ -0,0 +1,4 @@
+!!window.navigator.userAgent.match(/Trident\//i) ||
+!!window.navigator.userAgent.match(/MSIE /i)
+  ? document.documentElement.className += ' ms-ie'
+  : document.documentElement.className = '';

index.html

@@ -92,6 +92,9 @@
     <!-- Application root container: -->
     <main id="root"></main>
 
+    <!-- Not supported browser check: -->
+    <script type="text/javascript" src="/js/initial.js"></script>
+
     <!-- Application entry script: -->
     <script type="module" src="/src/main.tsx"></script>
   </body>

public/js/initial.js

@@ -0,0 +1,4 @@
+!!window.navigator.userAgent.match(/Trident\//i) ||
+!!window.navigator.userAgent.match(/MSIE /i)
+  ? document.documentElement.className += ' ms-ie'
+  : document.documentElement.className = '';

src/main.tsx

@@ -1,4 +1,3 @@
-import '@/utils/DetectIE';
 import { App } from '@/app';
 import { render } from 'solid-js/web';
 

src/utils/AssetsLoader.ts

@@ -23,7 +23,7 @@ export namespace Assets
   type Assets = Texture | CubeTexture | GLTFModel | AudioBuffer;
   type Reject = (error: ErrorEvent) => void;
 
-  export interface Callbacks {
+  type Callbacks = {
     onProgress: (event: ProgressEvent<EventTarget>) => void;
     onLoad: (asset: Assets) => void;
     onError: Reject;

tests/playground/Playground.spec.ts

@@ -0,0 +1,56 @@
+import type { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+import { describe, test, expect, vi } from 'vitest';
+import Playground from '@/playground';
+
+vi.mock('three/src/renderers/WebGLRenderer');
+
+interface PublicPlayground {
+  orbitControls: OrbitControls;
+  get domElement (): HTMLCanvasElement;
+  set controls (enabled: boolean);
+  set pause (paused: boolean);
+  destroy: () => void;
+}
+
+describe('Playground', () => {
+  const playground = new Playground() as unknown as PublicPlayground;
+
+  test('Create', () => {
+    expect(Playground).toBeDefined();
+    expect(playground).toBeInstanceOf(Playground);
+  });
+
+  test('resize', () => {
+    const playgroundPrototype = Object.getPrototypeOf(playground);
+    const resize = vi.fn(playgroundPrototype.resize.bind(playground));
+
+    resize();
+    expect(resize).toHaveReturnedWith(undefined);
+  });
+
+  test('destroy', () => {
+    const destroy = vi.fn(playground.destroy.bind(playground));
+    destroy();
+    expect(destroy).toHaveReturnedWith(undefined);
+  });
+
+  test('domElement', () => {
+    expect(playground.domElement.tagName).toStrictEqual('CANVAS');
+  });
+
+  test('controls', () => {
+    playground.controls = false;
+    expect(playground.orbitControls.enabled).toStrictEqual(false);
+
+    playground.controls = true;
+    expect(playground.orbitControls.enabled).toStrictEqual(true);
+  });
+
+  test('pause', () => {
+    playground.pause = true;
+    expect(playground.orbitControls.enabled).toStrictEqual(false);
+
+    playground.pause = false;
+    expect(playground.orbitControls.enabled).toStrictEqual(true);
+  });
+});

tests/utils/AssetsLoader.spec.ts

@@ -1,66 +1,50 @@
 import { Assets } from '@/utils/AssetsLoader';
-// import { Group } from 'three/src/objects/Group';
-// import { RGBAFormat } from 'three/src/constants';
-
+import { RGBAFormat } from 'three/src/constants';
 import { describe, test, expect, vi } from 'vitest';
-// import { Texture } from 'three/src/textures/Texture';
-// import { CubeTexture } from 'three/src/textures/CubeTexture';
+import { CubeTexture } from 'three/src/textures/CubeTexture';
 import { LoadingManager } from 'three/src/loaders/LoadingManager';
 
 describe('AssetsLoader', () => {
   const loader = new Assets.Loader();
 
+  Object.assign(loader, {
+    getPromiseCallbacks: (
+      resolve: (asset?: unknown | PromiseLike<unknown>) => void,
+      reject: (error: ErrorEvent) => void
+    ) => ({
+      onLoad: (asset: unknown) => {
+        if (asset instanceof CubeTexture) {
+          asset.format = RGBAFormat;
+        }
+
+        resolve(asset);
+      },
+
+      onProgress: vi.fn,
+      onError: (error: ErrorEvent) => reject(error)
+    })
+  });
+
   test('Create', () => {
     expect(Assets.Loader).toBeDefined();
     expect(loader).toBeInstanceOf(LoadingManager);
   });
 
-  /* test('getPromiseCallbacks', () => {
-    const loaderPrototype = Object.getPrototypeOf(loader);
-    const getPromiseCallbacks = vi.fn(loaderPrototype.getPromiseCallbacks.bind(loader));
-
-    new Promise((resolve, reject) => {
-      const callbacks = getPromiseCallbacks(resolve, reject) as Assets.Callbacks;
-      expect(callbacks.onLoad(new CubeTexture())).toHaveReturnedWith(undefined);
-    }).then(asset => {
-      expect(asset).toBeInstanceOf(CubeTexture);
-      expect((asset as CubeTexture).format).toStrictEqual(RGBAFormat);
-    });
-
-    new Promise((resolve, reject) => {
-      const callbacks = getPromiseCallbacks(resolve, reject) as Assets.Callbacks;
-      expect(callbacks.onProgress(new ProgressEvent('loading'))).toHaveReturnedWith(undefined);
-    });
-
-    new Promise((resolve, reject) => {
-      const error = new ErrorEvent('loading');
-      const callbacks = getPromiseCallbacks(resolve, reject) as Assets.Callbacks;
-      expect(callbacks.onError(error)).rejects.toStrictEqual(error);
-    });
-  }); */
-
-  /* test('loadCubeTexture', async () => {
-    const cubeTexture = await loader.loadCubeTexture('');
-    expect(cubeTexture).toBeInstanceOf(CubeTexture);
-    expect(cubeTexture.images.length).toStrictEqual(6);
-  }); */
+  test.fails('loadCubeTexture', async () => {
+    await expect(loader.loadCubeTexture('')).rejects.toBe(Error);
+  }, 500);
 
-  /* test('loadTexture', async () => {
-    const texture = await loader.loadTexture('');
-    expect(texture).toBeInstanceOf(Texture);
-    expect(texture.image).toBeInstanceOf(Image);
-  }); */
+  test.fails('loadTexture', async () => {
+    await expect(loader.loadTexture('')).rejects.toBe(Error);
+  }, 500);
 
-  /* test('loadGLTF', async () => {
-    const model = await loader.loadGLTF('');
-    expect(model.scene).toBeInstanceOf(Group);
-    expect(model).toEqual({ scene: new Group() });
-  }); */
+  test.fails('loadGLTF', async () => {
+    await expect(loader.loadGLTF('')).rejects.toBe(Error);
+  }, 500);
 
-  /* test('loadAudio', async () => {
-    const audio = await loader.loadAudio('');
-    expect(audio).toBeInstanceOf(AudioBuffer);
-  }); */
+  test.fails('loadAudio', async () => {
+    await expect(loader.loadAudio('')).rejects.toBe(Error);
+  }, 500);
 
   test('onProgress', () => {
     const onProgress = vi.fn(loader.onProgress);

tests/utils/Number.spec.ts

@@ -1,5 +1,19 @@
+import {
+  smoothstep,
+  mix,
+  map,
+  randomInt,
+  clamp,
+  random,
+  lerp,
+  PI,
+  toFixed,
+  PHI,
+  DELTA_UPDATE,
+  DELTA_FRAME
+} from '@/utils/Number';
+
 import { describe, test, expect } from 'vitest';
-import { smoothstep, mix, map, randomInt, clamp, random, lerp, toFixed, PI } from '@/utils/Number';
 
 describe('Number', () => {
   test('smoothstep', () => {
@@ -46,15 +60,27 @@ describe('Number', () => {
     expect(lerp(1, 2, 1)).toStrictEqual(2);
   });
 
+  test('PI', () => {
+    expect(PI.m2).toStrictEqual(Math.PI * 2);
+    expect(PI.d2).toStrictEqual(Math.PI / 2);
+    expect(Object.isFrozen(PI)).toStrictEqual(true);
+  });
+
   test('toFixed', () => {
     expect(toFixed(12)).toStrictEqual(12);
     expect(toFixed(1.123456789)).toStrictEqual(1.12);
     expect(toFixed(-0.987654321, 3)).toStrictEqual(-0.987);
   });
 
-  test('PI', () => {
-    expect(PI.m2).toStrictEqual(Math.PI * 2);
-    expect(PI.d2).toStrictEqual(Math.PI / 2);
-    expect(Object.isFrozen(PI)).toStrictEqual(true);
+  test('PHI', () => {
+    expect(PHI).toBeCloseTo(1.618, 3);
+  });
+
+  test('DELTA_UPDATE', () => {
+    expect(DELTA_UPDATE).toBeCloseTo(16.667, 3);
+  });
+
+  test('DELTA_FRAME', () => {
+    expect(DELTA_FRAME).toBeCloseTo(0.017, 3);
   });
 });