test: add tests for withAxisTickLabelTruncation

Author: biamalveiro

packages/charts/src/chart_types/xy_chart/state/selectors/axis_tick_formatter.test.ts

@@ -0,0 +1,54 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { withTickLabelTruncation } from './axis_tick_formatter';
+import * as textUtils from '../../../../common/text_utils';
+import { LIGHT_THEME } from '../../../../utils/themes/light_theme';
+
+const {
+  axes: { tickLabel },
+} = LIGHT_THEME;
+
+describe('withTickLabelTruncation', () => {
+  const measure = jest.fn((text: string) => ({ width: text.length, height: tickLabel.fontSize }));
+  const fitTextSpy = jest.spyOn(textUtils, 'fitText').mockReturnValue({ width: 0, text: 'tickLabel' });
+
+  it('does not call fitText when maxLength is undefined', () => {
+    withTickLabelTruncation(measure, tickLabel, 200)((v: number) => `${v}`);
+    expect(fitTextSpy).not.toHaveBeenCalled();
+  });
+
+  it("calls fitText with half the container width when maxLength is '50%'", () => {
+    const containerWidth = 200;
+    const format = withTickLabelTruncation(measure, { ...tickLabel, maxLength: '50%' }, containerWidth)((v) => `${v}`);
+    format('tickLabel');
+    expect(fitTextSpy).toHaveBeenCalledWith(
+      measure,
+      'tickLabel',
+      containerWidth / 2,
+      tickLabel.fontSize,
+      expect.any(Object),
+      tickLabel.truncate ?? 'end',
+    );
+  });
+
+  it('calls fitText with the numeric maxLength as maximum width', () => {
+    const maxLengthPx = 72;
+    const format = withTickLabelTruncation(measure, { ...tickLabel, maxLength: maxLengthPx }, 400)((v) => `${v}`);
+    format('tickLabel');
+
+    expect(fitTextSpy).toHaveBeenCalledWith(
+      measure,
+      'tickLabel',
+      maxLengthPx,
+      tickLabel.fontSize,
+      expect.any(Object),
+      tickLabel.truncate ?? 'end',
+    );
+  });
+});

packages/charts/src/chart_types/xy_chart/state/selectors/axis_tick_formatter.ts

@@ -34,7 +34,7 @@ export function withTickLabelTruncation(
 ): <V>(formatter: AxisLabelFormatter<V>) => AxisLabelFormatter<V> {
   const { fontSize, fontStyle, fontFamily, fill, truncate, maxLength } = tickLabel;
 
-  const maxWidth = maxLength ? getPercentageValue(maxLength, containerWidth, NaN) : undefined;
+  const maxWidth = maxLength ? getPercentageValue(maxLength, containerWidth, 0) : undefined;
   if (maxWidth === undefined || maxWidth <= 0 || maxWidth > containerWidth) return (formatter) => formatter;
 
   const font: Font = {