1 | <!DOCTYPE html>
|
2 | <html lang="en">
|
3 | <head>
|
4 | <meta charset="UTF-8">
|
5 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
6 | <meta http-equiv="X-UA-Compatible" content="ie=edge">
|
7 | <title>Document</title>
|
8 | <link href="https://unpkg.com/mocha@4.0.1/mocha.css" rel="stylesheet" />
|
9 | <link rel="stylesheet" href="/test/styles.css">
|
10 | <link rel="icon" type="image/png" href="/resources/favicon-16x16.png" sizes="16x16" />
|
11 | <link rel="icon" type="image/png" href="/resources/favicon-32x32.png" sizes="32x32" />
|
12 | </head>
|
13 | <body>
|
14 | <nav onclick="location.pathname='/test/index.html'">
|
15 | <h1>Mocha Tests - Composi Fragment Tag</h1>
|
16 | </nav>
|
17 | <section>
|
18 | <div id="mocha"></div>
|
19 | <div id="messages"></div>
|
20 | <div id="fixtures"></div>
|
21 | <div id="hide-tests">
|
22 | <div id="fragment-test"></div>
|
23 | <div id="fragment-test2"></div>
|
24 | <ul id="fragment-test3"></ul>
|
25 | </div>
|
26 | </section>
|
27 |
|
28 | <script src="https://unpkg.com/mocha@4.0.1/mocha.js"></script>
|
29 | <script src="https://unpkg.com/chai@4.1.2/chai.js"></script>
|
30 | <script src='/dist/composi.js'></script>
|
31 | <script>mocha.setup('bdd')</script>
|
32 | <script>
|
33 | const {h, mount, render, patch, Fragment} = composi
|
34 | let expect = chai.expect
|
35 |
|
36 |
|
37 |
|
38 | describe('Examine Fragment tag virtual node', function() {
|
39 | const letters = ['A', 'B', 'C', 'D', 'E', 'F']
|
40 | function NestFragments({letters}) {
|
41 | return (
|
42 | h(
|
43 | 'main',
|
44 | {},
|
45 | [
|
46 | Fragment(
|
47 | null,
|
48 | [
|
49 | h('span', {}, ['A']),
|
50 | h('span', {}, ['B']),
|
51 | Fragment(null, [
|
52 | h('span', {}, ['C']),
|
53 | h('span', {}, ['D']),
|
54 | Fragment(null, [
|
55 | h('span', {}, ['E']),
|
56 | h('span', {}, ['F']),
|
57 | ])
|
58 | ])
|
59 | ]
|
60 | )
|
61 | ]
|
62 | )
|
63 | )
|
64 | }
|
65 | const fragmentVnode = NestFragments({letters})
|
66 | window.fragmentVnode = fragmentVnode
|
67 | it('VNode should have six children', function() {
|
68 | expect(fragmentVnode.children.length).to.equal(6)
|
69 | })
|
70 | it('Children should have value of "A", "B", "C", "D", "E", "F"', function() {
|
71 | expect(fragmentVnode.children[0].children[0].type).to.equal('A')
|
72 | expect(fragmentVnode.children[1].children[0].type).to.equal('B')
|
73 | expect(fragmentVnode.children[2].children[0].type).to.equal('C')
|
74 | expect(fragmentVnode.children[3].children[0].type).to.equal('D')
|
75 | expect(fragmentVnode.children[4].children[0].type).to.equal('E')
|
76 | expect(fragmentVnode.children[5].children[0].type).to.equal('F')
|
77 | })
|
78 | it('The containing element should be "main"', function() {
|
79 | expect(fragmentVnode.type).to.equal('main')
|
80 | })
|
81 | it('frament child type should be "span"', function() {
|
82 | expect(fragmentVnode.children[0].type).to.equal('span')
|
83 | expect(fragmentVnode.children[1].type).to.equal('span')
|
84 | expect(fragmentVnode.children[2].type).to.equal('span')
|
85 | expect(fragmentVnode.children[3].type).to.equal('span')
|
86 | expect(fragmentVnode.children[4].type).to.equal('span')
|
87 | expect(fragmentVnode.children[5].type).to.equal('span')
|
88 | })
|
89 | })
|
90 |
|
91 | describe('Use Fragment tag', function() {
|
92 | const stuff = ['Apples', 'Oranges', 'Bananas']
|
93 | const fragTest = document.querySelector('#fragment-test')
|
94 | function Items(stuff) {
|
95 | const items = stuff.map(item => h('li', {}, [item]))
|
96 | return Fragment(null, items)
|
97 | }
|
98 | mount(h('ul', {}, [Items(stuff)]), '#fragment-test')
|
99 | it('list should have three items', function() {
|
100 | expect(fragTest.firstElementChild.children.length).to.equal(3)
|
101 | })
|
102 | it('list items should be of type "LI"', function() {
|
103 | expect(fragTest.firstElementChild.children[0].nodeName).to.equal('LI')
|
104 | expect(fragTest.firstElementChild.children[1].nodeName).to.equal('LI')
|
105 | expect(fragTest.firstElementChild.children[2].nodeName).to.equal('LI')
|
106 | })
|
107 | it('list items parent should be of type "UL"', function() {
|
108 | expect(fragTest.firstElementChild.nodeName).to.equal('UL')
|
109 | })
|
110 | })
|
111 |
|
112 | describe('Nested Fragment tags should flatten out', function() {
|
113 | const letters = ['a', 'b', 'c', 'd', 'e']
|
114 | const fragTest2 = document.querySelector('#fragment-test2')
|
115 | const items = Fragment(
|
116 | null, [
|
117 | h('span', {}, [letters[0]]),
|
118 | h('span', {}, [letters[1]]),
|
119 | Fragment(
|
120 | null, [
|
121 | h('span', {}, [letters[2]]),
|
122 | h('span', {}, [letters[3]]),
|
123 | Fragment(
|
124 | null, [
|
125 | h('span', {}, [letters[4]])
|
126 | ]
|
127 | )
|
128 | ]
|
129 | )
|
130 | ]
|
131 | )
|
132 | const vNodeTest = h('div', {}, items)
|
133 | window.vNodeTest = vNodeTest
|
134 | mount(vNodeTest, '#fragment-test2')
|
135 | it('vNode should have only five children', function() {
|
136 | expect(vNodeTest.children.length).to.equal(5)
|
137 | })
|
138 | it('vNode type should be "div"', function() {
|
139 | expect(vNodeTest.type).to.equal('div')
|
140 | })
|
141 | it('vNode children type should be "span"', function() {
|
142 | expect(vNodeTest.children[0].type).to.equal('span')
|
143 | expect(vNodeTest.children[1].type).to.equal('span')
|
144 | expect(vNodeTest.children[2].type).to.equal('span')
|
145 | expect(vNodeTest.children[3].type).to.equal('span')
|
146 | expect(vNodeTest.children[4].type).to.equal('span')
|
147 | })
|
148 | it('vNode children should have value of "a, b, c, d, e"', function() {
|
149 | expect(vNodeTest.children[0].children[0].type).to.equal('a')
|
150 | expect(vNodeTest.children[1].children[0].type).to.equal('b')
|
151 | expect(vNodeTest.children[2].children[0].type).to.equal('c')
|
152 | expect(vNodeTest.children[3].children[0].type).to.equal('d')
|
153 | expect(vNodeTest.children[4].children[0].type).to.equal('e')
|
154 | })
|
155 | it('should flatten nested fragments into five siblings in DOM', function() {
|
156 | /*
|
157 | Use nested fragments to test if they flatten during render:
|
158 | const items = Fragment(
|
159 | null, [
|
160 | h('span', {}, [letters[0]]),
|
161 | h('span', {}, [letters[1]]),
|
162 | Fragment(
|
163 | null, [
|
164 | h('span', {}, [letters[2]]),
|
165 | h('span', {}, [letters[3]]),
|
166 | Fragment(
|
167 | null, [
|
168 | h('span', {}, [letters[4]])
|
169 | ]
|
170 | )
|
171 | ]
|
172 | )
|
173 | ]
|
174 | )
|
175 | */
|
176 | expect(fragTest2.firstElementChild.children.length).to.equal(5)
|
177 | })
|
178 | it('Fragment children in DOM should be of type "SPAN"', function() {
|
179 | expect(fragTest2.firstElementChild.children[0].nodeName).to.equal('SPAN')
|
180 | expect(fragTest2.firstElementChild.children[1].nodeName).to.equal('SPAN')
|
181 | expect(fragTest2.firstElementChild.children[2].nodeName).to.equal('SPAN')
|
182 | expect(fragTest2.firstElementChild.children[3].nodeName).to.equal('SPAN')
|
183 | expect(fragTest2.firstElementChild.children[4].nodeName).to.equal('SPAN')
|
184 | })
|
185 | it('Fragment parent in DOM should be of type "DIV"', function() {
|
186 | expect(fragTest2.firstElementChild.nodeName).to.equal('DIV')
|
187 | })
|
188 | })
|
189 | describe('Cannot insert Fragment tag directly into DOM', function() {
|
190 |
|
191 | let c
|
192 | function ListItems() {
|
193 | return (
|
194 | Fragment(null, [
|
195 | h('li', {}, 'One'),
|
196 | h('li', {}, 'Two'),
|
197 | h('li', {}, 'Three')
|
198 | ])
|
199 | )
|
200 | }
|
201 | try {
|
202 | mount(ListItems(), document.querySelector('#fragment-test3'))
|
203 | } catch(err) {
|
204 | renderError = err
|
205 | }
|
206 | it('Render should generate an error message when attempting to insert Fragment tag directly into DOM', function() {
|
207 | expect(typeof renderError).to.equal('object')
|
208 | expect(renderError.message).to.equal('Cannot insert Fragment tag directly into DOM.')
|
209 | })
|
210 | it('UL tag in DOM should remain empty', function() {
|
211 | const ul = document.querySelector('#fragment-test3')
|
212 | expect(ul.children.length).to.equal(0)
|
213 | })
|
214 |
|
215 | })
|
216 |
|
217 | mocha.run()
|
218 | </script>
|
219 | </body>
|
220 | </html> |
\ | No newline at end of file |