uber · Xiot · Jun 7, 2020 · May 28, 2020 · May 28, 2020 · May 28, 2020
diff --git a/packages/react-vis/jest.setup.js b/packages/react-vis/jest.setup.js
@@ -1,8 +1,8 @@
 /*eslint-env node*/
 import jsdom from 'jsdom';
 import Enzyme from 'enzyme';
-
 import Adapter from 'enzyme-adapter-react-16';
+
 Enzyme.configure({adapter: new Adapter()});
 
 global.document = jsdom.jsdom('<body></body>');
@@ -16,3 +16,8 @@ Object.keys(document.defaultView).forEach(function mapProperties(property) {
 global.navigator = {
   userAgent: 'node.js'
 };
+
+/*
+ * Canvas mocks
+ */
+HTMLCanvasElement.prototype.getContext = () => {};
diff --git a/packages/react-vis/src/animation.js b/packages/react-vis/src/animation.js
@@ -59,8 +59,7 @@ class Animation extends PureComponent {
     this._updateInterpolator(props);
   }
 
-  // eslint-disable-next-line react/no-deprecated
-  componentWillUpdate(props) {
+  UNSAFE_componentWillUpdate(props) {
     this._updateInterpolator(this.props, props);
     if (props.onStart) {
       props.onStart();

diff --git a/packages/react-vis/src/make-vis-flexible.js b/packages/react-vis/src/make-vis-flexible.js
@@ -140,8 +140,7 @@ function makeFlexible(Component, isWidthFlexible, isHeightFlexible) {
       this.cancelSubscription = subscribeToDebouncedResize(this._onResize);
     }
 
-    // eslint-disable-next-line react/no-deprecated
-    componentWillReceiveProps() {
+    UNSAFE_componentWillReceiveProps() {
       this._onResize();
     }
 

diff --git a/packages/react-vis/src/plot/crosshair.js b/packages/react-vis/src/plot/crosshair.js
@@ -82,7 +82,8 @@ class Crosshair extends PureComponent {
         PropTypes.oneOfType([
           PropTypes.number,
           PropTypes.string,
-          PropTypes.object
+          PropTypes.object,
+          PropTypes.bool
         ])
       ),
       series: PropTypes.object,

diff --git a/packages/react-vis/src/plot/series/arc-series.js b/packages/react-vis/src/plot/series/arc-series.js
@@ -74,7 +74,7 @@ class ArcSeries extends AbstractSeries {
     this.state = {scaleProps};
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     this.setState({scaleProps: this._getAllScaleProps(nextProps)});
   }
 

diff --git a/packages/react-vis/src/plot/xy-plot.js b/packages/react-vis/src/plot/xy-plot.js
@@ -144,8 +144,7 @@ class XYPlot extends React.Component {
     };
   }
 
-  // eslint-disable-next-line react/no-deprecated
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const children = getSeriesChildren(nextProps.children);
     const nextData = getStackedData(children, nextProps.stackBy);
     const {scaleMixins} = this.state;

diff --git a/packages/react-vis/src/treemap/index.js b/packages/react-vis/src/treemap/index.js
@@ -100,8 +100,7 @@ class Treemap extends React.Component {
     };
   }
 
-  // eslint-disable-next-line react/no-deprecated
-  componentWillReceiveProps(props) {
+  UNSAFE_componentWillReceiveProps(props) {
     this.setState({
       scales: _getScaleFns(props),
       ...getInnerDimensions(props, props.margin)

diff --git a/packages/react-vis/tests/components/arc-series.test.js b/packages/react-vis/tests/components/arc-series.test.js
@@ -4,11 +4,15 @@ import ArcSeries from 'plot/series/arc-series';
 import {testRenderWithProps, GENERIC_XYPLOT_SERIES_PROPS} from '../test-utils';
 import ArcSeriesExample from '../../../showcase/radial-chart/arc-series-example';
 
-testRenderWithProps(ArcSeries, GENERIC_XYPLOT_SERIES_PROPS);
+testRenderWithProps(ArcSeries, GENERIC_XYPLOT_SERIES_PROPS, true);
 
 describe('ArcSeries', () => {
   test('Showcase Example - ArcSeriesExample', () => {
-    const $ = mount(<ArcSeriesExample />);
+    const $ = mount(
+      <svg>
+        <ArcSeriesExample />
+      </svg>
+    );
     expect($.text()).toBe('UPDATE-4-2024-4-2024');
     // multiplied by two to account for shadow listeners
     expect($.find('.rv-xy-plot__series--arc').length).toBe(4);

diff --git a/packages/react-vis/tests/components/area-series.test.js b/packages/react-vis/tests/components/area-series.test.js
@@ -7,7 +7,7 @@ import {testRenderWithProps, GENERIC_XYPLOT_SERIES_PROPS} from '../test-utils';
 import AreaChartElevated from '../../../showcase/plot/area-chart-elevated';
 import AreaChart from '../../../showcase/plot/area-chart';
 
-testRenderWithProps(AreaSeries, GENERIC_XYPLOT_SERIES_PROPS);
+testRenderWithProps(AreaSeries, GENERIC_XYPLOT_SERIES_PROPS, true);
 
 const AREA_PROPS = {
   className: 'area-chart-example',

diff --git a/packages/react-vis/tests/components/axis-title.test.js b/packages/react-vis/tests/components/axis-title.test.js
@@ -16,7 +16,11 @@ describe('AxisTitle', () => {
     const props = Object.assign({}, baseProps, {
       orientation: BOTTOM
     });
-    const $ = mount(<AxisTitle {...props} />);
+    const $ = mount(
+      <svg>
+        <AxisTitle {...props} />
+      </svg>
+    );
     const innerGroupHtml = $.find('g > g').html();
     expect(innerGroupHtml.includes('text-anchor: end')).toBeTruthy();
     expect($.find('text').text()).toBe(baseProps.title);
@@ -27,7 +31,11 @@ describe('AxisTitle', () => {
       orientation: TOP,
       position: 'start'
     });
-    const $ = mount(<AxisTitle {...props} />);
+    const $ = mount(
+      <svg>
+        <AxisTitle {...props} />
+      </svg>
+    );
     const innerGroupHtml = $.find('g > g').html();
     expect(innerGroupHtml.includes('text-anchor: start')).toBeTruthy();
     expect($.find('text').text()).toBe(baseProps.title);
@@ -37,7 +45,11 @@ describe('AxisTitle', () => {
     const props = Object.assign({}, baseProps, {
       orientation: LEFT
     });
-    const $ = mount(<AxisTitle {...props} />);
+    const $ = mount(
+      <svg>
+        <AxisTitle {...props} />
+      </svg>
+    );
     const innerGroupHtml = $.find('g > g').html();
     expect(innerGroupHtml.includes('text-anchor: end')).toBeTruthy();
     expect($.find('text').text()).toBe(baseProps.title);
@@ -48,7 +60,11 @@ describe('AxisTitle', () => {
       orientation: RIGHT,
       position: 'start'
     });
-    const $ = mount(<AxisTitle {...props} />);
+    const $ = mount(
+      <svg>
+        <AxisTitle {...props} />
+      </svg>
+    );
     const innerGroupHtml = $.find('g > g').html();
     expect(innerGroupHtml.includes('text-anchor: start')).toBeTruthy();
     expect($.find('text').text()).toBe(baseProps.title);

diff --git a/packages/react-vis/tests/components/bar-series.test.js b/packages/react-vis/tests/components/bar-series.test.js
@@ -12,9 +12,9 @@ import ClusteredStackedVerticalBarChart from '../../../showcase/plot/clustered-s
 import DifferenceChart from '../../../showcase/plot/difference-chart';
 
 describe('BarSeries', () => {
-  testRenderWithProps(HorizontalBarSeries, GENERIC_XYPLOT_SERIES_PROPS);
+  testRenderWithProps(HorizontalBarSeries, GENERIC_XYPLOT_SERIES_PROPS, true);
 
-  testRenderWithProps(VerticalBarSeries, GENERIC_XYPLOT_SERIES_PROPS);
+  testRenderWithProps(VerticalBarSeries, GENERIC_XYPLOT_SERIES_PROPS, true);
 
   test('Showcase Example - BarChart', () => {
     const $ = mount(<BarChart />);

diff --git a/packages/react-vis/tests/components/borders.test.js b/packages/react-vis/tests/components/borders.test.js
@@ -4,7 +4,19 @@ import Borders from 'plot/borders';
 import {testRenderWithProps, GENERIC_XYPLOT_SERIES_PROPS} from '../test-utils';
 import GradientExample from '../../../showcase/misc/gradient-example';
 
-testRenderWithProps(Borders, GENERIC_XYPLOT_SERIES_PROPS);
+testRenderWithProps(
+  Borders,
+  {
+    ...GENERIC_XYPLOT_SERIES_PROPS,
+    marginLeft: 0,
+    marginRight: 0,
+    innerWidth: 100,
+    marginTop: 0,
+    marginBottom: 0,
+    innerHeight: 100
+  },
+  true
+);
 
 describe('Borders', () => {
   test('GradientExample', () => {

diff --git a/packages/react-vis/tests/components/circular-grid-lines.test.js b/packages/react-vis/tests/components/circular-grid-lines.test.js
@@ -5,7 +5,7 @@ import {testRenderWithProps, GENERIC_XYPLOT_SERIES_PROPS} from '../test-utils';
 import FauxRadialScatterplot from '../../../showcase/plot/faux-radial-scatterplot';
 
 describe('CircularGridLines', () => {
-  testRenderWithProps(CircularGridLines, GENERIC_XYPLOT_SERIES_PROPS);
+  testRenderWithProps(CircularGridLines, GENERIC_XYPLOT_SERIES_PROPS, true);
 
   test('Showcase Example - FauxRadialScatterplot', () => {
     const $ = mount(<FauxRadialScatterplot />);

diff --git a/packages/react-vis/tests/components/custom-svg-series.test.js b/packages/react-vis/tests/components/custom-svg-series.test.js
@@ -6,9 +6,9 @@ import CustomSVGExample from '../../../showcase/plot/custom-svg-example';
 import CustomSVGAllTheMarks from '../../../showcase/plot/custom-svg-all-the-marks';
 import CustomSVGRootLevelComponent from '../../../showcase/plot/custom-svg-root-level';
 
-testRenderWithProps(CustomSVGSeries, GENERIC_XYPLOT_SERIES_PROPS);
-
 describe('CustomSVGSeries', () => {
+  testRenderWithProps(CustomSVGSeries, GENERIC_XYPLOT_SERIES_PROPS);
+
   test('Showcase Example - CustomSVGExample', () => {
     const $ = mount(<CustomSVGExample />);
     expect($.text()).toBe('1.01.52.02.53.068101214x: 187.5y: 200');

diff --git a/packages/react-vis/tests/components/decorative-axis.test.js b/packages/react-vis/tests/components/decorative-axis.test.js
@@ -5,12 +5,16 @@ import {testRenderWithProps, GENERIC_XYPLOT_SERIES_PROPS} from '../test-utils';
 import DecorativeAxisCrissCross from '../../../showcase/axes/decorative-axes-criss-cross';
 import ParallelCoordinatesExample from '../../../showcase/axes/parallel-coordinates-example';
 
-testRenderWithProps(DecorativeAxis, {
-  ...GENERIC_XYPLOT_SERIES_PROPS,
-  axisStart: {x: 0, y: 1},
-  axisEnd: {x: 0, y: 1},
-  axisDomain: [0, 1]
-});
+testRenderWithProps(
+  DecorativeAxis,
+  {
+    ...GENERIC_XYPLOT_SERIES_PROPS,
+    axisStart: {x: 0, y: 1},
+    axisEnd: {x: 0, y: 1},
+    axisDomain: [0, 1]
+  },
+  true
+);
 
 describe('DecorativeAxis', () => {
   test('Showcase Example - DecorativeAxisCrissCross', () => {

diff --git a/packages/react-vis/tests/components/gradient.test.js b/packages/react-vis/tests/components/gradient.test.js
@@ -6,7 +6,7 @@ import TriangleExample from '../../../showcase/misc/triangle-example';
 import GradientExample from '../../../showcase/misc/gradient-example';
 
 describe('GradientDefs', () => {
-  testRenderWithProps(GradientDefs, GENERIC_XYPLOT_SERIES_PROPS);
+  testRenderWithProps(GradientDefs, GENERIC_XYPLOT_SERIES_PROPS, true);
 
   test('TriangleExample', () => {
     const $ = mount(<TriangleExample />);

diff --git a/packages/react-vis/tests/components/heatmap.test.js b/packages/react-vis/tests/components/heatmap.test.js
@@ -25,7 +25,7 @@ const HEATMAP_PROPS = {
 };
 
 describe('Heatmap', () => {
-  testRenderWithProps(HeatmapSeries, GENERIC_XYPLOT_SERIES_PROPS);
+  testRenderWithProps(HeatmapSeries, GENERIC_XYPLOT_SERIES_PROPS, true);
 
   test('basic rendering', () => {
     const $ = mount(

diff --git a/packages/react-vis/tests/components/hexbin-series.test.js b/packages/react-vis/tests/components/hexbin-series.test.js
@@ -6,7 +6,7 @@ import HexHeatmap from '../../../showcase/plot/hex-heatmap';
 import HexbinSizeExample from '../../../showcase/plot/hexbin-size-example';
 
 describe('HexbinSeries', () => {
-  testRenderWithProps(HexbinSeries, GENERIC_XYPLOT_SERIES_PROPS);
+  testRenderWithProps(HexbinSeries, GENERIC_XYPLOT_SERIES_PROPS, true);
 
   test('Showcase Example - HexHeatmap', () => {
     const $ = mount(<HexHeatmap />);

diff --git a/packages/react-vis/tests/components/highlight.test.js b/packages/react-vis/tests/components/highlight.test.js
@@ -9,7 +9,19 @@ import BidirectionDragChart from '../../../showcase/misc/2d-dragable-plot';
 import {testRenderWithProps, GENERIC_XYPLOT_SERIES_PROPS} from '../test-utils';
 
 describe('Highlight', () => {
-  testRenderWithProps(Highlight, GENERIC_XYPLOT_SERIES_PROPS);
+  testRenderWithProps(
+    Highlight,
+    {
+      ...GENERIC_XYPLOT_SERIES_PROPS,
+      marginLeft: 0,
+      marginRight: 0,
+      innerWidth: 100,
+      marginTop: 0,
+      marginBottom: 0,
+      innerHeight: 100
+    },
+    true
+  );
 
   test('DragableExample', () => {
     const $ = mount(<DragableExample />);

diff --git a/packages/react-vis/tests/components/label-series.test.js b/packages/react-vis/tests/components/label-series.test.js
@@ -5,11 +5,15 @@ import {testRenderWithProps, GENERIC_XYPLOT_SERIES_PROPS} from '../test-utils';
 import LabelSeriesExample from '../../../showcase/misc/label-series-example';
 import LabeledStackedVerticalBarChart from '../../../showcase/plot/labeled-stacked-vertical-bar-chart';
 
-testRenderWithProps(LabelSeries, GENERIC_XYPLOT_SERIES_PROPS);
+testRenderWithProps(LabelSeries, GENERIC_XYPLOT_SERIES_PROPS, true);
 
 describe('LabelSeries', () => {
   test('Showcase Example - LabelSeriesExample', () => {
-    const $ = mount(<LabelSeriesExample />);
+    const $ = mount(
+      <svg>
+        <LabelSeriesExample />
+      </svg>
+    );
     expect($.text()).toBe(
       'UPDATE-101234505101520WigglytuffPsyduckGeodudeDittoSnorlax'
     );
@@ -26,7 +30,11 @@ describe('LabelSeries', () => {
   });
 
   test('Showcase Example - LabeledStackedVerticalBarChart', () => {
-    const $ = mount(<LabeledStackedVerticalBarChart />);
+    const $ = mount(
+      <svg>
+        <LabeledStackedVerticalBarChart />
+      </svg>
+    );
     expect($.find('.rv-xy-plot__series--label text').length).toBe(9);
   });
 });
diff --git a/packages/react-vis/tests/components/line-series-canvas.test.js b/packages/react-vis/tests/components/line-series-canvas.test.js
@@ -11,8 +11,9 @@ describe('LineSeriesCanvas', () => {
       <XYPlot width={300} height={300}>
         {Array(k)
           .fill(0)
-          .map(() => (
+          .map((_, index) => (
             <LineSeriesCanvas
+              key={index.toString()}
               color="#12939a"
               data={[
                 {x: 1, y: 5},
@@ -39,6 +40,7 @@ describe('LineSeriesCanvas', () => {
       <XYPlot width={300} height={300}>
         {[...Array(k).keys()].map(v => (
           <LineSeriesCanvas
+            key={v}
             color="#12939a"
             data={[
               {x: -50, y: -50},

diff --git a/packages/react-vis/tests/components/line-series.test.js b/packages/react-vis/tests/components/line-series.test.js
@@ -10,7 +10,7 @@ import NullData from '../../../showcase/misc/null-data-example';
 import TimeChart from '../../../showcase/misc/time-chart';
 import SyncedCharts from '../../../showcase/misc/synced-charts';
 
-testRenderWithProps(LineSeries, GENERIC_XYPLOT_SERIES_PROPS);
+testRenderWithProps(LineSeries, GENERIC_XYPLOT_SERIES_PROPS, true);
 
 const LINE_PROPS = {
   className: 'line-chart-example',

diff --git a/packages/react-vis/tests/components/mark-series.test.js b/packages/react-vis/tests/components/mark-series.test.js
@@ -6,7 +6,7 @@ import Scatterplot from '../../../showcase/plot/scatterplot';
 import DynamicCrosshairScatterplot from '../../../showcase/axes/dynamic-crosshair-scatterplot';
 
 describe('MarkSeries', () => {
-  testRenderWithProps(MarkSeries, GENERIC_XYPLOT_SERIES_PROPS);
+  testRenderWithProps(MarkSeries, GENERIC_XYPLOT_SERIES_PROPS, true);
 
   test('MShowcase Example - Scatterplot', () => {
     const $ = mount(<Scatterplot />);

diff --git a/packages/react-vis/tests/components/polygon-series.test.js b/packages/react-vis/tests/components/polygon-series.test.js
@@ -5,7 +5,7 @@ import {testRenderWithProps, GENERIC_XYPLOT_SERIES_PROPS} from '../test-utils';
 import TriangleExample from '../../../showcase/misc/triangle-example';
 
 describe('PolygonSeries', () => {
-  testRenderWithProps(PolygonSeries, GENERIC_XYPLOT_SERIES_PROPS);
+  testRenderWithProps(PolygonSeries, GENERIC_XYPLOT_SERIES_PROPS, true);
 
   test('Showcase Example - Triangle Example', () => {
     const $ = mount(<TriangleExample />);

diff --git a/packages/react-vis/tests/components/rect-series.test.js b/packages/react-vis/tests/components/rect-series.test.js
@@ -7,9 +7,9 @@ import Histogram from '../../../showcase/plot/histogram';
 import StackedHistogram from '../../../showcase/plot/stacked-histogram';
 
 describe('RectSeries', () => {
-  testRenderWithProps(HorizontalRectSeries, GENERIC_XYPLOT_SERIES_PROPS);
+  testRenderWithProps(HorizontalRectSeries, GENERIC_XYPLOT_SERIES_PROPS, true);
 
-  testRenderWithProps(VerticalRectSeries, GENERIC_XYPLOT_SERIES_PROPS);
+  testRenderWithProps(VerticalRectSeries, GENERIC_XYPLOT_SERIES_PROPS, true);
 
   test('Showcase Example - StackedHistogram', () => {
     const $ = mount(<StackedHistogram />);