tests(vx-react-spring): add more and better tests

packages/vx-react-spring/src/spring-configs/useLineTransitionConfig.ts

@@ -14,14 +14,14 @@ interface Line {
 }
 
 function animatedValue(
-  animationTrajectory: 'outside' | 'inside' | 'min' | 'max',
+  animationTrajectory: 'outside' | 'center' | 'min' | 'max',
   positionOnScale: number | undefined,
   scaleMin: number | undefined,
   scaleMax: number | undefined,
   scaleHalfwayPoint: number,
 ): number {
   switch (animationTrajectory) {
-    case 'inside':
+    case 'center':
       return scaleHalfwayPoint;
     case 'min':
       return scaleMin ?? 0;
@@ -49,7 +49,7 @@ export type TransitionConfig<Scale extends AxisScale | GridScale> = {
   /** Whether to animate the `x` or `y` values of a Line. */
   animateXOrY: 'x' | 'y';
   /** The scale position entering lines come from, and exiting lines leave to. */
-  animationTrajectory?: 'outside' | 'inside' | 'min' | 'max';
+  animationTrajectory?: 'outside' | 'center' | 'min' | 'max';
 };
 
 /**

packages/vx-react-spring/test/AnimatedAxis.test.tsx

@@ -1,7 +1,16 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { scaleLinear } from '@vx/scale';
 import { AnimatedAxis } from '../src';
 
 describe('AnimatedAxis', () => {
   it('should be defined', () => {
     expect(AnimatedAxis).toBeDefined();
   });
+
+  it('should not throw', () => {
+    expect(() =>
+      shallow(<AnimatedAxis scale={scaleLinear({ domain: [0, 10], range: [0, 10] })} />),
+    ).not.toThrow();
+  });
 });

packages/vx-react-spring/test/AnimatedGridColumns.test.tsx

@@ -1,7 +1,20 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { scaleLinear } from '@vx/scale';
 import { AnimatedGridColumns } from '../src';
 
 describe('AnimatedGridColumns', () => {
   it('should be defined', () => {
     expect(AnimatedGridColumns).toBeDefined();
   });
+  it('should not throw', () => {
+    expect(() =>
+      shallow(
+        <AnimatedGridColumns
+          height={10}
+          scale={scaleLinear({ domain: [0, 10], range: [0, 10] })}
+        />,
+      ),
+    ).not.toThrow();
+  });
 });

packages/vx-react-spring/test/AnimatedGridRows.test.tsx

@@ -1,7 +1,17 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { scaleLinear } from '@vx/scale';
 import { AnimatedGridRows } from '../src';
 
 describe('AnimatedGridRows', () => {
   it('should be defined', () => {
     expect(AnimatedGridRows).toBeDefined();
   });
+  it('should not throw', () => {
+    expect(() =>
+      shallow(
+        <AnimatedGridRows width={10} scale={scaleLinear({ domain: [0, 10], range: [0, 10] })} />,
+      ),
+    ).not.toThrow();
+  });
 });

packages/vx-react-spring/test/AnimatedTicks.test.tsx

@@ -1,7 +1,26 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { scaleLinear } from '@vx/scale';
 import { AnimatedTicks } from '../src';
 
 describe('AnimatedTicks', () => {
   it('should be defined', () => {
     expect(AnimatedTicks).toBeDefined();
   });
+  it('should not throw', () => {
+    expect(() =>
+      shallow(
+        <AnimatedTicks
+          hideTicks={false}
+          horizontal={false}
+          orientation="bottom"
+          scale={scaleLinear({ domain: [0, 10], range: [0, 10] })}
+          tickLabelProps={[]}
+          ticks={[
+            { from: { x: 0, y: 0 }, to: { x: 0, y: 5 }, value: 0, index: 0, formattedValue: '0' },
+          ]}
+        />,
+      ),
+    ).not.toThrow();
+  });
 });

packages/vx-react-spring/test/useLineTransitionConfig.test.tsx

@@ -1,7 +1,94 @@
+import React from 'react';
+import { scaleLinear } from '@vx/scale';
+import { shallow } from 'enzyme';
 import useLineTransitionConfig from '../src/spring-configs/useLineTransitionConfig';
 
+const scale = scaleLinear({ domain: [0, 10], range: [0, 10] });
+const invertedScale = scaleLinear({ domain: [0, 10], range: [10, 0] });
+const verticalLine = { from: { x: 0, y: 0 }, to: { x: 0, y: 5 } };
+const verticalLineMax = { from: { x: 8, y: 0 }, to: { x: 8, y: 5 } };
+
 describe('useLineTransitionConfig', () => {
   it('should be defined', () => {
     expect(useLineTransitionConfig).toBeDefined();
   });
+  it('should return react-spring config with from, enter, update, leave keys', () => {
+    expect.assertions(1);
+    function HookTest() {
+      const config = useLineTransitionConfig({ scale, animateXOrY: 'x' });
+      expect(config).toMatchObject({
+        from: expect.any(Function),
+        enter: expect.any(Function),
+        update: expect.any(Function),
+        leave: expect.any(Function),
+      });
+      return null;
+    }
+    shallow(<HookTest />);
+  });
+  it('should animate from scale min', () => {
+    expect.assertions(2);
+    function HookTest() {
+      const config = useLineTransitionConfig({
+        scale,
+        animateXOrY: 'x',
+        animationTrajectory: 'min',
+      });
+      const invertedConfig = useLineTransitionConfig({
+        scale: invertedScale,
+        animateXOrY: 'y',
+        animationTrajectory: 'min',
+      });
+      expect(config.from(verticalLine).fromX).toBe(0);
+      expect(invertedConfig.from(verticalLine).fromY).toBe(10);
+      return null;
+    }
+    shallow(<HookTest />);
+  });
+  it('should animate from scale max', () => {
+    expect.assertions(2);
+    function HookTest() {
+      const config = useLineTransitionConfig({
+        scale,
+        animateXOrY: 'x',
+        animationTrajectory: 'max',
+      });
+      const invertedConfig = useLineTransitionConfig({
+        scale: invertedScale,
+        animateXOrY: 'y',
+        animationTrajectory: 'max',
+      });
+      expect(config.from(verticalLine).fromX).toBe(10);
+      expect(invertedConfig.from(verticalLine).fromY).toBe(0);
+      return null;
+    }
+    shallow(<HookTest />);
+  });
+  it('should animate from outside', () => {
+    expect.assertions(2);
+    function HookTest() {
+      const config = useLineTransitionConfig({
+        scale,
+        animateXOrY: 'x',
+        animationTrajectory: 'outside',
+      });
+      expect(config.from(verticalLine).fromX).toBe(0);
+      expect(config.from(verticalLineMax).fromX).toBe(10);
+      return null;
+    }
+    shallow(<HookTest />);
+  });
+  it('should animate from center', () => {
+    expect.assertions(1);
+    function HookTest() {
+      const config = useLineTransitionConfig({
+        scale,
+        animateXOrY: 'x',
+        animationTrajectory: 'center',
+      });
+      expect(config.from(verticalLine).fromX).toBe(5);
+      return null;
+    }
+    shallow(<HookTest />);
+  });
 });