Refactor tests to mock hooks

whawker · Oct 1, 2019 · 9d96859 · 9d96859
1 parent 609b427
commit 9d96859
Show file tree

Hide file tree

Showing 5 changed files with 195 additions and 139 deletions.
diff --git a/packages/react-jsx-highmaps/test/components/HighchartsMapChart/HighchartsMapChart.spec.js b/packages/react-jsx-highmaps/test/components/HighchartsMapChart/HighchartsMapChart.spec.js
@@ -1,55 +1,55 @@
 import React from 'react';
-import { BaseChart, HighchartsContext } from 'react-jsx-highcharts';
+
+jest.mock('react-jsx-highcharts', () => ({
+  ...jest.requireActual('react-jsx-highcharts'),
+  useHighcharts: jest.fn()
+}));
+
+import { useHighcharts, BaseChart } from 'react-jsx-highcharts';
 import { Highcharts, createMockChart } from '../../test-utils';
 import HighchartsMapChart from '../../../src/components/HighchartsMapChart/HighchartsMapChart';
 
 describe('<HighchartsMapChart />', () => {
   let testContext;
-  let ProvidedHighchartsMapChart;
 
   beforeEach(() => {
     testContext = {};
     const chart = createMockChart();
     Highcharts.mapChart.mockReturnValue(chart);
-
-    ProvidedHighchartsMapChart = props => (
-      <HighchartsContext.Provider value={Highcharts}>
-        <HighchartsMapChart {...props} />
-      </HighchartsContext.Provider>
-    )
+    useHighcharts.mockImplementation(() => Highcharts);
   });
 
   afterEach(() => {
     Highcharts.mapChart.mockRestore()
   });
 
   it('renders a <BaseChart />', () => {
-    const wrapper = mount(<ProvidedHighchartsMapChart />);
+    const wrapper = mount(<HighchartsMapChart />);
     expect(wrapper.find(BaseChart)).toExist();
   });
 
   it('renders a <BaseChart /> with the correct creation function', () => {
-    const wrapper = mount(<ProvidedHighchartsMapChart />);
+    const wrapper = mount(<HighchartsMapChart />);
      expect(wrapper.find(BaseChart)).toHaveProp('chartCreationFunc',Highcharts.mapChart);
   });
 
   it('renders a <BaseChart /> with the correct chart type', () => {
-    const wrapper = mount(<ProvidedHighchartsMapChart />);
+    const wrapper = mount(<HighchartsMapChart />);
      expect(wrapper.find(BaseChart)).toHaveProp('chartType','mapChart');
   });
 
   it('renders a <BaseChart /> with GeoJSON from a string', () => {
-    const wrapper = mount(<ProvidedHighchartsMapChart map='mock/map' />);
+    const wrapper = mount(<HighchartsMapChart map='mock/map' />);
      expect(wrapper.find(BaseChart)).toHaveProp('chart',{ map: { some: 'data' } });
   })
 
   it('renders a <BaseChart /> with direct GeoJSON', () => {
-    const wrapper = mount(<ProvidedHighchartsMapChart map={{ direct: 'input' }} />);
+    const wrapper = mount(<HighchartsMapChart map={{ direct: 'input' }} />);
      expect(wrapper.find(BaseChart)).toHaveProp('chart',{ map: { direct: 'input' } });
   })
 
   it('passes other props through to <BaseChart />', () => {
-    const wrapper = mount(<ProvidedHighchartsMapChart plotOptions={{ c: 'd' }} />);
+    const wrapper = mount(<HighchartsMapChart plotOptions={{ c: 'd' }} />);
      expect(wrapper.find(BaseChart)).toHaveProp('plotOptions',{ c: 'd' });
   });
 });
diff --git a/...ges/react-jsx-highstock/test/components/HighchartsStockChart/HighchartsStockChart.spec.js b/...ges/react-jsx-highstock/test/components/HighchartsStockChart/HighchartsStockChart.spec.js
@@ -1,39 +1,42 @@
 import React from 'react';
-import { BaseChart, HighchartsContext } from 'react-jsx-highcharts';
+
+jest.mock('react-jsx-highcharts', () => ({
+  ...jest.requireActual('react-jsx-highcharts'),
+  useHighcharts: jest.fn()
+}));
+
+import { useHighcharts, BaseChart } from 'react-jsx-highcharts';
 import { Highcharts, createMockChart } from '../../test-utils';
 import HighchartsStockChart from '../../../src/components/HighchartsStockChart/HighchartsStockChart';
 
 describe('<HighchartsStockChart />', () => {
-  let ProvidedHighchartsStockChart;
-
   beforeEach(() => {
     const chart = createMockChart();
     Highcharts.stockChart.mockReturnValue(chart);
 
-    ProvidedHighchartsStockChart = props => (
-      <HighchartsContext.Provider value={ Highcharts }>
-        <HighchartsStockChart {...props} />
-      </HighchartsContext.Provider>
-    )
+    useHighcharts.mockImplementation(() => Highcharts);
   });
 
   it('renders a <BaseChart />', () => {
-    const wrapper = mount(<ProvidedHighchartsStockChart />);
+    const wrapper = mount(<HighchartsStockChart />);
     expect(wrapper.find(BaseChart)).toExist();
   });
 
   it('renders a <BaseChart /> with the correct creation function', () => {
-    const wrapper = mount(<ProvidedHighchartsStockChart />);
-    expect(wrapper.find(BaseChart)).toHaveProp('chartCreationFunc', Highcharts.stockChart);
+    const wrapper = mount(<HighchartsStockChart />);
+    expect(wrapper.find(BaseChart)).toHaveProp(
+      'chartCreationFunc',
+      Highcharts.stockChart
+    );
   });
 
   it('renders a <BaseChart /> with the correct chart type', () => {
-    const wrapper = mount(<ProvidedHighchartsStockChart />);
+    const wrapper = mount(<HighchartsStockChart />);
     expect(wrapper.find(BaseChart)).toHaveProp('chartType', 'stockChart');
   });
 
   it('passes other props through to <BaseChart />', () => {
-    const wrapper = mount(<ProvidedHighchartsStockChart plotOptions={{ c: 'd' }} />);
-    expect(wrapper.find(BaseChart)).toHaveProp('plotOptions',{ c: 'd' });
+    const wrapper = mount(<HighchartsStockChart plotOptions={{ c: 'd' }} />);
+    expect(wrapper.find(BaseChart)).toHaveProp('plotOptions', { c: 'd' });
   });
 });
diff --git a/packages/react-jsx-highstock/test/components/Navigator/Navigator.spec.js b/packages/react-jsx-highstock/test/components/Navigator/Navigator.spec.js
@@ -1,27 +1,30 @@
 import React from 'react';
+
+jest.mock('react-jsx-highcharts', () => ({
+  ...jest.requireActual('react-jsx-highcharts'),
+  useChart: jest.fn(),
+  useHighcharts: jest.fn()
+}));
+
+import { useChart, useHighcharts } from 'react-jsx-highcharts';
 import Navigator from '../../../src/components/Navigator/Navigator';
 import { Highcharts, createMockProvidedChart } from '../../test-utils';
-import { HighchartsContext, HighchartsChartContext} from 'react-jsx-highcharts';
 
 describe('<Navigator />', () => {
   let testContext;
-  let ProvidedNavigator;
 
   beforeEach(() => {
     testContext = {};
     testContext.object = {
       options: { navigator: { enabled: false } }
     };
-    const { chartStubs } = createMockProvidedChart({ object: testContext.object });
+    const { chartStubs } = createMockProvidedChart({
+      object: testContext.object
+    });
     testContext.chartStubs = chartStubs;
 
-    ProvidedNavigator = props => (
-      <HighchartsContext.Provider value={Highcharts}>
-        <HighchartsChartContext.Provider value={chartStubs}>
-          <Navigator {...props} />
-        </HighchartsChartContext.Provider>
-      </HighchartsContext.Provider>
-    )
+    useChart.mockImplementation(() => chartStubs);
+    useHighcharts.mockImplementation(() => Highcharts);
   });
 
   afterEach(() => {
@@ -30,48 +33,60 @@ describe('<Navigator />', () => {
 
   describe('when mounted', () => {
     it('enables the Navigator', () => {
-      mount(<ProvidedNavigator {...testContext.propsFromProviders} />);
+      mount(<Navigator />);
       expect(testContext.object.options.navigator.enabled).toEqual(true);
     });
 
     it('fires the `beforeRender` event to so Highcharts creates a Navigator', () => {
-      mount(<ProvidedNavigator {...testContext.propsFromProviders} />);
-      expect(Highcharts.fireEvent).toHaveBeenCalledWith(testContext.object, 'beforeRender');
+      mount(<Navigator />);
+      expect(Highcharts.fireEvent).toHaveBeenCalledWith(
+        testContext.object,
+        'beforeRender'
+      );
     });
 
     it('updates the chart with the passed props', () => {
-      mount(<ProvidedNavigator height={100} maskFill="rgba(1,2,3,0.45)" {...testContext.propsFromProviders} />);
-      expect(testContext.chartStubs.update).toHaveBeenCalledWith({
-        navigator: {
-          enabled: true,
-          height: 100,
-          maskFill: 'rgba(1,2,3,0.45)'
-        }
-      }, true);
+      mount(<Navigator height={100} maskFill="rgba(1,2,3,0.45)" />);
+      expect(testContext.chartStubs.update).toHaveBeenCalledWith(
+        {
+          navigator: {
+            enabled: true,
+            height: 100,
+            maskFill: 'rgba(1,2,3,0.45)'
+          }
+        },
+        true
+      );
     });
   });
 
   describe('update', () => {
     it('should use the update method when props change', () => {
-      const wrapper = mount(<ProvidedNavigator {...testContext.propsFromProviders} />);
+      const wrapper = mount(<Navigator />);
       wrapper.setProps({ maskInside: false });
-      expect(testContext.chartStubs.update).toHaveBeenCalledWith({
-        navigator: {
-          maskInside: false
-        }
-      }, expect.any(Boolean));
+      expect(testContext.chartStubs.update).toHaveBeenCalledWith(
+        {
+          navigator: {
+            maskInside: false
+          }
+        },
+        expect.any(Boolean)
+      );
     });
   });
 
   describe('when unmounted', () => {
     it('should disable the Navigator', () => {
-      const wrapper = mount(<ProvidedNavigator {...testContext.propsFromProviders} />);
+      const wrapper = mount(<Navigator />);
       wrapper.unmount();
-      expect(testContext.chartStubs.update).toHaveBeenCalledWith({
-        navigator: {
-          enabled: false
-        }
-      }, expect.any(Boolean))
+      expect(testContext.chartStubs.update).toHaveBeenCalledWith(
+        {
+          navigator: {
+            enabled: false
+          }
+        },
+        expect.any(Boolean)
+      );
     });
   });
 });