New jest tests for generate-css

packages/builder/src/builderStore/generate_css.js

@@ -23,16 +23,28 @@ export const generate_css = style => {
         return (str += `${key}: ${value};\n`)
       }
     } else if (Array.isArray(value)) {
+      if (value.length > 0 && !value.every(v => v === "")) {
         return (str += `${key}: ${value
-        .map(v => (!/px$/.test(v) ? `${v}px` : v))
+          .map(generate_array_styles)
           .join(" ")};\n`)
       }
+    }
   }, "")
 
   return (cssString || "").trim()
 }
 
-const apply_class = (id, name = "element", styles, selector) => {
+export const generate_array_styles = item => {
+  let safeItem = item === "" ? 0 : item
+  let hasPx = new RegExp("px$")
+  if (!hasPx.test(safeItem)) {
+    return `${safeItem}px`
+  } else {
+    return safeItem
+  }
+}
+
+export const apply_class = (id, name = "element", styles, selector) => {
   if (selector === "normal") {
     return `.${name}-${id} {\n${styles}\n}`
   } else {

packages/builder/tests/generate_css.spec.js

@@ -1,320 +1,55 @@
 import {
   generate_css,
-  make_margin,
   generate_screen_css,
+  generate_array_styles
 } from "../src/builderStore/generate_css.js"
 
-describe("make_margin", () => {
-  test("it should generate a valid rule", () => {
-    expect(make_margin(["1", "1", "1", "1"])).toEqual("1px 1px 1px 1px")
-  })
-
-  test("empty values should output 0", () => {
-    expect(make_margin(["1", "1", "", ""])).toEqual("1px 1px 0px 0px")
-    expect(make_margin(["1", "", "", "1"])).toEqual("1px 0px 0px 1px")
-    expect(make_margin(["", "", "", ""])).toEqual("0px 0px 0px 0px")
-  })
-})
-
 describe("generate_css", () => {
-  test("it should generate a valid css rule: grid-area", () => {
+
-    expect(generate_css({ layout: { gridarea: ["", "", "", ""] } })).toEqual({
+  test("Check how partially empty arrays are handled", () => {
-      layout: "",
+    expect(["", "5", "", ""].map(generate_array_styles)).toEqual(["0px", "5px", "0px", "0px"])
-      position: "",
+  })
+
+  test("Check how array styles are output", () => {
+    expect(generate_css({ margin: ["0", "10", "0", "15"] })).toBe("margin: 0px 10px 0px 15px;")
+  })
+
+  test("Check handling of an array with empty string values", () => {
+    expect(generate_css({ padding: ["", "", "", ""] })).toBe("")
+  })
+
+  test("Check handling of an empty array", () => {
+    expect(generate_css({ margin: [] })).toBe("")
+  })
+
+  test("Check handling of valid font property", () => {
+    expect(generate_css({ "font-size": "10px" })).toBe("font-size: 10px;")
   })
 })
 
-  test("it should generate a valid css rule: grid-gap", () => {
-    expect(generate_css({ layout: { gap: "10" } })).toEqual({
-      layout: "grid-gap: 10px;\ndisplay: grid;",
-      position: "",
-    })
-  })
-
-  test("it should generate a valid css rule: column 1", () => {
-    expect(generate_css({ position: { column: ["", ""] } })).toEqual({
-      layout: "",
-      position: "",
-    })
-  })
-
-  test("it should generate a valid css rule: column 2", () => {
-    expect(generate_css({ position: { column: ["1", ""] } })).toEqual({
-      position: "grid-column-start: 1;",
-      layout: "",
-    })
-  })
-
-  test("it should generate a valid css rule: column 3", () => {
-    expect(generate_css({ position: { column: ["", "1"] } })).toEqual({
-      position: "grid-column-end: 1;",
-      layout: "",
-    })
-  })
-
-  test("it should generate a valid css rule: column 4", () => {
-    expect(generate_css({ position: { column: ["1", "1"] } })).toEqual({
-      position: "grid-column-start: 1;\ngrid-column-end: 1;",
-      layout: "",
-    })
-  })
-
-  test("it should generate a valid css rule: row 1", () => {
-    expect(generate_css({ position: { row: ["", ""] } })).toEqual({
-      layout: "",
-      position: "",
-    })
-  })
-
-  test("it should generate a valid css rule: row 2", () => {
-    expect(generate_css({ position: { row: ["1", ""] } })).toEqual({
-      position: "grid-row-start: 1;",
-      layout: "",
-    })
-  })
-
-  test("it should generate a valid css rule: row 3", () => {
-    expect(generate_css({ position: { row: ["", "1"] } })).toEqual({
-      position: "grid-row-end: 1;",
-      layout: "",
-    })
-  })
-
-  test("it should generate a valid css rule: row 4", () => {
-    expect(generate_css({ position: { row: ["1", "1"] } })).toEqual({
-      position: "grid-row-start: 1;\ngrid-row-end: 1;",
-      layout: "",
-    })
-  })
-
-  test("it should generate a valid css rule: padding 1", () => {
-    expect(
-      generate_css({ position: { padding: ["1", "1", "1", "1"] } })
-    ).toEqual({
-      position: "padding: 1px 1px 1px 1px;",
-      layout: "",
-    })
-  })
-
-  test("it should generate a valid css rule: padding 2", () => {
-    expect(generate_css({ position: { padding: ["1", "", "", "1"] } })).toEqual(
-      {
-        position: "padding: 1px 0px 0px 1px;",
-        layout: "",
-      }
-    )
-  })
-
-  test("it should generate a valid css rule: margin 1", () => {
-    expect(
-      generate_css({ position: { margin: ["1", "1", "1", "1"] } })
-    ).toEqual({
-      position: "margin: 1px 1px 1px 1px;",
-      layout: "",
-    })
-  })
-
-  test("it should generate a valid css rule: margin 2", () => {
-    expect(generate_css({ position: { margin: ["1", "", "", "1"] } })).toEqual({
-      position: "margin: 1px 0px 0px 1px;",
-      layout: "",
-    })
-  })
-
-  test("it should generate a valid css rule: z-index 1", () => {
-    expect(generate_css({ position: { zindex: "" } })).toEqual({
-      position: "",
-      layout: "",
-    })
-  })
-
-  test("it should generate a valid css rule: z-index 2", () => {
-    expect(generate_css({ position: { zindex: "1" } })).toEqual({
-      position: "z-index: 1;",
-      layout: "",
-    })
-  })
-})
 
 describe("generate_screen_css", () => {
-  test("it should compile the css for a list of components", () => {
+  const normalComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: { "font-size": "16px" }, hover: {}, active: {}, selected: {} } }
-    const components = [
-      {
-        _styles: {
-          layout: { gridarea: ["", "", "", ""] },
-          position: { margin: ["1", "1", "1", "1"] },
-        },
-        _id: 1,
-      },
-      {
-        _styles: {
-          layout: { gridarea: ["", "", "", ""] },
-          position: { margin: ["1", "1", "1", "1"] },
-        },
-        _id: 2,
-      },
-      {
-        _styles: {
-          layout: { gridarea: ["", "", "", ""] },
-          position: { margin: ["1", "1", "1", "1"] },
-        },
-        _id: 3,
-      },
-      {
-        _styles: {
-          layout: { gridarea: ["", "", "", ""] },
-          position: { margin: ["1", "1", "1", "1"] },
-        },
-        _id: 4,
-      },
-    ]
     
-    const compiled = `.pos-1 {
+  test("Test generation of normal css styles", () => {
-margin: 1px 1px 1px 1px;
+    expect(generate_screen_css([normalComponent])).toBe(".header-123-456 {\nfont-size: 16px;\n}")
-}
-.lay-1 {
-
-}
-.pos-2 {
-margin: 1px 1px 1px 1px;
-}
-.lay-2 {
-
-}
-.pos-3 {
-margin: 1px 1px 1px 1px;
-}
-.lay-3 {
-
-}
-.pos-4 {
-margin: 1px 1px 1px 1px;
-}
-.lay-4 {
-
-}`
-
-    expect(generate_screen_css(components)).toEqual(compiled)
   })
 
-  test("it should compile the css for a list of components", () => {
+  const hoverComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: {}, hover: {"font-size": "16px"}, active: {}, selected: {} } }
-    const components = [
-      {
-        _styles: {
-          layout: { gridarea: ["", "", "", ""] },
-          position: { margin: ["1", "1", "1", "1"] },
-        },
-        _id: 1,
-        _children: [
-          {
-            _styles: {
-              layout: { gridarea: ["", "", "", ""] },
-              position: { margin: ["1", "1", "1", "1"] },
-            },
-            _id: 2,
-            _children: [
-              {
-                _styles: {
-                  layout: { gridarea: ["", "", "", ""] },
-                  position: { margin: ["1", "1", "1", "1"] },
-                },
-                _id: 3,
-                _children: [
-                  {
-                    _styles: {
-                      layout: { gridarea: ["", "", "", ""] },
-                      position: { margin: ["1", "1", "1", "1"] },
-                    },
-                    _id: 4,
-                    _children: [
-                      {
-                        _styles: {
-                          layout: { gridarea: ["", "", "", ""] },
-                          position: { margin: ["1", "1", "1", "1"] },
-                        },
-                        _id: 5,
-                        _children: [],
-                      },
-                    ],
-                  },
-                ],
-              },
-            ],
-          },
-        ],
-      },
-      {
-        _styles: {
-          layout: { gridarea: ["", "", "", ""] },
-          position: { margin: ["1", "1", "1", "1"] },
-        },
-        _id: 6,
-      },
-      {
-        _styles: {
-          layout: { gridarea: ["", "", "", ""] },
-          position: { margin: ["1", "1", "1", "1"] },
-        },
-        _id: 7,
-      },
-      {
-        _styles: {
-          layout: { gridarea: ["", "", "", ""] },
-          position: { margin: ["1", "1", "1", "1"] },
-        },
-        _id: 8,
-      },
-    ]
 
-    const compiled = `.pos-1 {
+  test("Test generation of hover css styles", () => {
-margin: 1px 1px 1px 1px;
+    expect(generate_screen_css([hoverComponent])).toBe(".header-123-456:hover {\nfont-size: 16px;\n}")
-}
+  })
-.lay-1 {
 
-}
+  const selectedComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: {}, hover: {}, active: {}, selected: { "font-size": "16px" } } }
-.pos-2 {
-margin: 1px 1px 1px 1px;
-}
-.lay-2 {
   
-}
+  test("Test generation of selection css styles", () => {
-.pos-3 {
+    expect(generate_screen_css([selectedComponent])).toBe(".header-123-456::selection {\nfont-size: 16px;\n}")
-margin: 1px 1px 1px 1px;
+  }) 
-}
-.lay-3 {
 
-}
+  const emptyComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: {}, hover: {}, active: {}, selected: {} } }
-.pos-4 {
-margin: 1px 1px 1px 1px;
-}
-.lay-4 {
 
-}
+  test.only("Testing handling of empty component styles", () => {
-.pos-5 {
+    expect(generate_screen_css([emptyComponent])).toBe("")
-margin: 1px 1px 1px 1px;
-}
-.lay-5 {
-
-}
-.pos-6 {
-margin: 1px 1px 1px 1px;
-}
-.lay-6 {
-
-}
-.pos-7 {
-margin: 1px 1px 1px 1px;
-}
-.lay-7 {
-
-}
-.pos-8 {
-margin: 1px 1px 1px 1px;
-}
-.lay-8 {
-
-}`
-
-    expect(generate_screen_css(components)).toEqual(compiled)
   }) 
 })