solid-recharts 1.0.0 → 2.0.0-beta.1

package/test/state/selectors/selectors.spec.tsx

@@ -0,0 +1,1613 @@
+// Ported from recharts 3.8.1 test/state/selectors/selectors.spec.tsx
+// (commit 7a23854). Solid deviations: upstream's Redux dispatch cases use the
+// Solid-native store actions; tooltip selector exports live in tooltipSelectors.
+import { createEffect, flush } from "solid-js";
+import { describe, expect, it, test, vi } from "vitest";
+import { render } from "@solidjs/testing-library";
+import { RechartsStoreProvider } from "../../../src/state/RechartsStoreProvider";
+import { createRechartsStore, type RechartsRootState } from "../../../src/state/store";
+import { arrayTooltipSearcher } from "../../../src/state/optionsSlice";
+import { useTooltipEventType } from "../../../src/state/selectors/selectTooltipEventType";
+import {
+  selectActiveCoordinate,
+  selectActiveIndex,
+  selectActivePropsFromChartPointer,
+  selectIsTooltipActive,
+  selectTooltipPayload,
+  selectTooltipPayloadConfigurations,
+} from "../../../src/state/selectors/tooltipSelectors";
+import { selectTooltipState } from "../../../src/state/selectors/selectTooltipState";
+import { combineTooltipPayload } from "../../../src/state/selectors/combiners/combineTooltipPayload";
+import { useAppSelector } from "../../../src/state/hooks";
+import type {
+  TooltipIndex,
+  TooltipPayload,
+  TooltipPayloadConfiguration,
+  TooltipPayloadEntry,
+} from "../../../src/state/tooltipSlice";
+import { ChartDataState, initialChartDataState } from "../../../src/state/chartDataSlice";
+import { noop } from "../../../src/util/DataUtils";
+import type {
+  Coordinate,
+  PolarCoordinate,
+  RelativePointer,
+  TooltipEventType,
+} from "../../../src/util/types";
+import type { TooltipTrigger } from "../../../src/chart/types";
+import { produceState } from "../../helper/produceState";
+import {
+  Area,
+  BarChart,
+  ComposedChart,
+  Line,
+  LineChart,
+  Pie,
+  PieChart,
+  Scatter,
+} from "../../../src";
+import { PageData, pageData } from "../../_data";
+import { mockGetBoundingClientRect } from "../../helper/mockGetBoundingClientRect";
+import { expectLastCalledWith } from "../../helper/expectLastCalledWith";
+import { useAppSelectorWithStableTest } from "../../helper/selectorTestHelpers";
+
+// preloadedState used by selectTooltipPayload cases (mirrors recharts).
+const preloadedTooltipState: Partial<RechartsRootState> = {
+  options: {
+    tooltipPayloadSearcher: arrayTooltipSearcher,
+    chartName: "",
+    eventEmitter: undefined,
+    defaultTooltipEventType: "axis",
+  },
+};
+const tooltipActiveCoordinate: Coordinate = { x: 100, y: 200 };
+const activeCoordinate: Coordinate = { x: 100, y: 200 };
+
+const allTooltipEventTypes: ReadonlyArray<TooltipEventType> = ["axis", "item"];
+
+const exampleTooltipPayloadConfiguration1: TooltipPayloadConfiguration = {
+  settings: {
+    fill: "fill",
+    name: "name is ignored in Scatter in recharts 2.x",
+    color: "color",
+    dataKey: "dataKey1",
+    nameKey: "nameKey1",
+    graphicalItemId: "graphicalItemId1",
+  },
+  dataDefinedOnItem: [
+    [
+      {
+        name: "stature",
+        unit: "cm",
+        value: 100,
+        payload: { x: 100, y: 200, z: 200 },
+        dataKey: "x",
+      },
+      { name: "weight", unit: "kg", value: 200, payload: { x: 100, y: 200, z: 200 }, dataKey: "y" },
+    ],
+  ],
+  getPosition: noop,
+};
+const exampleTooltipPayloadConfiguration2: TooltipPayloadConfiguration = {
+  settings: {
+    fill: "fill 2",
+    name: "name 2",
+    color: "color 2",
+    dataKey: "dataKey2",
+    nameKey: "nameKey2",
+    graphicalItemId: "graphicalItemId2",
+  },
+  dataDefinedOnItem: [
+    [
+      { name: "height", unit: "cm", value: 100, payload: { x: 100, y: 200, z: 200 }, dataKey: "x" },
+      { name: "width", unit: "m", value: 4, payload: { x: 10, y: 20, z: 20 }, dataKey: "y" },
+    ],
+  ],
+  getPosition: noop,
+};
+
+type TestCaseTooltipCombination = {
+  tooltipEventType: TooltipEventType;
+  trigger: TooltipTrigger;
+};
+
+const allTooltipCombinations: ReadonlyArray<TestCaseTooltipCombination> = [
+  { tooltipEventType: "axis", trigger: "hover" },
+  { tooltipEventType: "axis", trigger: "click" },
+  { tooltipEventType: "item", trigger: "hover" },
+  { tooltipEventType: "item", trigger: "click" },
+];
+
+describe("useTooltipEventType", () => {
+  type TooltipEventTypeTestScenario = {
+    testName: string;
+    shared: undefined | boolean;
+    defaultTooltipEventType: TooltipEventType;
+    validateTooltipEventTypes: ReadonlyArray<TooltipEventType>;
+    expected: TooltipEventType;
+  };
+
+  const testCases: ReadonlyArray<TooltipEventTypeTestScenario> = [
+    {
+      testName: "default case",
+      shared: undefined,
+      defaultTooltipEventType: "item",
+      validateTooltipEventTypes: [],
+      expected: "item",
+    },
+    {
+      testName: "shared and axis type is allowed",
+      shared: true,
+      defaultTooltipEventType: "item",
+      validateTooltipEventTypes: ["axis", "item"],
+      expected: "axis",
+    },
+    {
+      testName: "shared but axis type is not allowed",
+      shared: true,
+      defaultTooltipEventType: "item",
+      validateTooltipEventTypes: ["item"],
+      expected: "item",
+    },
+    {
+      testName: "not shared and item type is allowed",
+      shared: false,
+      defaultTooltipEventType: "axis",
+      validateTooltipEventTypes: ["axis", "item"],
+      expected: "item",
+    },
+    {
+      testName: "not shared but item type is not allowed",
+      shared: false,
+      defaultTooltipEventType: "axis",
+      validateTooltipEventTypes: ["axis"],
+      expected: "axis",
+    },
+  ];
+
+  it("should return undefined when outside of store context", () => {
+    const spy = vi.fn();
+    const Comp = (): null => {
+      const eventType = useTooltipEventType(undefined);
+      createEffect(
+        () => eventType(),
+        (value) => spy(value),
+      );
+      return null;
+    };
+    render(() => <Comp />);
+    flush();
+    expect(spy).toHaveBeenCalledWith(undefined);
+  });
+
+  test.each(testCases)(
+    "$testName should return $expected",
+    ({ shared, defaultTooltipEventType, validateTooltipEventTypes, expected }) => {
+      const spy = vi.fn();
+      const Comp = (): null => {
+        const eventType = useTooltipEventType(shared);
+        createEffect(
+          () => eventType(),
+          (value) => spy(value),
+        );
+        return null;
+      };
+      const preloadedState: Partial<RechartsRootState> = {
+        options: {
+          defaultTooltipEventType,
+          validateTooltipEventTypes,
+          tooltipPayloadSearcher: arrayTooltipSearcher,
+          chartName: "",
+          eventEmitter: undefined,
+        },
+      };
+      render(() => (
+        <RechartsStoreProvider preloadedState={preloadedState}>
+          <Comp />
+        </RechartsStoreProvider>
+      ));
+      flush();
+      expect(spy).toHaveBeenCalledWith(expected);
+    },
+  );
+});
+
+describe("selectActiveCoordinate", () => {
+  it.each(allTooltipCombinations)(
+    "should return undefined for initial state for $tooltipEventType $trigger",
+    ({ tooltipEventType, trigger }) => {
+      const store = createRechartsStore();
+      const actual = selectActiveCoordinate(store.state, tooltipEventType, trigger, undefined);
+      expect(actual).toEqual(undefined);
+    },
+  );
+
+  it("should return coordinate after setMouseOverAxisIndex", () => {
+    const store = createRechartsStore();
+    store.actions.tooltip.setMouseOverAxisIndex({
+      activeCoordinate: { x: 3, y: 4 },
+      activeDataKey: "uv",
+      activeIndex: "1",
+    });
+    flush();
+    const actual = selectActiveCoordinate(store.state, "axis", "hover", undefined);
+    expect(actual).toEqual({ x: 3, y: 4 });
+  });
+
+  it("should return coordinate after setMouseClickAxisIndex", () => {
+    const store = createRechartsStore();
+    store.actions.tooltip.setMouseClickAxisIndex({
+      activeCoordinate: { x: 7, y: 8 },
+      activeDataKey: "uv",
+      activeIndex: "2",
+    });
+    flush();
+    const actual = selectActiveCoordinate(store.state, "axis", "click", undefined);
+    expect(actual).toEqual({ x: 7, y: 8 });
+  });
+
+  it("should return coordinate after setSyncInteraction", () => {
+    const store = createRechartsStore();
+    store.actions.tooltip.setSyncInteraction({
+      active: true,
+      coordinate: { x: 5, y: 6 },
+      dataKey: "uv",
+      index: "1",
+      label: "Page B",
+      sourceViewBox: { x: 0, y: 0, width: 100, height: 100 },
+      graphicalItemId: undefined,
+    });
+    flush();
+    const actual = selectActiveCoordinate(store.state, "axis", "hover", undefined);
+    expect(actual).toEqual({ x: 5, y: 6 });
+  });
+
+  it("should return coordinates when mouseOverAxisIndex is fired and stop returning them after mouseLeaveChart", () => {
+    const store = createRechartsStore(preloadedTooltipState);
+
+    const initialState = createRechartsStore().state;
+    const expected: Coordinate | PolarCoordinate | undefined = { x: 100, y: 150 };
+    expect(selectActiveCoordinate(initialState, "axis", "hover", undefined)).toBe(undefined);
+
+    store.actions.tooltip.setMouseOverAxisIndex({
+      activeIndex: "1",
+      activeCoordinate: expected,
+      activeDataKey: undefined,
+    });
+    flush();
+
+    expect(selectActiveCoordinate(store.state, "axis", "hover", undefined)).toEqual(expected);
+
+    store.actions.tooltip.mouseLeaveChart();
+    flush();
+
+    expect(selectActiveCoordinate(store.state, "axis", "hover", undefined)).toEqual({
+      x: 100,
+      y: 150,
+    });
+    // the selector stops returning the coordinates but they should still be present in store for the next animation
+    expect(store.state.tooltip.axisInteraction.hover.coordinate).toEqual(expected);
+  });
+
+  it("should return coordinates when mouseClickAxisIndex is fired and keep them after mouseLeaveChart", () => {
+    const store = createRechartsStore(preloadedTooltipState);
+
+    const initialState = createRechartsStore().state;
+    const expected: Coordinate | PolarCoordinate | undefined = { x: 100, y: 150 };
+    expect(selectActiveCoordinate(initialState, "axis", "click", undefined)).toBe(undefined);
+
+    store.actions.tooltip.setMouseClickAxisIndex({
+      activeIndex: "1",
+      activeCoordinate: expected,
+      activeDataKey: undefined,
+    });
+    flush();
+
+    expect(selectActiveCoordinate(store.state, "axis", "click", undefined)).toEqual(expected);
+
+    store.actions.tooltip.mouseLeaveChart();
+    flush();
+
+    expect(selectActiveCoordinate(store.state, "axis", "click", undefined)).toEqual(expected);
+  });
+
+  it("should return coordinates when mouseOverItemIndex is fired and keep them after mouseLeaveItem", () => {
+    const store = createRechartsStore(preloadedTooltipState);
+
+    const initialState = createRechartsStore().state;
+    const expected: Coordinate | PolarCoordinate | undefined = { x: 100, y: 150 };
+    expect(selectActiveCoordinate(initialState, "item", "hover", undefined)).toBe(undefined);
+
+    store.actions.tooltip.setActiveMouseOverItemIndex({
+      activeIndex: "1",
+      activeCoordinate: expected,
+      activeDataKey: undefined,
+      activeGraphicalItemId: "id-1",
+    });
+    flush();
+
+    expect(selectActiveCoordinate(store.state, "item", "hover", undefined)).toEqual(expected);
+
+    // neither of these reset the coordinates and the selector does NOT stop returning them
+    store.actions.tooltip.mouseLeaveItem();
+    store.actions.tooltip.mouseLeaveChart();
+    flush();
+
+    expect(selectActiveCoordinate(store.state, "item", "hover", undefined)).toEqual({
+      x: 100,
+      y: 150,
+    });
+    // the selector stops returning the coordinates but they should still be present in store for the next animation
+    expect(store.state.tooltip.itemInteraction.hover.coordinate).toEqual(expected);
+  });
+
+  it("should return coordinates when mouseClickItemIndex is fired and keep them after mouseLeaveItem", () => {
+    const store = createRechartsStore(preloadedTooltipState);
+
+    const initialState = createRechartsStore().state;
+    const expected: Coordinate | PolarCoordinate | undefined = {
+      x: 100,
+      y: 150,
+    };
+    expect(selectActiveCoordinate(initialState, "item", "click", undefined)).toBe(undefined);
+
+    store.actions.tooltip.setActiveClickItemIndex({
+      activeIndex: "1",
+      activeCoordinate: expected,
+      activeDataKey: undefined,
+      activeGraphicalItemId: "id-1",
+    });
+    flush();
+
+    expect(selectActiveCoordinate(store.state, "item", "click", undefined)).toEqual(expected);
+
+    // neither of these should reset coordinate
+    store.actions.tooltip.mouseLeaveItem();
+    store.actions.tooltip.mouseLeaveChart();
+    flush();
+
+    expect(selectActiveCoordinate(store.state, "item", "click", undefined)).toEqual(expected);
+  });
+});
+
+describe("selectIsTooltipActive", () => {
+  it.each(allTooltipCombinations)(
+    "should return false for initial state for $tooltipEventType $trigger",
+    ({ tooltipEventType, trigger }) => {
+      const store = createRechartsStore();
+      const actual = selectIsTooltipActive(store.state, tooltipEventType, trigger, undefined);
+      expect(actual).toEqual({
+        activeIndex: null,
+        isActive: false,
+      });
+    },
+  );
+
+  it("should return true after setMouseOverAxisIndex", () => {
+    const store = createRechartsStore();
+    store.actions.tooltip.setMouseOverAxisIndex({
+      activeCoordinate: { x: 0, y: 0 },
+      activeDataKey: "uv",
+      activeIndex: "1",
+    });
+    flush();
+    const actual = selectIsTooltipActive(store.state, "axis", "hover", undefined);
+    expect(actual).toEqual({
+      activeIndex: "1",
+      isActive: true,
+    });
+  });
+
+  it("should return true after setSyncInteraction", () => {
+    const store = createRechartsStore();
+    store.actions.tooltip.setSyncInteraction({
+      active: true,
+      dataKey: "uv",
+      index: "1",
+      label: "Page B",
+      coordinate: { x: 0, y: 0 },
+      sourceViewBox: { x: 0, y: 0, width: 100, height: 100 },
+      graphicalItemId: undefined,
+    });
+    flush();
+    const actual = selectIsTooltipActive(store.state, "axis", "hover", undefined);
+    expect(actual).toEqual({
+      activeIndex: "1",
+      isActive: true,
+    });
+  });
+
+  describe.each(allTooltipCombinations)(
+    "tooltipEventType: $tooltipEventType tooltipTrigger: $trigger",
+    ({ tooltipEventType, trigger }) => {
+      it("should return true if a defaultIndex has been set", () => {
+        const store = createRechartsStore();
+        expect(selectIsTooltipActive(store.state, tooltipEventType, trigger, "1")).toEqual({
+          isActive: true,
+          activeIndex: "1",
+        });
+      });
+    },
+  );
+
+  describe("trigger: hover", () => {
+    const trigger = "hover";
+
+    describe.each(allTooltipEventTypes)("tooltipEventType: %s", (tooltipEventType) => {
+      it("should return false if user is clicking on a graphical item", () => {
+        // in browser, this is difficult to reproduce - one usually has to mouse over first before clicking
+        const store = createRechartsStore();
+        store.actions.tooltip.setActiveClickItemIndex({
+          activeIndex: "1",
+          activeDataKey: "dataKey1",
+          activeCoordinate,
+          activeGraphicalItemId: "foo",
+        });
+        flush();
+        expect(selectIsTooltipActive(store.state, tooltipEventType, trigger, undefined)).toEqual({
+          isActive: false,
+          activeIndex: null,
+        });
+      });
+
+      it("should return false if user is clicking on an axis", () => {
+        // in browser, this is difficult to reproduce - one usually has to mouse over first before clicking
+        const store = createRechartsStore();
+        store.actions.tooltip.setMouseClickAxisIndex({
+          activeIndex: "1",
+          activeDataKey: "dataKey1",
+          activeCoordinate,
+        });
+        flush();
+        expect(selectIsTooltipActive(store.state, tooltipEventType, trigger, undefined)).toEqual({
+          isActive: false,
+          activeIndex: null,
+        });
+      });
+    });
+
+    describe("tooltipEventType: item", () => {
+      const tooltipEventType = "item";
+      it("should return true if user is hovering over a graphical item but not axis", () => {
+        const store = createRechartsStore();
+        store.actions.tooltip.setMouseOverAxisIndex({
+          activeIndex: "1",
+          activeDataKey: undefined,
+          activeCoordinate,
+        });
+        flush();
+        expect(selectIsTooltipActive(store.state, tooltipEventType, trigger, undefined)).toEqual({
+          isActive: false,
+          activeIndex: null,
+        });
+        store.actions.tooltip.setActiveMouseOverItemIndex({
+          activeIndex: "1",
+          activeDataKey: "dataKey1",
+          activeCoordinate,
+          activeGraphicalItemId: "foo",
+        });
+        flush();
+        expect(selectIsTooltipActive(store.state, tooltipEventType, trigger, undefined)).toEqual({
+          isActive: true,
+          activeIndex: "1",
+        });
+        store.actions.tooltip.mouseLeaveItem();
+        flush();
+        expect(selectIsTooltipActive(store.state, tooltipEventType, trigger, undefined)).toEqual({
+          isActive: false,
+          activeIndex: null,
+        });
+      });
+
+      it("should return false after mouse leaves the chart element", () => {
+        const store = createRechartsStore();
+        store.actions.tooltip.setActiveMouseOverItemIndex({
+          activeIndex: "1",
+          activeDataKey: "dataKey1",
+          activeCoordinate,
+          activeGraphicalItemId: "id-1",
+        });
+        flush();
+        expect(selectIsTooltipActive(store.state, tooltipEventType, trigger, undefined)).toEqual({
+          isActive: true,
+          activeIndex: "1",
+        });
+        store.actions.tooltip.mouseLeaveChart();
+        flush();
+        expect(selectIsTooltipActive(store.state, tooltipEventType, trigger, undefined)).toEqual({
+          isActive: false,
+          activeIndex: null,
+        });
+      });
+    });
+
+    describe("tooltipEventType: axis", () => {
+      const tooltipEventType = "axis";
+      it(`should return true if user is hovering over an axis,
+          and then continue returning true when user hovers over and then leaves a graphical item`, () => {
+        const store = createRechartsStore();
+        store.actions.tooltip.setActiveMouseOverItemIndex({
+          activeIndex: "1",
+          activeDataKey: "dataKey1",
+          activeCoordinate,
+          activeGraphicalItemId: "foo",
+        });
+        flush();
+        expect(selectIsTooltipActive(store.state, tooltipEventType, trigger, undefined)).toEqual({
+          isActive: false,
+          activeIndex: null,
+        });
+        store.actions.tooltip.setMouseOverAxisIndex({
+          activeIndex: "1",
+          activeDataKey: undefined,
+          activeCoordinate,
+        });
+        flush();
+        expect(selectIsTooltipActive(store.state, tooltipEventType, trigger, undefined)).toEqual({
+          isActive: true,
+          activeIndex: "1",
+        });
+        store.actions.tooltip.setActiveMouseOverItemIndex({
+          activeIndex: "1",
+          activeDataKey: "dataKey1",
+          activeCoordinate,
+          activeGraphicalItemId: "foo",
+        });
+        flush();
+        expect(selectIsTooltipActive(store.state, tooltipEventType, trigger, undefined)).toEqual({
+          isActive: true,
+          activeIndex: "1",
+        });
+        store.actions.tooltip.mouseLeaveItem();
+        flush();
+        expect(selectIsTooltipActive(store.state, tooltipEventType, trigger, undefined)).toEqual({
+          isActive: true,
+          activeIndex: "1",
+        });
+      });
+
+      it.todo("should return false after mouse leaves the chart element");
+    });
+  });
+
+  describe("trigger: click", () => {
+    const trigger = "click";
+
+    describe.each(allTooltipEventTypes)("tooltipEventType: %s", (tooltipEventType) => {
+      it("should return false if user is hovering over a graphical item", () => {
+        const store = createRechartsStore();
+        store.actions.tooltip.setActiveMouseOverItemIndex({
+          activeIndex: "1",
+          activeDataKey: "dataKey1",
+          activeCoordinate,
+          activeGraphicalItemId: "foo",
+        });
+        flush();
+        expect(selectIsTooltipActive(store.state, tooltipEventType, trigger, undefined)).toEqual({
+          isActive: false,
+          activeIndex: null,
+        });
+      });
+
+      it("should return false if user is hovering over an axis", () => {
+        const store = createRechartsStore();
+        store.actions.tooltip.setMouseOverAxisIndex({
+          activeIndex: null,
+          activeDataKey: undefined,
+          activeCoordinate,
+        });
+        flush();
+        expect(selectIsTooltipActive(store.state, tooltipEventType, trigger, undefined)).toEqual({
+          isActive: false,
+          activeIndex: null,
+        });
+      });
+    });
+
+    describe("tooltipEventType: item", () => {
+      const tooltipEventType = "item";
+      it(`should return true if user is clicking a graphical item and continue returning true forever,
+          because recharts does not allow ever turning off a tooltip that was triggered by a click`, () => {
+        const store = createRechartsStore();
+        store.actions.tooltip.setActiveClickItemIndex({
+          activeIndex: "1",
+          activeDataKey: "dataKey1",
+          activeCoordinate,
+          activeGraphicalItemId: "foo",
+        });
+        flush();
+        expect(selectIsTooltipActive(store.state, tooltipEventType, trigger, undefined)).toEqual({
+          isActive: true,
+          activeIndex: "1",
+        });
+        store.actions.tooltip.setActiveClickItemIndex({
+          activeIndex: "2",
+          activeDataKey: undefined,
+          activeCoordinate,
+          activeGraphicalItemId: "bar",
+        });
+        flush();
+        expect(selectIsTooltipActive(store.state, tooltipEventType, trigger, undefined)).toEqual({
+          isActive: true,
+          activeIndex: "2",
+        });
+        store.actions.tooltip.mouseLeaveItem();
+        flush();
+        expect(selectIsTooltipActive(store.state, tooltipEventType, trigger, undefined)).toEqual({
+          isActive: true,
+          activeIndex: "2",
+        });
+        store.actions.tooltip.setMouseClickAxisIndex({
+          activeIndex: "1",
+          activeDataKey: undefined,
+          activeCoordinate,
+        });
+        flush();
+        expect(selectIsTooltipActive(store.state, tooltipEventType, trigger, undefined)).toEqual({
+          isActive: true,
+          activeIndex: "2",
+        });
+      });
+
+      it("should return false if user is clicking on an axis", () => {
+        const store = createRechartsStore();
+        store.actions.tooltip.setMouseClickAxisIndex({
+          activeIndex: "1",
+          activeDataKey: "dataKey1",
+          activeCoordinate,
+        });
+        flush();
+        expect(selectIsTooltipActive(store.state, tooltipEventType, trigger, undefined)).toEqual({
+          isActive: false,
+          activeIndex: null,
+        });
+      });
+    });
+
+    describe("tooltipEventType: axis", () => {
+      const tooltipEventType = "axis";
+      it("should return true if user is clicking on an axis, and continue returning true forever", () => {
+        const store = createRechartsStore();
+        store.actions.tooltip.setMouseClickAxisIndex({
+          activeIndex: "1",
+          activeDataKey: "dataKey1",
+          activeCoordinate,
+        });
+        flush();
+        expect(selectIsTooltipActive(store.state, tooltipEventType, trigger, undefined)).toEqual({
+          isActive: true,
+          activeIndex: "1",
+        });
+        store.actions.tooltip.setMouseClickAxisIndex({
+          activeIndex: "2",
+          activeDataKey: undefined,
+          activeCoordinate,
+        });
+        flush();
+        expect(selectIsTooltipActive(store.state, tooltipEventType, trigger, undefined)).toEqual({
+          isActive: true,
+          activeIndex: "2",
+        });
+        store.actions.tooltip.mouseLeaveItem();
+        flush();
+        expect(selectIsTooltipActive(store.state, tooltipEventType, trigger, undefined)).toEqual({
+          isActive: true,
+          activeIndex: "2",
+        });
+        store.actions.tooltip.setActiveClickItemIndex({
+          activeIndex: "1",
+          activeDataKey: "dataKey1",
+          activeCoordinate,
+          activeGraphicalItemId: "id-1",
+        });
+        flush();
+        expect(selectIsTooltipActive(store.state, tooltipEventType, trigger, undefined)).toEqual({
+          isActive: true,
+          activeIndex: "2",
+        });
+      });
+    });
+  });
+});
+
+describe("selectActiveIndexFromChartPointer", () => {
+  const exampleChartPointer: RelativePointer = {
+    relativeX: 10,
+    relativeY: 10,
+  };
+
+  it("should return active props after mouse hover", () => {
+    const tooltipActiveSpy = vi.fn();
+    mockGetBoundingClientRect({ width: 100, height: 100 });
+    const Comp = (): null => {
+      const props = useAppSelectorWithStableTest((state) =>
+        selectActivePropsFromChartPointer(state, exampleChartPointer),
+      );
+      createEffect(
+        () => props(),
+        (value) => tooltipActiveSpy(value),
+      );
+      return null;
+    };
+    render(() => (
+      <LineChart data={pageData} width={100} height={100}>
+        <Line dataKey="pv" />
+        <Comp />
+      </LineChart>
+    ));
+    flush();
+
+    expect(tooltipActiveSpy).toHaveBeenLastCalledWith({
+      activeCoordinate: {
+        x: 5,
+        y: 10,
+      },
+      activeIndex: "0",
+    });
+  });
+});
+
+describe("selectTooltipState.tooltipItemPayloads", () => {
+  it("should return undefined when called outside of store context", () => {
+    const spy = vi.fn();
+    const Comp = (): null => {
+      const payload = useAppSelectorWithStableTest(selectTooltipState);
+      createEffect(
+        () => payload(),
+        (value) => spy(value),
+      );
+      return null;
+    };
+    render(() => <Comp />);
+    flush();
+    expect(spy).toHaveBeenCalledWith(undefined);
+  });
+
+  it("should return empty array for initial state", () => {
+    const store = createRechartsStore();
+    expect(selectTooltipState(store.state).tooltipItemPayloads).toEqual([]);
+  });
+
+  it("should return empty array in an empty chart", () => {
+    const spy = vi.fn();
+    const Comp = (): null => {
+      const tooltipState = useAppSelectorWithStableTest(selectTooltipState);
+      createEffect(
+        () => tooltipState()?.tooltipItemPayloads.map((tp) => tp.dataDefinedOnItem),
+        (value) => spy(value),
+      );
+      return null;
+    };
+    render(() => (
+      <BarChart data={PageData} width={100} height={100}>
+        <Comp />
+      </BarChart>
+    ));
+    flush();
+    expectLastCalledWith(spy, []);
+  });
+
+  it("should return all tooltip payloads defined on graphical items in ComposedChart", () => {
+    const spy = vi.fn();
+    const Comp = (): null => {
+      const tooltipState = useAppSelectorWithStableTest(selectTooltipState);
+      createEffect(
+        () => tooltipState()?.tooltipItemPayloads.map((tp) => tp.dataDefinedOnItem),
+        (value) => spy(value),
+      );
+      return null;
+    };
+    const data1 = [{ x: 1 }, { x: 2 }, { x: 3 }];
+    const data2 = [{ x: 10 }, { x: 20 }, { x: 30 }];
+    render(() => (
+      <ComposedChart data={PageData} width={100} height={100}>
+        <Area dataKey="x" data={data1} />
+        <Area dataKey="x" data={data2} />
+        <Line data={[4, 5, 6]} />
+        <Line data={[40, 50, 60]} />
+        <Scatter data={[{ x: 7 }, { x: 8 }, { x: 9 }]} dataKey="x" />
+        <Scatter data={[{ y: 70 }, { y: 80 }, { y: 90 }]} dataKey="y" />
+        <Comp />
+      </ComposedChart>
+    ));
+    flush();
+    // two of these elements will send the data as defined; Scatter decides to pre-chew it
+    expectLastCalledWith(spy, [
+      data1,
+      data2,
+      [4, 5, 6],
+      [40, 50, 60],
+      [
+        [
+          {
+            dataKey: "x",
+            graphicalItemId: expect.stringMatching(/^recharts-scatter-.+/),
+            name: undefined,
+            payload: {
+              x: 7,
+            },
+            type: undefined,
+            unit: "",
+            value: 7,
+          },
+          {
+            dataKey: "x",
+            graphicalItemId: expect.stringMatching(/^recharts-scatter-.+/),
+            name: undefined,
+            payload: {
+              x: 7,
+            },
+            type: undefined,
+            unit: "",
+            value: 7,
+          },
+        ],
+        [
+          {
+            dataKey: "x",
+            graphicalItemId: expect.stringMatching(/^recharts-scatter-.+/),
+            name: undefined,
+            payload: {
+              x: 8,
+            },
+            type: undefined,
+            unit: "",
+            value: 8,
+          },
+          {
+            dataKey: "x",
+            graphicalItemId: expect.stringMatching(/^recharts-scatter-.+/),
+            name: undefined,
+            payload: {
+              x: 8,
+            },
+            type: undefined,
+            unit: "",
+            value: 8,
+          },
+        ],
+        [
+          {
+            dataKey: "x",
+            graphicalItemId: expect.stringMatching(/^recharts-scatter-.+/),
+            name: undefined,
+            payload: {
+              x: 9,
+            },
+            type: undefined,
+            unit: "",
+            value: 9,
+          },
+          {
+            dataKey: "x",
+            graphicalItemId: expect.stringMatching(/^recharts-scatter-.+/),
+            name: undefined,
+            payload: {
+              x: 9,
+            },
+            type: undefined,
+            unit: "",
+            value: 9,
+          },
+        ],
+      ],
+      [
+        [
+          {
+            dataKey: "y",
+            graphicalItemId: expect.stringMatching(/^recharts-scatter-.+/),
+            name: undefined,
+            payload: {
+              y: 70,
+            },
+            type: undefined,
+            unit: "",
+            value: 70,
+          },
+          {
+            dataKey: "y",
+            graphicalItemId: expect.stringMatching(/^recharts-scatter-.+/),
+            name: undefined,
+            payload: {
+              y: 70,
+            },
+            type: undefined,
+            unit: "",
+            value: 70,
+          },
+        ],
+        [
+          {
+            dataKey: "y",
+            graphicalItemId: expect.stringMatching(/^recharts-scatter-.+/),
+            name: undefined,
+            payload: {
+              y: 80,
+            },
+            type: undefined,
+            unit: "",
+            value: 80,
+          },
+          {
+            dataKey: "y",
+            graphicalItemId: expect.stringMatching(/^recharts-scatter-.+/),
+            name: undefined,
+            payload: {
+              y: 80,
+            },
+            type: undefined,
+            unit: "",
+            value: 80,
+          },
+        ],
+        [
+          {
+            dataKey: "y",
+            graphicalItemId: expect.stringMatching(/^recharts-scatter-.+/),
+            name: undefined,
+            payload: {
+              y: 90,
+            },
+            type: undefined,
+            unit: "",
+            value: 90,
+          },
+          {
+            dataKey: "y",
+            graphicalItemId: expect.stringMatching(/^recharts-scatter-.+/),
+            name: undefined,
+            payload: {
+              y: 90,
+            },
+            type: undefined,
+            unit: "",
+            value: 90,
+          },
+        ],
+      ],
+    ]);
+  });
+
+  it("should return all payloads in PieChart", () => {
+    const spy = vi.fn();
+    const Comp = (): null => {
+      const tooltipState = useAppSelectorWithStableTest(selectTooltipState);
+      createEffect(
+        () => tooltipState()?.tooltipItemPayloads.map((tp) => tp.dataDefinedOnItem),
+        (value) => spy(value),
+      );
+      return null;
+    };
+    render(() => (
+      <PieChart width={100} height={100}>
+        <Comp />
+        <Pie data={[{ x: 1 }, { x: 2 }, { x: 3 }]} dataKey="x" id="pie-1" />
+        <Pie data={[{ y: 10 }, { y: 20 }, { y: 30 }]} dataKey="y" id="pie-2" />
+      </PieChart>
+    ));
+    flush();
+    expectLastCalledWith(spy, [
+      [
+        [
+          {
+            color: "#808080",
+            dataKey: "x",
+            fill: "#808080",
+            name: 0,
+            payload: { x: 1 },
+            type: undefined,
+            value: 1,
+            graphicalItemId: "pie-1",
+          },
+        ],
+        [
+          {
+            color: "#808080",
+            dataKey: "x",
+            fill: "#808080",
+            name: 1,
+            payload: { x: 2 },
+            type: undefined,
+            value: 2,
+            graphicalItemId: "pie-1",
+          },
+        ],
+        [
+          {
+            color: "#808080",
+            dataKey: "x",
+            fill: "#808080",
+            name: 2,
+            payload: { x: 3 },
+            type: undefined,
+            value: 3,
+            graphicalItemId: "pie-1",
+          },
+        ],
+      ],
+      [
+        [
+          {
+            color: "#808080",
+            dataKey: "y",
+            fill: "#808080",
+            name: 0,
+            payload: { y: 10 },
+            type: undefined,
+            value: 10,
+            graphicalItemId: "pie-2",
+          },
+        ],
+        [
+          {
+            color: "#808080",
+            dataKey: "y",
+            fill: "#808080",
+            name: 1,
+            payload: { y: 20 },
+            type: undefined,
+            value: 20,
+            graphicalItemId: "pie-2",
+          },
+        ],
+        [
+          {
+            color: "#808080",
+            dataKey: "y",
+            fill: "#808080",
+            name: 2,
+            payload: { y: 30 },
+            type: undefined,
+            value: 30,
+            graphicalItemId: "pie-2",
+          },
+        ],
+      ],
+    ]);
+  });
+});
+
+describe("selectActiveIndex", () => {
+  it.each(allTooltipCombinations)(
+    "should return null for initial state for $tooltipEventType $trigger",
+    ({ tooltipEventType, trigger }) => {
+      const store = createRechartsStore();
+      const actual = selectActiveIndex(store.state, tooltipEventType, trigger, undefined);
+      expect(actual).toEqual(null);
+    },
+  );
+
+  it("should return index after setMouseOverAxisIndex", () => {
+    const store = createRechartsStore();
+    store.actions.tooltip.setMouseOverAxisIndex({
+      activeCoordinate: { x: 0, y: 0 },
+      activeDataKey: "uv",
+      activeIndex: "1",
+    });
+    flush();
+    const actual = selectActiveIndex(store.state, "axis", "hover", undefined);
+    expect(actual).toEqual("1");
+  });
+
+  it("should return index after setSyncInteraction", () => {
+    const store = createRechartsStore();
+    store.actions.tooltip.setSyncInteraction({
+      active: true,
+      dataKey: "uv",
+      index: "2",
+      label: "Page B",
+      coordinate: { x: 0, y: 0 },
+      sourceViewBox: { x: 0, y: 0, width: 100, height: 100 },
+      graphicalItemId: undefined,
+    });
+    flush();
+    const actual = selectActiveIndex(store.state, "axis", "hover", undefined);
+    expect(actual).toEqual("2");
+  });
+
+  it("should return null for initial state", () => {
+    const initialState = createRechartsStore().state;
+    const expected: TooltipIndex = null;
+    expect(selectActiveIndex(initialState, "axis", "hover", undefined)).toBe(expected);
+    expect(selectActiveIndex(initialState, "axis", "click", undefined)).toBe(expected);
+    expect(selectActiveIndex(initialState, "item", "hover", undefined)).toBe(expected);
+    expect(selectActiveIndex(initialState, "item", "click", undefined)).toBe(expected);
+  });
+
+  it("should return defaultIndex if it is defined", () => {
+    const initialState = createRechartsStore().state;
+    const expected: TooltipIndex = "7";
+    expect(selectActiveIndex(initialState, "axis", "hover", "7")).toBe(expected);
+    expect(selectActiveIndex(initialState, "axis", "click", "7")).toBe(expected);
+    expect(selectActiveIndex(initialState, "item", "hover", "7")).toBe(expected);
+    expect(selectActiveIndex(initialState, "item", "click", "7")).toBe(expected);
+  });
+
+  it("should ignore defaultIndex if item hover index is set and active", () => {
+    const state = produceState((draft) => {
+      draft.tooltip.itemInteraction.hover.active = true;
+      draft.tooltip.itemInteraction.hover.index = "7";
+    });
+    expect(selectActiveIndex(state, "axis", "hover", "8")).toBe("8" satisfies TooltipIndex);
+    expect(selectActiveIndex(state, "axis", "click", "8")).toBe("8" satisfies TooltipIndex);
+    expect(selectActiveIndex(state, "item", "hover", "8")).toBe("7" satisfies TooltipIndex);
+    expect(selectActiveIndex(state, "item", "click", "8")).toBe("8" satisfies TooltipIndex);
+  });
+
+  it("should return item hover index", () => {
+    const state = produceState((draft) => {
+      draft.tooltip.itemInteraction.hover.active = true;
+      draft.tooltip.itemInteraction.hover.index = "7";
+    });
+    const expected: TooltipIndex = "7";
+    expect(selectActiveIndex(state, "item", "hover", "9")).toBe(expected);
+  });
+
+  it("should return item click index", () => {
+    const state = produceState((draft) => {
+      draft.tooltip.itemInteraction.click.active = true;
+      draft.tooltip.itemInteraction.click.index = "7";
+    });
+    const expected: TooltipIndex = "7";
+    expect(selectActiveIndex(state, "item", "click", "11")).toBe(expected);
+  });
+
+  it("should return axis hover index", () => {
+    const state = produceState((draft) => {
+      draft.tooltip.axisInteraction.hover.active = true;
+      draft.tooltip.axisInteraction.hover.index = "7";
+    });
+    const expected: TooltipIndex = "7";
+    expect(selectActiveIndex(state, "axis", "hover", "13")).toBe(expected);
+  });
+
+  it("should return axis click index", () => {
+    const state = produceState((draft) => {
+      draft.tooltip.axisInteraction.click.active = true;
+      draft.tooltip.axisInteraction.click.index = "7";
+    });
+    const expected: TooltipIndex = "7";
+    expect(selectActiveIndex(state, "axis", "click", "17")).toBe(expected);
+  });
+});
+
+describe("selectTooltipPayload", () => {
+  it.each(allTooltipCombinations)(
+    "should return undefined when outside of store context for $tooltipEventType $trigger",
+    ({ tooltipEventType, trigger }) => {
+      const spy = vi.fn();
+      const Comp = (): null => {
+        const payload = useAppSelector((state) =>
+          selectTooltipPayload(state, tooltipEventType, trigger, undefined),
+        );
+        createEffect(
+          () => payload(),
+          (value) => spy(value),
+        );
+        return null;
+      };
+      render(() => <Comp />);
+      flush();
+      expect(spy).toHaveBeenCalledWith(undefined);
+    },
+  );
+
+  it.each(allTooltipCombinations)(
+    "initial state should return undefined for $tooltipEventType $trigger",
+    ({ tooltipEventType, trigger }) => {
+      const store = createRechartsStore();
+      expect(selectTooltipPayload(store.state, tooltipEventType, trigger, undefined)).toEqual(
+        undefined,
+      );
+    },
+  );
+
+  it("should return settings and data from axis hover, if activeIndex is set for the item", () => {
+    const store = createRechartsStore(preloadedTooltipState);
+    const tooltipSettings1: TooltipPayloadConfiguration = {
+      getPosition: noop,
+      settings: { nameKey: "y", graphicalItemId: "graphicalItemId1" },
+      dataDefinedOnItem: undefined,
+    };
+    const expectedEntry1: TooltipPayloadEntry = {
+      payload: undefined,
+      dataKey: undefined,
+      name: undefined,
+      nameKey: "y",
+      value: undefined,
+      graphicalItemId: "graphicalItemId1",
+    };
+    const tooltipSettings2: TooltipPayloadConfiguration = {
+      getPosition: noop,
+      settings: {
+        stroke: "red",
+        fill: "green",
+        dataKey: "x",
+        nameKey: "y",
+        name: "foo",
+        unit: "bar",
+        graphicalItemId: "graphicalItemId2",
+      },
+      dataDefinedOnItem: [
+        { x: 8, y: 9 },
+        { x: 10, y: 11 },
+      ],
+    };
+    const expectedEntry2: TooltipPayloadEntry = {
+      name: 11,
+      dataKey: "x",
+      nameKey: "y",
+      stroke: "red",
+      fill: "green",
+      payload: { x: 10, y: 11 },
+      value: 10,
+      unit: "bar",
+      graphicalItemId: "graphicalItemId2",
+    };
+    store.actions.tooltip.addTooltipEntrySettings(tooltipSettings1);
+    store.actions.tooltip.addTooltipEntrySettings(tooltipSettings2);
+    flush();
+    expect(selectTooltipPayload(store.state, "axis", "hover", undefined)).toEqual(undefined);
+    store.actions.tooltip.setMouseOverAxisIndex({
+      activeIndex: "1",
+      activeDataKey: undefined,
+      activeCoordinate: tooltipActiveCoordinate,
+    });
+    flush();
+    expect(selectTooltipPayload(store.state, "axis", "hover", undefined)).toEqual([
+      expectedEntry1,
+      expectedEntry2,
+    ]);
+  });
+
+  it("should return settings and data if defaultIndex is provided", () => {
+    const store = createRechartsStore(preloadedTooltipState);
+    const tooltipSettings1: TooltipPayloadConfiguration = {
+      getPosition: noop,
+      settings: { nameKey: "y", graphicalItemId: "graphicalItemId1" },
+      dataDefinedOnItem: undefined,
+    };
+    const expectedEntry1: TooltipPayloadEntry = {
+      payload: undefined,
+      dataKey: undefined,
+      name: undefined,
+      nameKey: "y",
+      value: undefined,
+      graphicalItemId: "graphicalItemId1",
+    };
+    const tooltipSettings2: TooltipPayloadConfiguration = {
+      getPosition: noop,
+      settings: {
+        stroke: "red",
+        fill: "green",
+        dataKey: "x",
+        nameKey: "y",
+        name: "foo",
+        unit: "bar",
+        graphicalItemId: "graphicalItemId2",
+      },
+      dataDefinedOnItem: [
+        { x: 8, y: 9 },
+        { x: 10, y: 11 },
+      ],
+    };
+    const expectedEntry2: TooltipPayloadEntry = {
+      name: 11,
+      dataKey: "x",
+      nameKey: "y",
+      stroke: "red",
+      fill: "green",
+      payload: { x: 10, y: 11 },
+      value: 10,
+      unit: "bar",
+      graphicalItemId: "graphicalItemId2",
+    };
+    store.actions.tooltip.addTooltipEntrySettings(tooltipSettings1);
+    store.actions.tooltip.addTooltipEntrySettings(tooltipSettings2);
+    flush();
+    expect(selectTooltipPayload(store.state, "axis", "hover", "1")).toEqual([
+      expectedEntry1,
+      expectedEntry2,
+    ]);
+  });
+
+  it("should fill in chartData, if it is not defined on the item for item hover", () => {
+    const store = createRechartsStore(preloadedTooltipState);
+    const tooltipSettings: TooltipPayloadConfiguration = {
+      getPosition: noop,
+      settings: {
+        stroke: "red",
+        fill: "green",
+        dataKey: "y",
+        nameKey: "x",
+        name: "foo",
+        unit: "bar",
+        graphicalItemId: "graphicalItemId1",
+      },
+      dataDefinedOnItem: undefined,
+    };
+    store.actions.tooltip.addTooltipEntrySettings(tooltipSettings);
+    store.actions.chartData.setChartData([
+      { x: 1, y: 2 },
+      { x: 3, y: 4 },
+    ]);
+    store.actions.tooltip.setActiveMouseOverItemIndex({
+      activeIndex: "0",
+      activeDataKey: "y",
+      activeCoordinate: tooltipActiveCoordinate,
+      activeGraphicalItemId: tooltipSettings.settings.graphicalItemId,
+    });
+    flush();
+    const expectedEntry: TooltipPayloadEntry = {
+      name: 1,
+      dataKey: "y",
+      nameKey: "x",
+      stroke: "red",
+      fill: "green",
+      payload: { x: 1, y: 2 },
+      value: 2,
+      unit: "bar",
+      graphicalItemId: "graphicalItemId1",
+    };
+    expect(selectTooltipPayload(store.state, "item", "hover", undefined)).toEqual([expectedEntry]);
+  });
+
+  it("should return sliced data if set by Brush for item hover", () => {
+    const store = createRechartsStore(preloadedTooltipState);
+    const tooltipSettings: TooltipPayloadConfiguration = {
+      getPosition: noop,
+      settings: {
+        stroke: "red",
+        fill: "green",
+        dataKey: "y",
+        nameKey: "x",
+        name: "foo",
+        graphicalItemId: "graphicalItemId3",
+      },
+      dataDefinedOnItem: [
+        { x: 1, y: 2 },
+        { x: 3, y: 4 },
+      ],
+    };
+    store.actions.tooltip.addTooltipEntrySettings(tooltipSettings);
+    store.actions.chartData.setChartData([
+      { x: 1, y: 2 },
+      { x: 3, y: 4 },
+    ]);
+    flush();
+    expect(selectTooltipPayload(store.state, "item", "hover", undefined)).toEqual(undefined);
+    store.actions.tooltip.setActiveMouseOverItemIndex({
+      activeIndex: "0",
+      activeDataKey: "y",
+      activeCoordinate: tooltipActiveCoordinate,
+      activeGraphicalItemId: tooltipSettings.settings.graphicalItemId,
+    });
+    store.actions.chartData.setDataStartEndIndexes({ startIndex: 1, endIndex: 10 });
+    flush();
+    const expectedEntry: TooltipPayloadEntry = {
+      name: 3,
+      dataKey: "y",
+      nameKey: "x",
+      stroke: "red",
+      fill: "green",
+      payload: { x: 3, y: 4 },
+      value: 4,
+      graphicalItemId: "graphicalItemId3",
+    };
+    expect(selectTooltipPayload(store.state, "item", "hover", undefined)).toEqual([expectedEntry]);
+  });
+
+  it("should return array of payloads for Scatter because Scatter naturally does its own special thing", () => {
+    const chartDataState: ChartDataState = initialChartDataState;
+    const actual: TooltipPayload | undefined = combineTooltipPayload(
+      [exampleTooltipPayloadConfiguration1],
+      "0",
+      chartDataState,
+      undefined,
+      undefined,
+      arrayTooltipSearcher,
+      "item",
+    );
+    const expectedEntry1: TooltipPayloadEntry = {
+      name: "stature",
+      color: "color",
+      fill: "fill",
+      unit: "cm",
+      value: 100,
+      payload: { x: 100, y: 200, z: 200 },
+      dataKey: "x",
+      nameKey: "nameKey1",
+      graphicalItemId: "graphicalItemId1",
+    };
+    const expectedEntry2: TooltipPayloadEntry = {
+      name: "weight",
+      color: "color",
+      fill: "fill",
+      unit: "kg",
+      value: 200,
+      payload: { x: 100, y: 200, z: 200 },
+      dataKey: "y",
+      nameKey: "nameKey1",
+      graphicalItemId: "graphicalItemId1",
+    };
+    expect(actual).toEqual([expectedEntry1, expectedEntry2]);
+  });
+
+  it("should use dataKey from tooltipAxis, if item dataKey is undefined", () => {
+    const tooltipPayloadConfiguration: TooltipPayloadConfiguration = {
+      settings: { nameKey: undefined, graphicalItemId: "graphicalItemId1" },
+      dataDefinedOnItem: [],
+      getPosition: noop,
+    };
+    const chartDataState: ChartDataState = initialChartDataState;
+    const actual: TooltipPayload | undefined = combineTooltipPayload(
+      [tooltipPayloadConfiguration],
+      "0",
+      chartDataState,
+      "dataKeyOnAxis",
+      undefined,
+      arrayTooltipSearcher,
+      "axis",
+    );
+    const expected: TooltipPayloadEntry = {
+      dataKey: "dataKeyOnAxis",
+      payload: undefined,
+      value: undefined,
+      graphicalItemId: "graphicalItemId1",
+    };
+    expect(actual).toEqual([expected]);
+  });
+});
+
+describe("selectTooltipPayloadConfigurations", () => {
+  let exampleStore: ReturnType<typeof createRechartsStore>;
+
+  beforeEach(() => {
+    exampleStore = createRechartsStore();
+    exampleStore.actions.tooltip.addTooltipEntrySettings(exampleTooltipPayloadConfiguration1);
+    exampleStore.actions.tooltip.addTooltipEntrySettings(exampleTooltipPayloadConfiguration2);
+    flush();
+  });
+
+  describe.each(allTooltipCombinations)(
+    "tooltipEventType: $tooltipEventType tooltipTrigger: $trigger",
+    ({ tooltipEventType, trigger }) => {
+      it("should return undefined when outside of store context", () => {
+        const spy = vi.fn();
+        const Comp = (): null => {
+          const result = useAppSelector((state) =>
+            selectTooltipPayloadConfigurations(state, tooltipEventType, trigger, undefined),
+          );
+          createEffect(
+            () => result(),
+            (value) => spy(value),
+          );
+          return null;
+        };
+        render(() => <Comp />);
+        flush();
+        expect(spy).toHaveBeenCalledWith(undefined);
+      });
+
+      it("should return empty array from empty state", () => {
+        const store = createRechartsStore();
+        expect(
+          selectTooltipPayloadConfigurations(store.state, tooltipEventType, trigger, undefined),
+        ).toEqual([]);
+      });
+    },
+  );
+
+  describe.each<TooltipTrigger>(["hover", "click"])(
+    'tooltipEventType: "axis" tooltipTrigger: %s',
+    (trigger) => {
+      it("should return unfiltered configurations with tooltipEventType: axis", () => {
+        const expected: ReadonlyArray<TooltipPayloadConfiguration> = [
+          exampleTooltipPayloadConfiguration1,
+          exampleTooltipPayloadConfiguration2,
+        ];
+        expect(
+          selectTooltipPayloadConfigurations(exampleStore.state, "axis", trigger, undefined),
+        ).toEqual(expected);
+      });
+    },
+  );
+
+  it("should filter by dataKey with tooltipEventType: item and trigger: hover", () => {
+    exampleStore.actions.tooltip.setActiveMouseOverItemIndex({
+      activeIndex: "1",
+      activeDataKey: "dataKey1",
+      activeCoordinate: undefined,
+      activeGraphicalItemId: exampleTooltipPayloadConfiguration1.settings.graphicalItemId,
+    });
+    flush();
+    expect(
+      selectTooltipPayloadConfigurations(exampleStore.state, "item", "hover", undefined),
+    ).toEqual([exampleTooltipPayloadConfiguration1]);
+    exampleStore.actions.tooltip.setActiveMouseOverItemIndex({
+      activeIndex: "1",
+      activeDataKey: "dataKey2",
+      activeCoordinate: undefined,
+      activeGraphicalItemId: exampleTooltipPayloadConfiguration2.settings.graphicalItemId,
+    });
+    flush();
+    expect(
+      selectTooltipPayloadConfigurations(exampleStore.state, "item", "hover", undefined),
+    ).toEqual([exampleTooltipPayloadConfiguration2]);
+  });
+
+  it("should return nothing if the tooltipEventType is hover but the only interactions are clicks", () => {
+    exampleStore.actions.tooltip.setActiveClickItemIndex({
+      activeIndex: "1",
+      activeDataKey: "dataKey1",
+      activeGraphicalItemId: "foo",
+      activeCoordinate: undefined,
+    });
+    flush();
+    expect(
+      selectTooltipPayloadConfigurations(exampleStore.state, "item", "hover", undefined),
+    ).toEqual([]);
+    exampleStore.actions.tooltip.setMouseClickAxisIndex({
+      activeIndex: "1",
+      activeDataKey: "dataKey2",
+    });
+    flush();
+    expect(
+      selectTooltipPayloadConfigurations(exampleStore.state, "item", "hover", undefined),
+    ).toEqual([]);
+  });
+
+  it("should return nothing if the tooltipEventType is click but the only interactions are hovers", () => {
+    exampleStore.actions.tooltip.setActiveMouseOverItemIndex({
+      activeIndex: "1",
+      activeDataKey: "dataKey1",
+      activeCoordinate: undefined,
+      activeGraphicalItemId: "foo",
+    });
+    flush();
+    expect(
+      selectTooltipPayloadConfigurations(exampleStore.state, "item", "click", undefined),
+    ).toEqual([]);
+    exampleStore.actions.tooltip.setMouseOverAxisIndex({
+      activeIndex: "1",
+      activeDataKey: "dataKey2",
+    });
+    flush();
+    expect(
+      selectTooltipPayloadConfigurations(exampleStore.state, "item", "click", undefined),
+    ).toEqual([]);
+  });
+
+  describe("with defaultIndex", () => {
+    it("should return the first configuration if the tooltipEventType is item and the defaultIndex is set, before user started interacting with the chart", () => {
+      expect(selectTooltipPayloadConfigurations(exampleStore.state, "item", "hover", "1")).toEqual([
+        exampleTooltipPayloadConfiguration1,
+      ]);
+    });
+
+    it("should return configuration that matches the dataKey after user has started interacting", () => {
+      exampleStore.actions.tooltip.setActiveMouseOverItemIndex({
+        activeIndex: "1",
+        activeDataKey: "dataKey2",
+        activeCoordinate: undefined,
+        activeGraphicalItemId: exampleTooltipPayloadConfiguration2.settings.graphicalItemId,
+      });
+      flush();
+      expect(selectTooltipPayloadConfigurations(exampleStore.state, "item", "hover", "1")).toEqual([
+        exampleTooltipPayloadConfiguration2,
+      ]);
+    });
+
+    it("should return empty array if user interacted with a an item that is not represented in the tooltip payloads", () => {
+      exampleStore.actions.tooltip.setActiveMouseOverItemIndex({
+        activeIndex: "1",
+        activeGraphicalItemId: "id-notPresentInPayloads",
+        activeCoordinate: undefined,
+        activeDataKey: "dataKey-notPresentInPayloads",
+      });
+      flush();
+      expect(selectTooltipPayloadConfigurations(exampleStore.state, "item", "hover", "1")).toEqual(
+        [],
+      );
+    });
+  });
+});