test/component/Tooltip/Tooltip.payload.spec.tsx (2)

1523-1525: Minor: index-based lookup of the second .recharts-bar group is fragile.

container.querySelectorAll('.recharts-bar')[1] assumes rendering order and class uniqueness that currently hold but aren't enforced. Consider targeting by dataKey (e.g., a class/selector derived from bar2) or by the <g>’s id set via the Bar id prop to make the test resilient to internal layer reordering.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@test/component/Tooltip/Tooltip.payload.spec.tsx` around lines 1523 - 1525,
The test currently uses index-based lookup
(container.querySelectorAll('.recharts-bar')[1]) which is brittle; update the
selection to target the second Bar more robustly by selecting the group by a
stable identifier tied to the Bar (e.g., use the Bar's id or a dataKey-derived
selector) instead of relying on order — replace the index lookup that produces
bar2Group with a querySelector that matches the Bar id or data-key for "bar2"
and then query that group for barMouseHoverTooltipSelector to get bar2Rect.

---

1505-1533: Consider also asserting the bar1 (row A) payload to guard against symmetric regressions.

The test exercises only the second bar group where the original bug manifested. A companion assertion that hovers bar1 (row A) and verifies its payload is ['bar1 : 0 ~ 10'] would pin down both ends of the index mapping and catch a future regression where, for example, indices end up swapped or clamped. Cheap to add given the setup is already in place.

🧪 Proposed additional assertion

         const barGroups = container.querySelectorAll('.recharts-bar');
-        const bar2Group = barGroups[1]; // second Bar component = bar2
+        const bar1Group = barGroups[0];
+        const bar1Rect = bar1Group.querySelector(barMouseHoverTooltipSelector);
+        assertNotNull(bar1Rect);
+        fireEvent.mouseOver(bar1Rect, { clientX: 100, clientY: 100 });
+        act(() => {
+          vi.runOnlyPendingTimers();
+        });
+        expectTooltipPayload(container, '', ['bar1 : 0 ~ 10']);
+
+        const bar2Group = barGroups[1]; // second Bar component = bar2
         const bar2Rect = bar2Group.querySelector(barMouseHoverTooltipSelector);
         assertNotNull(bar2Rect);
         fireEvent.mouseOver(bar2Rect, { clientX: 200, clientY: 200 });
         act(() => {
           vi.runOnlyPendingTimers();
         });
 
         expectTooltipPayload(container, '', ['bar2 : 5 ~ 20']);

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@test/component/Tooltip/Tooltip.payload.spec.tsx` around lines 1505 - 1533,
Add a companion assertion that also hovers the bar1 rect and verifies its
tooltip payload to guard against symmetric index-mapping regressions: locate the
first Bar group from container.querySelectorAll('.recharts-bar') (barGroups[0]),
query its rect using the same barMouseHoverTooltipSelector, fire a mouseOver on
that rect (with appropriate clientX/clientY), run pending timers like the
existing act/vi.runOnlyPendingTimers call, and call
expectTooltipPayload(container, '', ['bar1 : 0 ~ 10']) to validate the bar1
payload; reuse the existing barGroups, bar2Rect logic and expectTooltipPayload
helper to keep the change minimal.