Add svgjs and testing with fake dom

package.json

@@ -4,6 +4,7 @@
   "description": "",
   "main": "background.js",
   "dependencies": {
+    "@svgdotjs/svg.js": "^3.1.1",
     "@types/react": "^16.9.22",
     "@types/react-dom": "^16.9.5",
     "@types/selenium-webdriver": "^4.0.15",
@@ -13,7 +14,8 @@
     "babel-preset-env": "^1.7.0",
     "concurrently": "^5.1.0",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "svgdom": "^0.1.8"
   },
   "devDependencies": {
     "@types/chrome": "0.0.91",

src/utils/visualUtils.ts

@@ -1,9 +1,29 @@
 import { VisualSegmentInfo } from "../types";
+import { Svg, SVG } from "@svgdotjs/svg.js";
 
-export function toSVG(visuals: VisualSegmentInfo[]): string {
+export function toSVG(visuals: VisualSegmentInfo[]): Svg {
-    throw new Error("Method not implemented.");
+    const svg = SVG().size(100, 100);
+
+    for (const visual of visuals) {
+        const path = svg.polygon();
+        path.fill(visual.color);
+        // path.stroke({
+        //     width: 1,
+        //     color: visual.color
+        // });
+        path.plot(visual.bounds);
+    }
+
+    console.log(svg.svg());
+
+    return svg;
 }
 
-export function toVisualSegmentInfo(svg: string): VisualSegmentInfo {
+export function toVisualSegmentInfo(svgInput: string | Svg): VisualSegmentInfo {
+    let svg = svgInput as Svg;
+    if (typeof svgInput === "string") {
+        svg = SVG().svg(svgInput);
+    }
+
     throw new Error("Method not implemented.");
 }

test/visualSegments.test.ts

@@ -0,0 +1,21 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+import { createSVGWindow } from "svgdom";
+import { registerWindow } from "@svgdotjs/svg.js";
+
+import { toSVG } from "../src/utils/visualUtils";
+
+beforeAll(() => {
+    const window = createSVGWindow();
+    registerWindow(window, window.document)
+})
+
+test("Visual Segment SVG converter", async () => {
+    toSVG([{
+        time: 0,
+        bounds: [[0, 0], [25, 0], [25, 40], [0, 30]],
+        smooth: false,
+        curve: "linear",
+        color: "#000000",
+    }]);
+});