diff --git a/packages/react-jsx-highmaps/test/ContextSpy.js b/packages/react-jsx-highmaps/test/ContextSpy.js
new file mode 100644
index 00000000..3631c8cf
--- /dev/null
+++ b/packages/react-jsx-highmaps/test/ContextSpy.js
@@ -0,0 +1,67 @@
+import { useEffect } from 'react';
+import { useAxis, useChart, useHighcharts, useSeries } from '../src';
+
+const ContextSpy = ({
+ axisId,
+ axisRef,
+ chartRef,
+ highchartsRef,
+ seriesRef
+}) => {
+ const axis = useAxis(axisId);
+ const chart = useChart();
+ const Highcharts = useHighcharts();
+ const series = useSeries();
+
+ useEffect(() => {
+ if (highchartsRef) {
+ highchartsRef.current = Highcharts;
+ }
+
+ return () => {
+ if (highchartsRef) {
+ highchartsRef.current = null;
+ }
+ };
+ }, [Highcharts]);
+
+ useEffect(() => {
+ if (chartRef) {
+ chartRef.current = chart;
+ }
+
+ return () => {
+ if (chartRef) {
+ chartRef.current = null;
+ }
+ };
+ }, [chart]);
+
+ useEffect(() => {
+ if (axisRef) {
+ axisRef.current = axis;
+ }
+
+ return () => {
+ if (axisRef) {
+ axisRef.current = null;
+ }
+ };
+ }, [axis]);
+
+ useEffect(() => {
+ if (seriesRef) {
+ seriesRef.current = series;
+ }
+
+ return () => {
+ if (seriesRef) {
+ seriesRef.current = null;
+ }
+ };
+ }, [series]);
+
+ return null;
+};
+
+export default ContextSpy;
diff --git a/packages/react-jsx-highmaps/test/components/XAxis/XAxis.spec.js b/packages/react-jsx-highmaps/test/components/XAxis/XAxis.spec.js
index aaab5fde..d0ecfad5 100644
--- a/packages/react-jsx-highmaps/test/components/XAxis/XAxis.spec.js
+++ b/packages/react-jsx-highmaps/test/components/XAxis/XAxis.spec.js
@@ -1,41 +1,76 @@
import * as React from 'react';
-import ShallowRenderer from 'react-shallow-renderer';
+import Highmaps from 'highcharts/highmaps';
+import addAccessibility from 'highcharts/modules/accessibility';
-import { XAxis } from 'react-jsx-highcharts';
+import { render } from '@testing-library/react';
+
+import { HighchartsMapChart, HighmapsProvider } from '../../../src';
import MapXAxis from '../../../src/components/XAxis';
+import ContextSpy from '../../ContextSpy';
-describe('', () => {
- let renderer;
+addAccessibility(Highmaps);
- beforeEach(() => {
- renderer = new ShallowRenderer();
- });
+describe(' integration', () => {
+ it('creates map yaxis', () => {
+ let chartRef = {};
+ const Component = () => {
+ return (
+
+
+
+
+
+
+
+ );
+ };
- it('renders an ', () => {
- renderer.render();
- const result = renderer.getRenderOutput();
+ render();
- expect(result.type).toEqual(XAxis);
+ const axis = chartRef.current.object.get('xAxis');
+ expect(axis).toBeDefined();
+ expect(axis.isXAxis).toBe(true);
});
it('should always have the id `xAxis`', () => {
- renderer.render();
- const result = renderer.getRenderOutput();
+ let chartRef = {};
+ const Component = () => {
+ return (
+
+
+
+
+
+
+
+ );
+ };
- expect(result.props).toHaveProperty('id', 'xAxis');
- });
+ render();
- it('should NOT be a dynamic axis', () => {
- renderer.render();
- const result = renderer.getRenderOutput();
-
- expect(result.props).toHaveProperty('dynamicAxis', false);
+ let axis = chartRef.current.object.get('customaxis');
+ expect(axis).not.toBeDefined();
+ axis = chartRef.current.object.get('xAxis');
+ expect(axis).toBeDefined();
});
- it('passes other props through to ', () => {
- renderer.render();
- const result = renderer.getRenderOutput();
+ it('passes props to created xaxis', () => {
+ let chartRef = {};
+ const Component = () => {
+ return (
+
+
+
+
+
+
+
+ );
+ };
+
+ render();
- expect(result.props).toHaveProperty('tickLength', 1337);
+ const axis = chartRef.current.object.get('xAxis');
+ expect(axis.userOptions.tickLength).toBe(1337);
});
});
diff --git a/packages/react-jsx-highmaps/test/components/YAxis/YAxis.spec.js b/packages/react-jsx-highmaps/test/components/YAxis/YAxis.spec.js
index 032d7a4c..0f797dc9 100644
--- a/packages/react-jsx-highmaps/test/components/YAxis/YAxis.spec.js
+++ b/packages/react-jsx-highmaps/test/components/YAxis/YAxis.spec.js
@@ -1,41 +1,76 @@
import * as React from 'react';
-import ShallowRenderer from 'react-shallow-renderer';
+import Highmaps from 'highcharts/highmaps';
+import addAccessibility from 'highcharts/modules/accessibility';
-import { YAxis } from 'react-jsx-highcharts';
+import { render } from '@testing-library/react';
+
+import { HighchartsMapChart, HighmapsProvider } from '../../../src';
import MapYAxis from '../../../src/components/YAxis';
+import ContextSpy from '../../ContextSpy';
-describe('', () => {
- let renderer;
+addAccessibility(Highmaps);
- beforeEach(() => {
- renderer = new ShallowRenderer();
- });
+describe(' integration', () => {
+ it('creates map yaxis', () => {
+ let chartRef = {};
+ const Component = () => {
+ return (
+
+
+
+
+
+
+
+ );
+ };
- it('renders a ', () => {
- renderer.render();
- const result = renderer.getRenderOutput();
+ render();
- expect(result.type).toEqual(YAxis);
+ const axis = chartRef.current.object.get('yAxis');
+ expect(axis).toBeDefined();
+ expect(axis.isXAxis).toBe(false);
});
it('should always have the id `yAxis`', () => {
- renderer.render();
- const result = renderer.getRenderOutput();
+ let chartRef = {};
+ const Component = () => {
+ return (
+
+
+
+
+
+
+
+ );
+ };
- expect(result.props).toHaveProperty('id', 'yAxis');
- });
+ render();
- it('should NOT be a dynamic axis', () => {
- renderer.render();
- const result = renderer.getRenderOutput();
-
- expect(result.props).toHaveProperty('dynamicAxis', false);
+ let axis = chartRef.current.object.get('customaxis');
+ expect(axis).not.toBeDefined();
+ axis = chartRef.current.object.get('yAxis');
+ expect(axis).toBeDefined();
});
- it('passes other props through to ', () => {
- renderer.render();
- const result = renderer.getRenderOutput();
+ it('passes props to created yaxis', () => {
+ let chartRef = {};
+ const Component = () => {
+ return (
+
+
+
+
+
+
+
+ );
+ };
+
+ render();
- expect(result.props).toHaveProperty('tickLength', 1337);
+ const axis = chartRef.current.object.get('yAxis');
+ expect(axis.userOptions.tickLength).toBe(1337);
});
});