@react-native-ama/core 0.0.1 → 0.0.2

package/src/hooks/useFocus.test.ts

@@ -0,0 +1,98 @@
+import { SHELL_COLORS } from '@react-native-ama/internal';
+import { renderHook } from '@testing-library/react-native';
+
+import { useFocus } from './useFocus';
+
+beforeEach(() => {
+  jest.clearAllMocks();
+
+  jest.spyOn(console, 'warn').mockImplementation();
+});
+
+let findNodeHandleMock: jest.Mock;
+let setAccessibilityFocusMock: jest.Mock;
+
+describe('useFocus', () => {
+  it.each([null, undefined])('does nothing if the Ref is %s', refElement => {
+    // @ts-ignore
+    renderHook(() => useFocus(refElement));
+
+    expect(findNodeHandleMock).not.toHaveBeenCalled();
+  });
+
+  it('call setAccessibilityFocus on the given Ref Component', () => {
+    findNodeHandleMock.mockReturnValue('element-id');
+
+    renderHook(() => useFocus({ current: 'test-element' }));
+
+    expect(findNodeHandleMock).toHaveBeenCalledWith('test-element');
+    expect(setAccessibilityFocusMock).toHaveBeenNthCalledWith(1, 'element-id');
+    expect(setAccessibilityFocusMock).toHaveBeenNthCalledWith(2, 'element-id');
+  });
+
+  describe('Given the element has not been found', () => {
+    beforeEach(function () {
+      findNodeHandleMock.mockReturnValue(null);
+    });
+
+    it('does not call setAccessibilityFocus', () => {
+      renderHook(() => useFocus({ current: 'test-element' }));
+
+      expect(setAccessibilityFocusMock).not.toHaveBeenCalled();
+    });
+
+    it('console.warn if __DEV__ is true', () => {
+      const spy = jest.spyOn(console, 'warn').mockImplementation();
+
+      renderHook(() => useFocus({ current: 'test-element' }));
+
+      expect(spy).toHaveBeenCalledWith(
+        // @ts-ignore
+        `${SHELL_COLORS.BG_RED}AMA.${SHELL_COLORS.RESET} ${SHELL_COLORS.BLUE}useFocus${SHELL_COLORS.RESET}: ${SHELL_COLORS.YELLOW}Ref element not found${SHELL_COLORS.RESET}`,
+      );
+    });
+
+    it('does not log anything if __DEV__ is false', () => {
+      // @ts-ignore
+      global.__DEV__ = false;
+
+      const spy = jest.spyOn(console, 'warn');
+
+      renderHook(() => useFocus({ current: 'test-element' }));
+
+      expect(spy).not.toHaveBeenCalled();
+    });
+  });
+
+  it('setFocus calls setAccessibilityFocus on the given component', () => {
+    findNodeHandleMock.mockReturnValue('test-focus-id');
+
+    const { result } = renderHook(() => useFocus());
+
+    result.current.setFocus('component' as any);
+
+    expect(findNodeHandleMock).toHaveBeenCalledWith('component');
+    expect(setAccessibilityFocusMock).toHaveBeenNthCalledWith(
+      1,
+      'test-focus-id',
+    );
+    expect(setAccessibilityFocusMock).toHaveBeenNthCalledWith(
+      2,
+      'test-focus-id',
+    );
+  });
+});
+
+function mockReactNative() {
+  findNodeHandleMock = jest.fn();
+  setAccessibilityFocusMock = jest.fn();
+
+  return {
+    findNodeHandle: findNodeHandleMock,
+    AccessibilityInfo: {
+      setAccessibilityFocus: setAccessibilityFocusMock,
+    },
+  };
+}
+
+jest.mock('react-native', () => mockReactNative());

package/src/hooks/useFocus.ts

@@ -0,0 +1,42 @@
+import { SHELL_COLORS } from '@react-native-ama/internal';
+import * as React from 'react';
+import { AccessibilityInfo, findNodeHandle } from 'react-native';
+
+export const useFocus = (refComponent?: React.RefObject<any>) => {
+  const setFocus = React.useCallback(
+    (
+      component:
+        | null
+        | number
+        | React.Component<any, any>
+        | React.ComponentClass<any>,
+    ) => {
+      // @ts-ignore
+      const elementId = findNodeHandle(component);
+
+      if (elementId) {
+        AccessibilityInfo.setAccessibilityFocus(elementId);
+        AccessibilityInfo.setAccessibilityFocus(elementId);
+      } else if (__DEV__) {
+        console.warn(
+          // @ts-ignore
+          `${SHELL_COLORS.BG_RED}AMA.${SHELL_COLORS.RESET} ${SHELL_COLORS.BLUE}useFocus${SHELL_COLORS.RESET}: ${SHELL_COLORS.YELLOW}Ref element not found${SHELL_COLORS.RESET}`,
+        );
+      }
+    },
+    [],
+  );
+
+  React.useEffect(() => {
+    if (!refComponent) {
+      return;
+    }
+
+    setFocus(refComponent.current);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [refComponent]);
+
+  return {
+    setFocus,
+  };
+};

package/src/hooks/useTimedAction.android.test.ts

@@ -0,0 +1,39 @@
+import { renderHook } from '@testing-library/react-native';
+import { AccessibilityInfo, Platform } from 'react-native';
+
+import * as AMAProvider from '../components/AMAProvider';
+import { useTimedAction } from './useTimedAction';
+
+beforeEach(() => {
+  jest.clearAllMocks();
+
+  Platform.OS = 'android';
+});
+
+describe('useTimedAction', () => {
+  it.each([true, false])(
+    'onTimeout uses the value provided by getRecommendedTimeoutMillis for the timeout',
+    async isScreenReaderEnabled => {
+      const callback = jest.fn();
+
+      jest.spyOn(AMAProvider, 'useAMAContext').mockReturnValue({
+        isScreenReaderEnabled,
+      } as any);
+
+      const setTimeoutSpy = jest.spyOn(global, 'setTimeout');
+
+      const getRecommendedTimeoutMillis = jest
+        .spyOn(AccessibilityInfo, 'getRecommendedTimeoutMillis')
+        .mockResolvedValue(142);
+
+      const { result } = renderHook(() => useTimedAction());
+
+      await result.current.onTimeout(callback, 42);
+
+      expect(getRecommendedTimeoutMillis).toHaveBeenCalledWith(42);
+      expect(setTimeoutSpy).toHaveBeenCalledWith(callback, 142);
+    },
+  );
+});
+
+jest.mock('../components/AMAProvider');

package/src/hooks/useTimedAction.ios.test.ts

@@ -0,0 +1,46 @@
+import { renderHook } from '@testing-library/react-native';
+import { Platform } from 'react-native';
+
+import * as AMAProvider from '../components/AMAProvider';
+import { useTimedAction } from './useTimedAction';
+
+beforeEach(() => {
+  jest.clearAllMocks();
+
+  Platform.OS = 'ios';
+});
+
+describe('useTimedAction', () => {
+  it('onTimeout executes the callback with the given timeout if the screen reader is off', async () => {
+    const callback = jest.fn();
+    //TODO: AMAProvider does not export useAMAContext
+    const setTimeoutSpy = jest.spyOn(global, 'setTimeout');
+    jest.spyOn(AMAProvider, 'useAMAContext').mockReturnValue({
+      isScreenReaderEnabled: false,
+    } as any);
+
+    const { result } = renderHook(() => useTimedAction());
+
+    setTimeoutSpy.mockClear();
+    await result.current.onTimeout(callback, 42);
+
+    expect(setTimeoutSpy).toHaveBeenCalledWith(callback, 42);
+  });
+
+  it('onTimeout does not executes the callback when the screen reader is off', async () => {
+    const callback = jest.fn();
+
+    const setTimeoutSpy = jest.spyOn(global, 'setTimeout');
+    jest.spyOn(AMAProvider, 'useAMAContext').mockReturnValue({
+      isScreenReaderEnabled: true,
+    } as any);
+
+    const { result } = renderHook(() => useTimedAction());
+
+    setTimeoutSpy.mockClear();
+
+    await result.current.onTimeout(callback, 42);
+
+    expect(setTimeoutSpy).not.toHaveBeenCalled();
+  });
+});

package/src/hooks/useTimedAction.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { AccessibilityInfo, Platform } from 'react-native';
+
+import { useAMAContext } from '../components/AMAProvider';
+
+export const useTimedAction = () => {
+  const { isScreenReaderEnabled } = useAMAContext();
+
+  const onTimeout = React.useCallback(
+    async (
+      callback: () => void,
+      milliseconds: number,
+    ): Promise<null | ReturnType<typeof setTimeout>> => {
+      if (isScreenReaderEnabled && Platform.OS === 'ios') {
+        return new Promise<null>(resolve => {
+          resolve(null);
+        });
+      }
+
+      const timeout = await getRecommendedTimeoutMillis(milliseconds);
+
+      return setTimeout(callback, timeout);
+    },
+    [isScreenReaderEnabled],
+  );
+
+  return {
+    onTimeout,
+  };
+};
+
+async function getRecommendedTimeoutMillis(
+  milliseconds: number,
+): Promise<number> {
+  return Platform.OS === 'android'
+    ? await AccessibilityInfo.getRecommendedTimeoutMillis(milliseconds)
+    : new Promise(resolve => {
+        resolve(milliseconds);
+      });
+}

package/src/index.ts

@@ -0,0 +1,16 @@
+// Components
+export { AutofocusContainer } from './components/AutofocusContainer';
+export { HideChildrenFromAccessibilityTree } from './components/HideChildrenFromAccessibilityTree';
+export {
+  AMAProvider,
+  useAMAContext,
+  type AMAContextValue,
+  type AMADevContextValue,
+  type AMAProdContextValue,
+} from './components/AMAProvider';
+
+// Hooks
+export { useButtonChecks } from './hooks/useButtonChecks';
+export { useChecks } from './hooks/useChecks';
+export { useFocus } from './hooks/useFocus';
+export { useTimedAction } from './hooks/useTimedAction';

package/src/utils/numerify.test.ts

@@ -0,0 +1,11 @@
+import { numerify } from './numerify';
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+describe('numerify', () => {
+  it('adds a space between each digit', () => {
+    expect(numerify('123')).toEqual('1 2 3');
+  });
+});

package/src/utils/numerify.ts

@@ -0,0 +1,3 @@
+export const numerify = (text: string) => {
+  return text.split('').join(' ');
+};