fix: broken tests, update prop naming

elastic · Jun 8, 2020 · 9c91e74 · 9c91e74
1 parent 44e5101
commit 9c91e74
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 20 deletions.
diff --git a/src/components/chart.tsx b/src/components/chart.tsx
@@ -147,15 +147,15 @@ export class Chart extends React.Component<ChartProps, ChartState> {
 
   render() {
     const { size, className } = this.props;
-    const containerStyle = getChartSize(size);
+    const containerSizeStyle = getChartSize(size);
     const horizontal = isHorizontalAxis(this.state.legendPosition);
     const chartClassNames = classNames('echChart', className, {
       'echChart--column': horizontal,
     });
 
     return (
       <Provider store={this.chartStore}>
-        <div className={chartClassNames} style={containerStyle} ref={this.chartContainerRef}>
+        <div className={chartClassNames} style={containerSizeStyle} ref={this.chartContainerRef}>
           <ChartBackground />
           <ChartStatus />
           <ChartResizer />

diff --git a/src/components/chart_background.tsx b/src/components/chart_background.tsx
@@ -22,7 +22,7 @@ import { GlobalChartState } from '../state/chart_state';
 import { getInternalIsInitializedSelector } from '../state/selectors/get_internal_is_intialized';
 
 interface ChartBackgroundProps {
-  background: string;
+  backgroundColor: string;
 }
 
 export class ChartBackgroundComponent extends React.Component<ChartBackgroundProps> {
@@ -33,19 +33,19 @@ export class ChartBackgroundComponent extends React.Component<ChartBackgroundPro
   }
 
   render() {
-    const { background } = this.props;
-    return <div className="echChartBackground" style={{ background }} />;
+    const { backgroundColor } = this.props;
+    return <div className="echChartBackground" style={{ backgroundColor }} />;
   }
 }
 
 const mapStateToProps = (state: GlobalChartState): ChartBackgroundProps => {
   if (!getInternalIsInitializedSelector(state)) {
     return {
-      background: 'transparent',
+      backgroundColor: 'transparent',
     };
   }
   return {
-    background: getChartThemeSelector(state).background.color,
+    backgroundColor: getChartThemeSelector(state).background.color,
   };
 };
 

diff --git a/src/utils/chart_size.test.ts b/src/utils/chart_size.test.ts
@@ -21,71 +21,58 @@ import { getChartSize } from './chart_size';
 describe('chart size utilities', () => {
   test('array', () => {
     expect(getChartSize([100, 100])).toEqual({
-      position: 'relative',
       width: 100,
       height: 100,
     });
     expect(getChartSize([undefined, 100])).toEqual({
-      position: 'relative',
       width: '100%',
       height: 100,
     });
     expect(getChartSize([100, undefined])).toEqual({
-      position: 'relative',
       width: 100,
       height: '100%',
     });
     expect(getChartSize([undefined, undefined])).toEqual({
-      position: 'relative',
       width: '100%',
       height: '100%',
     });
     expect(getChartSize([0, '100em'])).toEqual({
-      position: 'relative',
       width: 0,
       height: '100em',
     });
   });
   test('value', () => {
     expect(getChartSize(1)).toEqual({
-      position: 'relative',
       width: 1,
       height: 1,
     });
     expect(getChartSize('100em')).toEqual({
-      position: 'relative',
       width: '100em',
       height: '100em',
     });
     expect(getChartSize(0)).toEqual({
-      position: 'relative',
       width: 0,
       height: 0,
     });
   });
   test('object', () => {
     expect(getChartSize({ width: 100, height: 100 })).toEqual({
-      position: 'relative',
       width: 100,
       height: 100,
     });
     expect(getChartSize({ height: 100 })).toEqual({
-      position: 'relative',
       width: '100%',
       height: 100,
     });
     expect(getChartSize({ width: 100 })).toEqual({
-      position: 'relative',
       width: 100,
       height: '100%',
     });
     expect(getChartSize({})).toEqual({
-      position: 'relative',
       width: '100%',
       height: '100%',
     });
     expect(getChartSize({ width: 0, height: '100em' })).toEqual({
-      position: 'relative',
       width: 0,
       height: '100em',
     });