fix: editable check only for TextInput and wording

testing-library · Dec 9, 2022 · 42f9c49 · 42f9c49
1 parent 5e0cda3
commit 42f9c49
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -34,22 +34,33 @@
 
 ## Table of Contents
 
+- [Table of Contents](#table-of-contents)
 - [The problem](#the-problem)
 - [This solution](#this-solution)
 - [Compatibility](#compatibility)
 - [Installation](#installation)
 - [Usage](#usage)
 - [Matchers](#matchers)
   - [`toBeDisabled`](#tobedisabled)
+    - [Examples](#examples)
   - [`toBeEnabled`](#tobeenabled)
+    - [Examples](#examples-1)
   - [`toBeEmptyElement`](#tobeemptyelement)
+    - [Examples](#examples-2)
   - [`toContainElement`](#tocontainelement)
+    - [Examples](#examples-3)
   - [`toHaveProp`](#tohaveprop)
+    - [Examples](#examples-4)
   - [`toHaveTextContent`](#tohavetextcontent)
+    - [Examples](#examples-5)
   - [`toHaveStyle`](#tohavestyle)
+    - [Examples](#examples-6)
   - [`toBeVisible`](#tobevisible)
+    - [Examples](#examples-7)
   - [`toHaveAccessibilityState`](#tohaveaccessibilitystate)
+    - [Examples](#examples-8)
   - [`toHaveAccessibilityValue`](#tohaveaccessibilityvalue)
+    - [Examples](#examples-9)
 - [Inspiration](#inspiration)
 - [Other solutions](#other-solutions)
 - [Contributors](#contributors)
@@ -119,11 +130,11 @@ toBeDisabled();
 
 Check whether or not an element is disabled from a user perspective.
 
-This matcher will check if the element or its parent has any of thoses props value:
+This matcher will check if the element or its parent has any of those props :
 
 - `disabled={true}`
 - `accessibilityState={{disabled: true}}`
-- `editable={false}`
+- `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
@@ -50,9 +50,9 @@ describe('.toBeDisabled', () => {
     });
   });
 
-  test('handle editable prop for TextInput when false', () => {
+  test('handle editable prop for TextInput', () => {
     const { queryByTestId } = render(
-      <View testID="view">
+      <View>
         <TextInput testID="disabled" editable={false} />
         <TextInput testID="enabled" editable />
       </View>,
@@ -92,9 +92,9 @@ describe('.toBeEnabled', () => {
     });
   });
 
-  test('handle editable prop for TextInput when true', () => {
+  test('handle editable prop for TextInput', () => {
     const { queryByTestId } = render(
-      <View testID="view">
+      <View>
         <TextInput testID="enabled-by-default" />
         <TextInput testID="enabled" editable />
         <TextInput testID="disabled" editable={false} />

diff --git a/src/to-be-disabled.ts b/src/to-be-disabled.ts
@@ -19,12 +19,14 @@ 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;
+  }
 
   return (
     !!element?.props?.disabled ||
     !!element?.props?.accessibilityState?.disabled ||
-    !!element?.props?.accessibilityStates?.includes('disabled') ||
-    element?.props?.editable === false
+    !!element?.props?.accessibilityStates?.includes('disabled')
   );
 }