Increase test coverage and run expensive checks last

Author: AugustinLF

src/queries/__tests__/role.test.tsx

@@ -1,5 +1,12 @@
 import * as React from 'react';
-import { TouchableOpacity, Text, View } from 'react-native';
+import {
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  Text,
+  View,
+  Pressable,
+  Button as RNButton,
+} from 'react-native';
 import { render } from '../..';
 
 const TEXT_LABEL = 'cool text';
@@ -245,6 +252,39 @@ describe('supports accessibility states', () => {
 
       expect(queryByRole('button', { disabled: false })).toBe(null);
     });
+
+    test('returns elements using the built-in disabled prop', () => {
+      const { debug, getByRole } = render(
+        <>
+          <Pressable disabled accessibilityRole="button">
+            <Text>Pressable</Text>
+          </Pressable>
+
+          <TouchableWithoutFeedback disabled accessibilityRole="button">
+            <View>
+              <Text>TouchableWithoutFeedback</Text>
+            </View>
+          </TouchableWithoutFeedback>
+          <RNButton disabled onPress={() => {}} title="RNButton" />
+        </>
+      );
+
+      expect(
+        getByRole('button', { name: 'Pressable', disabled: true })
+      ).toBeTruthy();
+
+      expect(
+        getByRole('button', {
+          name: 'TouchableWithoutFeedback',
+          disabled: true,
+        })
+      ).toBeTruthy();
+      debug();
+
+      expect(
+        getByRole('button', { name: 'RNButton', disabled: true })
+      ).toBeTruthy();
+    });
   });
 
   describe('selected', () => {
@@ -525,6 +565,28 @@ describe('supports accessibility states', () => {
     });
   });
 
+  test('ignores non queried accessibilityState', () => {
+    const { getByRole } = render(
+      <TouchableOpacity
+        accessibilityRole="button"
+        accessibilityState={{
+          disabled: true,
+          // set `selected`, but don't query it
+          selected: true,
+        }}
+      >
+        <Text>Save</Text>
+      </TouchableOpacity>
+    );
+
+    expect(
+      getByRole('button', {
+        name: 'Save',
+        disabled: true,
+      })
+    ).toBeTruthy();
+  });
+
   test('matches an element combining all the options', () => {
     const { getByRole } = render(
       <TouchableOpacity

src/queries/role.ts

@@ -42,31 +42,34 @@ const queryAllByRole = (
 ): ((role: TextMatch, options?: ByRoleOptions) => Array<ReactTestInstance>) =>
   function queryAllByRoleFn(role, options) {
     return instance.findAll((node) => {
+      // run the cheapest checks first, and early exit too avoid unneeded computations
       const matchRole =
         typeof node.type === 'string' &&
         matchStringProp(node.props.accessibilityRole, role);
 
       if (!matchRole) return false;
 
-      if (options?.name) {
-        if (!matchAccessibleNameIfNeeded(node, options.name)) {
-          return false;
+      const mismatchAccessibilityState = accessibilityStates.some(
+        (accessibilityState) => {
+          const queriedState = options?.[accessibilityState];
+
+          if (typeof queriedState !== 'undefined') {
+            return (
+              queriedState !==
+              // default to false because disabled:undefined is equivalent to disabled:false
+              (node.props.accessibilityState?.[accessibilityState] ?? false)
+            );
+          } else {
+            return false;
+          }
         }
+      );
+
+      if (mismatchAccessibilityState) {
+        return false;
       }
 
-      return accessibilityStates.every((accessibilityState) => {
-        const queriedState = options?.[accessibilityState];
-
-        if (typeof queriedState !== 'undefined') {
-          return (
-            queriedState ===
-            // default to false because disabled:undefined is equivalent to disabled:false
-            (node.props.accessibilityState?.[accessibilityState] ?? false)
-          );
-        } else {
-          return true;
-        }
-      });
+      return matchAccessibleNameIfNeeded(node, options?.name);
     });
   };