321 lines
7.2 KiB
JavaScript
321 lines
7.2 KiB
JavaScript
import {
|
|
generate_css,
|
|
make_margin,
|
|
generate_screen_css,
|
|
} 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("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 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)
|
|
})
|
|
|
|
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 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)
|
|
})
|
|
})
|