chore: Export TestSingleTabStopNavigationProvider to avoid a dependency on RTL

Author: pan-kot

src/internal/single-tab-stop/__tests__/context.test.tsx

@@ -11,7 +11,11 @@ import {
   SingleTabStopNavigationReset,
   useSingleTabStopNavigation,
 } from '../';
-import { renderWithSingleTabStopNavigation } from './utils';
+import {
+  getTestSingleTabStopNavigationProvider,
+  renderWithSingleTabStopNavigation,
+  TestSingleTabStopNavigationProvider,
+} from '../test-helpers';
 
 // Simple STSN subscriber component
 function Button(props: React.HTMLAttributes<HTMLButtonElement>) {
@@ -56,7 +60,11 @@ function findGroupButton(groupId: string, buttonIndex: number) {
 }
 
 test('does not override tab index when keyboard navigation is not active', () => {
-  renderWithSingleTabStopNavigation(<Button id="button" />, { navigationActive: false });
+  render(
+    <TestSingleTabStopNavigationProvider navigationActive={false}>
+      <Button id="button" />
+    </TestSingleTabStopNavigationProvider>
+  );
   expect(document.querySelector('#button')).not.toHaveAttribute('tabIndex');
 });
 
@@ -84,13 +92,13 @@ test('does not override tab index for suppressed elements', () => {
 });
 
 test('overrides tab index when keyboard navigation is active', () => {
-  const { setCurrentTarget } = renderWithSingleTabStopNavigation(
-    <div>
+  render(
+    <TestSingleTabStopNavigationProvider navigationActive={true}>
       <Button id="button1" />
       <Button id="button2" />
-    </div>
+    </TestSingleTabStopNavigationProvider>
   );
-  setCurrentTarget(document.querySelector('#button1'));
+  getTestSingleTabStopNavigationProvider().setCurrentTarget(document.querySelector('#button1'));
   expect(document.querySelector('#button1')).toHaveAttribute('tabIndex', '0');
   expect(document.querySelector('#button2')).toHaveAttribute('tabIndex', '-1');
 });

…rnal/single-tab-stop/__tests__/utils.tsx …l/single-tab-stop/test-helpers/index.tsxsrc/internal/single-tab-stop/__tests__/utils.tsx renamed to src/internal/single-tab-stop/test-helpers/index.tsx src/internal/single-tab-stop/__tests__/utils.tsx renamed to src/internal/single-tab-stop/test-helpers/index.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 getTestSingleTabStopNavigationProvider(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)[] = []) =>
+      getTestSingleTabStopNavigationProvider().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,
+  getTestSingleTabStopNavigationProvider,
+} from './single-tab-stop/test-helpers';