Introducing typescript & vitest

In order to push upward the code quailty of the Javascript code, I propose to introduce Typescript and Vitest for writing unit tests.

This first commit simply introduce the right dependencies and configuration.

Note the presence of “happy-dom” dev dep for manipulating the window object (which is involved in the first test written on Utils).

Signed-off-by: Cédric Foellmi <cedric@onekiloparsec.dev>

package.json

@@ -39,19 +39,26 @@
     "dev": "npm run build && vite",
     "serve": "npm run dev",
     "preview": "vite preview",
-    "test": "cd src/core && cargo test --release --features webgl2"
+    "test:webgl2": "cd src/core && cargo test --release --features webgl2",
+    "test:unit": "vitest"
   },
   "devDependencies": {
+    "happy-dom": "^8.9.0",
     "npm": "^8.19.2",
+    "typescript": "^5.0.4",
     "vite": "^4.3.8",
     "vite-plugin-css-injected-by-js": "^3.1.1",
     "vite-plugin-glsl": "^1.1.2",
     "vite-plugin-top-level-await": "^1.3.1",
     "vite-plugin-wasm": "^3.2.2",
-    "vite-plugin-wasm-pack": "^0.1.12"
+    "vite-plugin-wasm-pack": "^0.1.12",
+    "vitest": "^0.32.2"
   },
   "dependencies": {
     "autocompleter": "^6.1.3",
     "jquery": "^3.6.1"
+  },
+  "engines": {
+    "node": "16.x"
   }
 }

tsconfig.json

@@ -0,0 +1,45 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "lib": [
+      "esnext",
+      "dom"
+    ],
+    "types": [
+      "node",
+      "vite/client",
+      "vitest/globals",
+      "vitest/importMeta",
+    ],
+    "typeRoots": [
+      "node_modules/@types",
+      "src/types"
+    ],
+    "baseUrl": "./",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+      "#/*": [
+        "./tests/unit/*"
+      ]
+    }
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "tests/unit/**/*.ts"
+  ]
+}

vite.config.ts

@@ -1,16 +1,14 @@
-import { resolve } from 'path'
-import { defineConfig } from 'vite';
-
-// plugins
+/// <reference types="vitest" />
+import * as path from 'path'
+import {resolve} from 'path'
+import {defineConfig} from 'vite';
 // For wasm inclusion
 import wasm from "vite-plugin-wasm";
 import topLevelAwait from "vite-plugin-top-level-await";
-// For wasm genrated by wasm-pack
+// For wasm generated by wasm-pack
 import wasmPack from 'vite-plugin-wasm-pack';
-
 // To include and minify glsl into the bundle
 import glsl from 'vite-plugin-glsl';
-
 // To include css into the bundle
 import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
 
@@ -41,7 +39,24 @@ export default defineConfig({
         }),
         cssInjectedByJsPlugin(),
     ],
+    resolve: {
+        alias: [
+            {find: '@', replacement: path.resolve(__dirname, '/src')},
+            {find: '#', replacement: path.resolve(__dirname, '/tests/unit')},
+            {find: '$', replacement: path.resolve(__dirname, '/tests/e2e')}
+        ],
+    },
+    test: {
+        globals: true,
+        environment: 'happy-dom',
+        include: [
+            'tests/unit/**/*.{test,spec}.{js,ts}'
+        ],
+        deps: {
+            inline: ['core/pkg'],
+        },
+    },
     server: {
         open: '/examples/index.html',
     },
-});
+});