chore: added test for tooltip parent behaviour

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin.tsx

@@ -1,4 +1,4 @@
-import { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import cx from 'classnames';
 import { getFocusedSeriesAtPosition } from 'lib/uPlotLib/plugins/onClickPlugin';
@@ -44,12 +44,14 @@ export default function TooltipPlugin({
 	canPinTooltip = false,
 }: TooltipPluginProps): JSX.Element | null {
 	const containerRef = useRef<HTMLDivElement>(null);
-	const portalRoot = useRef<HTMLElement>(document.body);
 	const rafId = useRef<number | null>(null);
 	const dismissTimeoutId = useRef<ReturnType<typeof setTimeout> | null>(null);
 	const layoutRef = useRef<TooltipLayoutInfo>();
 	const renderRef = useRef(render);
 	renderRef.current = render;
+	const [portalRoot, setPortalRoot] = useState<HTMLElement>(
+		(document.fullscreenElement as HTMLElement) ?? document.body,
+	);
 
 	// React-managed snapshot of what should be rendered. The controller
 	// owns the interaction state and calls `updateState` when a visible
@@ -389,6 +391,19 @@ export default function TooltipPlugin({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [config]);
 
+	const resolvePortalRoot = useCallback((): void => {
+		setPortalRoot((document.fullscreenElement as HTMLElement) ?? document.body);
+	}, []);
+
+	useLayoutEffect((): (() => void) => {
+		resolvePortalRoot();
+		document.addEventListener('fullscreenchange', resolvePortalRoot);
+
+		return (): void => {
+			document.removeEventListener('fullscreenchange', resolvePortalRoot);
+		};
+	}, [resolvePortalRoot]);
+
 	useLayoutEffect((): void => {
 		if (!hasPlot || !layoutRef.current) {
 			return;
@@ -449,6 +464,6 @@ export default function TooltipPlugin({
 		>
 			{tooltipBody}
 		</div>,
-		portalRoot.current,
+		portalRoot,
 	);
 }

frontend/src/lib/uPlotV2/plugins/__tests__/TooltipPlugin.test.ts

@@ -188,6 +188,58 @@ describe('TooltipPlugin', () => {
 			expect(container).not.toBeNull();
 			expect(container.parentElement).toBe(document.body);
 		});
+
+		it('moves tooltip portal root to fullscreen element and back on exit', async () => {
+			const config = createConfigMock();
+			let mockedFullscreenElement: Element | null = null;
+			const originalFullscreenElementDescriptor = Object.getOwnPropertyDescriptor(
+				Document.prototype,
+				'fullscreenElement',
+			);
+			Object.defineProperty(Document.prototype, 'fullscreenElement', {
+				configurable: true,
+				get: () => mockedFullscreenElement,
+			});
+
+			renderAndActivateHover(config);
+
+			const container = document.querySelector(
+				'.tooltip-plugin-container',
+			) as HTMLElement;
+			expect(container.parentElement).toBe(document.body);
+
+			const fullscreenRoot = document.createElement('div');
+			document.body.appendChild(fullscreenRoot);
+
+			act(() => {
+				mockedFullscreenElement = fullscreenRoot;
+				document.dispatchEvent(new Event('fullscreenchange'));
+			});
+
+			await waitFor(() => {
+				const updatedContainer = screen.getByTestId('tooltip-plugin-container');
+				expect(updatedContainer.parentElement).toBe(fullscreenRoot);
+			});
+
+			act(() => {
+				mockedFullscreenElement = null;
+				document.dispatchEvent(new Event('fullscreenchange'));
+			});
+
+			await waitFor(() => {
+				const updatedContainer = screen.getByTestId('tooltip-plugin-container');
+				expect(updatedContainer.parentElement).toBe(document.body);
+			});
+
+			if (originalFullscreenElementDescriptor) {
+				Object.defineProperty(
+					Document.prototype,
+					'fullscreenElement',
+					originalFullscreenElementDescriptor,
+				);
+			}
+			fullscreenRoot.remove();
+		});
 	});
 
 	// ---- Pin behaviour ----------------------------------------------------------