[ML] tooltip tests

x-pack/plugins/ml/public/application/components/chart_tooltip/chart_tooltip_service.test.ts

@@ -0,0 +1,64 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import {
+  ChartTooltipService,
+  getChartTooltipDefaultState,
+  TooltipData,
+} from './chart_tooltip_service';
+
+describe('ChartTooltipService', () => {
+  let service: ChartTooltipService;
+
+  beforeEach(() => {
+    service = new ChartTooltipService();
+  });
+
+  test('should update the tooltip state on show and hide', () => {
+    const spy = jest.fn();
+
+    service.tooltipState$.subscribe(spy);
+
+    expect(spy).toHaveBeenCalledWith(getChartTooltipDefaultState());
+
+    const update = [
+      {
+        label: 'new tooltip',
+      },
+    ] as TooltipData;
+    const mockEl = document.createElement('div');
+
+    service.show(update, mockEl);
+
+    expect(spy).toHaveBeenCalledWith({
+      isTooltipVisible: true,
+      tooltipData: update,
+      offset: { x: 0, y: 0 },
+      target: mockEl,
+    });
+
+    service.hide();
+
+    expect(spy).toHaveBeenCalledWith({
+      isTooltipVisible: false,
+      tooltipData: ([] as unknown) as TooltipData,
+      offset: { x: 0, y: 0 },
+      target: null,
+    });
+  });
+
+  test('update the tooltip state only on a new value', () => {
+    const spy = jest.fn();
+
+    service.tooltipState$.subscribe(spy);
+
+    expect(spy).toHaveBeenCalledWith(getChartTooltipDefaultState());
+
+    service.hide();
+
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+});

x-pack/plugins/ml/public/application/components/chart_tooltip/chart_tooltip_service.ts

@@ -19,18 +19,11 @@ export interface TooltipHeader {
 
 export type TooltipData = ChartTooltipValue[];
 
-interface TooltipPosition {
-  left: number;
-  top: number;
-}
-
 export interface ChartTooltipState {
   isTooltipVisible: boolean;
   offset: TooltipOffset;
-  targetPosition: ClientRect;
   tooltipData: TooltipData;
   tooltipHeaderFormatter?: TooltipValueFormatter;
-  tooltipPosition: TooltipPosition;
   target: HTMLElement | null;
 }
 
@@ -43,8 +36,6 @@ export const getChartTooltipDefaultState = (): ChartTooltipState => ({
   isTooltipVisible: false,
   tooltipData: ([] as unknown) as TooltipData,
   offset: { x: 0, y: 0 },
-  targetPosition: { left: 0, top: 0 } as ClientRect,
-  tooltipPosition: { left: 0, top: 0 },
   target: null,
 });
 
@@ -57,19 +48,20 @@ export class ChartTooltipService {
 
   public show(
     tooltipData: TooltipData,
-    target?: HTMLElement | null,
+    target: HTMLElement,
     offset: TooltipOffset = { x: 0, y: 0 }
   ) {
-    if (typeof target !== 'undefined' && target !== null) {
-      this.chartTooltip$.next({
-        ...this.chartTooltip$.getValue(),
-        isTooltipVisible: true,
-        offset,
-        targetPosition: target.getBoundingClientRect(),
-        tooltipData,
-        target,
-      });
+    if (!target) {
+      throw new Error('target is required for the tooltip positioning');
     }
+
+    this.chartTooltip$.next({
+      ...this.chartTooltip$.getValue(),
+      isTooltipVisible: true,
+      offset,
+      tooltipData,
+      target,
+    });
   }
 
   public hide() {