Skip to content

Commit

Permalink
[jest] Fix enabled prop in buttons. (#3062)
Browse files Browse the repository at this point in the history
## Description

Currently using `enabled` prop in our buttons doesn't work. Mocks are done using `TouchableNativeFeedback` and it has `disabled` prop instead of `enabled`. This PR changes mocked version of our buttons to handle `enabled` properly.

Fixes #2385 

## Test plan

<details>
<summary>Run the following test</summary>

```tsx
import { fireEvent, render } from '@testing-library/react-native';
import Mocks from '../mocks';

describe.only('Testing disabled Button', () => {
  it('onPress does not trigger', function () {
    const onPress = jest.fn();
    const { getByTestId } = render(
      <Mocks.RectButton testID="btn" onPress={onPress} enabled={false} />
    );
    const btn = getByTestId('btn');

    expect(onPress).not.toHaveBeenCalled();
    fireEvent.press(btn);
    expect(onPress).not.toHaveBeenCalled();
  });
});
```

</details>
  • Loading branch information
m-bert authored Aug 26, 2024
1 parent 1f08299 commit b5c3aea
Showing 1 changed file with 8 additions and 3 deletions.
11 changes: 8 additions & 3 deletions src/mocks.ts → src/mocks.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import React from 'react';
import {
TouchableHighlight,
TouchableNativeFeedback,
Expand Down Expand Up @@ -30,9 +31,13 @@ const LongPressGestureHandler = View;
const PinchGestureHandler = View;
const RotationGestureHandler = View;
const FlingGestureHandler = View;
const RawButton = TouchableNativeFeedback;
const BaseButton = TouchableNativeFeedback;
const RectButton = TouchableNativeFeedback;
const RawButton = ({ enabled, ...rest }: any) => (
<TouchableNativeFeedback disabled={!enabled} {...rest}>
<View />
</TouchableNativeFeedback>
);
const BaseButton = RawButton;
const RectButton = RawButton;
const BorderlessButton = TouchableNativeFeedback;

export default {
Expand Down

0 comments on commit b5c3aea

Please sign in to comment.