chore: Export TestSingleTabStopNavigationProvider to avoid a dependency on RTL

Author: pan-kot

src/internal/single-tab-stop/__tests__/utils.tsx

@@ -1,20 +1,28 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { createRef, forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef, useCallback, useEffect, useRef } from 'react';
 import { render } from '@testing-library/react';
 
 import { FocusableChangeHandler, SingleTabStopNavigationContext } from '../';
+import { useUniqueId } from '../../use-unique-id';
 
-interface ProviderRef {
+interface TestProviderAPI {
   setCurrentTarget(focusTarget: null | Element, suppressed?: (null | Element)[]): void;
 }
 
-const FakeSingleTabStopNavigationProvider = forwardRef(
-  (
-    { children, navigationActive }: { children: React.ReactNode; navigationActive: boolean },
-    ref: React.Ref<ProviderRef>
-  ) => {
+const providerRegistry = new Map<string, TestProviderAPI>();
+
+export const TestSingleTabStopNavigationProvider = forwardRef(
+  ({
+    children,
+    navigationActive,
+    providerId: explicitProviderId,
+  }: {
+    children: React.ReactNode;
+    navigationActive: boolean;
+    providerId?: string;
+  }) => {
     const focusablesRef = useRef(new Set<Element>());
     const focusHandlersRef = useRef(new Map<Element, FocusableChangeHandler>());
     const registerFocusable = useCallback((focusable: HTMLElement, changeHandler: FocusableChangeHandler) => {
@@ -26,14 +34,22 @@ const FakeSingleTabStopNavigationProvider = forwardRef(
       };
     }, []);
 
-    useImperativeHandle(ref, () => ({
+    const providerIdFallback = useUniqueId();
+    const providerId = explicitProviderId ?? providerIdFallback;
+    providerRegistry.set(providerId, {
       setCurrentTarget: (focusTarget: null | Element, suppressed: Element[] = []) => {
         focusablesRef.current.forEach(focusable => {
           const handler = focusHandlersRef.current.get(focusable)!;
           handler(focusTarget === focusable || suppressed.includes(focusable));
         });
       },
-    }));
+    });
+    useEffect(
+      () => () => {
+        providerRegistry.delete(providerId);
+      },
+      [providerId]
+    );
 
     return (
       <SingleTabStopNavigationContext.Provider
@@ -45,24 +61,32 @@ const FakeSingleTabStopNavigationProvider = forwardRef(
   }
 );
 
+export function getTestProvider(providerId?: string): TestProviderAPI {
+  return {
+    setCurrentTarget(focusTarget, suppressed) {
+      if (providerId) {
+        providerRegistry.get(providerId)?.setCurrentTarget(focusTarget, suppressed);
+      } else {
+        Array.from(providerRegistry).forEach(([, provider]) => provider.setCurrentTarget(focusTarget, suppressed));
+      }
+    },
+  };
+}
+
+/**
+ * @deprecated - Use TestSingleTabStopNavigationProvider instead
+ */
 export function renderWithSingleTabStopNavigation(
   ui: React.ReactNode,
   { navigationActive = true }: { navigationActive?: boolean } = {}
 ) {
-  const providerRef = createRef<ProviderRef>();
   const { container, rerender } = render(
-    <FakeSingleTabStopNavigationProvider ref={providerRef} navigationActive={navigationActive}>
-      {ui}
-    </FakeSingleTabStopNavigationProvider>
+    <TestSingleTabStopNavigationProvider navigationActive={navigationActive}>{ui}</TestSingleTabStopNavigationProvider>
   );
   return {
     container,
     rerender,
-    setCurrentTarget: (focusTarget: null | Element, suppressed: (null | Element)[] = []) => {
-      if (!providerRef.current) {
-        throw new Error('Provider is not ready');
-      }
-      providerRef.current.setCurrentTarget(focusTarget, suppressed);
-    },
+    setCurrentTarget: (focusTarget: null | Element, suppressed: (null | Element)[] = []) =>
+      getTestProvider().setCurrentTarget(focusTarget, suppressed),
   };
 }

src/internal/testing.ts

@@ -5,4 +5,8 @@ export { clearOneTimeMetricsCache } from './base-component/metrics/metrics';
 export { clearMessageCache } from './logging';
 export { setGlobalFlag } from './global-flags';
 export { clearVisualRefreshState } from './visual-mode';
-export { renderWithSingleTabStopNavigation } from './single-tab-stop/__tests__/utils';
+export {
+  renderWithSingleTabStopNavigation,
+  TestSingleTabStopNavigationProvider,
+  getTestProvider,
+} from './single-tab-stop/__tests__/utils';