forked from recharts/recharts
-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
PieChartSpec.js
133 lines (117 loc) · 4.31 KB
/
PieChartSpec.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
import React from 'react';
import { expect } from 'chai';
import { PieChart, Pie, Sector, Legend, Tooltip, Cell } from 'recharts';
import { mount, render } from 'enzyme';
import sinon from 'sinon';
describe('<PieChart />', () => {
const data = [
{ name: 'Group A', value: 400 },
{ name: 'Group B', value: 300 },
{ name: 'Group C', value: 300 },
{ name: 'Group D', value: 200 },
{ name: 'Group E', value: 278 },
{ name: 'Group F', value: 189 },
];
it('Renders 6 sectors circles in simple PieChart', () => {
const wrapper = render(
<PieChart width={800} height={400}>
<Pie dataKey="value" isAnimationActive={false} data={data} cx={200} cy={200} outerRadius={80} fill="#ff7300" label />
</PieChart>
);
expect(wrapper.find('.recharts-pie-sector').length).to.equal(data.length);
});
it('Renders 6 sectors circles when add Cell to specified props of eact slice', () => {
const wrapper = render(
<PieChart width={800} height={400}>
<Pie dataKey="value" isAnimationActive={false} cx={200} cy={200} outerRadius={80} fill="#ff7300" label>
{
data.map((entry, index) => (
<Cell {...entry} key={`cell-${index}`} strokeWidth={index + 1} />
))
}
</Pie>
</PieChart>
);
expect(wrapper.find('.recharts-pie-sector').length).to.equal(6);
});
it('Renders legend when all the values are 0', () => {
const emptyData = [
{ name: 'Group A', value: 0 },
{ name: 'Group B', value: 0 },
{ name: 'Group C', value: 0 },
{ name: 'Group D', value: 0 },
{ name: 'Group E', value: 0 },
{ name: 'Group F', value: 0 },
];
const wrapper = render(
<PieChart width={800} height={400}>
<Pie dataKey="value" data={emptyData} isAnimationActive={false} cx={200} cy={200} outerRadius={80} />
<Legend />
</PieChart>
);
expect(wrapper.find('.recharts-legend-item').length).to.equal(emptyData.length);
});
it('Don\'t renders any sectors when width or height is smaller than 0', () => {
const wrapper = render(
<PieChart width={0} height={400}>
<Pie dataKey="value" isAnimationActive={false} data={data} cx={200} cy={200} outerRadius={80} fill="#ff7300" label />
</PieChart>
);
expect(wrapper.find('.recharts-pie-sector').length).to.equal(0);
});
it('Renders 6 legend item when add a Legend element', () => {
const wrapper = render(
<PieChart width={800} height={400}>
<Pie dataKey="value" isAnimationActive={false} data={data} cx={200} cy={200} outerRadius={80} fill="#ff7300" label />
<Legend />
</PieChart>
);
expect(wrapper.find('.recharts-legend-wrapper').length).to.equal(1);
expect(wrapper.find('.recharts-legend-item').length).to.equal(6);
});
// it('Renders tooltip when add a Tooltip element', () => {
// const wrapper = mount(
// <PieChart width={800} height={400}>
// <Pie isAnimationActive={false} data={data} cx={200} cy={200} outerRadius={80} fill="#ff7300" label/>
// <Tooltip/>
// </PieChart>
// );
// wrapper.setState({
// isTooltipActive: true,
// activeTooltipCoord: {
// x: 95,
// y: 21,
// },
// activeTooltipLabel: 'test',
// activeTooltipPayload: [{name: 'test', value: 1}],
// });
// expect(wrapper.find('.recharts-tooltip-wrapper').length).to.equal(1);
// expect(wrapper.find('.recharts-default-tooltip').length).to.equal(1);
// });
it('click on Sector should invoke onClick callback', () => {
const onClick = sinon.spy();
const onMouseEnter = sinon.spy();
const onMouseLeave = sinon.spy();
const wrapper = mount(
<PieChart
width={800}
height={400}
onClick={onClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
<Pie dataKey="value" isAnimationActive={false} data={data} cx={200} cy={200} outerRadius={80} fill="#ff7300" label />
</PieChart>
);
const sectors = wrapper.find(Sector);
const se = sectors.at(2);
se.simulate('click');
expect(onClick.calledOnce).to.equal(true);
/*
se.simulate('mouseEnter');
expect(onMouseEnter.calledOnce).to.equal(true);
se.simulate('mouseLeave');
expect(onMouseLeave.calledOnce).to.equal(true);
*/
});
});