Skip to content

Commit

Permalink
feat(pie): add tests for colors
Browse files Browse the repository at this point in the history
  • Loading branch information
@plouc
plouc committed Nov 4, 2020
1 parent 4abe3f3 commit f0cefd2
Showing 1 changed file with 96 additions and 74 deletions.
170 changes: 96 additions & 74 deletions packages/pie/tests/Pie.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,34 +3,41 @@ import TestRenderer from 'react-test-renderer'
import Pie from '../src/Pie'
import PieSlice from '../src/PieSlice'

const sampleData = [{
id: 'A',
value: 30,
},{
id: 'B',
value: 20,
},{
id: 'C',
value: 50,
}]
const sampleData = [
{
id: 'A',
value: 30,
color: '#ff5500',
},
{
id: 'B',
value: 20,
color: '#ffdd00',
},
{
id: 'C',
value: 50,
color: '#99cc44',
},
]

sampleData.forEach(datum => {
datum.nested = {
color: datum.color,
}
})

const sampleDataWithCustomProps = sampleData.map(datum => ({
name: datum.id,
attributes: {
volume: datum.value
}
volume: datum.value,
},
}))

describe('Pie', () => {
describe('data', () => {
it('should use default id and value properties', () => {
const pie = TestRenderer.create(
<Pie
width={400}
height={400}
data={sampleData}
/>
)
const pie = TestRenderer.create(<Pie width={400} height={400} data={sampleData} />)
const pieInstance = pie.root

const slices = pieInstance.findAllByType(PieSlice)
Expand Down Expand Up @@ -106,12 +113,7 @@ describe('Pie', () => {

it('should support custom value formatting', () => {
const pie = TestRenderer.create(
<Pie
width={400}
height={400}
data={sampleData}
valueFormat=" >-$.2f"
/>
<Pie width={400} height={400} data={sampleData} valueFormat=" >-$.2f" />
)
const pieInstance = pie.root

Expand All @@ -132,12 +134,7 @@ describe('Pie', () => {

it('should support sorting data by value', () => {
const pie = TestRenderer.create(
<Pie
width={400}
height={400}
data={sampleData}
sortByValue
/>
<Pie width={400} height={400} data={sampleData} sortByValue />
)
const pieInstance = pie.root

Expand All @@ -149,89 +146,114 @@ describe('Pie', () => {

expect(slice50.props.data.arc.startAngle).toEqual(0)
expect(slice30.props.data.arc.startAngle).toBeGreaterThan(0)
expect(slice20.props.data.arc.startAngle).toBeGreaterThan(slice30.props.data.arc.startAngle)
expect(slice20.props.data.arc.startAngle).toBeGreaterThan(
slice30.props.data.arc.startAngle
)
})
})

describe('layout', () => {
it('should support donut charts', () => {
it('should support donut charts', () => {})

})
it('should support padAngle', () => {})

it('should support padAngle', () => {
it('should support cornerRadius', () => {})

})
it('should support custom start and end angles', () => {})

it('should support cornerRadius', () => {
it('should support optimizing space usage via the fit property', () => {})
})

})
describe('colors', () => {
it('should use colors from scheme', () => {
const pie = TestRenderer.create(
<Pie width={400} height={400} data={sampleData} colors={{ scheme: 'accent' }} />
)
const pieInstance = pie.root

it('should support custom start and end angles', () => {
const slices = pieInstance.findAllByType(PieSlice)

})
expect(slices[0].props.data.id).toEqual('A')
expect(slices[0].props.data.color).toEqual('#7fc97f')

it('should support optimizing space usage via the fit property', () => {
expect(slices[1].props.data.id).toEqual('B')
expect(slices[1].props.data.color).toEqual('#beaed4')

expect(slices[2].props.data.id).toEqual('C')
expect(slices[2].props.data.color).toEqual('#fdc086')
})
})

describe('colors', () => {
it('should use colors from scheme', () => {

})
it('should allow to use colors from data using a path', () => {
const pie = TestRenderer.create(
<Pie
width={400}
height={400}
data={sampleData}
colors={{ datum: 'data.nested.color' }}
/>
)
const pieInstance = pie.root

it('should use colors from data', () => {
const slices = pieInstance.findAllByType(PieSlice)

})
})
expect(slices[0].props.data.id).toEqual('A')
expect(slices[0].props.data.color).toEqual('#ff5500')

describe('patterns & gradients', () => {
it('should support patterns', () => {
expect(slices[1].props.data.id).toEqual('B')
expect(slices[1].props.data.color).toEqual('#ffdd00')

expect(slices[2].props.data.id).toEqual('C')
expect(slices[2].props.data.color).toEqual('#99cc44')
})

it('should support gradients', () => {
it('should allow to use colors from data using a function', () => {
const pie = TestRenderer.create(
<Pie width={400} height={400} data={sampleData} colors={d => d.data.color} />
)
const pieInstance = pie.root

})
})
const slices = pieInstance.findAllByType(PieSlice)

describe('legends', () => {
it('should render legends', () => {
expect(slices[0].props.data.id).toEqual('A')
expect(slices[0].props.data.color).toEqual('#ff5500')

expect(slices[1].props.data.id).toEqual('B')
expect(slices[1].props.data.color).toEqual('#ffdd00')

expect(slices[2].props.data.id).toEqual('C')
expect(slices[2].props.data.color).toEqual('#99cc44')
})
})

describe('interactivity', () => {
it('should support onClick handler', () => {

})
describe('patterns & gradients', () => {
it('should support patterns', () => {})

it('should support onMouseEnter handler', () => {
it('should support gradients', () => {})
})

})
describe('legends', () => {
it('should render legends', () => {})
})

it('should support onMouseMove handler', () => {
describe('interactivity', () => {
it('should support onClick handler', () => {})

})
it('should support onMouseEnter handler', () => {})

it('should support onMouseLeave handler', () => {
it('should support onMouseMove handler', () => {})

})
it('should support onMouseLeave handler', () => {})
})

describe('tooltip', () => {
it('should render a tooltip when hovering a slice', () => {
})
it('should render a tooltip when hovering a slice', () => {})

it('should allow to override the default tooltip', () => {
})
it('should allow to override the default tooltip', () => {})
})

describe('layers', () => {
it('should support disabling a layer', () => {
})
it('should support disabling a layer', () => {})

it('should support adding a custom layer', () => {
})
it('should support adding a custom layer', () => {})
})
})

0 comments on commit f0cefd2

Please sign in to comment.