import { unstable_createAnimationStyles as createAnimationStyles } from '@fluentui/react-bindings' ; const theme = { siteVariables : { fontSizes : { } } , componentVariables : { } , componentStyles : { } , icons : { } , fontFaces : [ ] , staticStyles : [ ] , animations : { spinner : { keyframe : { from : { transform : 'rotate(0deg)' , } , to : { transform : 'rotate(360deg)' , } , } , duration : '5s' , iterationCount : 'infinite' , fillMode : 'forwards' , playState : 'running' , timingFunction : 'ease' , direction : 'reverse' , delay : '2s' , } , } , } ; describe ( 'createAnimationStyles' , ( ) => { test ( 'applies all animation props from the theme if the animation is string' , ( ) => { expect ( createAnimationStyles ( 'spinner' , theme ) ) . toMatchObject ( { animationName : { keyframe : { from : { transform : 'rotate(0deg)' , } , to : { transform : 'rotate(360deg)' , } , } , } , animationDuration : '5s' , animationIterationCount : 'infinite' , animationFillMode : 'forwards' , animationPlayState : 'running' , animationTimingFunction : 'ease' , animationDirection : 'reverse' , animationDelay : '2s' , } ) ; } ) ; test ( 'overrides theme props if the animation prop is object' , ( ) => { expect ( createAnimationStyles ( { name : 'spinner' , duration : '1s' , delay : '3s' } , theme ) ) . toMatchObject ( { animationName : { keyframe : { from : { transform : 'rotate(0deg)' , } , to : { transform : 'rotate(360deg)' , } , } , } , animationDuration : '1s' , animationIterationCount : 'infinite' , animationFillMode : 'forwards' , animationPlayState : 'running' , animationTimingFunction : 'ease' , animationDirection : 'reverse' , animationDelay : '3s' , } ) ; } ) ; } ) ;