test: configure testing for frontend code (fehmer) (#4879)

* test: configure testing for frontend code

* remove test coverage thresholds, cleanup

.eslintrc.json

@@ -13,11 +13,12 @@
   },
   "ignorePatterns": [
     "backend/__tests__/**/*",
-    "backend/setup-tests.ts",
     "backend/jest.config.ts",
     "**/*.css",
     "**/*.scss",
-    "frontend/static/js/*"
+    "frontend/static/js/*",
+    "frontend/__tests__/**/*",
+    "frontend/jest.config.ts"
   ],
   "extends": [
     "eslint:recommended",

.github/workflows/monkey-ci.yml

@@ -108,6 +108,9 @@ jobs:
       - name: Build
         run: npm run pr-check-ts
 
+      - name: Test
+        run: npm run test-fe
+
   ci-assets:
     name: ci-assets
     needs: [pre-ci]

frontend/__tests__/setup-tests.ts

@@ -0,0 +1,4 @@
+jest.mock("../src/ts/constants/env-config", () => ({
+  backendUrl: "invalid",
+  isDevelopment: true,
+}));

frontend/__tests__/test/lazy-mode.spec.ts

@@ -0,0 +1,14 @@
+import { replaceAccents } from "../../src/ts/test/lazy-mode";
+
+describe("lazy-mode", () => {
+  describe("replaceAccents", () => {
+    it("should replace common accents", () => {
+      const result = replaceAccents("Héllö");
+      expect(result).toBe("Hello");
+    });
+    it("should replace common accents with override", () => {
+      const result = replaceAccents("Héllö", [["ö", "oe"]]);
+      expect(result).toBe("Hélloe");
+    });
+  });
+});

frontend/jest.config.ts

@@ -0,0 +1,9 @@
+import { defaults as tsjPreset } from "ts-jest/presets";
+
+export default {
+  preset: "ts-jest",
+  transform: tsjPreset.transform,
+  setupFilesAfterEnv: ["<rootDir>/__tests__/setup-tests.ts"],
+  modulePathIgnorePatterns: ["<rootDir>/__tests__/setup-tests.ts"],
+  testRegex: "(/__tests__/.*|(\\.|/)(spec))\\.[jt]sx?$", //prevent files like test.ts outside the __tests__ folder to be detected as test
+};

frontend/package.json

@@ -11,6 +11,7 @@
     "dev": "concurrently \"webpack serve --config=./webpack/config.dev.js\" \"npx gulp watch\"",
     "deploy-live": "npm run build-live && firebase deploy -P live --only hosting",
     "deploy-preview": "npm run build-live && firebase hosting:channel:deploy preview -P live --expires 2h",
+    "test": "jest --verbose --collect-coverage --runInBand",
     "tsc": "tsc",
     "knip": "knip"
   },
@@ -27,6 +28,7 @@
     "@types/damerau-levenshtein": "1.0.0",
     "@types/grecaptcha": "3.0.4",
     "@types/howler": "2.2.7",
+    "@types/jest": "27.5.0",
     "@types/jquery": "3.5.14",
     "@types/object-hash": "2.2.1",
     "@types/select2": "4.0.55",
@@ -49,6 +51,8 @@
     "gulp-eslint-new": "1.4.2",
     "html-minimizer-webpack-plugin": "3.5.0",
     "html-webpack-plugin": "5.5.0",
+    "jest": "27.5.1",
+    "jest-environment-node": "27.5.1",
     "json-minimizer-webpack-plugin": "3.3.0",
     "jsonschema": "1.4.0",
     "madge": "5.0.1",
@@ -63,6 +67,8 @@
     "stream-browserify": "3.0.0",
     "string-replace-loader": "3.1.0",
     "style-loader": "3.3.3",
+    "ts-node-dev": "2.0.0",
+    "ts-jest": "27.1.4",
     "ts-loader": "9.2.6",
     "webpack": "5.72.0",
     "webpack-bundle-analyzer": "4.5.0",

frontend/tsconfig.json

@@ -4,7 +4,7 @@
     "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "module": "CommonJS",
     "moduleResolution": "node",
-    "types": ["jquery", "select2", "node"],
+    "types": ["jquery", "select2", "node", "jest"],
     "allowUmdGlobalAccess": true,
     "resolveJsonModule": true,
     "outDir": "./build",
@@ -36,5 +36,6 @@
     }
   },
   "include": ["./src/**/*.ts"],
-  "files": ["src/ts/modules.d.ts"]
+  "files": ["src/ts/modules.d.ts"],
+  "exclude": ["node_modules", "build", "setup-tests.ts", "**/*.spec.ts"]
 }

package.json

@@ -12,6 +12,7 @@
     "install-windows": ".\\bin\\install.cmd",
     "docker": "cd backend && docker compose up",
     "test-be": "cd backend && npm run test",
+    "test-fe": "cd frontend && npm run test",
     "dev": "concurrently --kill-others \"npm run dev-fe\" \"npm run dev-be\"",
     "dev-be": "cd backend && npm run dev",
     "dev-fe": "cd frontend && npm run dev",