test(xychart): add Animated(BarGroup, BarStack, BarSeries, LineSeries…

…) tests
airbnb · Oct 15, 2020 · 4badb0d · 4badb0d
1 parent 96302fe
commit 4badb0d
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 6 deletions.
diff --git a/packages/visx-xychart/test/components/BarGroup.test.tsx b/packages/visx-xychart/test/components/BarGroup.test.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
+import { animated } from 'react-spring';
 import { mount } from 'enzyme';
-import { BarGroup, BarSeries, DataProvider, useEventEmitter } from '../../src';
+import { AnimatedBarGroup, BarGroup, BarSeries, DataProvider, useEventEmitter } from '../../src';
 import setupTooltipTest from '../mocks/setupTooltipTest';
 
 const providerProps = {
@@ -77,7 +78,7 @@ describe('<BarGroup />', () => {
 
     setupTooltipTest(
       <>
-        <BarGroup horizontal>
+        <BarGroup>
           <BarSeries dataKey={series1.key} {...series1} />
           <BarSeries dataKey={series2.key} {...series2} />
         </BarGroup>
@@ -87,3 +88,22 @@ describe('<BarGroup />', () => {
     );
   });
 });
+
+describe('<AnimatedBarGroup />', () => {
+  it('should be defined', () => {
+    expect(AnimatedBarGroup).toBeDefined();
+  });
+  it('should render an animated.rect', () => {
+    const wrapper = mount(
+      <DataProvider {...providerProps}>
+        <svg>
+          <AnimatedBarGroup>
+            <BarSeries dataKey={series1.key} {...series1} />
+            <BarSeries dataKey={series2.key} {...series2} />
+          </AnimatedBarGroup>
+        </svg>
+      </DataProvider>,
+    );
+    expect(wrapper.find(animated.rect)).toHaveLength(4);
+  });
+});
diff --git a/packages/visx-xychart/test/components/BarSeries.test.tsx b/packages/visx-xychart/test/components/BarSeries.test.tsx
@@ -1,6 +1,7 @@
 import React, { useContext, useEffect } from 'react';
+import { animated } from 'react-spring';
 import { mount } from 'enzyme';
-import { DataContext, BarSeries, useEventEmitter } from '../../src';
+import { DataContext, AnimatedBarSeries, BarSeries, useEventEmitter } from '../../src';
 import getDataContext from '../mocks/getDataContext';
 import setupTooltipTest from '../mocks/setupTooltipTest';
 
@@ -62,3 +63,19 @@ describe('<BarSeries />', () => {
     );
   });
 });
+
+describe('<AnimatedBarSeries />', () => {
+  it('should be defined', () => {
+    expect(AnimatedBarSeries).toBeDefined();
+  });
+  it('should render an animated.rect', () => {
+    const wrapper = mount(
+      <DataContext.Provider value={getDataContext(series)}>
+        <svg>
+          <AnimatedBarSeries dataKey={series.key} {...series} />
+        </svg>
+      </DataContext.Provider>,
+    );
+    expect(wrapper.find(animated.rect)).toHaveLength(series.data.length);
+  });
+});
diff --git a/packages/visx-xychart/test/components/BarStack.test.tsx b/packages/visx-xychart/test/components/BarStack.test.tsx
@@ -1,6 +1,14 @@
 import React, { useContext, useEffect } from 'react';
 import { mount } from 'enzyme';
-import { BarStack, BarSeries, DataProvider, DataContext, useEventEmitter } from '../../src';
+import { animated } from 'react-spring';
+import {
+  BarStack,
+  BarSeries,
+  DataProvider,
+  DataContext,
+  useEventEmitter,
+  AnimatedBarStack,
+} from '../../src';
 import setupTooltipTest from '../mocks/setupTooltipTest';
 
 const providerProps = {
@@ -108,7 +116,7 @@ describe('<BarStack />', () => {
 
     setupTooltipTest(
       <>
-        <BarStack horizontal>
+        <BarStack>
           <BarSeries dataKey={series1.key} {...series1} />
           <BarSeries dataKey={series2.key} {...series2} />
         </BarStack>
@@ -118,3 +126,22 @@ describe('<BarStack />', () => {
     );
   });
 });
+
+describe('<AnimatedBarStack />', () => {
+  it('should be defined', () => {
+    expect(AnimatedBarStack).toBeDefined();
+  });
+  it('should render an animated.rect', () => {
+    const wrapper = mount(
+      <DataProvider {...providerProps}>
+        <svg>
+          <AnimatedBarStack>
+            <BarSeries dataKey={series1.key} {...series1} />
+            <BarSeries dataKey={series2.key} {...series2} />
+          </AnimatedBarStack>
+        </svg>
+      </DataProvider>,
+    );
+    expect(wrapper.find(animated.rect)).toHaveLength(4);
+  });
+});
diff --git a/packages/visx-xychart/test/components/LineSeries.test.tsx b/packages/visx-xychart/test/components/LineSeries.test.tsx
@@ -1,7 +1,8 @@
 import React, { useContext, useEffect } from 'react';
+import { animated } from 'react-spring';
 import { mount } from 'enzyme';
 import { LinePath } from '@visx/shape';
-import { DataContext, LineSeries, useEventEmitter } from '../../src';
+import { AnimatedLineSeries, DataContext, LineSeries, useEventEmitter } from '../../src';
 import getDataContext from '../mocks/getDataContext';
 import setupTooltipTest from '../mocks/setupTooltipTest';
 
@@ -64,3 +65,19 @@ describe('<LineSeries />', () => {
     );
   });
 });
+
+describe('<AnimatedLineSeries />', () => {
+  it('should be defined', () => {
+    expect(AnimatedLineSeries).toBeDefined();
+  });
+  it('should render an animated.path', () => {
+    const wrapper = mount(
+      <DataContext.Provider value={getDataContext(series)}>
+        <svg>
+          <AnimatedLineSeries dataKey={series.key} {...series} />
+        </svg>
+      </DataContext.Provider>,
+    );
+    expect(wrapper.find(animated.path)).toHaveLength(1);
+  });
+});