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

describe('checkForIllegalNames', () => {
  const comp = component(
    'Component',
    elementNode('container'),
    {
      'my-title': definition('string', 'test'),
    },
    {
      isVisible: definition('boolean', false),
    }
  )

  comp.outputOptions = {
    componentClassName: 'Component',
    fileName: 'component',
  }

  it('checks component name', () => {
    checkForIllegalNames(comp, mapping)
    expect(comp.outputOptions.componentClassName).toBe('AppComponent')
  })

it('should return resolved UIDL', () => {
    const uidl = component(
      'Conditional Component',
      elementNode('container', {}, [
        conditionalNode(
          dynamicNode('state', 'isVisible'),
          elementNode('div', {}, [staticNode('Now you see me!')]),
          true
        ),
      ]),
      {},
      { isVisible: definition('boolean', true), isShareable: definition('boolean', false) }
    )

    const extraMapping = {
      elements: {
        container: {
          elementType: 'div',
        },
      },
    }

    const resolver = new Resolver()
    resolver.addMapping(mapping)
    const resolvedUIDL = resolver.resolveUIDL(uidl, { mapping: extraMapping })
    expect(resolvedUIDL.name).toBe('Conditional Component')
    expect(resolvedUIDL.outputOptions.fileName).toBe('conditional-component')
    expect(resolvedUIDL.outputOptions.componentClassName).toBe('ConditionalComponent')

for: staticNode('mappedTest'),
            'data-test': dynamicNode('prop', 'test'),
            'data-static': staticNode('test'),
            'data-inner-value': dynamicNode('prop', 'content.heading'),
          },
          [dynamicNode('local', 'item')]
        ),
      ]),
      dynamicNode('prop', 'items'),
      {
        useIndex: true,
      }
    ),
  ]),
  {
    items: definition('object', { test: '123' }),
    test: definition('string', '123'),
    content: definition('object', { heading: 'Hello World' }),
  },
  {}
)

describe('Vue Attribute Mapping', () => {
  const generator = createVueComponentGenerator()

  it('should return code with attributes mapped', async () => {
    const result = await generator.generateComponent(uidl)
    const vueFile = findFileByType(result.files, VUE_FILE)

    expect(vueFile).toBeDefined()
    expect(vueFile.content).not.toContain('htmlFor')
    expect(vueFile.content).toContain('for')

const uidl = component(
  'Conditional Component',
  elementNode('container', {}, [
    conditionalNode(
      dynamicNode('state', 'isVisible'),
      elementNode('text', {}, [staticNode('Now you see me!')]),
      true
    ),
    conditionalNode(
      dynamicNode('state', 'isShareable'),
      elementNode('text', {}, [staticNode('I am not shareable!')]),
      false
    ),
  ]),
  {},
  { isVisible: definition('boolean', true), isShareable: definition('boolean', false) }
)

describe('Component with conditional node type', () => {
  it('renders code with condition if value on state is true', async () => {
    const result = await vueGenerator.generateComponent(uidl)
    const code = result.files[0].content

    expect(code).toContain('<span>Now you see me!</span>')
  })
  it('renders code with !condition if value on state is false', async () =&gt; {
    const result = await vueGenerator.generateComponent(uidl)
    const code = result.files[0].content

    expect(code).toContain('<span>I am not shareable!</span>')
  })
})

const uidl = component(
  'Conditional Component',
  elementNode('container', {}, [
    conditionalNode(
      dynamicNode('state', 'isVisible'),
      elementNode('text', {}, [staticNode('Now you see me!')]),
      true
    ),
    conditionalNode(
      dynamicNode('state', 'isShareable'),
      elementNode('text', {}, [staticNode('I am not shareable!')]),
      false
    ),
  ]),
  {},
  { isVisible: definition('boolean', true), isShareable: definition('boolean', false) }
)

describe('Component with conditional node type', () => {
  it('renders code with condition if value on state is true', async () => {
    const result = await generator.generateComponent(uidl)
    const jsFile = findFileByType(result.files, JS_FILE)

    expect(jsFile).toBeDefined()
    expect(jsFile.content).toContain('{isVisible &amp;&amp; <span>Now you see me!</span>}')
  })
  it('renders code with !condition if value on state is false', async () =&gt; {
    const result = await generator.generateComponent(uidl)
    const jsFile = findFileByType(result.files, JS_FILE)

    expect(jsFile).toBeDefined()
    expect(jsFile.content).toContain('{!isShareable &amp;&amp; <span>I am not shareable!</span>}')

for: staticNode('mappedTest'),
            autoplay: staticNode('true'),
            'data-test': dynamicNode('prop', 'test'),
            'data-inner-value': dynamicNode('prop', 'content.heading'),
          },
          [dynamicNode('local', 'item')]
        ),
      ]),
      dynamicNode('prop', 'items'),
      {
        useIndex: true,
      }
    ),
  ]),
  {
    items: definition('object', { test: '123' }),
    test: definition('string', '123'),
    content: definition('object', { heading: 'Hello World' }),
  },
  {}
)

const JS_FILE = 'js'
const findFileByType = (files: GeneratedFile[], type: string = JS_FILE) =>
  files.find((file) => file.fileType === type)
const generator = createReactComponentGenerator()

describe('React Attribute Mapping', () => {
  it('should return code with attributes mapped to React attributes', async () => {
    const result = await generator.generateComponent(uidl)
    const jsFile = findFileByType(result.files, JS_FILE)

'data-static': staticNode('test'),
            'data-inner-value': dynamicNode('prop', 'content.heading'),
          },
          [dynamicNode('local', 'item')]
        ),
      ]),
      dynamicNode('prop', 'items'),
      {
        useIndex: true,
      }
    ),
  ]),
  {
    items: definition('object', { test: '123' }),
    test: definition('string', '123'),
    content: definition('object', { heading: 'Hello World' }),
  },
  {}
)

describe('Vue Attribute Mapping', () => {
  const generator = createVueComponentGenerator()

  it('should return code with attributes mapped', async () => {
    const result = await generator.generateComponent(uidl)
    const vueFile = findFileByType(result.files, VUE_FILE)

    expect(vueFile).toBeDefined()
    expect(vueFile.content).not.toContain('htmlFor')
    expect(vueFile.content).toContain('for')
  })
})

it('outputs three AST chunks with the corresponding chunk names', async () => {
    const routeDefinition: UIDLStateDefinition = definition('string', 'home')
    routeDefinition.values = [
      { value: 'home', pageOptions: { fileName: 'home', componentName: 'Home', navLink: '/' } },
      {
        value: 'about',
        pageOptions: { fileName: 'about', componentName: 'About', navLink: '/about' },
      },
      {
        value: 'contact',
        pageOptions: { fileName: 'contact', componentName: 'Contact', navLink: '/contact' },
      },
    ]
    const structure: ComponentStructure = {
      chunks: [],
      options: {},
      uidl: component(
        'Test',

const uidl = (dependency) => {
  return component(
    'Component With Dependencies',
    elementNode(
      dependency.name,
      {},
      [],
      componentDependency(dependency.type, dependency.path, dependency.version, dependency.option)
    ),
    {},
    { title: definition('boolean', true) }
  )
}

files.find((file) => file.fileType === type)

const generator = createAngularComponentGenerator()

const uidl = component(
  'Repeat Component',
  elementNode('container', {}, [
    repeatNode(
      elementNode('div', {}, [dynamicNode('local', 'item')]),
      dynamicNode('prop', 'items'),
      {
        useIndex: true,
      }
    ),
  ]),
  { items: definition('array', ['hello', 'world']) },
  {}
)

const uidlWithoutIndex = component(
  'Repeat Component',
  elementNode('container', {}, [
    repeatNode(
      elementNode('div', {}, [dynamicNode('local', 'item')]),
      dynamicNode('prop', 'items'),
      {}
    ),
  ]),
  { items: definition('array', ['hello', 'world']) },
  {}
)