Add vitest for frontend testing

.circleci/config.yml

@@ -210,6 +210,17 @@ jobs:
       - run:
           name: Check formatting of CSS & JS files
           command: npx prettier --check .
+  vitest:
+    docker:
+      - image: "cimg/node:lts"
+    resource_class: small
+    steps:
+      - checkout
+      - attach_workspace:
+          at: .
+      - run:
+          name: Run frontend tests
+          command: npm run test
   eslint:
     docker:
       - image: "cimg/node:lts"
@@ -609,6 +620,9 @@ workflows:
       - prettier:
           requires:
             - npm-install
+      - vitest:
+          requires:
+            - npm-install
       - webpack:
           requires:
             - npm-install

.eslintrc.js

@@ -1,8 +1,25 @@
+const path = require("path");
+
 module.exports = {
     env: {
         es6: true,
         browser: true,
     },
+    settings: {
+        "import/resolver": {
+            node: {
+                paths: ["src"],
+                extensions: [".js", ".jsx", ".ts", ".d.ts", ".tsx"],
+            },
+            typescript: {
+                project: "./tsconfig.json",
+            },
+            alias: {
+                map: [["~", path.resolve(__dirname, "./src")]],
+                extensions: [".js", ".jsx", ".ts", ".d.ts", ".tsx"],
+            },
+        },
+    },
     ignorePatterns: [
         "**/dist/",
         "**/htmlcov/**",

.pre-commit-config.yaml

@@ -64,6 +64,14 @@ repos:
         types_or: [python, html]
         language: script
         pass_filenames: false
+  - repo: local
+    hooks:
+      - id: frontend-tests
+        name: frontend-tests
+        description: Run frontend tests
+        entry: tools/vitest.sh
+        language: script
+        pass_filenames: false
   - repo: https://github.com/pre-commit/mirrors-mypy
     rev: v1.8.0
     hooks:

integreat_cms/static/src/js/__tests__/utils/mfa-utils.test.ts

@@ -0,0 +1,9 @@
+import { expect, test } from "vitest";
+import { b64enc } from "../../utils/mfa-utils";
+
+test("base64 and url encoding", () => {
+    const testDataString = "https://example.com/?q=Hello+World!";
+    const testData = new TextEncoder().encode(testDataString);
+
+    expect(b64enc(testData)).toBe("aHR0cHM6Ly9leGFtcGxlLmNvbS8_cT1IZWxsbytXb3JsZCE");
+});