How to use the @teleporthq/teleport-uidl-builders.slotNode function in @teleporthq/teleport-uidl-builders

describe('Slot with fallback', () => {
    const uidl = component(
      'Slot Component',
      elementNode('container', {}, [slotNode(elementNode('text', {}, [staticNode('Placeholder')]))])
    )

    it('renders props.children and placeholder in React', async () => {
      const result = await reactGenerator.generateComponent(uidl)
      const code = result.files[0].content

      expect(code).toContain('{props.children || <span>Placeholder</span>}')
    })
  })

describe('Slot with fallback', () => {
    const uidl = component(
      'Slot Component',
      elementNode('container', {}, [slotNode(elementNode('text', {}, [staticNode('Placeholder')]))])
    )

    it('renders a  tag and placeholder in Vue', async () => {
      const result = await vueGenerator.generateComponent(uidl)
      const code = result.files[0].content

      expect(code).toContain('<span>Placeholder</span>')
    })
  })

describe('Slot with name', () => {
    const uidl = component(
      'Slot Component',
      elementNode('container', {}, [slotNode(undefined, 'slot-1')])
    )

    it('renders props.children in React', async () => {
      const result = await reactGenerator.generateComponent(uidl)
      const code = result.files[0].content

      expect(code).toContain('{props.children}')
    })
  })
})

it('returns a named  tag', () => {
      const node = elementNode('container', {}, [slotNode(null, 'hole')])
      const result = generateJSXSyntax(node, params, { ...options, slotHandling: 'native' })

      const slotJSXTag = result.children[0] as types.JSXElement
      expect((slotJSXTag.openingElement.name as types.JSXIdentifier).name).toBe('slot')

      const nameAttr = slotJSXTag.openingElement.attributes[0] as types.JSXAttribute
      expect(nameAttr.name.name).toBe('name')
      expect((nameAttr.value as types.StringLiteral).value).toBe('hole')
    })
  })

it('returns a  tag with fallback', () => {
      const node = elementNode('container', {}, [
        slotNode(elementNode('span', {}, [staticNode('fallback')])),
      ])
      const result = generateJSXSyntax(node, params, { ...options, slotHandling: 'native' })

      const slotJSXTag = result.children[0] as types.JSXElement
      expect((slotJSXTag.openingElement.name as types.JSXIdentifier).name).toBe('slot')

      const slotFallbackJSXTag = slotJSXTag.children[0] as types.JSXElement
      expect((slotFallbackJSXTag.openingElement.name as types.JSXIdentifier).name).toBe('span')
    })

describe('Slot with name', () => {
    const uidl = component(
      'Slot Component',
      elementNode('container', {}, [slotNode(undefined, 'slot-1')])
    )

    it('renders a  tag in Vue', async () => {
      const result = await vueGenerator.generateComponent(uidl)
      const code = result.files[0].content

      expect(code).toContain('')
    })
  })
})

const nodeToTraverse = elementNode(
  'container',
  {},
  [
    staticNode('static'),
    dynamicNode('prop', 'title'),
    elementNode(
      'container',
      {
        attr: staticNode('dummy-attr'),
      },
      [
        repeatNode(elementNode('container', {}, []), dynamicNode('prop', 'items')),
        conditionalNode(dynamicNode('state', 'visible'), elementNode('text', {}, []), true),
        slotNode(staticNode('fallback'), 'slot-1'),
      ]
    ),
  ],
  null,
  {
    margin: staticNode('10px'),
    height: dynamicNode('prop', 'height'),
  }
)

describe('traverseNodes', () => {
  it('counts the total number of nodes', () => {
    let counter = 0
    traverseNodes(nodeToTraverse, () => counter++)
    expect(counter).toBe(15)
  })