diff --git a/packages/visx-xychart/test/providers/TooltipProvider.test.tsx b/packages/visx-xychart/test/providers/TooltipProvider.test.tsx
index b9244a4c2..2d92fbed6 100644
--- a/packages/visx-xychart/test/providers/TooltipProvider.test.tsx
+++ b/packages/visx-xychart/test/providers/TooltipProvider.test.tsx
@@ -1,18 +1,70 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
import { mount } from 'enzyme';
-import { TooltipProvider, TooltipContext } from '../../src';
+import { TooltipProvider, TooltipContext, TooltipData } from '../../src';
describe('', () => {
it('should be defined', () => {
expect(TooltipProvider).toBeDefined();
});
- it('should provide an emitter for subscribing and emitting events', () => {
+ it('should provide tooltip state', () => {
expect.assertions(1);
const TooltipConsumer = () => {
const tooltipContext = useContext(TooltipContext);
- expect(tooltipContext).toBeDefined();
+ expect(tooltipContext).toMatchObject({
+ tooltipOpen: expect.any(Boolean),
+ showTooltip: expect.any(Function),
+ updateTooltip: expect.any(Function),
+ hideTooltip: expect.any(Function),
+ });
+
+ return null;
+ };
+
+ mount(
+
+
+ ,
+ );
+ });
+
+ it('showTooltip should update tooltipData.nearestDatum/datumByKey', () => {
+ expect.assertions(1);
+
+ const TooltipConsumer = () => {
+ const tooltipContext = useContext(TooltipContext);
+ const tooltipOpen = tooltipContext?.tooltipOpen;
+ const showTooltip = tooltipContext?.showTooltip;
+
+ useEffect(() => {
+ // this triggers a re-render of the component which triggers the assertion block
+ if (!tooltipOpen && showTooltip) {
+ showTooltip({
+ key: 'near',
+ index: 0,
+ distanceX: 0,
+ distanceY: 0,
+ datum: { hi: 'hello' },
+ });
+ showTooltip({
+ key: 'far',
+ index: 1,
+ datum: { good: 'bye' },
+ // no distance = Infinity
+ });
+ }
+ }, [tooltipOpen, showTooltip]);
+
+ if (tooltipOpen) {
+ expect(tooltipContext?.tooltipData).toMatchObject({
+ nearestDatum: { key: 'near', index: 0, distance: 0, datum: { hi: 'hello' } },
+ datumByKey: {
+ near: { key: 'near', index: 0, datum: { hi: 'hello' } },
+ far: { key: 'far', index: 1, datum: { good: 'bye' } },
+ },
+ } as TooltipData