@react-native-ama/core 0.0.1 → 1.0.0

package/src/hooks/useButtonChecks.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useButtonChecks = void 0;
+const internal_1 = require("@react-native-ama/internal");
+const useChecks_1 = require("./useChecks");
+exports.useButtonChecks = __DEV__
+    ? (props, children, shouldPerformContrastCheck = true) => {
+        const checks = (0, useChecks_1.useChecks)();
+        if (checks === null) {
+            return null;
+        }
+        const { noUndefinedProperty, contrastChecker, onLayout, noUppercaseStringChecker, checkCompatibleAccessibilityState, checkAccessibilityRole, debugStyle, } = checks;
+        let style = props.style || {};
+        const isAccessible = props.accessible !== false;
+        isAccessible &&
+            noUndefinedProperty({
+                properties: props,
+                property: 'accessibilityRole',
+                rule: 'NO_ACCESSIBILITY_ROLE',
+            });
+        isAccessible &&
+            noUndefinedProperty({
+                properties: props,
+                property: 'accessibilityLabel',
+                rule: 'NO_ACCESSIBILITY_LABEL',
+            });
+        isAccessible &&
+            noUppercaseStringChecker({
+                text: props.accessibilityLabel,
+            });
+        checkCompatibleAccessibilityState({
+            accessibilityStates: props === null || props === void 0 ? void 0 : props.accessibilityState,
+            accessibilityRole: props === null || props === void 0 ? void 0 : props.accessiblityRole,
+        });
+        checkAccessibilityRole(props.accessibilityRole);
+        const contrastCheckerCallback = shouldPerformContrastCheck
+            ? contrastChecker
+            : undefined;
+        const theStyle = internal_1.applyStyle === null || internal_1.applyStyle === void 0 ? void 0 : (0, internal_1.applyStyle)({
+            style,
+            debugStyle,
+            // @ts-ignore
+            children,
+            contrastCheckerCallback,
+        });
+        return {
+            onLayout,
+            debugStyle: theStyle,
+        };
+    }
+    : null;

package/src/hooks/useButtonChecks.ts

@@ -0,0 +1,73 @@
+import { applyStyle } from '@react-native-ama/internal';
+import type React from 'react';
+import type { PressableStateCallbackType } from 'react-native';
+
+import { useChecks } from './useChecks';
+
+export const useButtonChecks = __DEV__
+  ? (
+      props: Record<string, any>,
+      children?:
+        | React.ReactNode
+        | ((state: PressableStateCallbackType) => React.ReactNode)
+        | undefined,
+      shouldPerformContrastCheck: boolean = true,
+    ) => {
+      const checks = useChecks();
+      if (checks === null) {
+        return null;
+      }
+      const {
+        noUndefinedProperty,
+        contrastChecker,
+        onLayout,
+        noUppercaseStringChecker,
+        checkCompatibleAccessibilityState,
+        checkAccessibilityRole,
+        debugStyle,
+      } = checks;
+
+      let style = props.style || {};
+
+      const isAccessible = props.accessible !== false;
+
+      isAccessible &&
+        noUndefinedProperty({
+          properties: props,
+          property: 'accessibilityRole',
+          rule: 'NO_ACCESSIBILITY_ROLE',
+        });
+      isAccessible &&
+        noUndefinedProperty({
+          properties: props,
+          property: 'accessibilityLabel',
+          rule: 'NO_ACCESSIBILITY_LABEL',
+        });
+      isAccessible &&
+        noUppercaseStringChecker({
+          text: props.accessibilityLabel,
+        });
+      checkCompatibleAccessibilityState({
+        accessibilityStates: props?.accessibilityState,
+        accessibilityRole: props?.accessiblityRole,
+      });
+      checkAccessibilityRole(props.accessibilityRole);
+
+      const contrastCheckerCallback = shouldPerformContrastCheck
+        ? contrastChecker
+        : undefined;
+
+      const theStyle = applyStyle?.({
+        style,
+        debugStyle,
+        // @ts-ignore
+        children,
+        contrastCheckerCallback,
+      });
+
+      return {
+        onLayout,
+        debugStyle: theStyle,
+      };
+    }
+  : null;

package/src/hooks/useChecks.d.ts

@@ -0,0 +1,15 @@
+import { LogParams, type CheckFocusTrap, type ContrastChecker, type NoUndefinedProperty, type UppercaseChecker, type UppercaseStringChecker } from '@react-native-ama/internal';
+import { AccessibilityRole, LayoutChangeEvent } from 'react-native';
+export declare const useChecks: () => {
+    logResult: (name: string, result: LogParams | LogParams[] | null) => Record<string, any>;
+    noUndefinedProperty: <T>(params: NoUndefinedProperty<T>) => Record<string, any>;
+    contrastChecker: (params: ContrastChecker) => Record<string, any>;
+    onLayout: (event: LayoutChangeEvent) => void;
+    noUppercaseStringChecker: (params: UppercaseStringChecker) => Record<string, any>;
+    uppercaseChecker: (params: UppercaseChecker) => Record<string, any>;
+    checkFocusTrap: (params: CheckFocusTrap) => void;
+    minimumSizeFailed: boolean;
+    checkCompatibleAccessibilityState: (props: Record<string, any>) => void;
+    checkAccessibilityRole: (param: AccessibilityRole) => void;
+    debugStyle: any;
+} | null;

package/src/hooks/useChecks.js

@@ -0,0 +1,152 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useChecks = void 0;
+const internal_1 = require("@react-native-ama/internal");
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const AMAProvider_1 = require("../components/AMAProvider");
+const useChecks = () => {
+    const context = (0, AMAProvider_1.useAMAContext)();
+    if (!(0, AMAProvider_1.isDevContextValue)(context)) {
+        return null;
+    }
+    /**
+     * Because the AMA Error view cannot be removed by default, this hacky solution
+     * allows the dev to hide it if all the issues have been solved.
+     */
+    const fakeRandom = React.useRef('' + Date.now() + Math.random() * 42);
+    const hasErrors = React.useRef(false);
+    const failedTests = React.useRef([]);
+    const shouldCheckLayout = React.useRef(true);
+    const layoutCheckTimeout = React.useRef();
+    const [minimumSizeFailed, setMinimumSizeFailed] = React.useState(false);
+    const [debugStyle, setDebugStyle] = React.useState({});
+    const { trackError, removeError } = context;
+    const logResult = (name, result) => {
+        const index = failedTests.current.indexOf(name);
+        if (result === null) {
+            if (index >= 0 && hasErrors.current) {
+                failedTests.current.splice(index);
+                hasErrors.current = false;
+                react_native_1.InteractionManager.runAfterInteractions(() => {
+                    removeError(fakeRandom.current);
+                    setTimeout(() => {
+                        setDebugStyle({});
+                    }, 100);
+                });
+            }
+        }
+        const results = Array.isArray(result) ? result : [result];
+        results.forEach(logParam => {
+            if (logParam === null) {
+                return;
+            }
+            const action = internal_1.getRuleAction === null || internal_1.getRuleAction === void 0 ? void 0 : (0, internal_1.getRuleAction)(logParam.rule);
+            const hasFailed = action === 'MUST_NOT' || action === 'MUST';
+            if (index < 0) {
+                // @ts-ignore
+                internal_1.logFailure === null || internal_1.logFailure === void 0 ? void 0 : (0, internal_1.logFailure)(Object.assign({ action }, logParam));
+            }
+            if (!hasFailed) {
+                return;
+            }
+            else if (index >= 0) {
+                return;
+            }
+            failedTests.current.push(name);
+            react_native_1.InteractionManager.runAfterInteractions(() => {
+                trackError(fakeRandom.current);
+                setDebugStyle(internal_1.ERROR_STYLE);
+            });
+            hasErrors.current = true;
+        });
+        // @ts-ignore
+        return hasErrors.current ? internal_1.ERROR_STYLE : {};
+    };
+    const noUndefinedProperty = (params) => logResult(`noUndefinedProperty ${params.property}`, (0, internal_1.noUndefinedProperty)(params));
+    const contrastChecker = (params) => logResult('contrastChecker', (0, internal_1.contrastChecker)(params));
+    const checkMinimumSize = (params) => {
+        return logResult('checkMinimumSize', (0, internal_1.checkMinimumSize)(params));
+    };
+    const noUppercaseStringChecker = (params) => logResult('accessibilityLabelChecker', (0, internal_1.uppercaseStringChecker)(params));
+    const uppercaseChecker = (params) => logResult('uppercaseChecker', (0, internal_1.uppercaseChecker)(params));
+    const checkFocusTrap = (params) => {
+        (0, internal_1.checkFocusTrap)(params).then(result => {
+            logResult('checkFocusTrap', result);
+        });
+    };
+    const checkAccessibilityRole = (param) => {
+        logResult('checkAccessibilityRole', (0, internal_1.checkAccessibilityRole)(param));
+    };
+    const checkCompatibleAccessibilityState = (props) => {
+        const amaStates = ['checked', 'selected'];
+        const params = {
+            accessibilityRole: props.accessibilityRole,
+            accessibilityState: props === null || props === void 0 ? void 0 : props.accessibilityState,
+        };
+        amaStates.forEach(amaState => {
+            if (amaState in props) {
+                // @ts-ignore
+                params[amaState] = props[amaState];
+            }
+        });
+        logResult('checkCompatibleAccessibilityState', (0, internal_1.checkForAccessibilityState)(params));
+    };
+    const onLayout = (event) => {
+        /**
+         * When the check fails there are situation when adding a border makes the
+         * component meet the minimum size requirement, and this causes a loop as the
+         * state is update continuously between true and false.
+         * To "avoid" that we wait at least 100ms before checking the size again, as
+         * this gives the dev time to hot-reload the changes.
+         */
+        if (!shouldCheckLayout.current) {
+            return;
+        }
+        shouldCheckLayout.current = false;
+        // @ts-ignore
+        clearTimeout(layoutCheckTimeout.current);
+        layoutCheckTimeout.current = setTimeout(() => {
+            shouldCheckLayout.current = true;
+        }, 1000);
+        const result = checkMinimumSize(event);
+        setMinimumSizeFailed(Object.keys(result).length > 0);
+    };
+    return {
+        logResult,
+        noUndefinedProperty,
+        contrastChecker,
+        onLayout,
+        noUppercaseStringChecker,
+        uppercaseChecker,
+        checkFocusTrap,
+        minimumSizeFailed,
+        checkCompatibleAccessibilityState,
+        checkAccessibilityRole,
+        debugStyle,
+    };
+};
+exports.useChecks = useChecks;

package/src/hooks/useChecks.test.ts

@@ -0,0 +1,214 @@
+import { type RuleAction } from '@react-native-ama/internal';
+import * as CheckForAccessibilityRole from '@react-native-ama/internal/src/checks/checkAccessibilityRole';
+import * as CheckForAccessibilityState from '@react-native-ama/internal/src/checks/checkForAccessibilityState';
+import * as Logger from '@react-native-ama/internal/src/utils/logger';
+import { renderHook } from '@testing-library/react-native';
+
+import * as AMAProvider from '../components/AMAProvider';
+import { useChecks } from './useChecks';
+
+const trackError = jest.fn();
+const removeError = jest.fn();
+
+beforeEach(() => {
+  jest.clearAllMocks();
+
+  jest.spyOn(console, 'warn').mockImplementation();
+  jest.spyOn(console, 'error').mockImplementation();
+  jest.spyOn(console, 'info').mockImplementation();
+
+  jest.spyOn(AMAProvider, 'useAMAContext').mockReturnValue({
+    trackError,
+    removeError,
+  } as any);
+});
+
+describe('useChecks', () => {
+  it.each(['MUST_NOT', 'MUST'])(
+    'tracks the error only if the rule is %s',
+    ruleValue => {
+      jest
+        // @ts-ignore
+        .spyOn(Logger, 'getRuleAction')
+        // @ts-ignore
+        .mockReturnValue(ruleValue as RuleAction);
+
+      const { result } = renderHook(() => useChecks());
+
+      result.current?.logResult('test-me', {
+        rule: 'NO_UNDEFINED',
+        extra: 'extra',
+        message: 'message',
+      });
+
+      expect(trackError).toHaveBeenCalledTimes(1);
+      expect(trackError).toHaveBeenCalledWith(expect.any(String));
+    },
+  );
+
+  it.each(['SHOULD', 'SHOULD_NOT'])(
+    'does not track the error if the rule is %s',
+    ruleValue => {
+      const spy = jest.spyOn(console, 'warn');
+
+      jest
+        // @ts-ignore
+        .spyOn(Logger, 'getRuleAction')
+        // @ts-ignore
+        .mockReturnValue(ruleValue as RuleAction);
+
+      const { result } = renderHook(() => useChecks());
+
+      result.current?.logResult('test-me', {
+        rule: 'NO_UNDEFINED',
+        extra: 'extra',
+        message: 'message',
+      });
+
+      expect(trackError).not.toHaveBeenCalled();
+
+      expect(spy).toHaveBeenCalled();
+    },
+  );
+
+  it.each(['MUST_NOT', 'MUST'])(
+    'tracks the same error only once',
+    ruleValue => {
+      jest
+        // @ts-ignore
+        .spyOn(Logger, 'getRuleAction')
+        // @ts-ignore
+        .mockReturnValue(ruleValue as RuleAction);
+
+      const { result } = renderHook(() => useChecks());
+
+      result.current?.logResult('test-me', {
+        rule: 'NO_UNDEFINED',
+        extra: 'extra',
+        message: 'message',
+      });
+
+      expect(trackError).toHaveBeenCalledTimes(1);
+
+      trackError.mockClear();
+
+      result.current?.logResult('test-me', {
+        rule: 'NO_UNDEFINED',
+        extra: 'extra',
+        message: 'message',
+      });
+
+      expect(trackError).toHaveBeenCalledTimes(0);
+    },
+  );
+
+  it('removes the tracked error after has been fixed', () => {
+    // @ts-ignore
+    jest.spyOn(Logger, 'getRuleAction').mockReturnValue('MUST');
+
+    const { result } = renderHook(() => useChecks());
+
+    result.current?.logResult('test-me', {
+      rule: 'NO_UNDEFINED',
+      extra: 'extra',
+      message: 'message',
+    });
+
+    expect(trackError).toHaveBeenCalledWith(expect.any(String));
+
+    result.current?.logResult('test-me', null);
+
+    expect(removeError).toHaveBeenCalledWith(trackError.mock.calls[0][0]);
+  });
+
+  it('checks for compatible accessibility state', () => {
+    const check = jest
+      .spyOn(CheckForAccessibilityState, 'checkForAccessibilityState')
+      .mockReturnValue(null);
+    const { result } = renderHook(() => useChecks());
+
+    result.current?.checkCompatibleAccessibilityState({
+      hello: 'world',
+      busy: true,
+      checked: 'wow',
+      accessibilityRole: 'button',
+    });
+
+    expect(check).toHaveBeenCalledWith({
+      accessibilityRole: 'button',
+      accessibilityState: undefined,
+      checked: 'wow',
+    });
+  });
+
+  it('checks for compatible accessibility state when accessibilityState is passed', () => {
+    const check = jest
+      .spyOn(CheckForAccessibilityState, 'checkForAccessibilityState')
+      .mockReturnValue(null);
+    const { result } = renderHook(() => useChecks());
+
+    result.current?.checkCompatibleAccessibilityState({
+      hello: 'world',
+      checked: false,
+      accessibilityState: {
+        selected: 'yeah',
+      },
+      accessibilityRole: 'button',
+    });
+
+    expect(check).toHaveBeenCalledWith({
+      accessibilityRole: 'button',
+      accessibilityState: {
+        selected: 'yeah',
+      },
+      checked: false,
+    });
+  });
+
+  it('checks for compatible accessibility role', () => {
+    const check = jest
+      .spyOn(CheckForAccessibilityRole, 'checkAccessibilityRole')
+      .mockReturnValue(null);
+    const { result } = renderHook(() => useChecks());
+
+    result.current?.checkAccessibilityRole('button');
+
+    expect(check).toHaveBeenCalledWith('button');
+  });
+});
+
+jest.mock('react-native', () => {
+  const ReactNative = jest.requireActual('react-native');
+
+  // Extend ReactNative
+  return Object.setPrototypeOf(
+    {
+      // Redefine an export, like a component
+      Button: 'Button',
+      // Mock out properties of an already mocked export
+      LayoutAnimation: {
+        ...ReactNative.LayoutAnimation,
+        configureNext: jest.fn(),
+      },
+      Platform: {
+        ...ReactNative.Platform,
+        OS: 'ios',
+        Version: 123,
+        isTesting: true,
+        select: (objs: { ios: any }) => objs.ios,
+      },
+      // Mock a native module
+      NativeModules: {
+        ...ReactNative.NativeModules,
+        Override: { great: 'success' },
+      },
+      InteractionManager: {
+        // @ts-ignore
+        runAfterInteractions: callback => {
+          callback();
+        },
+      },
+    },
+    ReactNative,
+  );
+});