fix: support TextInput editable={false} prop check in isEnabled/isDis…

…abled matchers (#135) Co-authored-by: Maciej Jastrzebski <[email protected]>
testing-library · Dec 9, 2022 · 4f74aa4 · 4f74aa4
1 parent d65e9f2
commit 4f74aa4
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -119,8 +119,10 @@ toBeDisabled();
 
 Check whether or not an element is disabled from a user perspective.
 
-This matcher will check if the element or its parent has a `disabled` prop, or if it has
-`accessibilityState={{disabled: true}}.
+This matcher will check if the element or its parent has any of the following props :
+- `disabled`
+- `accessibilityState={{ disabled: true }}`
+- `editable={false}` (for `TextInput` only)
 
 It also works with `accessibilityStates={['disabled']}` for now. However, this prop is deprecated in
 React Native [0.62](https://reactnative.dev/blog/2020/03/26/version-0.62#breaking-changes)

diff --git a/src/__tests__/to-be-disabled.tsx b/src/__tests__/to-be-disabled.tsx
@@ -49,6 +49,26 @@ describe('.toBeDisabled', () => {
       expect(() => expect(queryByTestId(name)).not.toBeDisabled()).toThrow();
     });
   });
+
+  test('handle editable prop for TextInput', () => {
+    const { getByTestId, getByPlaceholderText } = render(
+      <View>
+        <TextInput testID="disabled" placeholder="disabled" editable={false} />
+        <TextInput testID="enabled-by-default" placeholder="enabled-by-default" />
+        <TextInput testID="enabled" placeholder="enabled" editable />
+      </View>,
+    );
+
+    // Check host TextInput
+    expect(getByTestId('disabled')).toBeDisabled();
+    expect(getByTestId('enabled-by-default')).not.toBeDisabled();
+    expect(getByTestId('enabled')).not.toBeDisabled();
+
+    // Check composite TextInput
+    expect(getByPlaceholderText('disabled')).toBeDisabled();
+    expect(getByPlaceholderText('enabled-by-default')).not.toBeDisabled();
+    expect(getByPlaceholderText('enabled')).not.toBeDisabled();
+  });
 });
 
 describe('.toBeEnabled', () => {
@@ -79,12 +99,32 @@ describe('.toBeEnabled', () => {
       expect(() => expect(queryByTestId(name)).not.toBeEnabled()).toThrow();
     });
   });
+
+  test('handle editable prop for TextInput', () => {
+    const { getByTestId, getByPlaceholderText } = render(
+      <View>
+        <TextInput testID="enabled-by-default" placeholder="enabled-by-default" />
+        <TextInput testID="enabled" placeholder="enabled" editable />
+        <TextInput testID="disabled" placeholder="disabled" editable={false} />
+      </View>,
+    );
+
+    // Check host TextInput
+    expect(getByTestId('enabled-by-default')).toBeEnabled();
+    expect(getByTestId('enabled')).toBeEnabled();
+    expect(getByTestId('disabled')).not.toBeEnabled();
+
+    // Check composite TextInput
+    expect(getByPlaceholderText('enabled-by-default')).toBeEnabled();
+    expect(getByPlaceholderText('enabled')).toBeEnabled();
+    expect(getByPlaceholderText('disabled')).not.toBeEnabled();
+  });
 });
 
 describe('for .toBeEnabled/Disabled Button', () => {
   test('handles disabled prop for button', () => {
     const { queryByTestId } = render(
-      <View testID="view">
+      <View>
         <Button testID="enabled" title="enabled" />
         <Button disabled testID="disabled" title="disabled" />
       </View>,
@@ -96,7 +136,7 @@ describe('for .toBeEnabled/Disabled Button', () => {
 
   test('handles button a11y state', () => {
     const { queryByTestId } = render(
-      <View testID="view">
+      <View>
         <Button accessibilityState={{ disabled: false }} testID="enabled" title="enabled" />
         <Button accessibilityState={{ disabled: true }} testID="disabled" title="disabled" />
       </View>,
@@ -108,7 +148,7 @@ describe('for .toBeEnabled/Disabled Button', () => {
 
   test('Errors when matcher misses', () => {
     const { queryByTestId, queryByText } = render(
-      <View testID="view">
+      <View>
         <Button testID="enabled" title="enabled" />
         <Button disabled testID="disabled" title="disabled" />
       </View>,

diff --git a/src/to-be-disabled.ts b/src/to-be-disabled.ts
@@ -18,7 +18,13 @@ const DISABLE_TYPES = [
 ];
 
 function isElementDisabled(element: ReactTestInstance) {
-  if (!DISABLE_TYPES.includes(getType(element))) return false;
+  if (getType(element) === 'TextInput' && element?.props?.editable === false) {
+    return true;
+  }
+
+  if (!DISABLE_TYPES.includes(getType(element))) {
+    return false;
+  }
 
   return (
     !!element?.props?.disabled ||