Skip to content

Commit

Permalink
feat: add displayName to touchables (#29531)
Browse files Browse the repository at this point in the history
Summary:
Since TouchableHighlight and TouchableOpacity are being exported using `forwardRef`, it's messing up jest's snapshots and some matchers.
This commit 4b935ae fixed this for components being mocked on [setup.js](https://github.com/facebook/react-native/blob/master/jest/setup.js). However, these Touchables aren't being mocked.

It resolves #27721

## Changelog

[General] [Added] - Add displayName to TouchableHighlight and TouchableOpacity

Pull Request resolved: #29531

Test Plan: Check the new snapshots.

Reviewed By: kacieb

Differential Revision: D27485269

Pulled By: yungsters

fbshipit-source-id: ba2082a4ae9f97ebe93ba92971d58c9195bdf26d
  • Loading branch information
brunohkbx authored and facebook-github-bot committed Apr 1, 2021
1 parent 679f38f commit c4e40b8
Show file tree
Hide file tree
Showing 11 changed files with 189 additions and 9 deletions.
6 changes: 5 additions & 1 deletion Libraries/Components/Touchable/TouchableHighlight.js
Original file line number Diff line number Diff line change
Expand Up @@ -357,9 +357,13 @@ class TouchableHighlight extends React.Component<Props, State> {
}
}

module.exports = (React.forwardRef((props, hostRef) => (
const Touchable = (React.forwardRef((props, hostRef) => (
<TouchableHighlight {...props} hostRef={hostRef} />
)): React.AbstractComponent<
$ReadOnly<$Diff<Props, {|hostRef: React.Ref<typeof View>|}>>,
React.ElementRef<typeof View>,
>);

Touchable.displayName = 'TouchableHighlight';

module.exports = Touchable;
2 changes: 2 additions & 0 deletions Libraries/Components/Touchable/TouchableNativeFeedback.js
Original file line number Diff line number Diff line change
Expand Up @@ -313,4 +313,6 @@ const getBackgroundProp =
: {nativeBackgroundAndroid: background}
: (background, useForeground) => null;

TouchableNativeFeedback.displayName = 'TouchableNativeFeedback';

module.exports = TouchableNativeFeedback;
6 changes: 5 additions & 1 deletion Libraries/Components/Touchable/TouchableOpacity.js
Original file line number Diff line number Diff line change
Expand Up @@ -265,6 +265,10 @@ class TouchableOpacity extends React.Component<Props, State> {
}
}

module.exports = (React.forwardRef((props, ref) => (
const Touchable = (React.forwardRef((props, ref) => (
<TouchableOpacity {...props} hostRef={ref} />
)): React.AbstractComponent<Props, React.ElementRef<typeof Animated.View>>);

Touchable.displayName = 'TouchableOpacity';

module.exports = Touchable;
2 changes: 2 additions & 0 deletions Libraries/Components/Touchable/TouchableWithoutFeedback.js
Original file line number Diff line number Diff line change
Expand Up @@ -157,4 +157,6 @@ function createPressabilityConfig(props: Props): PressabilityConfig {
};
}

TouchableWithoutFeedback.displayName = 'TouchableWithoutFeedback';

module.exports = TouchableWithoutFeedback;
Original file line number Diff line number Diff line change
Expand Up @@ -11,27 +11,32 @@
'use strict';

import * as React from 'react';
import ReactTestRenderer from 'react-test-renderer';
import Text from '../../../Text/Text';
import View from '../../View/View';
import TouchableHighlight from '../TouchableHighlight';

const render = require('../../../../jest/renderer');

describe('TouchableHighlight', () => {
it('renders correctly', () => {
const instance = ReactTestRenderer.create(
const instance = render.create(
<TouchableHighlight style={{}}>
<Text>Touchable</Text>
</TouchableHighlight>,
);

expect(instance.toJSON()).toMatchSnapshot();
});

it('has displayName', () => {
expect(TouchableHighlight.displayName).toEqual('TouchableHighlight');
});
});

describe('TouchableHighlight with disabled state', () => {
it('should be disabled when disabled is true', () => {
expect(
ReactTestRenderer.create(
render.create(
<TouchableHighlight disabled={true}>
<View />
</TouchableHighlight>,
Expand All @@ -41,7 +46,7 @@ describe('TouchableHighlight with disabled state', () => {

it('should be disabled when disabled is true and accessibilityState is empty', () => {
expect(
ReactTestRenderer.create(
render.create(
<TouchableHighlight disabled={true} accessibilityState={{}}>
<View />
</TouchableHighlight>,
Expand All @@ -51,7 +56,7 @@ describe('TouchableHighlight with disabled state', () => {

it('should keep accessibilityState when disabled is true', () => {
expect(
ReactTestRenderer.create(
render.create(
<TouchableHighlight
disabled={true}
accessibilityState={{checked: true}}>
Expand All @@ -63,7 +68,7 @@ describe('TouchableHighlight with disabled state', () => {

it('should overwrite accessibilityState with value of disabled prop', () => {
expect(
ReactTestRenderer.create(
render.create(
<TouchableHighlight
disabled={true}
accessibilityState={{disabled: false}}>
Expand All @@ -75,7 +80,7 @@ describe('TouchableHighlight with disabled state', () => {

it('should disable button when accessibilityState is disabled', () => {
expect(
ReactTestRenderer.create(
render.create(
<TouchableHighlight accessibilityState={{disabled: true}}>
<View />
</TouchableHighlight>,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
* @emails oncall+react_native
*/

'use strict';

const React = require('react');
const Text = require('../../../Text/Text');
const TouchableNativeFeedback = require('../TouchableNativeFeedback');

const render = require('../../../../jest/renderer');

describe('TouchableWithoutFeedback', () => {
it('renders correctly', () => {
const instance = render.create(
<TouchableNativeFeedback style={{}}>
<Text>Touchable</Text>
</TouchableNativeFeedback>,
);

expect(instance.toJSON()).toMatchSnapshot();
});

it('has displayName', () => {
expect(TouchableNativeFeedback.displayName).toEqual(
'TouchableNativeFeedback',
);
});
});
33 changes: 33 additions & 0 deletions Libraries/Components/Touchable/__tests__/TouchableOpacity-test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
* @emails oncall+react_native
*/

'use strict';

const React = require('react');
const Text = require('../../../Text/Text');
const TouchableOpacity = require('../TouchableOpacity');

const render = require('../../../../jest/renderer');

describe('TouchableOpacity', () => {
it('renders correctly', () => {
const instance = render.create(
<TouchableOpacity style={{}}>
<Text>Touchable</Text>
</TouchableOpacity>,
);

expect(instance.toJSON()).toMatchSnapshot();
});

it('has displayName', () => {
expect(TouchableOpacity.displayName).toEqual('TouchableOpacity');
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
* @emails oncall+react_native
*/

'use strict';

const React = require('react');
const Text = require('../../../Text/Text');
const TouchableWithoutFeedback = require('../TouchableWithoutFeedback');

const render = require('../../../../jest/renderer');

describe('TouchableWithoutFeedback', () => {
it('renders correctly', () => {
const instance = render.create(
<TouchableWithoutFeedback style={{}}>
<Text>Touchable</Text>
</TouchableWithoutFeedback>,
);

expect(instance.toJSON()).toMatchSnapshot();
});

it('has displayName', () => {
expect(TouchableWithoutFeedback.displayName).toEqual(
'TouchableWithoutFeedback',
);
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`TouchableWithoutFeedback renders correctly 1`] = `
<Text
accessible={true}
focusable={false}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
>
Touchable
</Text>
`;
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`TouchableOpacity renders correctly 1`] = `
<View
accessible={true}
collapsable={false}
focusable={false}
nativeID="animatedComponent"
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Object {
"opacity": 1,
}
}
>
<Text>
Touchable
</Text>
</View>
`;
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`TouchableWithoutFeedback renders correctly 1`] = `
<Text
accessible={true}
focusable={false}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
>
Touchable
</Text>
`;

0 comments on commit c4e40b8

Please sign in to comment.