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); + } return null; };