New jest tests for generate-css
This commit is contained in:
Conor_Mack
parent
1bf57c7873
commit
0876338ce2
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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("")
|
||||
})
|
||||
})
|
||||
Loading…
Reference in a new issue