Skip to content

Commit da0f2f8

Browse files
hustcchustcc
committed
fixed #130, & upgrade testcases & rewrite website code
1 parent ba00129 commit da0f2f8

File tree

14 files changed

+286
-408
lines changed

14 files changed

+286
-408
lines changed

‎__tests__/core.spec.jsx‎

Lines changed: 54 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,68 @@
11
/* eslint-disable no-undef */
22
import React from 'react';
3-
import { shallow } from 'enzyme';
3+
import { mount } from 'enzyme';
44
import echarts from 'echarts';
55

66
import EchartsReactCore from '../src/core';
77
import option from './option';
88

9-
test('test echarts-for-react\'s core.js.', () => {
10-
let component = shallow(<EchartsReactCore
11-
option={option}
12-
className="echarts-for-react"
13-
echarts={echarts}
14-
/>);
9+
describe('core.js', () => {
10+
test('default props', () => {
11+
const component = mount(<EchartsReactCore
12+
option={option}
13+
className="echarts-for-react-root"
14+
echarts={echarts}
15+
/>);
1516

16-
expect(component.exists()).toBe(true);
17+
expect(component.exists()).toBe(true);
1718

18-
expect(component.find('div').length).toBe(1);
19+
expect(component.find('div').length).toBe(1);
1920

20-
expect(component.hasClass('echarts-for-react')).toBe(true);
21-
expect(component.hasClass('echarts-for-react-div')).toBe(true);
21+
// root tag
22+
expect(component.getDOMNode().nodeName.toLowerCase()).toEqual('div');
23+
// class name
24+
expect(component.getDOMNode().className).toBe('echarts-for-react echarts-for-react-root');
25+
// style
26+
expect(component.getDOMNode().style.height).toEqual('300px');
27+
// default props
28+
expect(component.props().option).toEqual(option);
29+
expect(component.props().style).toEqual({});
30+
expect(component.props().className).toEqual('echarts-for-react-root');
31+
expect(component.props().notMerge).toEqual(false);
32+
expect(component.props().lazyUpdate).toEqual(false);
33+
expect(component.props().theme).toEqual(null);
34+
expect(typeof component.props().onChartReady).toEqual('function');
35+
expect(component.props().showLoading).toEqual(false);
36+
expect(component.props().onEvents).toEqual({});
37+
});
2238

23-
expect(component.type()).toEqual('div');
24-
// default props
25-
expect(component.instance().props.option).toEqual(option);
26-
expect(component.instance().props.style).toEqual({});
27-
expect(component.props().style).toEqual({ height: 300 });
28-
expect(component.instance().props.className).toEqual('echarts-for-react');
29-
expect(component.instance().props.notMerge).toEqual(false);
30-
expect(component.instance().props.lazyUpdate).toEqual(false);
31-
expect(component.instance().props.theme).toEqual(null);
32-
expect(typeof component.instance().props.onChartReady).toEqual('function');
33-
expect(component.instance().props.showLoading).toEqual(false);
34-
expect(component.instance().props.onEvents).toEqual({});
39+
test('override props', () => {
40+
const testOnChartReadyFunc = jest.fn();
41+
const testFunc = () => {};
42+
// not default props
43+
const component = mount(<EchartsReactCore
44+
option={option}
45+
style={{ width: 100 }}
46+
notMerge
47+
lazyUpdate
48+
theme="test_theme"
49+
onChartReady={testOnChartReadyFunc}
50+
showLoading
51+
onEvents={{ onClick: testFunc }}
52+
echarts={echarts}
53+
/>);
3554

55+
// default props
56+
expect(component.props().option).toEqual(option);
57+
expect(component.props().style).toEqual({ width: 100 });
58+
expect(component.props().className).toBe('');
59+
expect(component.props().notMerge).toEqual(true);
60+
expect(component.props().lazyUpdate).toEqual(true);
61+
expect(component.props().theme).toEqual('test_theme');
62+
expect(typeof component.props().onChartReady).toEqual('function');
63+
expect(component.props().showLoading).toEqual(true);
64+
expect(component.props().onEvents).toEqual({ onClick: testFunc });
3665

37-
const testFunc = () => {};
38-
// not default props
39-
component = shallow(<EchartsReactCore
40-
option={option}
41-
style={{ width: 100 }}
42-
notMerge
43-
lazyUpdate
44-
theme="test_theme"
45-
onChartReady={testFunc}
46-
showLoading
47-
onEvents={{ onClick: testFunc }}
48-
className="echarts-for-react"
49-
echarts={echarts}
50-
/>);
51-
52-
expect(component.props().style).toEqual({ width: 100, height: 300 });
53-
expect(component.hasClass('echarts-for-react')).toBe(true);
54-
expect(component.hasClass('echarts-for-react-div')).toBe(true);
55-
expect(component.instance().props.option).toEqual(option);
56-
expect(component.instance().props.style).toEqual({ width: 100 });
57-
expect(component.instance().props.className).toEqual('echarts-for-react');
58-
expect(component.instance().props.notMerge).toEqual(true);
59-
expect(component.instance().props.lazyUpdate).toEqual(true);
60-
expect(component.instance().props.theme).toEqual('test_theme');
61-
expect(component.instance().props.onChartReady).toEqual(testFunc);
62-
expect(component.instance().props.showLoading).toEqual(true);
63-
expect(component.instance().props.onEvents).toEqual({ onClick: testFunc });
66+
expect(testOnChartReadyFunc).toBeCalled();
67+
});
6468
});

‎__tests__/index.spec.jsx‎

Lines changed: 109 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,127 @@
11
/* eslint-disable no-undef */
22
import React from 'react';
3-
import { shallow, mount } from 'enzyme';
3+
import { mount } from 'enzyme';
44
import EchartsReact from '../src';
55
import option from './option';
66

7-
test('test echarts-for-react\'s index.js.', () => {
8-
let component = mount(<EchartsReact
9-
option={option}
10-
className="echarts-for-react"
11-
/>);
12-
expect(component.exists()).toBe(true);
13-
14-
expect(component.getDOMNode().className).toBe('echarts-for-react-div echarts-for-react');
15-
16-
expect(component.find('div').length).toBe(1);
17-
18-
expect(component.name()).toEqual('EchartsReact');
19-
// default props
20-
expect(component.instance().props.option).toEqual(option);
21-
expect(component.props().style).toEqual({});
22-
23-
expect(component.getDOMNode().style.height).toEqual('300px');
24-
expect(component.instance().props.className).toEqual('echarts-for-react');
25-
expect(component.instance().props.notMerge).toEqual(false);
26-
expect(component.instance().props.lazyUpdate).toEqual(false);
27-
expect(component.instance().props.theme).toEqual(null);
28-
expect(typeof component.instance().props.onChartReady).toEqual('function');
29-
expect(component.instance().props.showLoading).toEqual(false);
30-
expect(component.instance().props.onEvents).toEqual({});
31-
32-
33-
const testFunc = () => {};
34-
const chartReady = jest.fn();
35-
// not default props
36-
component = mount(<EchartsReact
37-
option={option}
38-
style={{ width: 100 }}
39-
notMerge
40-
lazyUpdate
41-
theme="test_theme"
42-
onChartReady={chartReady}
43-
showLoading
44-
onEvents={{ onClick: testFunc }}
45-
className="echarts-for-react"
46-
/>);
47-
48-
expect(chartReady).toBeCalled();
49-
50-
expect(component.instance().props.option).toEqual(option);
51-
expect(component.instance().props.style).toEqual({ width: 100 });
52-
expect(component.instance().props.className).toEqual('echarts-for-react');
53-
expect(component.instance().props.notMerge).toEqual(true);
54-
expect(component.instance().props.lazyUpdate).toEqual(true);
55-
expect(component.instance().props.theme).toEqual('test_theme');
56-
expect(component.instance().props.onChartReady).toEqual(chartReady);
57-
expect(component.instance().props.showLoading).toEqual(true);
58-
expect(component.instance().props.onEvents).toEqual({ onClick: testFunc });
59-
});
607

8+
describe('index.js', () => {
9+
test('default props', () => {
10+
const component = mount(<EchartsReact
11+
option={option}
12+
className="echarts-for-react-root"
13+
/>);
14+
15+
expect(component.exists()).toBe(true);
16+
17+
expect(component.find('div').length).toBe(1);
18+
19+
// root tag
20+
expect(component.getDOMNode().nodeName.toLowerCase()).toBe('div');
21+
// class name
22+
expect(component.getDOMNode().className).toBe('echarts-for-react echarts-for-react-root');
23+
// style
24+
expect(component.getDOMNode().style.height).toBe('300px');
25+
// default props
26+
expect(component.props().option).toEqual(option);
27+
expect(component.props().style).toEqual({});
28+
expect(component.props().className).toBe('echarts-for-react-root');
29+
expect(component.props().notMerge).toBe(false);
30+
expect(component.props().lazyUpdate).toBe(false);
31+
expect(component.props().theme).toBe(null);
32+
expect(typeof component.props().onChartReady).toBe('function');
33+
expect(component.props().showLoading).toBe(false);
34+
expect(component.props().onEvents).toEqual({});
35+
});
6136

62-
test('test echarts-for-react update props.', () => {
63-
const component = shallow(<EchartsReact
64-
option={option}
65-
className="echarts-for-react"
66-
/>);
37+
test('override props', () => {
38+
const testOnChartReadyFunc = jest.fn();
39+
const testFunc = () => {};
40+
// not default props
41+
const component = mount(<EchartsReact
42+
option={option}
43+
style={{ width: 100 }}
44+
notMerge
45+
lazyUpdate
46+
theme="test_theme"
47+
onChartReady={testOnChartReadyFunc}
48+
showLoading
49+
onEvents={{ onClick: testFunc }}
50+
/>);
51+
52+
// default props
53+
expect(component.props().option).toEqual(option);
54+
expect(component.props().style).toEqual({ width: 100 });
55+
expect(component.props().className).toBe('');
56+
expect(component.props().notMerge).toBe(true);
57+
expect(component.props().lazyUpdate).toBe(true);
58+
expect(component.props().theme).toBe('test_theme');
59+
expect(typeof component.props().onChartReady).toBe('function');
60+
expect(component.props().showLoading).toBe(true);
61+
expect(component.props().onEvents).toEqual({ onClick: testFunc });
62+
63+
expect(testOnChartReadyFunc).toBeCalled();
64+
});
6765

68-
expect(component.props().style).toEqual({ height: 300 });
69-
expect(component.hasClass('echarts-for-react')).toBe(true);
70-
expect(component.hasClass('echarts-for-react-div')).toBe(true);
66+
test('update props', () => {
67+
const component = mount(<EchartsReact
68+
option={option}
69+
className="test-classname"
70+
/>);
7171

72-
component.setProps({
73-
className: 'test-classname',
74-
style: { height: 500 },
75-
});
72+
expect(component.props().style).toEqual({});
73+
expect(component.getDOMNode().style.height).toBe('300px');
7674

77-
component.update();
75+
const preId = component.instance().getEchartsInstance().id;
76+
// udpate props
77+
component.setProps({
78+
className: 'test-classname',
79+
style: { height: 500 },
80+
});
7881

79-
expect(component.props().style).toEqual({ height: 500 });
80-
expect(component.hasClass('test-classname')).toBe(true);
81-
expect(component.hasClass('echarts-for-react-div')).toBe(true);
82-
});
82+
component.update(); // force update
8383

84+
expect(component.props().style).toEqual({ height: 500 });
85+
expect(component.getDOMNode().style.height).toBe('500px');
8486

85-
test('test echarts-for-react getEchartsInstance.', () => {
86-
const component = mount(<EchartsReact
87-
option={option}
88-
className="echarts-for-react"
89-
/>);
87+
expect(component.props().className).toBe('test-classname');
9088

91-
expect(component.instance().getEchartsInstance().displayName).toBe('EchartsInstance');
92-
});
89+
expect(preId).toBe(component.instance().getEchartsInstance().id);
90+
});
9391

92+
test('getEchartsInstance', () => {
93+
const component = mount(<EchartsReact
94+
className="cls"
95+
option={option}
96+
/>);
9497

95-
test('test echarts-for-react unmount.', () => {
96-
const component = mount(<EchartsReact
97-
option={option}
98-
className="echarts-for-react"
99-
/>);
98+
// echarts instance, id 以 ec_ 开头
99+
expect(component.instance().getEchartsInstance().id.substring(0, 3)).toBe('ec_');
100+
});
101+
102+
test('upadte theme', () => {
103+
const component = mount(<EchartsReact
104+
option={option}
105+
theme="hello"
106+
/>);
100107

101-
component.unmount();
102-
expect(true).toBe(true);
108+
const preId = component.instance().getEchartsInstance().id;
109+
// udpate props
110+
component.setProps({
111+
theme: 'world',
112+
});
113+
114+
component.update(); // force update
115+
expect(preId).not.toBe(component.instance().getEchartsInstance().id);
116+
});
117+
118+
test('unmount', () => {
119+
const component = mount(<EchartsReact
120+
option={option}
121+
className="cls"
122+
/>);
123+
124+
component.unmount();
125+
expect(() => { component.instance(); }).toThrow();
126+
});
103127
});

‎__tests__/jest-echarts-mock/Echarts.js‎

Lines changed: 0 additions & 58 deletions
This file was deleted.

0 commit comments

Comments
 (0)