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