forked from recharts/recharts
-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
ComposedChartSpec.js
85 lines (78 loc) · 3.25 KB
/
ComposedChartSpec.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
import React from 'react';
import { expect } from 'chai';
import { ComposedChart, Line, Bar, Area, XAxis, YAxis, Legend,
CartesianGrid, Tooltip } from 'recharts';
import { mount, render } from 'enzyme';
import sinon from 'sinon';
describe('<ComposedChart />', () => {
const data = [{ name: 'Page A', uv: 590, pv: 800, amt: 1400 },
{ name: 'Page B', uv: 868, pv: 967, amt: 1506 },
{ name: 'Page C', uv: 1397, pv: 1098, amt: 989 },
{ name: 'Page D', uv: 1480, pv: 1200, amt: 1228 },
{ name: 'Page E', uv: 1520, pv: 1108, amt: 1100 },
{ name: 'Page F', uv: 1400, pv: 680, amt: 1700 }];
it('Render 1 line, 1 area, 1bar in the ComposedChart', () => {
const wrapper = render(
<ComposedChart
width={800} height={400} data={data}
margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
>
<XAxis dataKey="name" />
<YAxis />
<CartesianGrid stroke="#f5f5f5" />
<Area type="monotone" dataKey="amt" fill="#8884d8" stroke="#8884d8" />
<Bar dataKey="pv" barSize={20} fill="#413ea0" />
<Line type="monotone" dataKey="uv" stroke="#ff7300" />
</ComposedChart>
);
expect(wrapper.find('.recharts-line .recharts-line-curve').length).to.equal(1);
expect(wrapper.find('.recharts-bar').length).to.equal(1);
expect(wrapper.find('.recharts-area .recharts-area-area').length).to.equal(1);
});
it('Render 1 bar, 1 dot when data has only one element', () => {
const singleData = [data[0]];
const wrapper = render(
<ComposedChart
width={800} height={400} data={singleData}
margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
>
<XAxis dataKey="name" />
<YAxis dataKey="pv" orientation="left" yAxisId="left" />
<YAxis dataKey="uv" orientation="right" yAxisId="right" />
<CartesianGrid stroke="#f5f5f5" />
<Bar dataKey="pv" barSize={20} fill="#413ea0" yAxisId="left" />
<Line type="monotone" dataKey="uv" stroke="#ff7300" yAxisId="right" />
</ComposedChart>
);
expect(wrapper.find('.recharts-line .recharts-line-dot').length).to.equal(1);
expect(wrapper.find('.recharts-bar .recharts-bar-rectangle').length).to.equal(1);
});
it('MouseEnter ComposedChart should show tooltip, active dot, and cursor', () => {
const wrapper = mount(
<ComposedChart
width={800} height={400} data={data}
margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
>
<XAxis dataKey="name" />
<YAxis />
<Legend />
<Tooltip />
<CartesianGrid stroke="#f5f5f5" />
<Area isAnimationActive={false} type="monotone" dataKey="amt" fill="#8884d8" stroke="#8884d8" />
<Bar isAnimationActive={false} dataKey="pv" barSize={20} fill="#413ea0" />
<Line isAnimationActive={false} type="monotone" dataKey="uv" stroke="#ff7300" />
</ComposedChart>
);
wrapper.setState({
isTooltipActive: true,
activeTooltipIndex: 1,
activeTooltipLabel: 'test',
activeTooltipCoord: {
x: 100,
y: 100,
},
});
// expect(wrapper.find('.recharts-tooltip-cursor').length).to.equal(1);
// expect(wrapper.find('.recharts-line-active-dot').length).to.equal(1);
});
});