ref: Remove testableTransition utility

Animations are now disabled globally in tests via framer-motion's
MotionGlobalConfig, making the per-transition testableTransition
wrapper unnecessary.

Author: evanpurkhiser

static/app/bootstrap/commonInitialization.tsx

@@ -1,7 +1,13 @@
-import {NODE_ENV, UI_DEV_ENABLE_PROFILING} from 'sentry/constants';
+import {MotionGlobalConfig} from 'framer-motion';
+
+import {IS_ACCEPTANCE_TEST, NODE_ENV, UI_DEV_ENABLE_PROFILING} from 'sentry/constants';
 import {ConfigStore} from 'sentry/stores/configStore';
 import type {Config} from 'sentry/types/system';
 
+if (IS_ACCEPTANCE_TEST || NODE_ENV === 'test') {
+  MotionGlobalConfig.skipAnimations = true;
+}
+
 export function commonInitialization(config: Config) {
   if (NODE_ENV === 'development') {
     import(/* webpackMode: "eager" */ 'sentry/utils/silence-react-unsafe-warnings');

static/app/components/checkInTimeline/timelineCursor.tsx

@@ -4,7 +4,6 @@ import {AnimatePresence, motion} from 'framer-motion';
 
 import {Overlay} from 'sentry/components/overlay';
 import {Sticky} from 'sentry/components/sticky';
-import {testableTransition} from 'sentry/utils/testableTransition';
 
 const TOOLTIP_OFFSET = 10;
 
@@ -142,7 +141,7 @@ function useTimelineCursor<E extends HTMLElement>({
             initial="initial"
             animate="animate"
             exit="exit"
-            transition={testableTransition({duration: 0.1})}
+            transition={{duration: 0.1}}
             variants={{
               initial: {opacity: 0},
               animate: {opacity: 1},

static/app/components/checkInTimeline/timelineZoom.tsx

@@ -2,8 +2,6 @@ import {useCallback, useEffect, useRef, useState} from 'react';
 import styled from '@emotion/styled';
 import {AnimatePresence, motion} from 'framer-motion';
 
-import {testableTransition} from 'sentry/utils/testableTransition';
-
 /**
  * The minimum number in pixels which the selection should be considered valid
  * and will fire the onSelect handler.
@@ -157,7 +155,7 @@ function useTimelineZoom<E extends HTMLElement>({enabled = true, onSelect}: Opti
           initial="initial"
           animate="animate"
           exit="exit"
-          transition={testableTransition({duration: 0.2})}
+          transition={{duration: 0.2}}
           variants={{
             initial: {opacity: 0},
             animate: {opacity: 1},

static/app/components/core/loader/indeterminateLoader.tsx

@@ -7,8 +7,6 @@ import {AnimatePresence, motion} from 'framer-motion';
 
 import {Stack} from '@sentry/scraps/layout';
 
-import {testableTransition} from 'sentry/utils/testableTransition';
-
 // required to break import cycle
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
 import {Text} from '../text/text';
@@ -131,7 +129,7 @@ export function IndeterminateLoader({
           initial={{opacity: 0}}
           animate={{opacity: 1}}
           exit={{opacity: 0}}
-          transition={testableTransition({duration: 0.3})}
+          transition={{duration: 0.3}}
         >
           <Text monospace variant="muted" size="lg">
             {currentMessage}

static/app/components/core/toast/toast.tsx

@@ -11,7 +11,6 @@ import {LoadingIndicator} from 'sentry/components/loadingIndicator';
 import {TextOverflow} from 'sentry/components/textOverflow';
 import {IconCheckmark, IconRefresh, IconWarning} from 'sentry/icons';
 import {t} from 'sentry/locale';
-import {testableTransition} from 'sentry/utils/testableTransition';
 import type {Theme} from 'sentry/utils/theme';
 
 interface ToastProps {
@@ -55,11 +54,11 @@ const TOAST_TRANSITION = {
   initial: {opacity: 0, y: 70},
   animate: {opacity: 1, y: 0},
   exit: {opacity: 0, y: 70},
-  transition: testableTransition({
+  transition: {
     type: 'spring',
     stiffness: 450,
     damping: 25,
-  }),
+  },
 };
 
 function ToastIcon({type}: {type: Indicator['type']}) {

static/app/components/events/autofix/autofixChanges.tsx

@@ -33,7 +33,6 @@ import {t} from 'sentry/locale';
 import {singleLineRenderer} from 'sentry/utils/marked/marked';
 import {MarkedText} from 'sentry/utils/marked/markedText';
 import {useMutation, useQueryClient} from 'sentry/utils/queryClient';
-import {testableTransition} from 'sentry/utils/testableTransition';
 import {useApi} from 'sentry/utils/useApi';
 import {useCopyToClipboard} from 'sentry/utils/useCopyToClipboard';
 import {useOrganization} from 'sentry/utils/useOrganization';
@@ -109,7 +108,7 @@ const cardAnimationProps: MotionNodeAnimationOptions = {
   exit: {opacity: 0, height: 0, scale: 0.8, y: -20},
   initial: {opacity: 0, height: 0, scale: 0.8},
   animate: {opacity: 1, height: 'auto', scale: 1},
-  transition: testableTransition({
+  transition: {
     duration: 1.0,
     height: {
       type: 'spring',
@@ -123,7 +122,7 @@ const cardAnimationProps: MotionNodeAnimationOptions = {
       type: 'tween',
       ease: 'easeOut',
     },
-  }),
+  },
 };
 
 function BranchButton({change}: {change: AutofixCodebaseChange}) {

static/app/components/events/autofix/autofixHighlightPopup.tsx

@@ -29,7 +29,6 @@ import {IconClose, IconSeer} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {MarkedText} from 'sentry/utils/marked/markedText';
-import {testableTransition} from 'sentry/utils/testableTransition';
 import {useApi} from 'sentry/utils/useApi';
 import {useMedia} from 'sentry/utils/useMedia';
 import {useOrganization} from 'sentry/utils/useOrganization';
@@ -646,9 +645,9 @@ export function AutofixHighlightPopup(props: Props) {
       initial={{opacity: 0, x: 10}}
       animate={{opacity: 1, x: 0}}
       exit={{opacity: 0, x: 10}}
-      transition={testableTransition({
+      transition={{
         duration: 0.2,
-      })}
+      }}
       style={{
         left: `${position.left}px`,
         top: `${position.top}px`,

static/app/components/events/autofix/autofixOutputStream.tsx

@@ -20,7 +20,6 @@ import {IconRefresh, IconSeer} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {singleLineRenderer} from 'sentry/utils/marked/marked';
 import {useMutation, useQueryClient} from 'sentry/utils/queryClient';
-import {testableTransition} from 'sentry/utils/testableTransition';
 import {useApi} from 'sentry/utils/useApi';
 import {useOrganization} from 'sentry/utils/useOrganization';
 
@@ -269,25 +268,25 @@ export function AutofixOutputStream({
         initial={{opacity: 0, height: 0}}
         animate={{opacity: 1, height: 'auto'}}
         exit={{opacity: 0, height: 0}}
-        transition={testableTransition({
+        transition={{
           duration: 0.2,
           height: {
             type: 'spring',
             bounce: 0.2,
           },
-        })}
+        }}
       >
         <ScaleContainer
           initial={{scaleY: 0.8}}
           animate={{scaleY: 1}}
           exit={{scaleY: 0.8}}
-          transition={testableTransition({
+          transition={{
             duration: 0.2,
             scaleY: {
               type: 'spring',
               bounce: 0.2,
             },
-          })}
+          }}
         >
           <VerticalLine />
           <Container required={responseRequired}>

static/app/components/events/autofix/autofixRootCause.tsx

@@ -33,7 +33,6 @@ import type {Event} from 'sentry/types/event';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {singleLineRenderer} from 'sentry/utils/marked/marked';
 import {useMutation, useQuery, useQueryClient} from 'sentry/utils/queryClient';
-import {testableTransition} from 'sentry/utils/testableTransition';
 import {useApi} from 'sentry/utils/useApi';
 import {useCopyToClipboard} from 'sentry/utils/useCopyToClipboard';
 import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
@@ -99,7 +98,7 @@ const cardAnimationProps: MotionNodeAnimationOptions = {
   exit: {opacity: 0, height: 0, scale: 0.8, y: -20},
   initial: {opacity: 0, height: 0, scale: 0.8},
   animate: {opacity: 1, height: 'auto', scale: 1},
-  transition: testableTransition({
+  transition: {
     duration: 1.0,
     height: {
       type: 'spring',
@@ -113,7 +112,7 @@ const cardAnimationProps: MotionNodeAnimationOptions = {
       type: 'tween',
       ease: 'easeOut',
     },
-  }),
+  },
 };
 
 export function replaceHeadersWithBold(markdown: string) {

static/app/components/events/autofix/autofixSolution.tsx

@@ -34,7 +34,6 @@ import {trackAnalytics} from 'sentry/utils/analytics';
 import {singleLineRenderer} from 'sentry/utils/marked/marked';
 import {valueIsEqual} from 'sentry/utils/object/valueIsEqual';
 import {setApiQueryData, useMutation, useQueryClient} from 'sentry/utils/queryClient';
-import {testableTransition} from 'sentry/utils/testableTransition';
 import {useApi} from 'sentry/utils/useApi';
 import {useCopyToClipboard} from 'sentry/utils/useCopyToClipboard';
 import {useOrganization} from 'sentry/utils/useOrganization';
@@ -134,7 +133,7 @@ const cardAnimationProps: MotionNodeAnimationOptions = {
   exit: {opacity: 0, height: 0, scale: 0.8, y: -20},
   initial: {opacity: 0, height: 0, scale: 0.8},
   animate: {opacity: 1, height: 'auto', scale: 1},
-  transition: testableTransition({
+  transition: {
     duration: 1.0,
     height: {
       type: 'spring',
@@ -148,7 +147,7 @@ const cardAnimationProps: MotionNodeAnimationOptions = {
       type: 'tween',
       ease: 'easeOut',
     },
-  }),
+  },
 };
 
 function SolutionDescription({