Fix plotline and plotband update lifecycle

whawker · Sep 29, 2019 · 3b318de · 3b318de
1 parent f14dd1f
commit 3b318de
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 22 deletions.
diff --git a/packages/react-jsx-highcharts/src/components/PlotBandLine/usePlotBandLineLifecycle.js b/packages/react-jsx-highcharts/src/components/PlotBandLine/usePlotBandLineLifecycle.js
@@ -13,32 +13,23 @@ export default function usePlotBandLine(props, plotType) {
   const modifiedProps = useModifiedProps(rest);
 
   useEffect(() => {
-    if (!axis || !plotbandline) return;
-    if (modifiedProps !== false) {
-      axis.removePlotBandOrLine(idRef.current);
+    if (!axis) return;
+    if(!plotbandline || modifiedProps !== false) {
+      if(!plotbandline) {
+        idRef.current = typeof id === 'function' ? id() : id;
+      }
+      const myId = idRef.current;
       const opts = {
-        id: idRef.current,
-        ...modifiedProps
+        id: myId,
+        ...rest
       };
       setPlotbandline(axis.addPlotBandOrLine(opts, plotType));
     }
-  });
-
-  // create plotline
-  useEffect(() => {
-    if (!axis) return;
-    idRef.current = typeof id === 'function' ? id() : id;
-    const myId = idRef.current;
-    const opts = {
-      id: myId,
-      ...rest
-    };
-    setPlotbandline(axis.addPlotBandOrLine(opts, plotType));
 
     return () => {
       attempt(axis.removePlotBandOrLine, idRef.current);
     };
-  }, [axis]);
+  });
 
   return plotbandline;
 }
diff --git a/packages/react-jsx-highcharts/test/components/PlotBandLine/PlotLine.spec.js b/packages/react-jsx-highcharts/test/components/PlotBandLine/PlotLine.spec.js
@@ -55,18 +55,25 @@ describe('<PlotLine />', () => {
       );
       expect(testContext.axisStubs.addPlotBandOrLine.mock.calls[0][0].id).toMatch(uuidRegex);
     });
+  });
 
+  describe('when updated', () => {
     it('removes and adds plotline when props change', () => {
       const wrapper = mount(
-        <PlotLine id="myplotline" value={3} />
+        <PlotLine id="myplotline" value={3} width={10} />
       );
       testContext.axisStubs.addPlotBandOrLine.mockClear();
 
       wrapper.setProps({ value: 4});
-      expect(testContext.axisStubs.addPlotBandOrLine).toHaveBeenCalledTimes(1);
       expect(testContext.axisStubs.removePlotBandOrLine).toHaveBeenCalledWith('myplotline');
+      expect(testContext.axisStubs.addPlotBandOrLine).toHaveBeenCalledTimes(1);
+      expect(testContext.axisStubs.addPlotBandOrLine).toHaveBeenCalledWith({
+        id: "myplotline",
+        value: 4,
+        width:10
+      }, 'plotLines');
     });
-  });
+  })
 
   describe('when unmounted', () => {
     it('removes the plot line by id (if the parent axis still exists)', () => {

diff --git a/packages/react-jsx-highcharts/test/test-utils.js b/packages/react-jsx-highcharts/test/test-utils.js
@@ -35,7 +35,11 @@ export const createMockProvidedChart = () => {
 export const createMockAxis = ({ ...additional }) => ({
   ...additional,
   remove: jest.fn(),
-  addPlotBandOrLine: jest.fn().mockImplementation(() => ({})),
+  addPlotBandOrLine: jest.fn().mockImplementation(() => (
+    { options: {},
+      render: jest.fn()
+    })
+  ),
   removePlotBandOrLine: jest.fn(),
   getExtremes: jest.fn(),
   setExtremes: jest.fn(),