import m from 'mithril' ; import assert from 'assert' ; import { Overlay , IOverlayAttrs , Classes , Input , Keys } from '@/' ; import { hasClass , TIMEOUT , triggerEvent } from '@test-utils' ; describe ( 'overlay' , ( ) => { const portal = ( ) => document . body . querySelector ( `.${ Classes . PORTAL }` ) as HTMLElement ; const overlay = ( ) => document . body . querySelector ( `.${ Classes . OVERLAY }` ) as HTMLElement ; const backdrop = ( ) => overlay ( ) . querySelector ( `.${ Classes . OVERLAY_BACKDROP }` ) as HTMLElement ; afterEach ( ( ) => { document . body . innerHTML = '' ; m . mount ( document . body , null ) ; } ) ; it ( 'Renders correctly' , ( ) => { mount ( { class : Classes . POSITIVE , style : 'color: red' } ) ; assert ( hasClass ( overlay ( ) , Classes . POSITIVE ) ) ; assert . equal ( overlay ( ) . style . color , 'red' ) ; } ) ; it ( 'Renders portal correctly' , ( ) => { mount ( { } ) ; assert ( hasClass ( portal ( ) , Classes . PORTAL ) ) ; } ) ; it ( 'Passes through attrs to portal' , ( ) => { mount ( { portalAttrs : { class : Classes . POSITIVE , style : 'color: red' } } ) ; assert ( hasClass ( portal ( ) , Classes . POSITIVE ) ) ; assert . equal ( portal ( ) . style . color , 'red' ) ; } ) ; it ( 'Renders content' , ( ) => { mount ( { content : 'content' } ) ; assert ( overlay ( ) . innerHTML . includes ( 'content' ) ) ; } ) ; it ( 'Renders inline' , ( ) => { mount ( { inline : true } ) ; assert ( ! portal ( ) ) ; } ) ; it ( 'Has backdrop by default' , ( ) => { mount ( { } ) ; assert ( backdrop ( ) ) ; } ) ; it ( 'Sets backdrop class' , ( ) => { mount ( { backdropClass : Classes . POSITIVE } ) ; assert ( hasClass ( backdrop ( ) , Classes . POSITIVE ) ) ; } ) ; it ( 'hasBackdrop=false hides backdrop' , ( ) => { mount ( { hasBackdrop : false } ) ; assert ( ! backdrop ( ) ) ; } ) ; it ( 'Sets autofocus' , ( ) => { mount ( { content : m ( Input , { autofocus : true } ) } ) ; const input = overlay ( ) . querySelector ( 'input' ) as HTMLInputElement ; assert ( ( input as any ) . autofocus ) ; } ) ; it ( 'closeOnOutsideClick=true invokes onClose' , ( done ) => { let count = 0 ; mount ( { closeOnOutsideClick : true , onClose : ( ) => count ++ } ) ; triggerEvent ( backdrop ( ) , 'mousedown' , ( ) => { assert . equal ( count , 1 ) ; done ( ) ; } ) ; } ) ; it ( 'Handles closeOnEscapeKey' , ( ) => { let count = 0 ; mount ( { onClose : ( ) => count ++ , closeOnEscapeKey : true } ) ; document . dispatchEvent ( new KeyboardEvent ( 'keydown' , { which : Keys . ESCAPE } as any ) ) ; assert . equal ( count , 1 ) ; } ) ; it ( 'Handles lifecycle callbacks' , done => { let count = 0 ; const component = mount ( { onOpened : ( ) => count ++ , onClosed : ( ) => count ++ } ) ; component . isOpen = false ; m . redraw ( ) ; setTimeout ( ( ) => { assert . equal ( count , 2 ) ; done ( ) ; } , TIMEOUT ) ; } ) ; it ( 'onClosed called when transitionDuration finishes' , done => { let count = 0 ; const transitionDuration = 100 ; const component = mount ( { onClosed : ( ) => count ++ , transitionDuration } ) ; component . isOpen = false ; m . redraw ( ) ; setTimeout ( ( ) => { assert . equal ( count , 1 ) ; done ( ) ; } , transitionDuration + TIMEOUT ) ; } ) ; function mount ( attrs ) { const component = { isOpen : true , view : ( vnode ) => m ( Overlay , { addToStack : false , isOpen : vnode . state . isOpen , transitionDuration : 0 , ... attrs } ) } ; m . mount ( document . body , component ) ; return component ; } } ) ;