1 |
|
2 |
|
3 |
|
4 |
|
5 | import {createStore, applyMiddleware} from 'redux'
|
6 | import component from 'virtex-component'
|
7 | import element from 'virtex-element'
|
8 | import string from 'virtex-string'
|
9 | import falsy from 'redux-falsy'
|
10 | import virtex from '../src'
|
11 | import test from 'tape'
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 | const store = applyMiddleware(falsy, string, component())(createStore)(() => {}, {})
|
18 | const {create, update} = virtex(store.dispatch)
|
19 |
|
20 | function mount () {
|
21 | let prev
|
22 |
|
23 | return function (vnode) {
|
24 | const result = prev
|
25 | ? update(prev, vnode).element
|
26 | : create(vnode).element
|
27 |
|
28 | prev = vnode
|
29 | return result
|
30 | }
|
31 | }
|
32 |
|
33 | function render (vnode) {
|
34 | return mount()(vnode)
|
35 | }
|
36 |
|
37 |
|
38 |
|
39 |
|
40 |
|
41 | test('rendering virtual element to a string', t => {
|
42 | t.equal(render(<Component />), '<div id="foo"><span>foo</span><span>foo</span></div>', 'element rendered')
|
43 | t.end()
|
44 |
|
45 | function Other ({props}) {
|
46 | return <span>{props.text}</span>
|
47 | }
|
48 |
|
49 | function Component () {
|
50 | return (
|
51 | <div id="foo">
|
52 | <span>foo</span>
|
53 | <Other text="foo" />
|
54 | </div>
|
55 | )
|
56 | }
|
57 | })
|
58 |
|
59 | test('rendering components with children', t => {
|
60 | t.notEqual(render(<Component />), '<div>undefined</div>')
|
61 | t.equal(render(<Component>test</Component>), '<div>test</div>')
|
62 | t.end()
|
63 |
|
64 | function Component ({children}) {
|
65 | return <div>{children}</div>
|
66 | }
|
67 | })
|
68 |
|
69 | // test('renderString: components', t => {
|
70 | // const Component = {
|
71 | // defaultProps: {
|
72 | // hello: 'Hello'
|
73 | // },
|
74 | // initialState: function ({initialCount}) {
|
75 | // return { count: initialCount }
|
76 | // },
|
77 | // render: function ({ props, state }) {
|
78 | // return <div count={state.count}>{props.hello} {props.name}</div>
|
79 | // }
|
80 | // }
|
81 |
|
82 | // t.equal(render(<Component name="Amanda" initialCount={0} />), '<div count="0">Hello Amanda</div>', 'rendered correctly')
|
83 | // t.end()
|
84 | // })
|
85 |
|
86 | test('renderString: lifecycle hooks', t => {
|
87 | const called = []
|
88 | const Component = {
|
89 | onCreate: function(props) {
|
90 | called.push('onCreate')
|
91 | t.ok(props, 'onCreate has props')
|
92 | },
|
93 | render: function(){
|
94 | return <div />
|
95 | }
|
96 | }
|
97 |
|
98 | render(<Component />)
|
99 | t.ok(~called.indexOf('onCreate'), 'onCreate called')
|
100 | t.end()
|
101 | })
|
102 |
|
103 | // test('renderString: innerHTML', t => {
|
104 | // t.equal(<div innerHTML='<span>foo</span>' />, '<div><span>foo</span></div>', 'innerHTML rendered')
|
105 | // t.end()
|
106 | // })
|
107 |
|
108 | test('renderString: input.value', t => {
|
109 | t.equal(render(<input value='foo' />), '<input value="foo" />', 'value rendered')
|
110 | t.end()
|
111 | })
|
112 |
|
113 | test('renderString: function attributes', t => {
|
114 | function foo() { return 'blah' }
|
115 | foo.$$fn = true
|
116 | t.equal(render(<div onClick={foo} />), '<div></div>', 'attribute not rendered')
|
117 | t.end()
|
118 | })
|
119 |
|
120 | test('renderString: empty attributes', t => {
|
121 | t.equal(
|
122 | render(<input type='checkbox' value='' />),
|
123 | '<input type="checkbox" value="" />',
|
124 | 'empty string attribute not rendered'
|
125 | )
|
126 |
|
127 | t.equal(
|
128 | render(<input type='checkbox' value={0} />),
|
129 | '<input type="checkbox" value="0" />',
|
130 | 'zero attribute not rendered'
|
131 | )
|
132 |
|
133 | t.equal(
|
134 | render(<input type="checkbox" disabled={false} />),
|
135 | '<input type="checkbox" />',
|
136 | 'false attribute unexpectedly rendered'
|
137 | )
|
138 |
|
139 | t.equal(
|
140 | render(<input type="checkbox" disabled={null} />),
|
141 | '<input type="checkbox" />',
|
142 | 'null attribute unexpectedly rendered'
|
143 | )
|
144 |
|
145 | const disabled = undefined
|
146 |
|
147 | t.equal(
|
148 | render(<input type="checkbox" disabled={disabled} />),
|
149 | '<input type="checkbox" />',
|
150 | 'undefined attribute unexpectedly rendered'
|
151 | )
|
152 |
|
153 | t.end()
|
154 | })
|
155 |
|
156 | test('updating a virtual tree', t => {
|
157 | const update = mount()
|
158 |
|
159 | t.equal(update(<Component />), '<div id="foo"><span>foo</span><span>foo</span></div>', 'element rendered')
|
160 | t.equal(update(<Component test='1' />), '<div id="foo"><span attr="1">foo</span><span>foo</span></div>')
|
161 | t.end()
|
162 |
|
163 | function Other ({props}) {
|
164 | return <span>{props.text}</span>
|
165 | }
|
166 |
|
167 | function Component ({props}) {
|
168 | return (
|
169 | <div id="foo">
|
170 | <span attr={props.test}>foo</span>
|
171 | <Other text="foo" />
|
172 | </div>
|
173 | )
|
174 | }
|
175 | })
|