Replace highmaps shallow tests (#388)

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;

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('<XAxis />', () => {
-  let renderer;
+addAccessibility(Highmaps);
 
-  beforeEach(() => {
-    renderer = new ShallowRenderer();
-  });
+describe('<XAxis /> integration', () => {
+  it('creates map yaxis', () => {
+    let chartRef = {};
+    const Component = () => {
+      return (
+        <HighmapsProvider Highcharts={Highmaps}>
+          <HighchartsMapChart>
+            <MapXAxis>
+              <ContextSpy chartRef={chartRef} />
+            </MapXAxis>
+          </HighchartsMapChart>
+        </HighmapsProvider>
+      );
+    };
 
-  it('renders an <XAxis />', () => {
-    renderer.render(<MapXAxis />);
-    const result = renderer.getRenderOutput();
+    render(<Component />);
 
-    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(<MapXAxis id="customId" />);
-    const result = renderer.getRenderOutput();
+    let chartRef = {};
+    const Component = () => {
+      return (
+        <HighmapsProvider Highcharts={Highmaps}>
+          <HighchartsMapChart>
+            <MapXAxis id="customaxis">
+              <ContextSpy chartRef={chartRef} />
+            </MapXAxis>
+          </HighchartsMapChart>
+        </HighmapsProvider>
+      );
+    };
 
-    expect(result.props).toHaveProperty('id', 'xAxis');
-  });
+    render(<Component />);
 
-  it('should NOT be a dynamic axis', () => {
-    renderer.render(<MapXAxis />);
-    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 <XAxis />', () => {
-    renderer.render(<MapXAxis tickLength={1337} />);
-    const result = renderer.getRenderOutput();
+  it('passes props to created xaxis', () => {
+    let chartRef = {};
+    const Component = () => {
+      return (
+        <HighmapsProvider Highcharts={Highmaps}>
+          <HighchartsMapChart>
+            <MapXAxis tickLength={1337}>
+              <ContextSpy chartRef={chartRef} />
+            </MapXAxis>
+          </HighchartsMapChart>
+        </HighmapsProvider>
+      );
+    };
+
+    render(<Component />);
 
-    expect(result.props).toHaveProperty('tickLength', 1337);
+    const axis = chartRef.current.object.get('xAxis');
+    expect(axis.userOptions.tickLength).toBe(1337);
   });
 });

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('<YAxis />', () => {
-  let renderer;
+addAccessibility(Highmaps);
 
-  beforeEach(() => {
-    renderer = new ShallowRenderer();
-  });
+describe('<YAxis /> integration', () => {
+  it('creates map yaxis', () => {
+    let chartRef = {};
+    const Component = () => {
+      return (
+        <HighmapsProvider Highcharts={Highmaps}>
+          <HighchartsMapChart>
+            <MapYAxis>
+              <ContextSpy chartRef={chartRef} />
+            </MapYAxis>
+          </HighchartsMapChart>
+        </HighmapsProvider>
+      );
+    };
 
-  it('renders a <YAxis />', () => {
-    renderer.render(<MapYAxis />);
-    const result = renderer.getRenderOutput();
+    render(<Component />);
 
-    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(<MapYAxis id="customId" />);
-    const result = renderer.getRenderOutput();
+    let chartRef = {};
+    const Component = () => {
+      return (
+        <HighmapsProvider Highcharts={Highmaps}>
+          <HighchartsMapChart>
+            <MapYAxis id="customaxis">
+              <ContextSpy chartRef={chartRef} />
+            </MapYAxis>
+          </HighchartsMapChart>
+        </HighmapsProvider>
+      );
+    };
 
-    expect(result.props).toHaveProperty('id', 'yAxis');
-  });
+    render(<Component />);
 
-  it('should NOT be a dynamic axis', () => {
-    renderer.render(<MapYAxis />);
-    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 <YAxis />', () => {
-    renderer.render(<MapYAxis tickLength={1337} />);
-    const result = renderer.getRenderOutput();
+  it('passes props to created yaxis', () => {
+    let chartRef = {};
+    const Component = () => {
+      return (
+        <HighmapsProvider Highcharts={Highmaps}>
+          <HighchartsMapChart>
+            <MapYAxis tickLength={1337}>
+              <ContextSpy chartRef={chartRef} />
+            </MapYAxis>
+          </HighchartsMapChart>
+        </HighmapsProvider>
+      );
+    };
+
+    render(<Component />);
 
-    expect(result.props).toHaveProperty('tickLength', 1337);
+    const axis = chartRef.current.object.get('yAxis');
+    expect(axis.userOptions.tickLength).toBe(1337);
   });
 });