add core tooltip content tests

Author: pan-kot

src/__tests__/__snapshots__/documenter.test.ts.snap

@@ -883,7 +883,7 @@ Supported series types:
           {
             "name": "details",
             "optional": true,
-            "type": "((props: TooltipSlotRenderProps) => ReadonlyArray<PieChartProps.TooltipDetail>)",
+            "type": "((props: TooltipSlotRenderProps) => ReadonlyArray<BaseTooltipDetail>)",
           },
           {
             "name": "enabled",

src/core/__tests__/chart-core-tooltip.test.tsx

@@ -6,7 +6,7 @@ import { waitFor } from "@testing-library/react";
 import highcharts from "highcharts";
 import { vi } from "vitest";
 
-import { CoreChartAPI } from "../../../lib/components/core/interfaces";
+import { CoreChartProps } from "../../../lib/components/core/interfaces";
 import testClasses from "../../../lib/components/core/test-classes/styles.selectors";
 import { createChartWrapper, renderChart } from "./common";
 import { HighchartsTestHelper } from "./highcharts-utils";
@@ -51,7 +51,7 @@ const data = [
   { name: "P3", y: 60 },
 ];
 
-const series: Highcharts.SeriesOptionsType[] = [
+const pieSeries: Highcharts.SeriesOptionsType[] = [
   {
     type: "pie",
     name: "Pie series",
@@ -84,7 +84,7 @@ describe("CoreChart: tooltip", () => {
   test("renders highcharts tooltip", () => {
     const { wrapper } = renderChart({
       highcharts,
-      options: { series, tooltip: { enabled: true, formatter: () => "Custom content" } },
+      options: { series: pieSeries, tooltip: { enabled: true, formatter: () => "Custom content" } },
       tooltip: { enabled: false },
     });
 
@@ -184,12 +184,12 @@ describe("CoreChart: tooltip", () => {
   });
 
   test("shows tooltip with api", async () => {
-    let api: null | CoreChartAPI = null;
+    let api: null | CoreChartProps.ChartAPI = null;
     const onHighlight = vi.fn();
     const onClearHighlight = vi.fn();
     const { wrapper } = renderChart({
       highcharts,
-      options: { series },
+      options: { series: pieSeries },
       onHighlight,
       onClearHighlight,
       getTooltipContent: () => ({
@@ -221,7 +221,7 @@ describe("CoreChart: tooltip", () => {
   test("keeps showing tooltip when cursor is over the tooltip", async () => {
     const { wrapper } = renderChart({
       highcharts,
-      options: { series },
+      options: { series: pieSeries },
       getTooltipContent: () => ({ header: () => "", body: () => "" }),
     });
 
@@ -250,7 +250,7 @@ describe("CoreChart: tooltip", () => {
   test("pins and unpins tooltip", async () => {
     const { wrapper } = renderChart({
       highcharts,
-      options: { series },
+      options: { series: pieSeries },
       getTooltipContent: ({ point }) => ({ header: () => `y${point?.y}`, body: () => "" }),
     });
 
@@ -291,7 +291,7 @@ describe("CoreChart: tooltip", () => {
   test("provides point and group for onHighlight and getTooltipContent", async () => {
     const onHighlight = vi.fn();
     const getTooltipContent = vi.fn();
-    renderChart({ highcharts, options: { series }, onHighlight, getTooltipContent });
+    renderChart({ highcharts, options: { series: pieSeries }, onHighlight, getTooltipContent });
 
     for (let i = 0; i < data.length; i++) {
       act(() => hc.highlightChartPoint(0, i));
@@ -370,4 +370,39 @@ describe("CoreChart: tooltip", () => {
       expect(onHighlight).toHaveBeenCalledWith(expect.objectContaining({ point: hc.getChartPoint(0, 1) }));
     },
   );
+
+  test("renders customized cartesian points", () => {
+    const { wrapper } = renderChart({
+      highcharts,
+      options: { series: lineSeries },
+      getTooltipContent: () => ({
+        header: () => "Header",
+        point: ({ item }) => ({ key: ` [${item.point.series.name}]`, value: ` [${item.point.y}]` }),
+      }),
+    });
+
+    act(() => hc.highlightChartPoint(0, 2));
+
+    expect(wrapper.findTooltip()!.findBody()!.getElement().textContent).toBe(
+      " [Line series 1] [13] [Line series 2] [23]",
+    );
+  });
+
+  test("renders customized pie segment details", () => {
+    const { wrapper } = renderChart({
+      highcharts,
+      options: { series: pieSeries },
+      getTooltipContent: () => ({
+        header: () => "Header",
+        details: ({ point }) => [
+          { key: `[${point.name}]`, value: ` [${point.y}]` },
+          { key: " [custom key]", value: " [custom value]" },
+        ],
+      }),
+    });
+
+    act(() => hc.highlightChartPoint(0, 2));
+
+    expect(wrapper.findTooltip()!.findBody()!.getElement().textContent).toBe("[P3] [60] [custom key] [custom value]");
+  });
 });

src/core/interfaces.ts

@@ -108,6 +108,11 @@ export interface BaseNoDataOptions {
   onRecoveryClick?: NonCancelableEventHandler;
 }
 
+export interface BaseTooltipDetail {
+  key: React.ReactNode;
+  value: React.ReactNode;
+}
+
 export interface BaseI18nStrings {
   loadingText?: string;
   errorText?: string;
@@ -450,10 +455,7 @@ export namespace CoreChartProps {
     point: Highcharts.Point;
   }
 
-  export interface TooltipDetail {
-    key: React.ReactNode;
-    value: React.ReactNode;
-  }
+  export type TooltipDetail = BaseTooltipDetail;
 
   export interface LegendItemHighlightDetail {
     item: LegendItem;

src/pie-chart/interfaces.ts

@@ -105,10 +105,7 @@ export namespace PieChartProps {
     totalValue: number;
   }
 
-  export interface TooltipDetail {
-    key: React.ReactNode;
-    value: React.ReactNode;
-  }
+  export type TooltipDetail = CoreTypes.BaseTooltipDetail;
 
   export type SegmentTitleRenderProps = SegmentDescriptionRenderProps;
   export interface SegmentDescriptionRenderProps {