test(tests): add tests for layout and style 🍝

- Add Render.applyLayout test for display, flex, min/max size, overflow
- Add Render.applyStyle test for textAlign, cursor, visibility, zIndex and typography
- Add Validator.validateNode test for new layout and style keys

Author: NeaByteLab

tests/Render.test.ts

@@ -282,6 +282,37 @@ Deno.test('Render.applyLayout sets position relative when x or y present', () =>
   assertEquals(style['top'], '20px')
 })
 
+Deno.test('Render.applyLayout sets display flex alignItems justifyContent minWidth overflow', () => {
+  const style: Record<string, string> = {}
+  const element = { style } as unknown as HTMLElement
+  Render.applyLayout(element, {
+    display: 'flex',
+    flexDirection: 'column',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    minWidth: 200,
+    maxWidth: '100%',
+    minHeight: 100,
+    maxHeight: '80vh',
+    overflow: 'auto',
+    overflowX: 'hidden',
+    overflowY: 'scroll'
+  })
+  assertEquals(style['display'], 'flex')
+  assertEquals(style['flexDirection'], 'column')
+  assertEquals(style['flexWrap'], 'wrap')
+  assertEquals(style['alignItems'], 'center')
+  assertEquals(style['justifyContent'], 'space-between')
+  assertEquals(style['minWidth'], '200px')
+  assertEquals(style['maxWidth'], '100%')
+  assertEquals(style['minHeight'], '100px')
+  assertEquals(style['maxHeight'], '80vh')
+  assertEquals(style['overflow'], 'auto')
+  assertEquals(style['overflowX'], 'hidden')
+  assertEquals(style['overflowY'], 'scroll')
+})
+
 Deno.test('Render.applyStyle applies expanded style properties', () => {
   const style: Record<string, string> = {}
   const element = { style } as unknown as HTMLElement
@@ -317,6 +348,31 @@ Deno.test('Render.applyStyle applies fill stroke font border', () => {
   assertEquals(style['font'], '16px sans-serif')
 })
 
+Deno.test('Render.applyStyle applies textAlign cursor visibility zIndex', () => {
+  const style: Record<string, string> = {}
+  const element = { style } as unknown as HTMLElement
+  Render.applyStyle(element, {
+    textAlign: 'center',
+    textDecoration: 'underline',
+    letterSpacing: '0.5px',
+    lineHeight: '1.5',
+    cursor: 'pointer',
+    visibility: 'visible',
+    background: 'linear-gradient(#333, #111)',
+    outline: '1px solid blue',
+    zIndex: '10'
+  })
+  assertEquals(style['textAlign'], 'center')
+  assertEquals(style['textDecoration'], 'underline')
+  assertEquals(style['letterSpacing'], '0.5px')
+  assertEquals(style['lineHeight'], '1.5')
+  assertEquals(style['cursor'], 'pointer')
+  assertEquals(style['visibility'], 'visible')
+  assertEquals(style['background'], 'linear-gradient(#333, #111)')
+  assertEquals(style['outline'], '1px solid blue')
+  assertEquals(style['zIndex'], '10')
+})
+
 Deno.test('Render.applyStyleString parses declarations and calls setProperty', () => {
   const recordedSetPropertyCalls: [string, string][] = []
   const targetStyle = {

tests/Validator.test.ts

@@ -125,6 +125,21 @@ Deno.test('Validator.validateNode copies id layout style attrs content src alt',
   assertEquals(validatedNode.alt, 'image')
 })
 
+Deno.test('Validator.validateNode accepts layout with display flex and style with textAlign', () => {
+  const validatedNode = Validator.validateNode(
+    {
+      type: 'div',
+      layout: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' },
+      style: { textAlign: 'center', cursor: 'pointer' }
+    },
+    'root[0]'
+  )
+  assertEquals(validatedNode.layout?.display, 'flex')
+  assertEquals(validatedNode.layout?.alignItems, 'center')
+  assertEquals(validatedNode.style?.textAlign, 'center')
+  assertEquals(validatedNode.style?.cursor, 'pointer')
+})
+
 Deno.test('Validator.validateNode normalises type to lowercase', () => {
   const validatedNode = Validator.validateNode({ type: 'DIV' }, 'root[0]')
   assertEquals(validatedNode.type, 'div')