import { PhotoSwipe , PhotoSwipeMock , createPswp , createPswpUI , fakeSrc , mockImageOnload , getFakeImages , CreatePswpOptions , } from './util' ; import { BeforeOpenEvent , BeforeOpen } from '@/type' ; describe ( 'photoswipe.vue' , ( ) => { beforeEach ( ( ) => { expect ( PhotoSwipe ) . not . toHaveBeenCalled ( ) ; } ) ; afterEach ( ( ) => { PhotoSwipe . mockClear ( ) ; } ) ; it ( 'render Photoswipe' , ( ) => { expect ( createPswp ( { withClick : false , } ) ) . toMatchSnapshot ( ) ; } ) ; describe ( ':props' , ( ) => { describe ( ':options' , ( ) => { const createOptionsPswp = ( options = { } ) => { createPswp ( { propsData : { options , } , } ) ; return PhotoSwipeMock . getReceiveOptions ( ) ; } ; it ( 'render default options' , ( ) => { const options = createOptionsPswp ( ) ; expect ( JSON . stringify ( options , null , 2 ) ) . toMatchSnapshot ( ) ; } ) ; it ( 'set options' , ( ) => { const bgOpacity = 0.5 ; const options = createOptionsPswp ( { bgOpacity , } ) ; expect ( options . bgOpacity ) . toBe ( bgOpacity ) ; } ) ; it ( 'set options.showHideOpacity' , ( ) => { const options = createOptionsPswp ( { showHideOpacity : true , } ) ; expect ( options . showHideOpacity ) . toBe ( true ) ; } ) ; } ) ; describe ( ':auto' , ( ) => { const createAutoPswp = ( auto , options ? ) => createPswp ( { defaultSlots : `<img src="${ fakeSrc }" />` , propsData : { auto , } , ... options , } ) ; it ( 'without auto' , ( ) => { createAutoPswp ( false ) ; expect ( PhotoSwipe ) . not . toBeCalled ( ) ; } ) ; it ( 'with auto' , ( ) => { createAutoPswp ( true ) ; expect ( PhotoSwipe ) . toBeCalled ( ) ; } ) ; it ( 'with auto and empty img' , ( ) => { createAutoPswp ( true , { defaultSlots : `<img />` , } ) ; expect ( PhotoSwipeMock . getReceiveItems ( ) ) . toEqual ( [ expect . objectContaining ( { msrc : '' , src : '' , } ) , ] ) ; } ) ; } ) ; describe ( ':bubble' , ( ) => { const createBubblePswp = ( bubble ) => { createPswp ( { defaultSlots : `
                        <div v-pswp="'${ fakeSrc }'">
                            <img src="${ fakeSrc }" />
                        </div>
                    ` , propsData : { bubble , } , } ) ; } ; it ( 'without bubble' , ( ) => { createBubblePswp ( false ) ; expect ( PhotoSwipe ) . not . toBeCalled ( ) ; } ) ; it ( 'with bubble' , ( ) => { createBubblePswp ( true ) ; expect ( PhotoSwipe ) . toBeCalled ( ) ; } ) ; } ) ; describe ( ':rotate' , ( ) => { it ( 'set pswpUI rotate' , ( ) => { const pswpUIWrapper = createPswpUI ( ) ; createPswp ( { propsData : { rotate : true , } , } ) ; expect ( pswpUIWrapper . vm . $data . rotate ) . toBe ( true ) ; } ) ; } ) ; describe ( ':lazy' , ( ) => { const createLazyPswp = ( lazy , fakeImageLength ) => { const fakeImages = getFakeImages ( fakeImageLength ) ; const wrapper = createPswp ( { withClick : false , defaultSlots : fakeImages . map ( ( src , index ) => ( { data : ( ) => ( { pswpItem : { src , } , } ) , template : `
                            <img
                                id="img-${ index }"
                                :src="pswpItem.src"
                                v-pswp="pswpItem"
                            />
                        ` , } ) ) , propsData : { lazy , } , } ) ; return { wrapper , fakeImages , } ; } ; beforeEach ( ( ) => { mockImageOnload . enable ( ) ; } ) ; afterEach ( ( ) => { mockImageOnload . disable ( ) ; } ) ; it ( 'only load current, the previous and the next' , ( ) => { const len = 10 ; const { wrapper , fakeImages } = createLazyPswp ( true , len ) ; wrapper . find ( '#img-5' ) . trigger ( 'click' ) ; const shouldLoadedIndex = [ 4 , 5 , 6 ] ; expect ( mockImageOnload . isLoaded ( shouldLoadedIndex . map ( ( i ) => fakeImages [ i ] ) ) ) . toBe ( true ) ; expect ( mockImageOnload . isLoaded ( [ ... Array ( len ) . keys ( ) ] . filter ( ( i ) => ! shouldLoadedIndex . includes ( i ) ) . map ( ( i ) => fakeImages [ i ] ) ) ) . toBe ( false ) ; } ) ; it ( 'preload all image' , ( ) => { const len = 10 ; const { wrapper , fakeImages } = createLazyPswp ( false , len ) ; wrapper . find ( '#img-5' ) . trigger ( 'click' ) ; expect ( mockImageOnload . isLoaded ( [ ... Array ( len ) . keys ( ) ] . map ( ( i ) => fakeImages [ i ] ) ) ) . toBe ( true ) ; } ) ; } ) ; } ) ; describe ( '@event' , ( ) => { describe ( '@beforeOpen' , ( ) => { const getMock = ( continued ) => jest . fn ( ( target , next ) => { next ( continued ) ; continued ? expect ( PhotoSwipe ) . toBeCalled ( ) : expect ( PhotoSwipe ) . not . toBeCalled ( ) ; } ) ; const createBeforeOpenPswp = ( continued ) => { const mock = getMock ( continued ) ; createPswp ( { listeners : { beforeOpen : mock , } , } ) ; return { mock , } ; } ; it ( 'called with specified parameters' , ( ) => { const { mock } = createBeforeOpenPswp ( true ) ; expect ( mock . mock . calls [ 0 ] . length ) . toBe ( 2 ) ; } ) ; it ( 'abort open PhotoSwipe' , ( ) => { const { mock } = createBeforeOpenPswp ( false ) ; expect ( mock ) . toBeCalled ( ) ; } ) ; } ) ; describe ( '@opened' , ( ) => { it ( 'get pswp from cb' , ( ) => { const mock = jest . fn ( ) ; const wrapper = createPswp ( { withClick : false , } ) ; wrapper . vm . $on ( 'opened' , mock ) ; wrapper . find ( 'img' ) . trigger ( 'click' ) ; const pswp = PhotoSwipeMock . getPswp ( ) ; expect ( mock ) . toBeCalled ( ) ; expect ( mock ) . toBeCalledWith ( pswp ) ; } ) ; } ) ; } ) ; } ) ;