test: add vrt for tooltip value formatter

elastic · Dec 27, 2021 · d41cb16 · d41cb16
1 parent 9cc4031
commit d41cb16
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 4 deletions.
diff --git a/...stories-sagitta-offset-should-show-custom-value-formatter-in-tooltip-1-snap.png b/...stories-sagitta-offset-should-show-custom-value-formatter-in-tooltip-1-snap.png
diff --git a/integration/tests/goal_stories.test.ts b/integration/tests/goal_stories.test.ts
@@ -42,6 +42,13 @@ describe('Goal stories', () => {
         'http://localhost:9001/?path=/story/goal-alpha--gauge-with-target&knob-angleStart (n * π/8)=11&knob-angleEnd (n * π/8)=-3',
       );
     });
+
+    it('should show custom value formatter in tooltip', async () => {
+      await common.expectChartWithMouseAtUrlToMatchScreenshot(
+        'http://localhost:9001/?path=/story/goal-alpha--gauge-with-target&knob-test tooltip value formatter=true',
+        { right: 245, bottom: 120 },
+      );
+    });
   });
 
   eachTheme.describe((_, params) => {

diff --git a/packages/charts/src/chart_types/goal_chart/state/selectors/tooltip.ts b/packages/charts/src/chart_types/goal_chart/state/selectors/tooltip.ts
@@ -30,7 +30,8 @@ export const getTooltipInfoSelector = createCustomCachedSelector(
     if (!spec) {
       return EMPTY_TOOLTIP;
     }
-    const { valueFormatter } = spec;
+    const { valueFormatter, id } = spec;
+
     const tooltipInfo: TooltipInfo = {
       header: null,
       values: [],
@@ -43,8 +44,8 @@ export const getTooltipInfoSelector = createCustomCachedSelector(
         isHighlighted: false,
         isVisible: true,
         seriesIdentifier: {
-          specId: spec.id,
-          key: spec.id,
+          specId: id,
+          key: id,
         },
         value,
         formattedValue: valueFormatter ? valueFormatter(value) : `${value}`,

diff --git a/storybook/stories/goal/2_gauge_with_target.story.tsx b/storybook/stories/goal/2_gauge_with_target.story.tsx
@@ -55,6 +55,8 @@ export const Example = () => {
     }) *
     (Math.PI / 8);
 
+  const useValueFormatter = boolean('test tooltip value formatter', false);
+
   return (
     <Chart>
       <Settings baseTheme={useBaseTheme()} />
@@ -74,7 +76,7 @@ export const Example = () => {
         centralMinor=""
         angleStart={angleStart}
         angleEnd={angleEnd}
-        valueFormatter={(d: any) => `${d}`}
+        valueFormatter={useValueFormatter ? (d: any) => `Testing ${d}` : undefined}
       />
     </Chart>
   );