aa4c7fa1c1
* Implement collapsing component hierarchy. * Save screen when adding new components. * Allow creation of nested child components. * Rename updateComponentProps to setComponentProps * Compile layout and position properties to css strings. * Correct ordering errors. * Compile the css for an entire screen. * Add unique id for each component. * Ignore _id props. * Update client to add correct class names to component elements. * Add grid-template fields to layout styling panel. * Inject css into iframe. Minor tweaks. * Fix unset margins. * Update failing tests.
338 lines
6.5 KiB
JavaScript
338 lines
6.5 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)
|
|
})
|
|
})
|