feat(bump): add tests for the Bump chart

plouc · Dec 29, 2021 · 90006b6 · 90006b6
1 parent 4be280b
commit 90006b6
Show file tree

Hide file tree

Showing 11 changed files with 200 additions and 217 deletions.
diff --git a/packages/bump/_old_index.d.ts b/packages/bump/_old_index.d.ts
diff --git a/packages/bump/src/bump/Line.tsx b/packages/bump/src/bump/Line.tsx
@@ -60,6 +60,7 @@ export const Line = <D extends BumpDatum>({
     return (
         <>
             <animated.path
+                data-testid={`line.${serie.id}`}
                 fill="none"
                 d={animatedPath}
                 stroke={animatedProps.color}
@@ -70,6 +71,7 @@ export const Line = <D extends BumpDatum>({
             />
             {isInteractive && (
                 <path
+                    data-testid={`line.${serie.id}.interactive`}
                     fill="none"
                     stroke="red"
                     strokeOpacity={0}

diff --git a/packages/bump/src/bump/LineTooltip.tsx b/packages/bump/src/bump/LineTooltip.tsx
@@ -5,6 +5,11 @@ interface LineTooltipProps<D extends BumpDatum> {
     serie: BumpComputedSerie<D>
 }
 
-export const LineTooltip = <D extends BumpDatum>({ serie }: LineTooltipProps<D>) => {
-    return <BasicTooltip id={serie.id} enableChip={true} color={serie.color} />
-}
+export const LineTooltip = <D extends BumpDatum>({ serie }: LineTooltipProps<D>) => (
+    <BasicTooltip
+        data-testid={`tooltip.${serie.id}`}
+        id={serie.id}
+        enableChip={true}
+        color={serie.color}
+    />
+)
diff --git a/packages/bump/src/bump/LinesLabels.tsx b/packages/bump/src/bump/LinesLabels.tsx
@@ -6,7 +6,7 @@ import { useBumpSeriesLabels } from './hooks'
 
 interface LineLabelsProps<D extends BumpDatum> {
     series: BumpComputedSerie<D>[]
-    getLabel: BumpLabel
+    getLabel: BumpLabel<D>
     position: 'start' | 'end'
     padding: number
     color: InheritedColorConfig<BumpComputedSerie<D>>
@@ -52,6 +52,7 @@ export const LinesLabels = <D extends BumpDatum>({
 
                 return (
                     <animated.text
+                        data-testid={`label.${position}.${label.serie.id}`}
                         key={label.id}
                         x={animatedProps.x}
                         y={animatedProps.y}

diff --git a/packages/bump/src/bump/Point.tsx b/packages/bump/src/bump/Point.tsx
@@ -30,6 +30,7 @@ export const Point = <D extends BumpDatum>({ point }: PointProps<D>) => {
 
     return (
         <animated.circle
+            data-testid={`point.${point.serie.id}.${point.data.x}`}
             cx={animatedProps.x}
             cy={animatedProps.y}
             r={to(animatedProps.radius, v => Math.max(v, 0))}

diff --git a/packages/bump/src/bump/defaults.ts b/packages/bump/src/bump/defaults.ts
@@ -1,7 +1,7 @@
 import { ModernMotionProps } from '@nivo/core'
 import { LineTooltip } from './LineTooltip'
 import { Point } from './Point'
-import { BumpCommonProps, BumpSvgProps } from './types'
+import { BumpCommonProps, BumpPointComponent } from './types'
 
 const commonDefaultProps: Omit<
     BumpCommonProps<any>,
@@ -32,7 +32,7 @@ const commonDefaultProps: Omit<
     startLabel: false,
     startLabelPadding: 16,
     startLabelTextColor: { from: 'color' },
-    endLabel: 'id',
+    endLabel: true,
     endLabelPadding: 16,
     endLabelTextColor: { from: 'color' },
 
@@ -59,7 +59,7 @@ const commonDefaultProps: Omit<
 }
 
 export const bumpSvgDefaultProps: typeof commonDefaultProps & {
-    pointComponent: BumpSvgProps<any>['pointComponent']
+    pointComponent: BumpPointComponent<any>
     animate: boolean
     motionConfig: ModernMotionProps['motionConfig']
 } = {

diff --git a/packages/bump/src/bump/hooks.ts b/packages/bump/src/bump/hooks.ts
@@ -375,7 +375,7 @@ export const useBumpSeriesLabels = <D extends BumpDatum>({
     position: 'start' | 'end'
     padding: number
     color: InheritedColorConfig<BumpComputedSerie<D>>
-    getLabel: BumpLabel
+    getLabel: BumpLabel<D>
 }) => {
     const theme = useTheme()
     const getColor = useInheritedColor(color, theme)

diff --git a/packages/bump/src/bump/types.ts b/packages/bump/src/bump/types.ts
@@ -1,5 +1,5 @@
 import { FunctionComponent, MouseEvent } from 'react'
-import { Theme, Box, Dimensions, ModernMotionProps, PropertyAccessor } from '@nivo/core'
+import { Theme, Box, Dimensions, ModernMotionProps } from '@nivo/core'
 import { OrdinalColorScaleConfig, InheritedColorConfig } from '@nivo/colors'
 import { AxisProps } from '@nivo/axes'
 
@@ -56,7 +56,7 @@ export type BumpDataProps<D extends BumpDatum> = {
 
 export type BumpInterpolation = 'smooth' | 'linear'
 
-export type BumpLabel = PropertyAccessor<any, string> | false
+export type BumpLabel<D extends BumpDatum> = ((serie: BumpComputedSerie<D>) => string) | boolean
 export interface BumpLabelData<D extends BumpDatum> {
     serie: BumpComputedSerie<D>
     id: BumpSerie<D>['id']
@@ -94,10 +94,10 @@ export type BumpCommonProps<D extends BumpDatum> = {
     activeOpacity: number
     inactiveOpacity: number
 
-    startLabel: BumpLabel
+    startLabel: BumpLabel<D>
     startLabelPadding: number
     startLabelTextColor: InheritedColorConfig<BumpComputedSerie<D>>
-    endLabel: BumpLabel
+    endLabel: BumpLabel<D>
     endLabelPadding: number
     endLabelTextColor: InheritedColorConfig<BumpComputedSerie<D>>
 
@@ -133,6 +133,6 @@ export type BumpCommonProps<D extends BumpDatum> = {
 
 export type BumpSvgProps<D extends BumpDatum> = Partial<BumpCommonProps<D>> &
     BumpDataProps<D> & {
-        pointComponent: BumpPointComponent<D>
+        pointComponent?: BumpPointComponent<D>
     } & Dimensions &
     ModernMotionProps
diff --git a/packages/bump/tests/.eslintrc.yml b/packages/bump/tests/.eslintrc.yml
@@ -0,0 +1,2 @@
+env:
+  jest: true