import { PhotoSwipe , PhotoSwipeMock , createPswp , createPswpUI , mockImageOnload } from './util' ; import '@/config' ; import { transitionEndEventName } from '@/utils' ; import { CurrentPswpItem } from '@/type' ; describe ( 'pswpUI.vue' , ( ) => { beforeEach ( ( ) => { expect ( PhotoSwipe ) . not . toHaveBeenCalled ( ) ; } ) ; afterEach ( ( ) => { PhotoSwipe . mockClear ( ) ; } ) ; it ( 'render PswpUI ' , ( ) => { expect ( createPswpUI ( ) ) . toMatchSnapshot ( ) ; } ) ; describe ( 'rotate function' , ( ) => { const createRotatePswp = ( ) => { const pswpUIWrapper = createPswpUI ( ) ; const pswpWrapper = createPswp ( { propsData : { rotate : true , } , } ) ; const pswp = PhotoSwipeMock . getPswp ( ) ; return { pswp , pswpWrapper , pswpUIWrapper , } ; } ; it ( 'render rotate buttons' , ( ) => { const pswpUIWrapper = createPswpUI ( ) ; createPswp ( ) ; const getRotateButton = ( ) => pswpUIWrapper . findAll ( '.pswp__button--rotation' ) ; const pswp = PhotoSwipeMock . getPswp ( ) ; expect ( getRotateButton ( ) . length ) . toBe ( 0 ) ; pswpUIWrapper . setData ( { rotate : true , } ) ; expect ( getRotateButton ( ) . length ) . toBe ( 2 ) ; pswp . destroy ( ) ; expect ( getRotateButton ( ) . length ) . toBe ( 0 ) ; } ) ; it ( 'handleRotate' , ( ) => { mockImageOnload . enable ( ) ; const { pswp , pswpUIWrapper } = createRotatePswp ( ) ; const currentItem = pswp . currItem as any ; const img = currentItem . container . lastChild as any ; const rotate = ( direction ) => { pswpUIWrapper . find ( `.pswp__button--rotation--${ direction }` ) . trigger ( 'pswpTap' ) ; img . dispatchEvent ( new Event ( transitionEndEventName ) ) ; } ; const expectRotateDeg = ( deg ) => { expect ( img . style . transform ) . toContain ( `rotate(${ deg }deg)` ) ; } ; expect ( img . style . transform ) . toBeFalsy ( ) ; rotate ( 'right' ) ; expectRotateDeg ( 90 ) ; rotate ( 'right' ) ; expectRotateDeg ( 180 ) ; rotate ( 'left' ) ; expectRotateDeg ( 90 ) ; mockImageOnload . disable ( ) ; } ) ; } ) ; } ) ;