Merge branch 'excalidraw:master' into fix/45/flowchart_rendering_issues

package.json

@@ -13,7 +13,10 @@
     "test:code": "eslint --max-warnings=0 --ext .js,.ts,.tsx .",
     "start": "vite playground",
     "build:playground": "tsc --noEmit --project ./playground/tsconfig.json && vite build playground",
-    "preview": "npm run build:playground && vite preview --outDir ./public"
+    "preview": "yarn run build:playground && vite preview --outDir ./public",
+    "test": "vitest",
+    "test:coverage": "vitest --coverage",
+    "test:watch": "vitest --watch"
   },
   "dependencies": {
     "@excalidraw/markdown-to-text": "0.1.2",
@@ -29,19 +32,22 @@
     "@types/react-dom": "18.2.4",
     "@typescript-eslint/eslint-plugin": "5.59.9",
     "@typescript-eslint/parser": "5.59.9",
-    "cross-env": "7.0.3",
     "@vitejs/plugin-react-swc": "3.6.0",
+    "@vitest/coverage-v8": "^1.6.0",
+    "cross-env": "7.0.3",
     "eslint": "8.42.0",
     "eslint-config-prettier": "8.8.0",
     "eslint-plugin-prettier": "4.2.1",
+    "jsdom": "^24.0.0",
     "prettier": "2.8.8",
     "process": "0.11.10",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "rimraf": "5.0.5",
     "sass": "1.74.1",
     "typescript": "5.2.2",
-    "rimraf": "5.0.5",
-    "vite": "5.2.8"
+    "vite": "5.2.8",
+    "vitest": "^1.6.0"
   },
   "resolutions": {
     "@babel/preset-env": "7.13.8"

tests/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig.common.json",
+  "compilerOptions": {
+    "types": ["vitest/globals"]
+  }
+}

tests/utils.test.ts

@@ -0,0 +1,74 @@
+import {
+  getTransformAttr,
+  entityCodesToText,
+  computeEdgePositions,
+} from "../src/utils.js";
+
+describe("Test Utils", () => {
+  describe("Test entityCodesToText", () => {
+    it("should convert entity codes to text", () => {
+      expect(entityCodesToText("#9829;")).toBe("♥");
+      expect(entityCodesToText("#6672;")).toBe("ᨐ");
+    });
+  });
+
+  describe("Test getTransformAttr", () => {
+    let el: HTMLDivElement;
+
+    beforeEach(() => {
+      el = document.createElement("div");
+    });
+
+    it("should return the correct transformX and transformY when transform attrubute is present", () => {
+      el.setAttribute("transform", "translate(100, 200)");
+      const { transformX, transformY } = getTransformAttr(el);
+      expect(transformX).toBe(100);
+      expect(transformY).toBe(200);
+    });
+
+    it("should return 0 for transformX and transformY if no transform attribute is set", () => {
+      const { transformX, transformY } = getTransformAttr(el);
+      expect(transformX).toBe(0);
+      expect(transformY).toBe(0);
+    });
+  });
+
+  describe("Test computeEdgePositions", () => {
+    let pathElement: SVGPathElement;
+
+    beforeEach(() => {
+      pathElement = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      );
+    });
+
+    it("should throw an error if the element is not a path", () => {
+      const divElement = document.createElement("div");
+      //@ts-expect-error
+      expect(() => computeEdgePositions(divElement)).toThrowError(
+        'Invalid input: Expected an HTMLElement of tag "path", got DIV'
+      );
+    });
+
+    it("should throw an error if the path element does not contain a 'd' attribute", () => {
+      expect(() => computeEdgePositions(pathElement)).toThrowError(
+        'Path element does not contain a "d" attribute'
+      );
+    });
+
+    it("should return the correct startX, startY, endX, endY, and reflectionPoints", () => {
+      pathElement.setAttribute("d", "M29.383,38.5L29.383,63.5L29.383,83.2");
+      const { startX, startY, endX, endY, reflectionPoints } =
+        computeEdgePositions(pathElement);
+      expect(startX).toBe(29.383);
+      expect(startY).toBe(38.5);
+      expect(endX).toBe(29.383);
+      expect(endY).toBe(83.2);
+      expect(reflectionPoints).toEqual([
+        { x: 29.383, y: 38.5 },
+        { x: 29.383, y: 83.2 },
+      ]);
+    });
+  });
+});

tsconfig.json

@@ -1,4 +1,8 @@
 {
   "files": [],
-  "references": [{ "path": "./src" }, { "path": "./playground" }]
+  "references": [
+    { "path": "./src" },
+    { "path": "./playground" },
+    { "path": "./tests" }
+  ]
 }

vitest.config.ts

@@ -0,0 +1,12 @@
+/// <reference types="vitest" />
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: "jsdom",
+    coverage: {
+      reporter: ["text", "json-summary", "json", "html", "lcovonly"],
+    },
+  },
+});