From 9dc65eef9882841f745dda28032ee3099dfdc529 Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Tue, 26 May 2020 14:27:33 +0100 Subject: [PATCH] New jest tests for generate-css --- .../builder/src/builderStore/generate_css.js | 20 +- packages/builder/tests/generate_css.spec.js | 331 ++---------------- 2 files changed, 49 insertions(+), 302 deletions(-) diff --git a/packages/builder/src/builderStore/generate_css.js b/packages/builder/src/builderStore/generate_css.js index 093b43337c..5826d4f824 100644 --- a/packages/builder/src/builderStore/generate_css.js +++ b/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)) { - return (str += `${key}: ${value - .map(v => (!/px$/.test(v) ? `${v}px` : v)) - .join(" ")};\n`) + if (value.length > 0 && !value.every(v => v === "")) { + return (str += `${key}: ${value + .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 { diff --git a/packages/builder/tests/generate_css.spec.js b/packages/builder/tests/generate_css.spec.js index 5fa4a94db9..b2a7fca64d 100644 --- a/packages/builder/tests/generate_css.spec.js +++ b/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({ - layout: "", - position: "", - }) + + test("Check how partially empty arrays are handled", () => { + expect(["", "5", "", ""].map(generate_array_styles)).toEqual(["0px", "5px", "0px", "0px"]) }) - 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("Check how array styles are output", () => { + expect(generate_css({ margin: ["0", "10", "0", "15"] })).toBe("margin: 0px 10px 0px 15px;") }) - test("it should generate a valid css rule: column 1", () => { - expect(generate_css({ position: { column: ["", ""] } })).toEqual({ - layout: "", - position: "", - }) + test("Check handling of an array with empty string values", () => { + expect(generate_css({ padding: ["", "", "", ""] })).toBe("") }) - test("it should generate a valid css rule: column 2", () => { - expect(generate_css({ position: { column: ["1", ""] } })).toEqual({ - position: "grid-column-start: 1;", - layout: "", - }) + test("Check handling of an empty array", () => { + expect(generate_css({ margin: [] })).toBe("") }) - 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: "", - }) + test("Check handling of valid font property", () => { + expect(generate_css({ "font-size": "10px" })).toBe("font-size: 10px;") }) }) + describe("generate_screen_css", () => { - test("it should compile the css for a list of components", () => { - 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 { -margin: 1px 1px 1px 1px; -} -.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) + const normalComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: { "font-size": "16px" }, hover: {}, active: {}, selected: {} } } + + test("Test generation of normal css styles", () => { + expect(generate_screen_css([normalComponent])).toBe(".header-123-456 {\nfont-size: 16px;\n}") }) - test("it should compile the css for a list of components", () => { - 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 hoverComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: {}, hover: {"font-size": "16px"}, active: {}, selected: {} } } - const compiled = `.pos-1 { -margin: 1px 1px 1px 1px; -} -.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 { - -} -.pos-5 { -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) + test("Test generation of hover css styles", () => { + expect(generate_screen_css([hoverComponent])).toBe(".header-123-456:hover {\nfont-size: 16px;\n}") }) -}) + + const selectedComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: {}, hover: {}, active: {}, selected: { "font-size": "16px" } } } + + test("Test generation of selection css styles", () => { + expect(generate_screen_css([selectedComponent])).toBe(".header-123-456::selection {\nfont-size: 16px;\n}") + }) + + const emptyComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: {}, hover: {}, active: {}, selected: {} } } + + test.only("Testing handling of empty component styles", () => { + expect(generate_screen_css([emptyComponent])).toBe("") + }) +}) \ No newline at end of file