From d8dd8f472f89e633cb7a678aa116a250e4131303 Mon Sep 17 00:00:00 2001
From: rshen91 <rachelwshen@gmail.com>
Date: Wed, 3 Jul 2019 08:57:20 -0600
Subject: [PATCH] test(axis_utils.test): add test for tickLabelPadding style
 prop or theme

---
 src/lib/axes/axis_utils.test.ts             | 12 +++++++++++-
 src/lib/axes/axis_utils.ts                  | 13 +++++++++----
 src/lib/axes/canvas_text_bbox_calculator.ts |  2 +-
 src/lib/series/specs.ts                     |  4 ++--
 4 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/lib/axes/axis_utils.test.ts b/src/lib/axes/axis_utils.test.ts
index a8959bc928..9adc7bad6f 100644
--- a/src/lib/axes/axis_utils.test.ts
+++ b/src/lib/axes/axis_utils.test.ts
@@ -1,6 +1,6 @@
 import { XDomain } from '../series/domains/x_domain';
 import { YDomain } from '../series/domains/y_domain';
-import { AxisSpec, DomainRange, Position } from '../series/specs';
+import { AxisSpec, DomainRange, Position, AxisStyle } from '../series/specs';
 import { LIGHT_THEME } from '../themes/light_theme';
 import { AxisId, getAxisId, getGroupId, GroupId } from '../utils/ids';
 import { ScaleType } from '../utils/scales/scales';
@@ -28,6 +28,7 @@ import {
   isVertical,
   isYDomain,
   mergeDomainsByGroupId,
+  getAxisTickLabelPadding,
 } from './axis_utils';
 import { CanvasTextBBoxCalculator } from './canvas_text_bbox_calculator';
 import { SvgTextBBoxCalculator } from './svg_text_bbox_calculator';
@@ -1283,4 +1284,13 @@ describe('Axis computational utils', () => {
 
     expect(JSON.stringify(negativeReducer)).toEqual(JSON.stringify(positiveReducer));
   });
+  test('should expect axisSpec.style.tickLabelPadding if specified', () => {
+    const axisSpecStyle: AxisStyle = {
+      tickLabelPadding: 2,
+    };
+
+    const axisConfigTickLabelPadding = 1;
+
+    expect(getAxisTickLabelPadding(axisConfigTickLabelPadding, axisSpecStyle)).toEqual(2);
+  });
 });
diff --git a/src/lib/axes/axis_utils.ts b/src/lib/axes/axis_utils.ts
index e6a4bd5ab1..687729503a 100644
--- a/src/lib/axes/axis_utils.ts
+++ b/src/lib/axes/axis_utils.ts
@@ -10,6 +10,7 @@ import {
   Rotation,
   TickFormatter,
   UpperBoundedDomain,
+  AxisStyle,
 } from '../series/specs';
 import { AxisConfig, Theme } from '../themes/theme';
 import { Dimensions, Margins } from '../utils/dimensions';
@@ -70,10 +71,7 @@ export function computeAxisTicksDimensions(
     throw new Error(`Cannot compute scale for axis spec ${axisSpec.id}`);
   }
 
-  const tickLabelPadding =
-    axisSpec.style && axisSpec.style.tickLabelPadding
-      ? axisSpec.style.tickLabelPadding
-      : axisConfig.tickLabelStyle.padding;
+  const tickLabelPadding = getAxisTickLabelPadding(axisConfig.tickLabelStyle.padding, axisSpec.style);
 
   const dimensions = computeTickDimensions(
     scale,
@@ -89,6 +87,13 @@ export function computeAxisTicksDimensions(
   };
 }
 
+export function getAxisTickLabelPadding(axisConfigTickLabelPadding: number, axisSpecStyle?: AxisStyle): number {
+  if (axisSpecStyle && axisSpecStyle.tickLabelPadding) {
+    return axisSpecStyle.tickLabelPadding;
+  }
+  return axisConfigTickLabelPadding;
+}
+
 export function isYDomain(position: Position, chartRotation: Rotation): boolean {
   const isStraightRotation = chartRotation === 0 || chartRotation === 180;
   if (isVertical(position)) {
diff --git a/src/lib/axes/canvas_text_bbox_calculator.ts b/src/lib/axes/canvas_text_bbox_calculator.ts
index 4f6b51306c..82308cd654 100644
--- a/src/lib/axes/canvas_text_bbox_calculator.ts
+++ b/src/lib/axes/canvas_text_bbox_calculator.ts
@@ -22,7 +22,7 @@ export class CanvasTextBBoxCalculator implements BBoxCalculator {
       return none;
     }
 
-    // Avoid having negative padding that can obscure text
+    // Padding should be at least one to avoid browser measureText inconsistencies
     if (padding < 1) {
       padding = 1;
     }
diff --git a/src/lib/series/specs.ts b/src/lib/series/specs.ts
index 8d157159db..ab8599f20e 100644
--- a/src/lib/series/specs.ts
+++ b/src/lib/series/specs.ts
@@ -219,12 +219,12 @@ export interface AxisSpec {
   /** If specified, it constrains the domain for these values */
   domain?: DomainRange;
   /** Object to hold custom styling */
-  style?: CustomStyle;
+  style?: AxisStyle;
 }
 
 export type TickFormatter = (value: any) => string;
 
-interface CustomStyle {
+export interface AxisStyle {
   /** Specifies the amount of padding on the tick label bounding box */
   tickLabelPadding?: number;
 }