Skip to content

Commit 977c3d7

Browse files
anajavianajavi
authored
Replace react-test-renderer (#389)
* Replace react-test-renderer * Remove addAccessibility calls
1 parent 5b9f3c0 commit 977c3d7

File tree

5 files changed

+223
-135
lines changed

5 files changed

+223
-135
lines changed

‎package-lock.json

Lines changed: 0 additions & 37 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@
3232
"prettier": "^3.4.1",
3333
"react": "^18.3.1",
3434
"react-dom": "^18.3.1",
35-
"react-test-renderer": "^18.3.1",
3635
"rimraf": "^6.0.1",
3736
"typescript": "^5.7.2",
3837
"webpack": "^5.96.1",

‎packages/react-jsx-highcharts/test/components/XAxis/XAxis.spec.js

Lines changed: 76 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,118 +1,97 @@
11
import * as React from 'react';
2-
import TestRenderer from 'react-test-renderer';
2+
import Highcharts from 'highcharts/highstock';
3+
import 'highcharts/modules/accessibility';
34

4-
import XAxis from '../../../src/components/XAxis/XAxis';
5-
import Axis from '../../../src/components/Axis';
6-
import ChartContext from '../../../src/components/ChartContext';
7-
import { createMockProvidedChart } from '../../test-utils';
5+
import { render } from '@testing-library/react';
86

9-
describe('<XAxis />', () => {
10-
let testContext;
11-
let ProvidedAxis;
12-
beforeEach(() => {
13-
testContext = {};
14-
const { chartStubs } = createMockProvidedChart({
15-
type: 'chart'
16-
});
17-
testContext.chartStubs = chartStubs;
7+
import { HighchartsChart, HighchartsProvider, XAxis } from '../../../src';
8+
import ContextSpy from '../../ContextSpy';
189

19-
ProvidedAxis = props => (
20-
<ChartContext.Provider value={chartStubs}>
21-
<XAxis {...props} />
22-
</ChartContext.Provider>
23-
);
24-
});
10+
describe('<XAxis />', () => {
11+
it('creates an chart xaxis', () => {
12+
let chartRef = {};
13+
const Component = () => {
14+
return (
15+
<HighchartsProvider Highcharts={Highcharts}>
16+
<HighchartsChart>
17+
<XAxis id="myAxis">
18+
<ContextSpy chartRef={chartRef} />
19+
</XAxis>
20+
</HighchartsChart>
21+
</HighchartsProvider>
22+
);
23+
};
2524

26-
it('renders an <Axis />', () => {
27-
const wrapper = new TestRenderer.create(<ProvidedAxis />);
28-
const axis = wrapper.root.findByType(Axis);
25+
render(<Component />);
2926

27+
const axis = chartRef.current.object.get('myAxis');
3028
expect(axis).toBeDefined();
31-
});
32-
33-
it('renders an <Axis isX />', () => {
34-
const wrapper = new TestRenderer.create(<ProvidedAxis />);
35-
const axis = wrapper.root.findByType(Axis);
36-
37-
expect(axis.props).toHaveProperty('isX', true);
29+
expect(axis.isXAxis).toBeDefined();
3830
});
3931

4032
it('passes other props through to <Axis />', () => {
41-
const wrapper = new TestRenderer.create(<ProvidedAxis tickLength={1337} />);
42-
const axis = wrapper.root.findByType(Axis);
43-
44-
expect(axis.props).toHaveProperty('tickLength', 1337);
45-
});
46-
47-
describe('Highcharts chart', () => {
48-
beforeEach(() => {
49-
testContext.chartStubs.type = 'chart';
50-
});
51-
52-
it('renders the <Axis /> type if provided', () => {
53-
const wrapper = new TestRenderer.create(
54-
<ProvidedAxis type="logarithmic" />
33+
let chartRef = {};
34+
const Component = () => {
35+
return (
36+
<HighchartsProvider Highcharts={Highcharts}>
37+
<HighchartsChart>
38+
<XAxis id="myAxis" tickLength={1337}>
39+
<ContextSpy chartRef={chartRef} />
40+
</XAxis>
41+
</HighchartsChart>
42+
</HighchartsProvider>
5543
);
56-
const axis = wrapper.root.findByType(Axis);
44+
};
5745

58-
expect(axis.props).toHaveProperty('type', 'logarithmic');
59-
});
60-
61-
it('renders the an <Axis type="linear" /> if no type specified', () => {
62-
const wrapper = new TestRenderer.create(<ProvidedAxis />);
63-
const axis = wrapper.root.findByType(Axis);
64-
65-
expect(axis.props).toHaveProperty('type', 'linear');
66-
});
46+
render(<Component />);
6747

68-
it('uses the id prop if provided', () => {
69-
const wrapper = new TestRenderer.create(<ProvidedAxis id="myXAxisId" />);
70-
const axis = wrapper.root.findByType(Axis);
71-
72-
expect(axis.props).toHaveProperty('id', 'myXAxisId');
73-
});
74-
75-
it('does not create an id if id prop not provided', () => {
76-
const wrapper = new TestRenderer.create(<ProvidedAxis />);
77-
const axis = wrapper.root.findByType(Axis);
78-
79-
expect(axis.props.id).not.toBeDefined();
80-
});
48+
const axis = chartRef.current.object.get('myAxis');
49+
expect(axis).toBeDefined();
50+
expect(axis.userOptions.tickLength).toBe(1337);
8151
});
8252

83-
describe('Highstock chart', () => {
84-
beforeEach(() => {
85-
testContext.chartStubs.type = 'stockChart';
86-
});
87-
53+
describe('Highcharts chart', () => {
8854
it('renders the <Axis /> type if provided', () => {
89-
const wrapper = new TestRenderer.create(
90-
<ProvidedAxis type="logarithmic" />
91-
);
92-
const axis = wrapper.root.findByType(Axis);
93-
94-
expect(axis.props).toHaveProperty('type', 'logarithmic');
55+
let chartRef = {};
56+
const Component = () => {
57+
return (
58+
<HighchartsProvider Highcharts={Highcharts}>
59+
<HighchartsChart>
60+
<XAxis id="myAxis" type="logarithmic">
61+
<ContextSpy chartRef={chartRef} />
62+
</XAxis>
63+
</HighchartsChart>
64+
</HighchartsProvider>
65+
);
66+
};
67+
68+
render(<Component />);
69+
70+
const axis = chartRef.current.object.get('myAxis');
71+
expect(axis).toBeDefined();
72+
expect(axis.isXAxis).toBe(true);
73+
expect(axis.userOptions.type).toBe('logarithmic');
9574
});
9675

97-
it('renders the an <Axis type="datetime" /> if no type specified', () => {
98-
const wrapper = new TestRenderer.create(<ProvidedAxis />);
99-
const axis = wrapper.root.findByType(Axis);
100-
101-
expect(axis.props).toHaveProperty('type', 'datetime');
102-
});
103-
104-
it('uses the id `xAxis` even if an id prop is provided', () => {
105-
const wrapper = new TestRenderer.create(<ProvidedAxis id="myXAxisId" />);
106-
const axis = wrapper.root.findByType(Axis);
107-
108-
expect(axis.props).toHaveProperty('id', 'xAxis');
109-
});
110-
111-
it('uses the id `xAxis` if id prop not provided', () => {
112-
const wrapper = new TestRenderer.create(<ProvidedAxis />);
113-
const axis = wrapper.root.findByType(Axis);
114-
115-
expect(axis.props).toHaveProperty('id', 'xAxis');
76+
it('renders the an <Axis type="linear" /> if no type specified', () => {
77+
let chartRef = {};
78+
const Component = () => {
79+
return (
80+
<HighchartsProvider Highcharts={Highcharts}>
81+
<HighchartsChart>
82+
<XAxis id="myAxis">
83+
<ContextSpy chartRef={chartRef} />
84+
</XAxis>
85+
</HighchartsChart>
86+
</HighchartsProvider>
87+
);
88+
};
89+
90+
render(<Component />);
91+
92+
const axis = chartRef.current.object.get('myAxis');
93+
expect(axis).toBeDefined();
94+
expect(axis.userOptions.type).toBe('linear');
11695
});
11796
});
11897
});

‎packages/react-jsx-highstock/test/ContextSpy.js

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import { useEffect } from 'react';
2+
import {
3+
useAxis,
4+
useChart,
5+
useHighcharts,
6+
useSeries,
7+
usePlotBandLine
8+
} from '../src';
9+
10+
const ContextSpy = ({
11+
axisId,
12+
axisRef,
13+
chartRef,
14+
highchartsRef,
15+
seriesRef,
16+
plotBandLineRef
17+
}) => {
18+
const axis = useAxis(axisId);
19+
const chart = useChart();
20+
const Highcharts = useHighcharts();
21+
const series = useSeries();
22+
const plotbandline = usePlotBandLine();
23+
24+
useEffect(() => {
25+
if (highchartsRef) {
26+
highchartsRef.current = Highcharts;
27+
}
28+
29+
return () => {
30+
if (highchartsRef) {
31+
highchartsRef.current = null;
32+
}
33+
};
34+
}, [Highcharts]);
35+
36+
useEffect(() => {
37+
if (chartRef) {
38+
chartRef.current = chart;
39+
}
40+
41+
return () => {
42+
if (chartRef) {
43+
chartRef.current = null;
44+
}
45+
};
46+
}, [chart]);
47+
48+
useEffect(() => {
49+
if (axisRef) {
50+
axisRef.current = axis;
51+
axisRef.addPlotBandOrLineSpy = jest.spyOn(axis, 'addPlotBandOrLine');
52+
axisRef.removePlotBandOrLineSpy = jest.spyOn(
53+
axis,
54+
'removePlotBandOrLine'
55+
);
56+
}
57+
58+
return () => {
59+
if (axisRef) {
60+
axisRef.addPlotBandOrLineSpy.mockRestore();
61+
axisRef.removePlotBandOrLineSpy.mockRestore();
62+
axisRef.current = null;
63+
}
64+
};
65+
}, [axis]);
66+
67+
useEffect(() => {
68+
if (seriesRef) {
69+
seriesRef.current = series;
70+
}
71+
72+
return () => {
73+
if (seriesRef) {
74+
seriesRef.current = null;
75+
}
76+
};
77+
}, [series]);
78+
79+
useEffect(() => {
80+
if (plotBandLineRef) {
81+
plotBandLineRef.current = plotbandline;
82+
}
83+
84+
return () => {
85+
if (plotBandLineRef) {
86+
plotBandLineRef.current = null;
87+
}
88+
};
89+
}, [plotbandline]);
90+
91+
return null;
92+
};
93+
94+
export default ContextSpy;

0 commit comments

Comments
 (0)