test: add portal focus utilities

Author: kotAPI

src/components/ui/Dialog/tests/Dialog.test.tsx

@@ -1,5 +1,7 @@
 import React, { createRef } from 'react';
-import { render } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { renderWithPortal, assertFocusTrap, assertFocusReturn, assertScrollLock, assertScrollUnlock } from '~/test-utils/portal';
 import Dialog from '../Dialog';
 
 describe('Dialog', () => {
@@ -85,5 +87,28 @@ describe('Dialog', () => {
         warn.mockRestore();
         error.mockRestore();
     });
+
+    test('mounts in portal, traps focus, returns focus and locks scroll', async () => {
+        const user = userEvent.setup();
+        const { getByText, portalRoot, cleanup } = renderWithPortal(
+            <Dialog.Root>
+                <Dialog.Trigger>Trigger</Dialog.Trigger>
+                <Dialog.Portal>
+                    <Dialog.Overlay />
+                    <Dialog.Content>
+                        <Dialog.Close>Close</Dialog.Close>
+                    </Dialog.Content>
+                </Dialog.Portal>
+            </Dialog.Root>
+        );
+
+        await user.click(getByText('Trigger'));
+        await waitFor(() => assertScrollLock());
+        await assertFocusTrap(portalRoot);
+        await user.click(getByText('Close'));
+        assertFocusReturn(getByText('Trigger'));
+        await waitFor(() => assertScrollUnlock());
+        cleanup();
+    });
 });
 

src/components/ui/DropdownMenu/tests/DropdownMenu.test.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { renderWithPortal, assertFocusReturn } from '~/test-utils/portal';
 import '@testing-library/jest-dom';
 import DropdownMenu from '../DropdownMenu';
 
@@ -67,4 +69,24 @@ describe('DropdownMenu', () => {
         const { container } = render(<DropdownMenu.Trigger>Open</DropdownMenu.Trigger>);
         expect(container.firstChild).toBeNull();
     });
+
+    it('renders in portal and returns focus when closed', async () => {
+        const user = userEvent.setup();
+        const { getByText, portalRoot, cleanup } = renderWithPortal(
+            <DropdownMenu.Root>
+                <DropdownMenu.Trigger>Menu</DropdownMenu.Trigger>
+                <DropdownMenu.Portal>
+                    <DropdownMenu.Content>
+                        <DropdownMenu.Item label="Profile">Profile</DropdownMenu.Item>
+                    </DropdownMenu.Content>
+                </DropdownMenu.Portal>
+            </DropdownMenu.Root>
+        );
+
+        await user.click(getByText('Menu'));
+        expect(portalRoot).toContainElement(getByText('Profile'));
+        await user.keyboard('{Escape}');
+        assertFocusReturn(getByText('Menu'));
+        cleanup();
+    });
 });

src/components/ui/Tooltip/tests/Tooltip.behavior.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { renderWithPortal, assertFocusReturn } from '~/test-utils/portal';
 import Tooltip from '../Tooltip';
 import axe from 'axe-core';
 
@@ -95,4 +96,21 @@ describe('Tooltip interactions', () => {
         await userEvent.hover(trigger);
         expect(await screen.findByRole('tooltip')).toBeInTheDocument();
     });
+
+    test('portal renders tooltip content and focus is restored on escape', async () => {
+        const user = userEvent.setup();
+        const { getByText, cleanup } = renderWithPortal(
+            <Tooltip.Root>
+                <Tooltip.Trigger>Tip</Tooltip.Trigger>
+                <Tooltip.Content>content</Tooltip.Content>
+            </Tooltip.Root>
+        );
+
+        const trigger = getByText('Tip');
+        trigger.focus();
+        await screen.findByRole('tooltip');
+        await user.keyboard('{Escape}');
+        assertFocusReturn(trigger);
+        cleanup();
+    });
 });

src/test-utils/portal.ts

@@ -0,0 +1,51 @@
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+export function renderWithPortal(ui: React.ReactElement) {
+    const portalRoot = document.createElement('div');
+    portalRoot.setAttribute('id', 'rad-ui-theme-container');
+    document.body.appendChild(portalRoot);
+    const result = render(ui);
+    return {
+        ...result,
+        portalRoot,
+        cleanup: () => {
+            result.unmount();
+            portalRoot.remove();
+        }
+    };
+}
+
+export async function assertFocusTrap(container: HTMLElement) {
+    const user = userEvent.setup();
+    const focusable = Array.from(
+        container.querySelectorAll<HTMLElement>(
+            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        )
+    );
+    if (focusable.length === 0) {
+        throw new Error('No focusable elements found in container');
+    }
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+
+    first.focus();
+    await user.tab({ shift: true });
+    expect(document.activeElement).toBe(last);
+
+    last.focus();
+    await user.tab();
+    expect(document.activeElement).toBe(first);
+}
+
+export function assertFocusReturn(element: HTMLElement) {
+    expect(element).toHaveFocus();
+}
+
+export function assertScrollLock() {
+    expect(document.body.getAttribute('data-scroll-locked')).toBe('1');
+}
+
+export function assertScrollUnlock() {
+    expect(document.body.getAttribute('data-scroll-locked')).toBeNull();
+}