update logic and tests

Author: jaworek

src/matchers/__tests__/to-be-disabled.test.tsx

@@ -13,15 +13,20 @@ import { render } from '../..';
 import '../extend-expect';
 
 const ALLOWED_COMPONENTS = {
-  View,
-  TextInput,
   TouchableHighlight,
   TouchableOpacity,
   TouchableWithoutFeedback,
   TouchableNativeFeedback,
   Pressable,
 };
 
+const ARIA_COMPONENTS = {
+  View,
+  TextInput,
+};
+
+const ALL_COMPONENTS = { ...ALLOWED_COMPONENTS, ...ARIA_COMPONENTS };
+
 describe('.toBeDisabled', () => {
   Object.entries(ALLOWED_COMPONENTS).forEach(([name, Component]) => {
     test(`handle disabled prop for element ${name}`, () => {
@@ -37,7 +42,20 @@ describe('.toBeDisabled', () => {
     });
   });
 
-  Object.entries(ALLOWED_COMPONENTS).forEach(([name, Component]) => {
+  Object.entries(ARIA_COMPONENTS).forEach(([name, Component]) => {
+    test(`handle aria-disabled prop for element ${name}`, () => {
+      const { queryByTestId } = render(
+        <Component aria-disabled testID={name}>
+          <TextInput />
+        </Component>
+      );
+
+      expect(queryByTestId(name)).toBeDisabled();
+      expect(() => expect(queryByTestId(name)).not.toBeDisabled()).toThrow();
+    });
+  });
+
+  Object.entries(ALL_COMPONENTS).forEach(([name, Component]) => {
     test(`handle disabled in accessibilityState for element ${name}`, () => {
       const { queryByTestId } = render(
         //@ts-expect-error JSX element type 'Component' does not have any construct or call signatures.ts(2604)
@@ -76,7 +94,7 @@ describe('.toBeDisabled', () => {
 });
 
 describe('.toBeEnabled', () => {
-  Object.entries(ALLOWED_COMPONENTS).forEach(([name, Component]) => {
+  Object.entries(ALL_COMPONENTS).forEach(([name, Component]) => {
     test(`handle disabled prop for element ${name} when undefined`, () => {
       const { queryByTestId } = render(
         //@ts-expect-error JSX element type 'Component' does not have any construct or call signatures.ts(2604)
@@ -90,7 +108,7 @@ describe('.toBeEnabled', () => {
     });
   });
 
-  Object.entries(ALLOWED_COMPONENTS).forEach(([name, Component]) => {
+  Object.entries(ALL_COMPONENTS).forEach(([name, Component]) => {
     test(`handle disabled in accessibilityState for element ${name} when false`, () => {
       const { queryByTestId } = render(
         //@ts-expect-error JSX element type 'Component' does not have any construct or call signatures.ts(2604)

src/matchers/to-be-disabled.tsx

@@ -1,35 +1,16 @@
 import type { ReactTestInstance } from 'react-test-renderer';
 import { matcherHint } from 'jest-matcher-utils';
-import { checkHostElement, formatMessage, getType } from './utils';
-
-// Elements that support 'disabled'
-const DISABLE_TYPES = [
-  'Button',
-  'Slider',
-  'Switch',
-  'Text',
-  'TouchableHighlight',
-  'TouchableOpacity',
-  'TouchableWithoutFeedback',
-  'TouchableNativeFeedback',
-  'View',
-  'TextInput',
-  'Pressable',
-];
+import { isHostTextInput } from '../helpers/host-component-names';
+import { checkHostElement, formatMessage } from './utils';
 
 function isElementDisabled(element: ReactTestInstance) {
-  if (getType(element) === 'TextInput' && element?.props?.editable === false) {
+  if (isHostTextInput(element) && element?.props?.editable === false) {
     return true;
   }
 
-  if (!DISABLE_TYPES.includes(getType(element))) {
-    return false;
-  }
-
   return (
-    !!element?.props?.disabled ||
-    !!element?.props?.accessibilityState?.disabled ||
-    !!element?.props?.accessibilityStates?.includes('disabled')
+    !!element?.props?.['aria-disabled'] ||
+    !!element?.props?.accessibilityState?.disabled
   );
 }
 
@@ -60,8 +41,8 @@ export function toBeDisabled(
             ''
           ),
           '',
+          '',
           `Received element ${is} disabled:`,
-          printElement(element),
           null
         ),
       ].join('\n');
@@ -82,10 +63,13 @@ export function toBeEnabled(
     message: () => {
       const is = isEnabled ? 'is' : 'is not';
       return [
-        matcherHint(`${this.isNot ? '.not' : ''}.toBeEnabled`, 'element', ''),
-        '',
-        `Received element ${is} enabled:`,
-        printElement(element),
+        formatMessage(
+          matcherHint(`${this.isNot ? '.not' : ''}.toBeEnabled`, 'element', ''),
+          '',
+          '',
+          `Received element ${is} enabled:`,
+          null
+        ),
       ].join('\n');
     },
   };

src/matchers/utils.tsx

@@ -121,8 +121,3 @@ export function formatMessage(
 function formatValue(value: unknown) {
   return typeof value === 'string' ? value : stringify(value);
 }
-
-export function getType({ type }: ReactTestInstance) {
-  // @ts-expect-error: ReactTestInstance contains too loose typing
-  return type.displayName || type.name || type;
-}