Skip to content

Commit cbac80d

Browse files
kfuledead-claudia
kfule
authored and
dead-claudia
committed
add tests confirming multiple generations are tracked correctly
1 parent a20bfd6 commit cbac80d

1 file changed

Lines changed: 378 additions & 0 deletions

File tree

‎render/tests/test-domFor.js‎

Lines changed: 378 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,384 @@ o.spec("domFor(vnode)", function() {
114114
done()
115115
})
116116
})
117+
o("works multiple vnodes with onbeforeremove (1/3)", function (done) {
118+
let thenCBA, thenCBB, thenCBC
119+
const onbeforeremoveA = o.spy(function onbeforeremove(){
120+
return {then(resolve){thenCBA = resolve}}
121+
})
122+
const onbeforeremoveB = o.spy(function onbeforeremove(){
123+
return {then(resolve){thenCBB = resolve}}
124+
})
125+
const onbeforeremoveC = o.spy(function onbeforeremove(){
126+
return {then(resolve){thenCBC = resolve}}
127+
})
128+
// to avoid updating internal nodes only, vnodes have key attributes
129+
const A = fragment({key: 1, onbeforeremove: onbeforeremoveA}, [m("a1"), m("a2")])
130+
const B = fragment({key: 2, onbeforeremove: onbeforeremoveB}, [m("b1"), m("b2")])
131+
const C = fragment({key: 3, onbeforeremove: onbeforeremoveC}, [m("c1"), m("c2")])
132+
133+
render(root, [A])
134+
o(onbeforeremoveA.callCount).equals(0)
135+
o(onbeforeremoveB.callCount).equals(0)
136+
o(onbeforeremoveC.callCount).equals(0)
137+
138+
render(root, [B])
139+
o(onbeforeremoveA.callCount).equals(1)
140+
o(onbeforeremoveB.callCount).equals(0)
141+
o(onbeforeremoveC.callCount).equals(0)
142+
143+
render(root, [C])
144+
o(onbeforeremoveA.callCount).equals(1)
145+
o(onbeforeremoveB.callCount).equals(1)
146+
o(onbeforeremoveC.callCount).equals(0)
147+
148+
render(root, [])
149+
o(onbeforeremoveA.callCount).equals(1)
150+
o(onbeforeremoveB.callCount).equals(1)
151+
o(onbeforeremoveC.callCount).equals(1)
152+
153+
// not resolved
154+
o(root.childNodes.length).equals(6)
155+
o(root.childNodes[0].nodeName).equals("A1")
156+
o(root.childNodes[1].nodeName).equals("A2")
157+
o(root.childNodes[2].nodeName).equals("B1")
158+
o(root.childNodes[3].nodeName).equals("B2")
159+
o(root.childNodes[4].nodeName).equals("C1")
160+
o(root.childNodes[5].nodeName).equals("C2")
161+
162+
const iterA = domFor(A)
163+
o(iterA.next().value.nodeName).equals("A1")
164+
o(iterA.next().value.nodeName).equals("A2")
165+
o(iterA.next().done).deepEquals(true)
166+
167+
const iterB = domFor(B)
168+
o(iterB.next().value.nodeName).equals("B1")
169+
o(iterB.next().value.nodeName).equals("B2")
170+
o(iterB.next().done).deepEquals(true)
171+
172+
const iterC = domFor(C)
173+
o(iterC.next().value.nodeName).equals("C1")
174+
o(iterC.next().value.nodeName).equals("C2")
175+
o(iterC.next().done).deepEquals(true)
176+
177+
callAsync(function(){
178+
// not resolved yet
179+
o(root.childNodes.length).equals(6)
180+
o(root.childNodes[0].nodeName).equals("A1")
181+
o(root.childNodes[1].nodeName).equals("A2")
182+
o(root.childNodes[2].nodeName).equals("B1")
183+
o(root.childNodes[3].nodeName).equals("B2")
184+
o(root.childNodes[4].nodeName).equals("C1")
185+
o(root.childNodes[5].nodeName).equals("C2")
186+
187+
const iterA = domFor(A)
188+
o(iterA.next().value.nodeName).equals("A1")
189+
o(iterA.next().value.nodeName).equals("A2")
190+
o(iterA.next().done).deepEquals(true)
191+
192+
const iterB = domFor(B)
193+
o(iterB.next().value.nodeName).equals("B1")
194+
o(iterB.next().value.nodeName).equals("B2")
195+
o(iterB.next().done).deepEquals(true)
196+
197+
const iterC = domFor(C)
198+
o(iterC.next().value.nodeName).equals("C1")
199+
o(iterC.next().value.nodeName).equals("C2")
200+
o(iterC.next().done).deepEquals(true)
201+
202+
// resolve B
203+
thenCBB()
204+
callAsync(function(){
205+
o(root.childNodes.length).equals(4)
206+
o(root.childNodes[0].nodeName).equals("A1")
207+
o(root.childNodes[1].nodeName).equals("A2")
208+
o(root.childNodes[2].nodeName).equals("C1")
209+
o(root.childNodes[3].nodeName).equals("C2")
210+
211+
const iterA = domFor(A)
212+
o(iterA.next().value.nodeName).equals("A1")
213+
o(iterA.next().value.nodeName).equals("A2")
214+
o(iterA.next().done).deepEquals(true)
215+
216+
const iterC = domFor(C)
217+
o(iterC.next().value.nodeName).equals("C1")
218+
o(iterC.next().value.nodeName).equals("C2")
219+
o(iterC.next().done).deepEquals(true)
220+
221+
// resolve C
222+
thenCBC()
223+
callAsync(function(){
224+
o(root.childNodes.length).equals(2)
225+
o(root.childNodes[0].nodeName).equals("A1")
226+
o(root.childNodes[1].nodeName).equals("A2")
227+
228+
const iterA = domFor(A)
229+
o(iterA.next().value.nodeName).equals("A1")
230+
o(iterA.next().value.nodeName).equals("A2")
231+
o(iterA.next().done).deepEquals(true)
232+
233+
// resolve A
234+
thenCBA()
235+
callAsync(function(){
236+
o(root.childNodes.length).equals(0)
237+
done()
238+
})
239+
})
240+
})
241+
})
242+
})
243+
o("works multiple vnodes with onbeforeremove (2/3)", function (done) {
244+
let thenCBA, thenCBB, thenCBC
245+
const onbeforeremoveA = o.spy(function onbeforeremove(){
246+
return {then(resolve){thenCBA = resolve}}
247+
})
248+
const onbeforeremoveB = o.spy(function onbeforeremove(){
249+
return {then(resolve){thenCBB = resolve}}
250+
})
251+
const onbeforeremoveC = o.spy(function onbeforeremove(){
252+
return {then(resolve){thenCBC = resolve}}
253+
})
254+
// to avoid updating internal nodes only, vnodes have key attributes
255+
const A = fragment({key: 1, onbeforeremove: onbeforeremoveA}, [m("a1"), m("a2")])
256+
const B = fragment({key: 2, onbeforeremove: onbeforeremoveB}, [m("b1"), m("b2")])
257+
const C = fragment({key: 3, onbeforeremove: onbeforeremoveC}, [m("c1"), m("c2")])
258+
259+
render(root, [A])
260+
o(onbeforeremoveA.callCount).equals(0)
261+
o(onbeforeremoveB.callCount).equals(0)
262+
o(onbeforeremoveC.callCount).equals(0)
263+
264+
render(root, [B])
265+
o(onbeforeremoveA.callCount).equals(1)
266+
o(onbeforeremoveB.callCount).equals(0)
267+
o(onbeforeremoveC.callCount).equals(0)
268+
269+
render(root, [C])
270+
o(onbeforeremoveA.callCount).equals(1)
271+
o(onbeforeremoveB.callCount).equals(1)
272+
o(onbeforeremoveC.callCount).equals(0)
273+
274+
render(root, [])
275+
o(onbeforeremoveA.callCount).equals(1)
276+
o(onbeforeremoveB.callCount).equals(1)
277+
o(onbeforeremoveC.callCount).equals(1)
278+
279+
// not resolved
280+
o(root.childNodes.length).equals(6)
281+
o(root.childNodes[0].nodeName).equals("A1")
282+
o(root.childNodes[1].nodeName).equals("A2")
283+
o(root.childNodes[2].nodeName).equals("B1")
284+
o(root.childNodes[3].nodeName).equals("B2")
285+
o(root.childNodes[4].nodeName).equals("C1")
286+
o(root.childNodes[5].nodeName).equals("C2")
287+
288+
const iterA = domFor(A)
289+
o(iterA.next().value.nodeName).equals("A1")
290+
o(iterA.next().value.nodeName).equals("A2")
291+
o(iterA.next().done).deepEquals(true)
292+
293+
const iterB = domFor(B)
294+
o(iterB.next().value.nodeName).equals("B1")
295+
o(iterB.next().value.nodeName).equals("B2")
296+
o(iterB.next().done).deepEquals(true)
297+
298+
const iterC = domFor(C)
299+
o(iterC.next().value.nodeName).equals("C1")
300+
o(iterC.next().value.nodeName).equals("C2")
301+
o(iterC.next().done).deepEquals(true)
302+
303+
callAsync(function(){
304+
// not resolved yet
305+
o(root.childNodes.length).equals(6)
306+
o(root.childNodes[0].nodeName).equals("A1")
307+
o(root.childNodes[1].nodeName).equals("A2")
308+
o(root.childNodes[2].nodeName).equals("B1")
309+
o(root.childNodes[3].nodeName).equals("B2")
310+
o(root.childNodes[4].nodeName).equals("C1")
311+
o(root.childNodes[5].nodeName).equals("C2")
312+
313+
const iterA = domFor(A)
314+
o(iterA.next().value.nodeName).equals("A1")
315+
o(iterA.next().value.nodeName).equals("A2")
316+
o(iterA.next().done).deepEquals(true)
317+
318+
const iterB = domFor(B)
319+
o(iterB.next().value.nodeName).equals("B1")
320+
o(iterB.next().value.nodeName).equals("B2")
321+
o(iterB.next().done).deepEquals(true)
322+
323+
const iterC = domFor(C)
324+
o(iterC.next().value.nodeName).equals("C1")
325+
o(iterC.next().value.nodeName).equals("C2")
326+
o(iterC.next().done).deepEquals(true)
327+
328+
// resolve C
329+
thenCBC()
330+
callAsync(function(){
331+
o(root.childNodes.length).equals(4)
332+
o(root.childNodes[0].nodeName).equals("A1")
333+
o(root.childNodes[1].nodeName).equals("A2")
334+
o(root.childNodes[2].nodeName).equals("B1")
335+
o(root.childNodes[3].nodeName).equals("B2")
336+
337+
const iterB = domFor(B)
338+
o(iterB.next().value.nodeName).equals("B1")
339+
o(iterB.next().value.nodeName).equals("B2")
340+
o(iterB.next().done).deepEquals(true)
341+
342+
const iterA = domFor(A)
343+
o(iterA.next().value.nodeName).equals("A1")
344+
o(iterA.next().value.nodeName).equals("A2")
345+
o(iterA.next().done).deepEquals(true)
346+
347+
// resolve A
348+
thenCBA()
349+
callAsync(function(){
350+
o(root.childNodes.length).equals(2)
351+
o(root.childNodes[0].nodeName).equals("B1")
352+
o(root.childNodes[1].nodeName).equals("B2")
353+
354+
const iterB = domFor(B)
355+
o(iterB.next().value.nodeName).equals("B1")
356+
o(iterB.next().value.nodeName).equals("B2")
357+
o(iterB.next().done).deepEquals(true)
358+
359+
// resolve B
360+
thenCBB()
361+
callAsync(function(){
362+
o(root.childNodes.length).equals(0)
363+
done()
364+
})
365+
})
366+
})
367+
})
368+
})
369+
o("works multiple vnodes with onbeforeremove (3/3)", function (done) {
370+
let thenCBA, thenCBB, thenCBC
371+
const onbeforeremoveA = o.spy(function onbeforeremove(){
372+
return {then(resolve){thenCBA = resolve}}
373+
})
374+
const onbeforeremoveB = o.spy(function onbeforeremove(){
375+
return {then(resolve){thenCBB = resolve}}
376+
})
377+
const onbeforeremoveC = o.spy(function onbeforeremove(){
378+
return {then(resolve){thenCBC = resolve}}
379+
})
380+
// to avoid updating internal nodes only, vnodes have key attributes
381+
const A = fragment({key: 1, onbeforeremove: onbeforeremoveA}, [m("a1"), m("a2")])
382+
const B = fragment({key: 2, onbeforeremove: onbeforeremoveB}, [m("b1"), m("b2")])
383+
const C = fragment({key: 3, onbeforeremove: onbeforeremoveC}, [m("c1"), m("c2")])
384+
385+
render(root, [A])
386+
o(onbeforeremoveA.callCount).equals(0)
387+
o(onbeforeremoveB.callCount).equals(0)
388+
o(onbeforeremoveC.callCount).equals(0)
389+
390+
render(root, [B])
391+
o(onbeforeremoveA.callCount).equals(1)
392+
o(onbeforeremoveB.callCount).equals(0)
393+
o(onbeforeremoveC.callCount).equals(0)
394+
395+
render(root, [C])
396+
o(onbeforeremoveA.callCount).equals(1)
397+
o(onbeforeremoveB.callCount).equals(1)
398+
o(onbeforeremoveC.callCount).equals(0)
399+
400+
render(root, [])
401+
o(onbeforeremoveA.callCount).equals(1)
402+
o(onbeforeremoveB.callCount).equals(1)
403+
o(onbeforeremoveC.callCount).equals(1)
404+
405+
// not resolved
406+
o(root.childNodes.length).equals(6)
407+
o(root.childNodes[0].nodeName).equals("A1")
408+
o(root.childNodes[1].nodeName).equals("A2")
409+
o(root.childNodes[2].nodeName).equals("B1")
410+
o(root.childNodes[3].nodeName).equals("B2")
411+
o(root.childNodes[4].nodeName).equals("C1")
412+
o(root.childNodes[5].nodeName).equals("C2")
413+
414+
const iterA = domFor(A)
415+
o(iterA.next().value.nodeName).equals("A1")
416+
o(iterA.next().value.nodeName).equals("A2")
417+
o(iterA.next().done).deepEquals(true)
418+
419+
const iterB = domFor(B)
420+
o(iterB.next().value.nodeName).equals("B1")
421+
o(iterB.next().value.nodeName).equals("B2")
422+
o(iterB.next().done).deepEquals(true)
423+
424+
const iterC = domFor(C)
425+
o(iterC.next().value.nodeName).equals("C1")
426+
o(iterC.next().value.nodeName).equals("C2")
427+
o(iterC.next().done).deepEquals(true)
428+
429+
callAsync(function(){
430+
// not resolved yet
431+
o(root.childNodes.length).equals(6)
432+
o(root.childNodes[0].nodeName).equals("A1")
433+
o(root.childNodes[1].nodeName).equals("A2")
434+
o(root.childNodes[2].nodeName).equals("B1")
435+
o(root.childNodes[3].nodeName).equals("B2")
436+
o(root.childNodes[4].nodeName).equals("C1")
437+
o(root.childNodes[5].nodeName).equals("C2")
438+
439+
const iterA = domFor(A)
440+
o(iterA.next().value.nodeName).equals("A1")
441+
o(iterA.next().value.nodeName).equals("A2")
442+
o(iterA.next().done).deepEquals(true)
443+
444+
const iterB = domFor(B)
445+
o(iterB.next().value.nodeName).equals("B1")
446+
o(iterB.next().value.nodeName).equals("B2")
447+
o(iterB.next().done).deepEquals(true)
448+
449+
const iterC = domFor(C)
450+
o(iterC.next().value.nodeName).equals("C1")
451+
o(iterC.next().value.nodeName).equals("C2")
452+
o(iterC.next().done).deepEquals(true)
453+
454+
// resolve A
455+
thenCBA()
456+
callAsync(function(){
457+
o(root.childNodes.length).equals(4)
458+
o(root.childNodes[0].nodeName).equals("B1")
459+
o(root.childNodes[1].nodeName).equals("B2")
460+
o(root.childNodes[2].nodeName).equals("C1")
461+
o(root.childNodes[3].nodeName).equals("C2")
462+
463+
const iterB = domFor(B)
464+
o(iterB.next().value.nodeName).equals("B1")
465+
o(iterB.next().value.nodeName).equals("B2")
466+
o(iterB.next().done).deepEquals(true)
467+
468+
const iterC = domFor(C)
469+
o(iterC.next().value.nodeName).equals("C1")
470+
o(iterC.next().value.nodeName).equals("C2")
471+
o(iterC.next().done).deepEquals(true)
472+
473+
// resolve B
474+
thenCBB()
475+
callAsync(function(){
476+
o(root.childNodes.length).equals(2)
477+
o(root.childNodes[0].nodeName).equals("C1")
478+
o(root.childNodes[1].nodeName).equals("C2")
479+
480+
const iterC = domFor(C)
481+
o(iterC.next().value.nodeName).equals("C1")
482+
o(iterC.next().value.nodeName).equals("C2")
483+
o(iterC.next().done).deepEquals(true)
484+
485+
// resolve C
486+
thenCBC()
487+
callAsync(function(){
488+
o(root.childNodes.length).equals(0)
489+
done()
490+
})
491+
})
492+
})
493+
})
494+
})
117495
components.forEach(function(cmp){
118496
const {kind, create: createComponent} = cmp
119497
o.spec(kind, function(){

0 commit comments

Comments
 (0)