budibase/packages/builder/tests/generate_css.spec.js

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)
	})
})