From 7ddca471262b5440ae37c726d4c386059a4520a0 Mon Sep 17 00:00:00 2001
From: Antti Lehto <anajavi@users.noreply.github.com>
Date: Thu, 8 Aug 2024 13:07:35 +0300
Subject: [PATCH] Replace Y&Z axis shallow tests

---
 .../test/components/YAxis/YAxis.spec.js       | 78 ++++++++++------
 .../test/components/ZAxis/ZAxis.spec.js       | 91 +++++++++++++------
 2 files changed, 110 insertions(+), 59 deletions(-)

diff --git a/packages/react-jsx-highcharts/test/components/YAxis/YAxis.spec.js b/packages/react-jsx-highcharts/test/components/YAxis/YAxis.spec.js
index 378a601b..a7202f10 100644
--- a/packages/react-jsx-highcharts/test/components/YAxis/YAxis.spec.js
+++ b/packages/react-jsx-highcharts/test/components/YAxis/YAxis.spec.js
@@ -1,34 +1,54 @@
 import * as React from 'react';
-import ShallowRenderer from 'react-shallow-renderer';
-
-import YAxis from '../../../src/components/YAxis/YAxis';
-import Axis from '../../../src/components/Axis';
-
-describe('<YAxis />', () => {
-  let renderer;
-
-  beforeEach(() => {
-    renderer = new ShallowRenderer();
-  });
-
-  it('renders an <Axis />', () => {
-    renderer.render(<YAxis id="y" />);
-    const result = renderer.getRenderOutput();
-
-    expect(result.type).toEqual(Axis);
+import Highcharts from 'highcharts';
+import addAccessibility from 'highcharts/modules/accessibility';
+
+import { render } from '@testing-library/react';
+
+import { HighchartsChart, HighchartsProvider } from '../../../src';
+import YAxis from '../../../src/components/YAxis';
+import ContextSpy from '../../ContextSpy';
+
+addAccessibility(Highcharts);
+
+describe('<YAxis /> integration', () => {
+  it('creates chart yaxis', () => {
+    let chartRef = {};
+    const Component = () => {
+      return (
+        <HighchartsProvider Highcharts={Highcharts}>
+          <HighchartsChart>
+            <YAxis id="testYAxis">
+              <ContextSpy chartRef={chartRef} />
+            </YAxis>
+          </HighchartsChart>
+        </HighchartsProvider>
+      );
+    };
+
+    render(<Component />);
+
+    const axis = chartRef.current.object.get('testYAxis');
+    expect(axis).toBeDefined();
+    expect(axis.isXAxis).toBe(false);
   });
 
-  it('renders an <Axis isX={false} />', () => {
-    renderer.render(<YAxis id="yAxis" />);
-    const result = renderer.getRenderOutput();
-
-    expect(result.props).toHaveProperty('isX', false);
-  });
-
-  it('passes other props through to <Axis />', () => {
-    renderer.render(<YAxis id="myOtherAxis" tickLength={1337} />);
-    const result = renderer.getRenderOutput();
-
-    expect(result.props).toHaveProperty('tickLength', 1337);
+  it('passes props to created yaxis', () => {
+    let chartRef = {};
+    const Component = () => {
+      return (
+        <HighchartsProvider Highcharts={Highcharts}>
+          <HighchartsChart>
+            <YAxis id="testYAxis" tickLength={1337}>
+              <ContextSpy chartRef={chartRef} />
+            </YAxis>
+          </HighchartsChart>
+        </HighchartsProvider>
+      );
+    };
+
+    render(<Component />);
+
+    const axis = chartRef.current.object.get('testYAxis');
+    expect(axis.userOptions.tickLength).toBe(1337);
   });
 });
diff --git a/packages/react-jsx-highcharts/test/components/ZAxis/ZAxis.spec.js b/packages/react-jsx-highcharts/test/components/ZAxis/ZAxis.spec.js
index faba3a95..fc5bb45f 100644
--- a/packages/react-jsx-highcharts/test/components/ZAxis/ZAxis.spec.js
+++ b/packages/react-jsx-highcharts/test/components/ZAxis/ZAxis.spec.js
@@ -1,48 +1,79 @@
 import * as React from 'react';
-import ShallowRenderer from 'react-shallow-renderer';
+import Highcharts from 'highcharts';
+import addHighcharts3DModule from 'highcharts/highcharts-3d';
 
+import addAccessibility from 'highcharts/modules/accessibility';
+
+import { render } from '@testing-library/react';
+
+import { Highcharts3dChart, HighchartsProvider } from '../../../src';
 import ZAxis from '../../../src/components/ZAxis/ZAxis';
-import Axis from '../../../src/components/Axis';
+import ContextSpy from '../../ContextSpy';
 
-describe('<ZAxis />', () => {
-  let renderer;
+addAccessibility(Highcharts);
+addHighcharts3DModule(Highcharts);
 
-  beforeEach(() => {
-    renderer = new ShallowRenderer();
-  });
+describe('<ZAxis /> integration', () => {
+  it('creates chart zaxis', () => {
+    let chartRef = {};
+    const Component = () => {
+      return (
+        <HighchartsProvider Highcharts={Highcharts}>
+          <Highcharts3dChart>
+            <ZAxis>
+              <ContextSpy chartRef={chartRef} />
+            </ZAxis>
+          </Highcharts3dChart>
+        </HighchartsProvider>
+      );
+    };
 
-  it('renders an <Axis />', () => {
-    renderer.render(<ZAxis />);
-    const result = renderer.getRenderOutput();
+    render(<Component />);
 
-    expect(result.type).toEqual(Axis);
+    const axis = chartRef.current.object.get('zAxis');
+    expect(axis).toBeDefined();
+    expect(axis.isXAxis).toBe(false);
   });
 
   it('should always have the id `zAxis`', () => {
-    renderer.render(<ZAxis id="customId" />);
-    const result = renderer.getRenderOutput();
+    let chartRef = {};
+    const Component = () => {
+      return (
+        <HighchartsProvider Highcharts={Highcharts}>
+          <Highcharts3dChart>
+            <ZAxis id="customaxis">
+              <ContextSpy chartRef={chartRef} />
+            </ZAxis>
+          </Highcharts3dChart>
+        </HighchartsProvider>
+      );
+    };
 
-    expect(result.props).toHaveProperty('id', 'zAxis');
-  });
+    render(<Component />);
 
-  it('should NOT be a dynamic axis', () => {
-    renderer.render(<ZAxis />);
-    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('zAxis');
+    expect(axis).toBeDefined();
   });
 
-  it('renders an <Axis isX={false} />', () => {
-    renderer.render(<ZAxis id="ZAxis" />);
-    const result = renderer.getRenderOutput();
-
-    expect(result.props).toHaveProperty('isX', false);
-  });
+  it('passes props to created zaxis', () => {
+    let chartRef = {};
+    const Component = () => {
+      return (
+        <HighchartsProvider Highcharts={Highcharts}>
+          <Highcharts3dChart>
+            <ZAxis tickLength={1337}>
+              <ContextSpy chartRef={chartRef} />
+            </ZAxis>
+          </Highcharts3dChart>
+        </HighchartsProvider>
+      );
+    };
 
-  it('passes other props through to <Axis />', () => {
-    renderer.render(<ZAxis tickLength={1337} />);
-    const result = renderer.getRenderOutput();
+    render(<Component />);
 
-    expect(result.props).toHaveProperty('tickLength', 1337);
+    const axis = chartRef.current.object.get('zAxis');
+    expect(axis.userOptions.tickLength).toBe(1337);
   });
 });