@automattic/charts 3.2.0 → 4.1.0

package/src/components/tooltip/test/bounded-tooltip.test.tsx

@@ -0,0 +1,225 @@
+import { render, screen } from '@testing-library/react';
+import { BoundedTooltip, getBoundedPosition } from '../private/bounded-tooltip';
+
+const BOX = { width: 208, height: 36 };
+const OFFSETS = { offsetLeft: 10, offsetTop: 10 };
+
+describe( 'getBoundedPosition', () => {
+	test( 'sits below and to the right of the anchor when that fits', () => {
+		expect(
+			getBoundedPosition( {
+				left: 40,
+				top: 20,
+				...OFFSETS,
+				box: BOX,
+				wrapper: { left: 0, top: 0, right: 600, bottom: 300 },
+				bounds: { left: 0, top: 0, right: 600, bottom: 300 },
+			} )
+		).toEqual( { x: 50, y: 30 } );
+	} );
+
+	test( 'flips to the other side when the near side clips more', () => {
+		expect(
+			getBoundedPosition( {
+				left: 500,
+				top: 280,
+				...OFFSETS,
+				box: BOX,
+				wrapper: { left: 0, top: 0, right: 600, bottom: 300 },
+				bounds: { left: 0, top: 0, right: 600, bottom: 300 },
+			} )
+		).toEqual( { x: 282, y: 234 } );
+	} );
+
+	test( 'pins the box to the edge when neither side fits, instead of spilling', () => {
+		// A 208px box mid-way across a 346px plot: neither side fits, so the box
+		// keeps the near side and parks at the right edge instead of spilling.
+		expect(
+			getBoundedPosition( {
+				left: 173,
+				top: 50,
+				...OFFSETS,
+				box: BOX,
+				wrapper: { left: 0, top: 0, right: 346, bottom: 200 },
+				bounds: { left: 0, top: 0, right: 346, bottom: 200 },
+			} )
+		).toEqual( { x: 138, y: 60 } );
+	} );
+
+	test( 'may leave the wrapper as long as it stays inside the clipping ancestor', () => {
+		// Neither side fits the 346px wrapper, and the clipping card ends 14px
+		// past its right edge, so the box keeps the near side and stops there.
+		expect(
+			getBoundedPosition( {
+				left: 173,
+				top: 50,
+				...OFFSETS,
+				box: BOX,
+				wrapper: { left: 0, top: 0, right: 346, bottom: 200 },
+				bounds: { left: -40, top: -60, right: 360, bottom: 200 },
+			} )
+		).toEqual( { x: 152, y: 60 } );
+	} );
+
+	test( 'flips up to stay inside the wrapper even when the page below has room', () => {
+		// The box fits above the anchor inside the 200px wrapper, so it goes
+		// there rather than below the chart, where the page would cover it.
+		expect(
+			getBoundedPosition( {
+				left: 40,
+				top: 180,
+				...OFFSETS,
+				box: BOX,
+				wrapper: { left: 0, top: 0, right: 600, bottom: 200 },
+				bounds: { left: 0, top: 0, right: 1024, bottom: 768 },
+			} )
+		).toEqual( { x: 50, y: 134 } );
+	} );
+
+	test( 'flips up when the wrapper fits below but the clipping ancestor does not', () => {
+		// A scrolled container cuts the wrapper off 20px under the anchor.
+		expect(
+			getBoundedPosition( {
+				left: 40,
+				top: 100,
+				...OFFSETS,
+				box: BOX,
+				wrapper: { left: 0, top: 0, right: 600, bottom: 300 },
+				bounds: { left: 0, top: -50, right: 600, bottom: 120 },
+			} )
+		).toEqual( { x: 50, y: 54 } );
+	} );
+} );
+
+const rect = ( left: number, top: number, width: number, height: number ) =>
+	( {
+		left,
+		top,
+		width,
+		height,
+		right: left + width,
+		bottom: top + height,
+		x: left,
+		y: top,
+		toJSON: () => ( {} ),
+	} ) as DOMRect;
+
+describe( 'BoundedTooltip', () => {
+	afterEach( () => {
+		jest.restoreAllMocks();
+	} );
+
+	test( 'keeps the box inside an overflow-hidden ancestor that is wider than the wrapper', () => {
+		// Card at x=400 (400 wide, overflow hidden); plot wrapper at x=440, 346 wide.
+		jest.spyOn( Element.prototype, 'getBoundingClientRect' ).mockImplementation( function (
+			this: Element
+		) {
+			if ( this.classList.contains( 'visx-tooltip' ) ) {
+				return rect( 0, 0, 208, 36 );
+			}
+			if ( this.getAttribute( 'data-testid' ) === 'card' ) {
+				return rect( 400, 100, 400, 400 );
+			}
+			return rect( 440, 160, 346, 200 );
+		} );
+
+		render(
+			<div data-testid="card" style={ { overflow: 'hidden' } }>
+				<div style={ { position: 'relative' } }>
+					<BoundedTooltip left={ 173 } top={ 50 } data-testid="box">
+						content
+					</BoundedTooltip>
+				</div>
+			</div>
+		);
+
+		// Neither side of the anchor fits the wrapper, so the box keeps the near
+		// side and stops at the card's right edge, 14px outside the wrapper.
+		expect( screen.getByTestId( 'box' ) ).toHaveStyle( { transform: 'translate(152px, 60px)' } );
+	} );
+
+	test( 'keeps the box inside the wrapper when nothing clips and the anchor sits low', () => {
+		jest.spyOn( Element.prototype, 'getBoundingClientRect' ).mockImplementation( function (
+			this: Element
+		) {
+			return this.classList.contains( 'visx-tooltip' )
+				? rect( 0, 0, 150, 100 )
+				: rect( 100, 100, 600, 200 );
+		} );
+
+		render(
+			<div style={ { position: 'relative' } }>
+				<BoundedTooltip left={ 300 } top={ 180 } data-testid="box">
+					content
+				</BoundedTooltip>
+			</div>
+		);
+
+		// The viewport has room below the wrapper, but that is where the page's
+		// own content paints over the box; above the anchor it fits in the chart.
+		expect( screen.getByTestId( 'box' ) ).toHaveStyle( { transform: 'translate(310px, 70px)' } );
+	} );
+
+	test.each( [
+		{ anchor: 20, x: 0, pointerLeft: 14 },
+		{ anchor: 150, x: 46, pointerLeft: 98 },
+		{ anchor: 280, x: 92, pointerLeft: 182 },
+	] )(
+		'keeps the below-axis pointer at x=$anchor after clamping',
+		( { anchor, x, pointerLeft } ) => {
+			jest.spyOn( Element.prototype, 'getBoundingClientRect' ).mockImplementation( function (
+				this: Element
+			) {
+				return this.classList.contains( 'visx-tooltip' )
+					? rect( 0, 0, 208, 36 )
+					: rect( 0, 0, 300, 100 );
+			} );
+
+			render(
+				<div style={ { overflow: 'hidden' } }>
+					<div style={ { position: 'relative' } }>
+						<BoundedTooltip placement="below-axis" left={ anchor } top={ 100 } data-testid="box">
+							content
+						</BoundedTooltip>
+					</div>
+				</div>
+			);
+
+			expect( screen.getByTestId( 'box' ) ).toHaveStyle( {
+				transform: `translate(${ x }px, 106px)`,
+			} );
+			expect( screen.getByTestId( 'tooltip-axis-pointer' ) ).toHaveStyle( {
+				left: `${ pointerLeft }px`,
+				top: '-6px',
+				width: '12px',
+				height: '6px',
+			} );
+			expect( screen.getByTestId( 'tooltip-axis-pointer' ) ).toHaveAttribute(
+				'aria-hidden',
+				'true'
+			);
+		}
+	);
+
+	test( 'falls back to the viewport when nothing clips', () => {
+		jest.spyOn( Element.prototype, 'getBoundingClientRect' ).mockImplementation( function (
+			this: Element
+		) {
+			return this.classList.contains( 'visx-tooltip' )
+				? rect( 0, 0, 208, 36 )
+				: rect( 900, 0, 346, 200 );
+		} );
+
+		render(
+			<div style={ { position: 'relative' } }>
+				<BoundedTooltip left={ 173 } top={ 50 } data-testid="box">
+					content
+				</BoundedTooltip>
+			</div>
+		);
+
+		// JSDOM's viewport is 1024px wide and the wrapper starts at 900: the box
+		// flips left of the anchor and stops at the viewport's right edge.
+		expect( screen.getByTestId( 'box' ) ).toHaveStyle( { transform: 'translate(-84px, 60px)' } );
+	} );
+} );

package/src/components/tooltip/test/xy-chart-tooltip.test.tsx

@@ -0,0 +1,379 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { BarSeries, LineSeries, TooltipContext, XYChart } from '@visx/xychart';
+import { useContext, useEffect } from 'react';
+import { XyChartTooltip } from '../xy-chart-tooltip';
+import type { XyChartTooltipProps } from '../../../visx/types';
+import type { EventHandlerParams } from '@visx/xychart';
+
+type Datum = { x: number; y: number };
+
+const SERIES_A: Datum[] = [
+	{ x: 0, y: 0 },
+	{ x: 5, y: 50 },
+	{ x: 10, y: 100 },
+];
+const SERIES_B: Datum[] = [
+	{ x: 0, y: 100 },
+	{ x: 5, y: 25 },
+	{ x: 10, y: 0 },
+];
+
+const xAccessor = ( d: Datum ) => d.x;
+const yAccessor = ( d: Datum ) => d.y;
+
+type BandDatum = { x: string; y: number };
+const BAND_DATA: BandDatum[] = [
+	{ x: 'a', y: 50 },
+	{ x: 'b', y: 80 },
+];
+const bandXAccessor = ( d: BandDatum ) => d.x;
+const bandYAccessor = ( d: BandDatum ) => d.y;
+const renderBarTooltip = () => <span>bar</span>;
+const BAND_PARAMS = [
+	{ key: 'bars', index: 0, datum: BAND_DATA[ 0 ], svgPoint: { x: 20, y: 90 } },
+] as unknown as EventHandlerParams< Datum >[];
+
+// The pointer sits on A's datum, 25px above B's, so A is the nearest datum.
+const BOTH_SERIES: EventHandlerParams< Datum >[] = [
+	{
+		key: 'A',
+		index: 1,
+		datum: SERIES_A[ 1 ],
+		svgPoint: { x: 100, y: 50 },
+		distanceX: 0,
+		distanceY: 0,
+	},
+	{
+		key: 'B',
+		index: 1,
+		datum: SERIES_B[ 1 ],
+		svgPoint: { x: 100, y: 50 },
+		distanceX: 0,
+		distanceY: 25,
+	},
+];
+
+// Opens the tooltip the way a pointer event would, once the series have registered.
+const OpenTooltip = ( { params }: { params: EventHandlerParams< Datum >[] } ) => {
+	const tooltipContext = useContext( TooltipContext );
+	useEffect( () => {
+		params.forEach( p => tooltipContext?.showTooltip( p ) );
+		// The context object changes identity on every tooltip update; re-running would loop.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [] );
+	return null;
+};
+
+const renderTooltip: XyChartTooltipProps< Datum >[ 'renderTooltip' ] = ( { tooltipData } ) => (
+	<span>{ `nearest:${ tooltipData?.nearestDatum?.key ?? '' }` }</span>
+);
+
+const NO_MARGIN = { top: 0, right: 0, bottom: 0, left: 0 };
+
+// 200x100 chart; with no margin x maps 0..10 to 0..200px and y maps 0..100 to 100..0px.
+const renderChart = (
+	tooltipProps: Partial< XyChartTooltipProps< Datum > > = {},
+	params: EventHandlerParams< Datum >[] = [
+		{ key: 'A', index: 1, datum: SERIES_A[ 1 ], svgPoint: { x: 123, y: 45 } },
+	],
+	margin = NO_MARGIN
+) =>
+	render(
+		<div data-testid="wrapper" style={ { position: 'relative' } }>
+			<XYChart
+				width={ 200 }
+				height={ 100 }
+				margin={ margin }
+				xScale={ { type: 'linear', domain: [ 0, 10 ] } }
+				yScale={ { type: 'linear', domain: [ 0, 100 ] } }
+			>
+				<LineSeries dataKey="A" data={ SERIES_A } xAccessor={ xAccessor } yAccessor={ yAccessor } />
+				<LineSeries dataKey="B" data={ SERIES_B } xAccessor={ xAccessor } yAccessor={ yAccessor } />
+				<XyChartTooltip
+					renderTooltip={ renderTooltip }
+					data-testid="tooltip-box"
+					{ ...tooltipProps }
+				/>
+				<OpenTooltip params={ params } />
+			</XYChart>
+		</div>
+	);
+
+describe( 'XyChartTooltip', () => {
+	test( 'renders the tooltip box inside the chart wrapper, not in a body-level portal', async () => {
+		const { container } = renderChart();
+
+		const box = await screen.findByTestId( 'tooltip-box' );
+
+		expect( box ).toHaveTextContent( 'nearest:A' );
+		expect( screen.getByTestId( 'wrapper' ) ).toContainElement( box );
+		// A body-level portal would sit outside the render root.
+		expect( container ).toContainElement( box );
+	} );
+
+	test( 'places the box at the pointer position when snapping is off', async () => {
+		renderChart();
+
+		// TooltipWithBounds moves the box through a transform from (0, 0), after its 10px offsets.
+		await expect( screen.findByTestId( 'tooltip-box' ) ).resolves.toHaveStyle( {
+			transform: 'translate(133px, 55px)',
+		} );
+	} );
+
+	test( 'snaps the box to the nearest datum', async () => {
+		renderChart( { snapTooltipToDatumX: true, snapTooltipToDatumY: true } );
+
+		// Datum (5, 50) sits at (100px, 50px); the default 10px offsets apply after snapping.
+		await waitFor( () =>
+			expect( screen.getByTestId( 'tooltip-box' ) ).toHaveStyle( {
+				transform: 'translate(110px, 60px)',
+			} )
+		);
+	} );
+
+	test( 'anchors below the x-axis label band without moving datum glyphs or crosshairs', async () => {
+		const originalRect = Element.prototype.getBoundingClientRect;
+		const rectSpy = jest
+			.spyOn( Element.prototype, 'getBoundingClientRect' )
+			.mockImplementation( function ( this: Element ) {
+				const rect = originalRect.call( this );
+				return this.classList.contains( 'visx-tooltip' )
+					? { ...rect, width: 80, height: 30, right: rect.left + 80, bottom: rect.top + 30 }
+					: rect;
+			} );
+
+		try {
+			renderChart(
+				{
+					tooltipPlacement: 'below-axis',
+					snapTooltipToDatumY: true,
+					showDatumGlyph: true,
+					showVerticalCrosshair: true,
+					showHorizontalCrosshair: true,
+				},
+				undefined,
+				{ top: 10, right: 20, bottom: 30, left: 40 }
+			);
+
+			const box = await screen.findByTestId( 'tooltip-box' );
+			expect( box ).toHaveStyle( { transform: 'translate(70px, 106px)' } );
+			expect( screen.getByTestId( 'wrapper' ) ).toContainElement( box );
+			expect( screen.getByTestId( 'tooltip-axis-pointer' ) ).toHaveStyle( {
+				left: '34px',
+				top: '-6px',
+			} );
+			expect( screen.getByTestId( 'xy-chart-tooltip-glyph-group-A' ) ).toHaveAttribute(
+				'transform',
+				'translate(110, 40)'
+			);
+			expect( screen.getByTestId( 'xy-chart-tooltip-crosshair-vertical' ) ).toHaveAttribute(
+				'y2',
+				'70'
+			);
+			expect( screen.getByTestId( 'xy-chart-tooltip-crosshair-horizontal' ) ).toHaveAttribute(
+				'y1',
+				'40'
+			);
+		} finally {
+			rectSpy.mockRestore();
+		}
+	} );
+
+	test( 'draws one glyph per series in the SVG at the datum position', async () => {
+		renderChart( { showSeriesGlyphs: true }, BOTH_SERIES );
+
+		const glyphA = await screen.findByTestId( 'xy-chart-tooltip-glyph-A' );
+		const glyphB = await screen.findByTestId( 'xy-chart-tooltip-glyph-B' );
+
+		// The group is placed at the datum; the glyph itself draws at the origin.
+		expect( screen.getByTestId( 'xy-chart-tooltip-glyph-group-A' ) ).toHaveAttribute(
+			'transform',
+			'translate(100, 50)'
+		);
+		expect( screen.getByTestId( 'xy-chart-tooltip-glyph-group-B' ) ).toHaveAttribute(
+			'transform',
+			'translate(100, 75)'
+		);
+		expect( glyphA ).toHaveAttribute( 'cx', '0' );
+		expect( glyphA ).toHaveAttribute( 'cy', '0' );
+		expect( glyphB ).toHaveAttribute( 'cx', '0' );
+		expect( glyphB ).toHaveAttribute( 'cy', '0' );
+		// Drawn into the chart SVG, not portaled out as HTML.
+		expect( glyphA ).toBeInstanceOf( SVGElement );
+	} );
+
+	test( 'hands the glyph renderer the origin, like visx, and marks the nearest datum', async () => {
+		const renderGlyph = jest.fn( () => null );
+		renderChart( { showSeriesGlyphs: true, renderGlyph }, BOTH_SERIES );
+
+		await waitFor( () => expect( renderGlyph ).toHaveBeenCalledTimes( 2 ) );
+
+		const calls = renderGlyph.mock.calls as unknown as Array<
+			[ { key: string; x: number; y: number; isNearestDatum: boolean; datum: Datum } ]
+		>;
+		const byKey = Object.fromEntries( calls.map( ( [ p ] ) => [ p.key, p ] ) );
+		// A renderer written against visx's Tooltip ignores x and y, so both stay 0.
+		expect( byKey.A ).toMatchObject( { x: 0, y: 0, datum: SERIES_A[ 1 ] } );
+		expect( byKey.B ).toMatchObject( { x: 0, y: 0, datum: SERIES_B[ 1 ] } );
+		expect( byKey.A.isNearestDatum ).toBe( true );
+		expect( byKey.B.isNearestDatum ).toBe( false );
+	} );
+
+	test( 'centres a band-scale datum in its band', async () => {
+		render(
+			<div style={ { position: 'relative' } }>
+				<XYChart
+					width={ 200 }
+					height={ 100 }
+					margin={ NO_MARGIN }
+					xScale={ { type: 'band', domain: [ 'a', 'b' ], paddingInner: 0, paddingOuter: 0 } }
+					yScale={ { type: 'linear', domain: [ 0, 100 ] } }
+				>
+					<BarSeries
+						dataKey="bars"
+						data={ BAND_DATA }
+						xAccessor={ bandXAccessor }
+						yAccessor={ bandYAccessor }
+					/>
+					<XyChartTooltip
+						renderTooltip={ renderBarTooltip }
+						data-testid="tooltip-box"
+						snapTooltipToDatumX
+						snapTooltipToDatumY
+						showDatumGlyph
+					/>
+					<OpenTooltip params={ BAND_PARAMS } />
+				</XYChart>
+			</div>
+		);
+
+		// Band 'a' spans 0..100px; the datum sits at its centre, 50px, not its start.
+		await waitFor( () =>
+			expect( screen.getByTestId( 'xy-chart-tooltip-glyph-group-bars' ) ).toHaveAttribute(
+				'transform',
+				'translate(50, 50)'
+			)
+		);
+		expect( screen.getByTestId( 'tooltip-box' ) ).toHaveStyle( {
+			transform: 'translate(60px, 60px)',
+		} );
+	} );
+
+	test( 'draws the crosshairs across the plot area, inside the margins, at the snapped position', async () => {
+		renderChart(
+			{
+				snapTooltipToDatumX: true,
+				snapTooltipToDatumY: true,
+				showVerticalCrosshair: true,
+				showHorizontalCrosshair: true,
+			},
+			undefined,
+			{ top: 10, right: 20, bottom: 30, left: 40 }
+		);
+
+		const vertical = await screen.findByTestId( 'xy-chart-tooltip-crosshair-vertical' );
+		const horizontal = await screen.findByTestId( 'xy-chart-tooltip-crosshair-horizontal' );
+
+		// Plot area is 140x60 at (40, 10); datum (5, 50) sits at its centre, (110, 40).
+		expect( vertical ).toHaveAttribute( 'x1', '110' );
+		expect( vertical ).toHaveAttribute( 'y1', '10' );
+		expect( vertical ).toHaveAttribute( 'y2', '70' );
+		expect( horizontal ).toHaveAttribute( 'y1', '40' );
+		expect( horizontal ).toHaveAttribute( 'x1', '40' );
+		expect( horizontal ).toHaveAttribute( 'x2', '180' );
+	} );
+
+	test( 'applies crosshair paint without allowing geometry overrides', async () => {
+		const consumerStyle = {
+			stroke: 'purple',
+			strokeWidth: 8,
+			className: 'custom-crosshair',
+			x1: 999,
+			transform: 'translate(100 0)',
+			style: { strokeOpacity: 0.25, transform: 'translateX(100px)' },
+		};
+		renderChart( {
+			snapTooltipToDatumX: true,
+			snapTooltipToDatumY: true,
+			showVerticalCrosshair: true,
+			showHorizontalCrosshair: true,
+			verticalCrosshairStyle: consumerStyle,
+			horizontalCrosshairStyle: consumerStyle,
+		} );
+
+		for ( const direction of [ 'vertical', 'horizontal' ] ) {
+			const guide = await screen.findByTestId( `xy-chart-tooltip-crosshair-${ direction }` );
+			expect( guide ).toHaveAttribute( 'stroke', 'purple' );
+			expect( guide ).toHaveAttribute( 'stroke-width', '8' );
+			expect( guide ).toHaveClass( 'custom-crosshair' );
+			expect( guide ).toHaveStyle( { 'stroke-opacity': '0.25', transform: 'none' } );
+			expect( guide ).not.toHaveAttribute( 'transform' );
+			expect( guide ).toHaveAttribute( 'x1', direction === 'vertical' ? '100' : '0' );
+			expect( guide ).toHaveAttribute( 'x2', direction === 'vertical' ? '100' : '200' );
+			expect( guide ).toHaveAttribute( 'y1', direction === 'vertical' ? '0' : '50' );
+			expect( guide ).toHaveAttribute( 'y2', direction === 'vertical' ? '100' : '50' );
+		}
+	} );
+
+	test( 'stacks the box above the chart overlays, with zIndex as the override', async () => {
+		const { unmount } = renderChart();
+		await expect( screen.findByTestId( 'tooltip-box' ) ).resolves.toHaveStyle( { zIndex: '3' } );
+		unmount();
+
+		renderChart( { zIndex: 9 } );
+		await expect( screen.findByTestId( 'tooltip-box' ) ).resolves.toHaveStyle( { zIndex: '9' } );
+	} );
+
+	test.each( [ 'auto', 'below-axis' ] as const )(
+		'preserves %s background and stacking with a partial style override',
+		async tooltipPlacement => {
+			const { unmount } = renderChart( { tooltipPlacement } );
+			const defaultBox = await screen.findByTestId( 'tooltip-box' );
+			const background = defaultBox.style.backgroundColor;
+			expect( background ).not.toBe( '' );
+			expect( background ).not.toBe( 'transparent' );
+			unmount();
+
+			renderChart( { tooltipPlacement, style: { color: 'red' } } );
+
+			await expect( screen.findByTestId( 'tooltip-box' ) ).resolves.toHaveStyle( {
+				backgroundColor: background,
+				zIndex: '3',
+				color: 'rgb(255, 0, 0)',
+			} );
+		}
+	);
+
+	test( 'accepts the portal-era options without passing them to the box', async () => {
+		renderChart( { scroll: true, debounce: 50, resizeObserverPolyfill: undefined } );
+
+		const box = await screen.findByTestId( 'tooltip-box' );
+
+		expect( box ).not.toHaveAttribute( 'scroll' );
+		expect( box ).not.toHaveAttribute( 'debounce' );
+	} );
+
+	test( 'renders no box when there is no tooltip renderer', async () => {
+		renderChart( { renderTooltip: undefined } );
+
+		await expect( screen.findByTestId( 'xy-chart-tooltip-anchor' ) ).resolves.toBeInTheDocument();
+		expect( screen.queryByTestId( 'tooltip-box' ) ).not.toBeInTheDocument();
+	} );
+
+	test( 'renders nothing when the tooltip content is empty', async () => {
+		renderChart( { renderTooltip: () => null, showSeriesGlyphs: true }, BOTH_SERIES );
+
+		// The anchor is the only thing rendered while there is nothing to show.
+		await expect( screen.findByTestId( 'xy-chart-tooltip-anchor' ) ).resolves.toBeInTheDocument();
+		expect( screen.queryByTestId( 'tooltip-box' ) ).not.toBeInTheDocument();
+		expect( screen.queryByTestId( 'xy-chart-tooltip-glyph-A' ) ).not.toBeInTheDocument();
+	} );
+
+	test( 'renders nothing while the tooltip is closed', () => {
+		renderChart( { showSeriesGlyphs: true, showVerticalCrosshair: true }, [] );
+
+		expect( screen.queryByTestId( 'tooltip-box' ) ).not.toBeInTheDocument();
+		expect( screen.queryByTestId( 'xy-chart-tooltip-glyph-A' ) ).not.toBeInTheDocument();
+		expect( screen.queryByTestId( 'xy-chart-tooltip-crosshair-vertical' ) ).not.toBeInTheDocument();
+	} );
+} );