diff --git a/README.md b/README.md index 7015f30..3633258 100644 --- a/README.md +++ b/README.md @@ -34,6 +34,7 @@ ## Table of Contents +- [Table of Contents](#table-of-contents) - [The problem](#the-problem) - [This solution](#this-solution) - [Compatibility](#compatibility) @@ -41,15 +42,25 @@ - [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 index eadbfa9..4a017f6 100644 --- 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( - + , @@ -92,9 +92,9 @@ describe('.toBeEnabled', () => { }); }); - test('handle editable prop for TextInput when true', () => { + test('handle editable prop for TextInput', () => { const { queryByTestId } = render( - + diff --git a/src/to-be-disabled.ts b/src/to-be-disabled.ts index 995e583..c6f37dd 100644 --- 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') ); }