(#4) map more svg properties between versions

effortlessmountain · Apr 13, 2020 · b3cdb11 · b3cdb11
1 parent 8bb3131
commit b3cdb11
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 32 deletions.
diff --git a/src/schema.test.ts b/src/schema.test.ts
@@ -1,4 +1,4 @@
-import { transformToLatest, AssetDocumentV1, AssetDocumentV2 } from './schema'
+import { transformToLatest, AssetDocumentV1, AssetDocumentV2, SvgIcon, SvgIconV1 } from './schema'
 
 
 const createV1Asset: () => AssetDocumentV1 = () => {
@@ -85,8 +85,8 @@ const v2Asset: AssetDocumentV2 = {
         "svg": {
             d: "M110.056 64.815c-4.234.027-8.355.587-12.337 85.242-102.867-5.621-6.799-11.396-13.455-17.4-19.909z",
             fill: "#fff",
-            fillOpacity: "1"
-
+            fillOpacity: "1",
+            viewBox: "0 0 512 512"
         }
     }
 }
@@ -148,26 +148,33 @@ describe("transforming from schema v1 to v2", () => {
 
             expect(result.icon).toBeUndefined
         })
+
         describe("mapping SVGs", () => {
             const v2Svg = {
                 d: "M110.056 64.815c-4.234.027-8.355.587-12.337 85.242-102.867-5.621-6.799-11.396-13.455-17.4-19.909z",
                 fill: "#fff",
                 fillOpacity: "1",
-                viewbox: "0 0 512 512"
+                viewBox: "0 0 512 512"
             }
-            test("maps the d property", () => {
-                const result: AssetDocumentV2 = transformToLatest(createV1Asset())
-
-                if (typeof result.icon === 'string') {
-                    fail("expected svg to be an object")
-                } else {
-                    expect(result.icon.svg.d).toBe(v2Svg.d)
-                }
+
+            const svgProperties = ["d", "fill", "fillOpacity", "viewBox"]
+
+            svgProperties.forEach((prop) => {
+                test(`maps the ${prop} property`, () => {
+                    const result = transformToLatest(createV1Asset())
+
+                    expect((result.icon as SvgIcon).svg[prop]).toBe(v2Svg[prop])
+                })
+            })
+            svgProperties.forEach(prop => {
+                test(`maps ${prop} when single quotes are used instead of escaped double quotes in v1.icon.svg`, () => {
+                    const asset = createV1Asset();
+                    (asset.icon as SvgIconV1).svg = (asset.icon as SvgIconV1).svg.replace(/\"/g, "'")
+                    const result = transformToLatest(asset)
+
+                    expect((result.icon as SvgIcon).svg[prop]).toBe(v2Svg[prop])
+                })
             })
-            test("maps the fill", () => { })
-            test("maps the opacity", () => { })
-            test("maps the viewbox", () => { })
-            test("maps these when single quotes are used instead of escaped double quotes in v1.icon.svg", () => { })
         })
     })
 })
diff --git a/src/schema.ts b/src/schema.ts
@@ -1,3 +1,10 @@
+export type SvgIconV1 = {
+    type: "svg",
+    author: string,
+    name: string,
+    svg: string
+}
+
 export type AssetDocumentV1 = {
     documentFormatVersion?: number,
     fonts?: {
@@ -16,11 +23,18 @@ export type AssetDocumentV1 = {
     track?: number | string[],
     description: string,
     abilities: Array<{ filled: boolean, name?: string, text: string }>,
-    icon?: string | {
-        type: "svg",
-        author: string,
-        name: string,
-        svg: string
+    icon?: string | SvgIconV1
+}
+
+export type SvgIcon = {
+    type: "svg",
+    author: string,
+    name: string,
+    svg: {
+        d: string,
+        fill: string,
+        fillOpacity: string,
+        viewBox: string
     }
 }
 
@@ -42,12 +56,7 @@ export type AssetDocumentV2 = {
     track?: number | string[],
     description: string,
     abilities: Array<{ filled: boolean, name?: string, text: string }>,
-    icon?: string | {
-        type: "svg",
-        author: string,
-        name: string,
-        svg: { d: string, fill: string, fillOpacity: string }
-    }
+    icon?: string | SvgIcon
 }
 
 type AssetDocument = AssetDocumentV1 | AssetDocumentV2
@@ -77,16 +86,20 @@ function transformToV2(v1: AssetDocumentV1): AssetDocumentV2 {
     if (typeof v1.icon === "string") {
         v2.icon = v1.icon
     } else if (typeof v1.icon === "object") {
-        const d = v1.icon.svg.match(/d=\"(.*?)\"/)[1]
+        const extractPropertyValue = (key) => {
+            const regexp = new RegExp(`${key}=(?:"|')(.*?)(?:"|')`)
+            return ((v1.icon as SvgIconV1).svg.match(regexp) || [])[1]
+            //TODO: intelligent error here?
+        }
         v2.icon = {
             type: "svg",
             author: "",
             name: "",
             svg: {
-                d: d,
-                fill: "",
-                fillOpacity: "",
-                // viewBox: "",
+                d: extractPropertyValue("d"),
+                fill: extractPropertyValue("fill"),
+                fillOpacity: extractPropertyValue("opacity"),
+                viewBox: extractPropertyValue("viewBox")
             }
         }