Skip to content

Commit 198aca6

Browse files
thetarnavthetarnav
committed
Add tests for #339 though it doesn't error
1 parent c40b474 commit 198aca6

File tree

1 file changed

+137
-84
lines changed

1 file changed

+137
-84
lines changed

‎packages/debugger/src/structure/walker.test.tsx‎

Lines changed: 137 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -360,122 +360,175 @@ test.describe('TreeWalkerMode.DOM', () => {
360360

361361
let registry = walker.makeComponentRegistry(eli)
362362

363-
const toTrigger: VoidFunction[] = []
364-
const testComponents: Solid.Component[] = []
363+
let to_trigger: (() => void)[] = []
364+
let test_components: Solid.Component[] = []
365+
366+
let el_header!: HTMLElement
367+
let el_h1!: HTMLHeadingElement
368+
369+
let el_footer!: HTMLElement
370+
let el_main!: HTMLElement
371+
let el_h2!: HTMLHeadingElement
372+
373+
let el_button!: HTMLButtonElement
374+
let el_span!: HTMLSpanElement
375+
376+
let root!: Solid.Root
377+
378+
const Wrapper = (props: {children: any}) => {
379+
return <div>{props.children}</div>
380+
}
381+
const TestComponent = (props: {n: number}) => {
382+
const [a, set] = s.createSignal(0)
383+
s.createComputed(a)
384+
to_trigger.push(() => set(1))
385+
test_components.push(setup.solid.getOwner()! as Solid.Component)
386+
return s.createRoot(_ => (
387+
<div>{props.n === 0 ? 'end' : <TestComponent n={props.n - 1} />}</div>
388+
))
389+
}
390+
const Button = () => {
391+
return <button ref={el_button}>
392+
<span ref={el_span}>Click me</span>
393+
</button>
394+
}
395+
396+
const App = () => {
397+
return (
398+
<>
399+
<header ref={el_header}>
400+
<h1 ref={el_h1}>Test</h1>
401+
</header>
402+
<Wrapper>
403+
<main ref={el_main}>
404+
<h2 ref={el_h2}>Test</h2>
405+
<TestComponent n={2} />
406+
<Button />
407+
</main>
408+
</Wrapper>
409+
<footer ref={el_footer} />
410+
</>
411+
)
412+
}
365413

366-
s.createRoot(dispose => {
367-
const Wrapper = (props: {children: any}) => {
368-
return <div>{props.children}</div>
369-
}
370-
const TestComponent = (props: {n: number}) => {
371-
const [a, set] = s.createSignal(0)
372-
s.createComputed(a)
373-
toTrigger.push(() => set(1))
374-
testComponents.push(setup.solid.getOwner()! as Solid.Component)
375-
return s.createRoot(_ => (
376-
<div>{props.n === 0 ? 'end' : <TestComponent n={props.n - 1} />}</div>
377-
))
378-
}
379-
const Button = () => {
380-
return <button>Click me</button>
381-
}
382-
const App = () => {
383-
return (
384-
<>
385-
<Wrapper>
386-
<main>
387-
<TestComponent n={2} />
388-
<Button />
389-
</main>
390-
</Wrapper>
391-
<footer />
392-
</>
393-
)
394-
}
414+
let dispose = s.createRoot(dispose => {
395415
s.createRenderEffect(() => <App />)
396416

397-
const owner = setup.solid.getOwner()! as Solid.Root
417+
root = setup.solid.getOwner()! as Solid.Root
398418

399-
const computationUpdates: Parameters<walker.ComputationUpdateHandler>[] = []
419+
return dispose
420+
})
400421

401-
const tree = walker.walkSolidTree(owner, {
402-
onUpdate: (...a) => computationUpdates.push(a),
403-
rootId: $setSdtId(owner, '#ff'),
404-
mode: TreeWalkerMode.DOM,
405-
eli: eli,
406-
registry: registry,
407-
})
422+
let updates: Parameters<walker.ComputationUpdateHandler>[] = []
408423

409-
test.expect(tree).toMatchObject({
410-
type: NodeType.Root,
424+
let tree = walker.walkSolidTree(root, {
425+
onUpdate: (...a) => updates.push(a),
426+
rootId: $setSdtId(root, '#ff'),
427+
mode: TreeWalkerMode.DOM,
428+
eli: eli,
429+
registry: registry,
430+
})
431+
432+
/* Test structure */
433+
test.expect(tree).toMatchObject({
434+
type: NodeType.Root,
435+
children: [{
436+
type: NodeType.Component,
437+
name: 'App',
411438
children: [{
439+
type: NodeType.Element,
440+
name: 'header',
441+
children: [{
442+
type: NodeType.Element,
443+
name: 'h1',
444+
children: [],
445+
}],
446+
}, {
412447
type: NodeType.Component,
413-
name: 'App',
448+
name: 'Wrapper',
414449
children: [{
415-
type: NodeType.Component,
416-
name: 'Wrapper',
450+
type: NodeType.Element,
451+
name: 'div',
417452
children: [{
418453
type: NodeType.Element,
419-
name: 'div',
454+
name: 'main',
420455
children: [{
421456
type: NodeType.Element,
422-
name: 'main',
457+
name: 'h2',
458+
children: [],
459+
}, {
460+
type: NodeType.Component,
461+
name: 'TestComponent',
423462
children: [{
424-
type: NodeType.Component,
425-
name: 'TestComponent',
463+
type: NodeType.Element,
464+
name: 'div',
426465
children: [{
427-
type: NodeType.Element,
428-
name: 'div',
466+
type: NodeType.Component,
467+
name: 'TestComponent',
429468
children: [{
430-
type: NodeType.Component,
431-
name: 'TestComponent',
469+
type: NodeType.Element,
470+
name: 'div',
432471
children: [{
433-
type: NodeType.Element,
434-
name: 'div',
472+
type: NodeType.Component,
473+
name: 'TestComponent',
435474
children: [{
436-
type: NodeType.Component,
437-
name: 'TestComponent',
438-
children: [{
439-
type: NodeType.Element,
440-
name: 'div',
441-
children: [],
442-
}],
475+
type: NodeType.Element,
476+
name: 'div',
477+
children: [],
443478
}],
444479
}],
445480
}],
446481
}],
447-
}, {
448-
type: NodeType.Component,
449-
name: 'Button',
482+
}],
483+
}, {
484+
type: NodeType.Component,
485+
name: 'Button',
486+
children: [{
487+
type: NodeType.Element,
488+
name: 'button',
450489
children: [{
451490
type: NodeType.Element,
452-
name: 'button',
491+
name: 'span',
453492
children: [],
454493
}],
455494
}],
456495
}],
457496
}],
458-
}, {
459-
type: NodeType.Element,
460-
name: 'footer',
461-
children: [],
462497
}],
498+
}, {
499+
type: NodeType.Element,
500+
name: 'footer',
501+
children: [],
463502
}],
464-
})
465-
466-
test.expect(computationUpdates.length).toBe(0)
467-
468-
toTrigger.forEach(t => t())
503+
}],
504+
})
469505

470-
for (let i = 0; i < 3; i++) {
471-
test.expect(computationUpdates[i]).toEqual([
472-
'#ff',
473-
testComponents[i],
474-
true,
475-
])
476-
}
506+
/* Test finding components */
507+
let res_header = walker.findComponent(registry, el_header)
508+
let res_h1 = walker.findComponent(registry, el_h1)
509+
let res_main = walker.findComponent(registry, el_main)
510+
let res_h2 = walker.findComponent(registry, el_h2)
511+
let res_footer = walker.findComponent(registry, el_footer)
512+
let res_button = walker.findComponent(registry, el_button)
513+
let res_span = walker.findComponent(registry, el_span)
514+
515+
test.expect(res_header).toHaveProperty('name', 'App')
516+
test.expect(res_h1) .toHaveProperty('name', 'App')
517+
test.expect(res_main) .toHaveProperty('name', 'Wrapper')
518+
test.expect(res_h2) .toHaveProperty('name', 'Wrapper')
519+
test.expect(res_footer).toHaveProperty('name', 'App')
520+
test.expect(res_button).toHaveProperty('name', 'Button')
521+
test.expect(res_span) .toHaveProperty('name', 'Button')
522+
523+
/* Test updates */
524+
test.expect(updates.length).toBe(0)
525+
526+
for (let t of to_trigger) t()
527+
528+
for (let i = 0; i < 3; i++) {
529+
test.expect(updates[i]).toEqual(['#ff', test_components[i], true])
530+
}
477531

478-
dispose()
479-
})
532+
dispose()
480533
})
481534
})

0 commit comments

Comments
 (0)