feat(pie): add tests for slice labels

plouc · Nov 4, 2020 · fd5b047 · fd5b047
1 parent c22be68
commit fd5b047
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 6 deletions.
diff --git a/packages/pie/src/Pie.js b/packages/pie/src/Pie.js
@@ -17,7 +17,7 @@ import {
 } from '@nivo/core'
 import { getInheritedColorGenerator, useInheritedColor } from '@nivo/colors'
 import { PieSvgDefaultProps, PieSvgPropTypes } from './props'
-import PieSlice from './PieSlice'
+import { PieSlice } from './PieSlice'
 import PieRadialLabels from './PieRadialLabels'
 import { PieSliceLabels } from './PieSliceLabels'
 import PieLegends from './PieLegends'
@@ -73,7 +73,7 @@ const Pie = ({
     fill,
 
     // interactivity
-    isInteractive,
+    // isInteractive,
     onClick,
     onMouseEnter,
     onMouseLeave,

diff --git a/packages/pie/src/PieSlice.js b/packages/pie/src/PieSlice.js
@@ -11,7 +11,7 @@ import PropTypes from 'prop-types'
 import { BasicTooltip, useTooltip } from '@nivo/tooltip'
 import { datumWithArcPropType } from './props'
 
-const PieSlice = ({
+export const PieSlice = ({
     datum,
     path,
     color,
@@ -79,5 +79,3 @@ PieSlice.propTypes = {
     onMouseEnter: PropTypes.func,
     onMouseLeave: PropTypes.func,
 }
-
-export default PieSlice
diff --git a/packages/pie/tests/Pie.test.js b/packages/pie/tests/Pie.test.js
@@ -1,7 +1,8 @@
 import React from 'react'
 import TestRenderer from 'react-test-renderer'
 import Pie from '../src/Pie'
-import PieSlice from '../src/PieSlice'
+import { PieSlice } from '../src/PieSlice'
+import { PieSliceLabels } from '../src/PieSliceLabels'
 
 const sampleData = [
     {
@@ -231,6 +232,96 @@ describe('Pie', () => {
         it('should support gradients', () => {})
     })
 
+    describe('sliceLabels', () => {
+        it('should render labels when enabled', () => {
+            const pie = TestRenderer.create(<Pie width={400} height={400} data={sampleData} />)
+            const pieInstance = pie.root
+
+            const wrapper = pieInstance.findByType(PieSliceLabels)
+            const labels = wrapper.findAllByType('g')
+
+            expect(labels).toHaveLength(sampleData.length)
+
+            sampleData.forEach((datum, index) => {
+                const sliceLabel = labels[index]
+
+                const text = sliceLabel.findByType('text')
+                expect(text.props.children).toEqual(datum.value)
+            })
+        })
+
+        it('should allow to disable labels', () => {
+            const pie = TestRenderer.create(
+                <Pie width={400} height={400} data={sampleData} enableSliceLabels={false} />
+            )
+            const pieInstance = pie.root
+
+            expect(pieInstance.findAllByType(PieSliceLabels)).toHaveLength(0)
+        })
+
+        it('should use formattedValue', () => {
+            const pie = TestRenderer.create(
+                <Pie width={400} height={400} data={sampleData} valueFormat=" >-$.2f" />
+            )
+            const pieInstance = pie.root
+
+            const wrapper = pieInstance.findByType(PieSliceLabels)
+            const labels = wrapper.findAllByType('g')
+
+            expect(labels).toHaveLength(sampleData.length)
+
+            sampleData.forEach((datum, index) => {
+                const sliceLabel = labels[index]
+
+                const text = sliceLabel.findByType('text')
+                expect(text.props.children).toEqual(`$${datum.value}.00`)
+            })
+        })
+
+        it('should allow to change the label accessor using a path', () => {
+            const pie = TestRenderer.create(
+                <Pie width={400} height={400} data={sampleData} sliceLabel="id" />
+            )
+            const pieInstance = pie.root
+
+            const wrapper = pieInstance.findByType(PieSliceLabels)
+            const labels = wrapper.findAllByType('g')
+
+            expect(labels).toHaveLength(sampleData.length)
+
+            sampleData.forEach((datum, index) => {
+                const sliceLabel = labels[index]
+
+                const text = sliceLabel.findByType('text')
+                expect(text.props.children).toEqual(datum.id)
+            })
+        })
+
+        it('should allow to change the label accessor using a function', () => {
+            const pie = TestRenderer.create(
+                <Pie
+                    width={400}
+                    height={400}
+                    data={sampleData}
+                    sliceLabel={datum => `${datum.id} - ${datum.value}`}
+                />
+            )
+            const pieInstance = pie.root
+
+            const wrapper = pieInstance.findByType(PieSliceLabels)
+            const labels = wrapper.findAllByType('g')
+
+            expect(labels).toHaveLength(sampleData.length)
+
+            sampleData.forEach((datum, index) => {
+                const sliceLabel = labels[index]
+
+                const text = sliceLabel.findByType('text')
+                expect(text.props.children).toEqual(`${datum.id} - ${datum.value}`)
+            })
+        })
+    })
+
     describe('legends', () => {
         it('should render legends', () => {})
     })