Add Area animation tests (#5967)

Author: PavelVanecek

storybook/stories/Examples/AreaChart.stories.tsx

@@ -17,6 +17,7 @@ import {
 import { CategoricalChartProps } from '../API/props/ChartProps';
 import { getStoryArgsFromArgsTypesObject } from '../API/props/utils';
 import { RechartsHookInspector } from '../../storybook-addon-recharts/RechartsHookInspector';
+import { ManualAnimations } from '../../storybook-addon-recharts/ManualAnimations';
 
 export default {
   component: AreaChart,
@@ -607,16 +608,18 @@ export const WithChangingDataKeyAndAnimations = {
             Hidden
           </label>
         </form>
-        <ResponsiveContainer width="100%">
-          <ComposedChart {...args}>
-            <Legend />
-            <XAxis dataKey="name" />
-            <YAxis />
-            <Area dataKey={dataKey} label={{ fill: 'green' }} dot />
-            <Tooltip />
-            <RechartsHookInspector rechartsInspectorEnabled={context.rechartsInspectorEnabled} />
-          </ComposedChart>
-        </ResponsiveContainer>
+        <ManualAnimations isEnabled={context.rechartsInspectorEnabled}>
+          <ResponsiveContainer width="100%">
+            <ComposedChart {...args}>
+              <Legend />
+              <XAxis dataKey="name" />
+              <YAxis />
+              <Area dataKey={dataKey} label={{ fill: 'green' }} dot />
+              <Tooltip />
+              <RechartsHookInspector rechartsInspectorEnabled={context.rechartsInspectorEnabled} />
+            </ComposedChart>
+          </ResponsiveContainer>
+        </ManualAnimations>
       </>
     );
   },

storybook/storybook-addon-recharts/ManualAnimations.tsx

@@ -35,8 +35,8 @@ export function ManualAnimations({ isEnabled, children }: Props) {
   }
   return (
     <AnimationManagerContext.Provider value={animationManager}>
-      {/* div to force vertical stacking */}
-      <div>
+      {/* div to force vertical stacking. Comes with some basic styling so that it allows ResponsiveContainer to render */}
+      <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}>
         {children}
         <form>
           <h3>Manual Animations</h3>

test/animation/MockAbstractAnimationManager.ts

@@ -51,6 +51,10 @@ export abstract class MockAbstractAnimationManager implements AnimationManager {
     await this.timeoutController.triggerNextTimeout(now);
   }
 
+  public isAnimating(): boolean {
+    return this.queue !== null && this.queue.length > 0;
+  }
+
   protected queue: ReactSmoothQueue | null = null;
 
   protected readonly timeoutController: MockTimeoutController = new MockTimeoutController();