-
Notifications
You must be signed in to change notification settings - Fork 154
/
component-non-element-root.ts
77 lines (67 loc) · 3.09 KB
/
component-non-element-root.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
// @ts-ignore
import ComponentWithConditionalRootStringNode from '../integration/component-with-conditional-root-string-child-node.json'
// @ts-ignore
import ComponentWithConditionalRootArrayNode from '../integration/component-with-conditional-root-array-child-node.json'
import { createReactComponentGenerator } from '../../src'
import { GeneratedFile } from '@teleporthq/teleport-types'
import {
component,
staticNode,
dynamicNode,
} from '@teleporthq/teleport-shared/dist/cjs/builders/uidl-builders'
const JS_FILE = 'js'
const findFileByType = (files: GeneratedFile[], type: string = JS_FILE) =>
files.find((file) => file.fileType === type)
describe('React Component Generator support for non elements as root', () => {
const generator = createReactComponentGenerator()
it('should support static as root node', async () => {
const uidl = component('StaticRootComponent', staticNode('Teleport Code Generators'))
const result = await generator.generateComponent(uidl)
const jsFile = findFileByType(result.files, JS_FILE)
expect(jsFile).toBeDefined()
expect(result.files).toBeDefined()
expect(jsFile.content).toContain('import React')
expect(result.dependencies).toBeDefined()
expect(jsFile.content).toContain(`(props) => 'Teleport Code Generators'`)
expect(result.files.length).toBeTruthy()
})
it('should support dynamic as root node', async () => {
const prop = {
name: {
type: 'string',
defaultValue: 'Teleport',
},
}
const uidl = component('DynamicRootComponent', dynamicNode('prop', 'name'), prop)
const result = await generator.generateComponent(uidl)
const jsFile = findFileByType(result.files, JS_FILE)
expect(jsFile).toBeDefined()
expect(result.files).toBeDefined()
expect(jsFile.content).toContain('import React')
expect(result.dependencies).toBeDefined()
expect(jsFile.content).toContain('(props) => props.name')
expect(jsFile.content).toContain('PropTypes.string')
expect(result.files.length).toBeTruthy()
})
it('should support conditional as root node', async () => {
const result = await generator.generateComponent(ComponentWithConditionalRootStringNode)
const jsFile = findFileByType(result.files, JS_FILE)
expect(jsFile).toBeDefined()
expect(result.files).toBeDefined()
expect(jsFile.content).toContain('import React')
expect(result.dependencies).toBeDefined()
expect(jsFile.content).toContain("(props) => props.test && 'test'")
expect(result.files.length).toBeTruthy()
})
it('should support conditional array as root node', async () => {
const result = await generator.generateComponent(ComponentWithConditionalRootArrayNode)
const jsFile = findFileByType(result.files, JS_FILE)
expect(jsFile).toBeDefined()
expect(result.files).toBeDefined()
expect(jsFile.content).toContain('import React, { useState }')
expect(result.dependencies).toBeDefined()
expect(jsFile.content).toContain('[isVisible, setIsVisible]')
expect(jsFile.content).toContain('isVisible && <span>Now you see me!</span>')
expect(result.files.length).toBeTruthy()
})
})