import * as assert from 'assert' ; import { button , div , makeDomComponent } from '../../src' ; import isolate from '@cycle/isolate' ; import { just } from 'most' ; import { run } from '@motorcycle/run' ; describe ( 'issue 105' , ( ) => { it ( 'should only emit a single event with useCapture false' , ( done ) => { const { sources , sinks } = run < any , any > ( withUseCaptureFalse , makeDomComponent ( document . createElement ( 'div' ) ) ) ; sources . dom . elements ( ) . skip ( 1 ) . take ( 1 ) . observe ( ( [ root ] ) => { const button = root . querySelector ( 'button' ) ; if ( ! button ) done ( new Error ( 'Can not find button' ) ) ; setTimeout ( ( ) => ( button as any ) . click ( ) ) ; } ) ; let called = 0 ; sinks . toggle$ . skip ( 1 ) . tap ( ( ) => ++ called ) . observe ( ( ) => { assert . strictEqual ( called , 1 ) ; setTimeout ( done , 100 ) ; } ) . catch ( done ) ; } ) ; it ( 'should only emit a single event with useCapture true' , ( done ) => { const { sources , sinks } = run < any , any > ( withUseCaptureTrue , makeDomComponent ( document . createElement ( 'div' ) ) ) ; sources . dom . elements ( ) . skip ( 1 ) . take ( 1 ) . observe ( ( [ root ] ) => { const button = root . querySelector ( 'button' ) ; if ( ! button ) done ( new Error ( 'Can not find button' ) ) ; setTimeout ( ( ) => ( button as any ) . click ( ) ) ; } ) ; let called = 0 ; sinks . toggle$ . skip ( 1 ) . tap ( ( ) => ++ called ) . observe ( ( ) => { assert . strictEqual ( called , 1 ) ; done ( ) ; } ) . catch ( done ) ; } ) ; } ) ; function withUseCaptureFalse ( sources ) { const events = { click : { useCapture : false } } ; const aButton = isolate ( augmentComponentWithEvents ( Button , events ) ) ( sources ) ; const aButtonToggle$ = aButton . click$ . scan ( ( previous ) => ! previous , false ) . multicast ( ) ; const childViews$ = aButton . dom . map ( ( view ) => [ view ] ) ; const aHeaderSources = { childViews$ } ; const aHeader = augmentComponent ( Header , { aButtonToggle$ } ) ( aHeaderSources ) ; return { view$ : aHeader . dom , toggle$ : aButtonToggle$ } ; } function withUseCaptureTrue ( sources ) { const events = { click : { useCapture : true } } ; const aButton = isolate ( augmentComponentWithEvents ( Button , events ) ) ( sources ) ; const aButtonToggle$ = aButton . click$ . scan ( ( previous ) => ! previous , false ) . multicast ( ) ; const childViews$ = aButton . dom . map ( ( view ) => [ view ] ) ; const aHeaderSources = { childViews$ } ; const aHeader = augmentComponent ( Header , { aButtonToggle$ } ) ( aHeaderSources ) ; return { view$ : aHeader . dom , toggle$ : aButtonToggle$ } ; } function Header ( sources ) { const { childViews$ } = sources ; return { dom : childViews$ . map ( ( childViews ) => { return div ( `#header` , childViews ) ; } ) } ; } function Button ( ) { return { dom : just ( div ( `#container` , [ button ( [ `click me` ] ) , ] ) ) } ; } function augmentComponentWithEvents ( Component , events ) { return function AugmentationComponent ( sources ) { const sinks = Component ( sources ) ; Object . keys ( events ) . forEach ( function ( key ) { sinks [ `${ key }$` ] = sources . dom . events ( key , events [ key ] ) ; } ) ; return sinks ; } ; } function augmentComponent ( Component , augmentationSinks ) { return function AugmentationComponent ( sources ) { const sinks = Component ( sources ) ; return Object . assign ( sinks , augmentationSinks ) ; } ; }