import { createRoot , createSignal } from "../../src" ; import { Show } from "../src" ; describe ( "Testing an only child show control flow" , ( ) => { let div , disposer ; const [ count , setCount ] = createSignal ( 0 ) ; const Component = ( ) => ( < div ref = { div } > < Show when = { count ( ) >= 5 } > { count ( ) } < /Show> < /div>); test ( "Create show control flow" , ( ) => { createRoot ( dispose => { disposer = dispose ; < Component />; } ) ; expect ( div . innerHTML ) . toBe ( "" ) ; } ) ; test ( "Toggle show control flow" , ( ) => { setCount ( 7 ) ; expect ( div . innerHTML ) . toBe ( "7" ) ; setCount ( 5 ) ; expect ( div . innerHTML ) . toBe ( "5" ) ; setCount ( 2 ) ; expect ( div . innerHTML ) . toBe ( "" ) ; } ) ; test ( "dispose" , ( ) => disposer ( ) ) ; } ) ; describe ( "Testing an only child show control flow with DOM children" , ( ) => { let div , disposer ; const [ count , setCount ] = createSignal ( 0 ) ; const Component = ( ) => ( < div ref = { div } > < Show when = { count ( ) >= 5 } > < span > { count } < /span> < span > counted < /span> < /Show> < /div>); test ( "Create show control flow" , ( ) => { createRoot ( dispose => { disposer = dispose ; < Component />; } ) ; expect ( div . innerHTML ) . toBe ( "" ) ; } ) ; test ( "Toggle show control flow" , ( ) => { setCount ( 7 ) ; expect ( ( div . firstChild as HTMLSpanElement ) . innerHTML ) . toBe ( "7" ) ; setCount ( 5 ) ; expect ( ( div . firstChild as HTMLSpanElement ) . innerHTML ) . toBe ( "5" ) ; setCount ( 2 ) ; expect ( div . innerHTML ) . toBe ( "" ) ; } ) ; test ( "dispose" , ( ) => disposer ( ) ) ; } ) ; describe ( "Testing an only child show control flow with keyed function" , ( ) => { let div , disposer ; const [ data , setData ] = createSignal < { count : number ; } > ( ) ; const Component = ( ) => ( < div ref = { div } > < Show when = { data ( ) } > { ( { count } ) => ( < > < span > { count } < /span> < span > counted < /span> < />)} < /Show> < /div>); test ( "Create show control flow" , ( ) => { createRoot ( dispose => { disposer = dispose ; < Component />; } ) ; expect ( div . innerHTML ) . toBe ( "" ) ; } ) ; test ( "Toggle show control flow" , ( ) => { setData ( { count : 7 } ) ; expect ( ( div . firstChild as HTMLSpanElement ) . innerHTML ) . toBe ( "7" ) ; setData ( { count : 5 } ) ; expect ( ( div . firstChild as HTMLSpanElement ) . innerHTML ) . toBe ( "5" ) ; setData ( { count : 2 } ) ; expect ( ( div . firstChild as HTMLSpanElement ) . innerHTML ) . toBe ( "2" ) ; } ) ; test ( "dispose" , ( ) => disposer ( ) ) ; } ) ; describe ( "Testing an only child show control flow with DOM children and fallback" , ( ) => { let div , disposer ; const [ count , setCount ] = createSignal ( 0 ) ; const Component = ( ) => ( < div ref = { div } > < Show when = { count ( ) >= 5 } fallback = { < span > Too Low < /span>}> < span > { count } < /span> < /Show> < /div>); test ( "Create when control flow" , ( ) => { createRoot ( dispose => { disposer = dispose ; < Component />; } ) ; expect ( div . innerHTML ) . toBe ( "<span>Too Low</span>" ) ; } ) ; test ( "Toggle show control flow" , ( ) => { setCount ( 7 ) ; expect ( ( div . firstChild as HTMLSpanElement ) . innerHTML ) . toBe ( "7" ) ; setCount ( 5 ) ; expect ( ( div . firstChild as HTMLSpanElement ) . innerHTML ) . toBe ( "5" ) ; setCount ( 2 ) ; expect ( ( div . firstChild as HTMLSpanElement ) . innerHTML ) . toBe ( "Too Low" ) ; } ) ; test ( "dispose" , ( ) => disposer ( ) ) ; } ) ;