Add unit testing support with vitest (#18)

* update loose files and add vitest

* update test scripts

* more support for vitest

* more test support

* update vscode settings

.eslintignore

@@ -1,6 +0,0 @@
-# don't ever lint node_modules
-node_modules
-# don't lint build output (make sure it's set to your correct build folder name)
-dist
-index.html
-.eslintrc.cjs

.eslintrc

@@ -0,0 +1,17 @@
+{
+	"env": {
+		"browser": true,
+		"es2021": true
+	},
+	"parserOptions": {
+		"ecmaVersion": "latest",
+		"sourceType": "module"
+	},
+	"overrides": [
+		{
+			"files": ["src/**/*.ts"],
+			"extends": "eslint:recommended"
+		}
+	],
+	"rules": {}
+}

.eslintrc.cjs

@@ -1,13 +0,0 @@
-module.exports = {
-	env: {
-		browser: true,
-		es2021: true,
-	},
-	extends: 'eslint:recommended',
-	overrides: [],
-	parserOptions: {
-		ecmaVersion: 'latest',
-		sourceType: 'module',
-	},
-	rules: {},
-}

.gitignore

@@ -15,6 +15,7 @@ dist-ssr
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
+!.vscode/settings.json
 .idea
 .DS_Store
 *.suo
@@ -32,3 +33,5 @@ public/images/pokemon/icons/input/output/*
 public/images/character/*/
 src/data/battle-anim-raw-data*.ts
 src/data/battle-anim-data.ts
+
+coverage

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "javascript.preferences.importModuleSpecifierEnding": "minimal",
+  "typescript.preferences.importModuleSpecifierEnding": "minimal"
+}

jsconfig.json

@@ -1,11 +0,0 @@
-{
-	"compilerOptions": {
-		"target": "ES2020",
-		"module": "ES2020",
-		"moduleResolution": "node",
-		"resolveJsonModule": true,
-		"checkJs": true,
-		"esModuleInterop": true,
-		"strictNullChecks": false
-	}
-}

package.json

@@ -6,17 +6,25 @@
 	"scripts": {
 		"start": "vite",
 		"build": "vite build",
-		"preview": "vite preview"
+		"preview": "vite preview",
+		"test": "vitest run",
+		"test:cov": "vitest run --coverage",
+		"test:watch": "vitest watch --coverage"
 	},
 	"devDependencies": {
+		"@vitest/coverage-istanbul": "^1.4.0",
 		"axios": "^1.6.2",
 		"axios-cache-interceptor": "^1.3.2",
 		"eslint": "^8.25.0",
+		"jsdom": "^24.0.0",
 		"json-beautify": "^1.1.1",
+		"phaser3spectorjs": "^0.0.8",
 		"pokenode-ts": "^1.20.0",
 		"typescript": "^5.0.3",
 		"vite": "^4.5.0",
-		"vite-plugin-fs": "^0.4.4"
+		"vite-plugin-fs": "^0.4.4",
+		"vitest": "^1.4.0",
+		"vitest-canvas-mock": "^0.3.3"
 	},
 	"dependencies": {
 		"@material/material-color-utilities": "^0.2.7",
@@ -24,5 +32,12 @@
 		"json-stable-stringify": "^1.1.0",
 		"phaser": "^3.70.0",
 		"phaser3-rex-plugins": "^1.1.84"
+	},
+	"engines": {
+		"node": ">=18.0.0"
+	},
+	"imports": {
+		"#app": "./src/main.js",
+		"#app/*": "./src/*"
 	}
 }

src/test/phaser.setup.ts

@@ -0,0 +1,5 @@
+import Phaser from "phaser";
+
+export default new Phaser.Game({
+  type: Phaser.HEADLESS,
+});

src/test/vitest.setup.ts

@@ -0,0 +1,2 @@
+import "vitest-canvas-mock";
+import "#app/test/phaser.setup";

src/utils.test.ts

@@ -0,0 +1,22 @@
+import { expect, describe, it } from "vitest";
+import { randomString } from "./utils";
+
+import Phaser from "phaser";
+
+describe("utils", () => {
+  describe("randomString", () => {
+    it("should return a string of the specified length", () => {
+      const str = randomString(10);
+      expect(str.length).toBe(10);
+    });
+
+    it("should work with seed", () => {
+      const state = Phaser.Math.RND.state();
+      const str1 = randomString(10, true);
+      Phaser.Math.RND.state(state);
+      const str2 = randomString(10, true);
+
+      expect(str1).toBe(str2);
+    });
+  });
+});

tsconfig.json

@@ -0,0 +1,19 @@
+{
+	"compilerOptions": {
+		"target": "ES2020",
+		"module": "ES2020",
+		"moduleResolution": "Bundler",
+		"resolveJsonModule": true,
+		"esModuleInterop": true,
+		"strictNullChecks": false,
+		"sourceMap": true,
+		"rootDir": "./src",
+		"baseUrl": "./src",
+		"paths": {
+			"#app/*": ["*.ts"],
+			"#app": ["."]
+		},
+		"outDir": "./build",
+		"noEmit": true
+	}
+}

vite.config.js

@@ -8,10 +8,11 @@ export default defineConfig(({ mode }) => {
 		clearScreen: false,
 		build: {
 			minify: 'esbuild',
+			sourcemap: true
 		},
 		esbuild: {
 			pure: mode === 'production' ? [ 'console.log' ] : [],
 			keepNames: true,
-		}
+		},
 	}
 })

vitest.config.js

@@ -0,0 +1,40 @@
+import { defineConfig } from 'vite';
+// import fs from 'vite-plugin-fs';
+
+export default defineConfig(({ mode }) => {
+	return {
+		test: {
+			setupFiles: ['./src/test/vitest.setup.ts'],
+			environment: 'jsdom',
+			deps: {
+				optimizer: {
+					web: {
+						include: ['vitest-canvas-mock'],
+					}
+				}
+			},
+			threads: false,
+			environmentOptions: {
+				jsdom: {
+					resources: 'usable',
+				},
+			},
+			coverage: {
+				provider: 'istanbul',
+				reportsDirectory: 'coverage',
+				reporters: ['text-summary', 'html'],
+			},
+		},
+		plugins: [/*fs()*/],
+		server: { host: '0.0.0.0', port: 8000 },
+		clearScreen: false,
+		build: {
+			minify: 'esbuild',
+			sourcemap: true
+		},
+		esbuild: {
+			pure: mode === 'production' ? [ 'console.log' ] : [],
+			keepNames: true,
+		},
+	}
+})