feat: add displayName to touchables (#29531)
Summary:
Since TouchableHighlight and TouchableOpacity are being exported using `forwardRef`, it's messing up jest's snapshots and some matchers.
This commit 4b935ae95f
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 https://github.com/facebook/react-native/issues/27721
## Changelog
[General] [Added] - Add displayName to TouchableHighlight and TouchableOpacity
Pull Request resolved: https://github.com/facebook/react-native/pull/29531
Test Plan: Check the new snapshots.
Reviewed By: kacieb
Differential Revision: D27485269
Pulled By: yungsters
fbshipit-source-id: ba2082a4ae9f97ebe93ba92971d58c9195bdf26d
This commit is contained in:
Родитель
679f38f1c5
Коммит
c4e40b81c0
|
@ -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} />
|
<TouchableHighlight {...props} hostRef={hostRef} />
|
||||||
)): React.AbstractComponent<
|
)): React.AbstractComponent<
|
||||||
$ReadOnly<$Diff<Props, {|hostRef: React.Ref<typeof View>|}>>,
|
$ReadOnly<$Diff<Props, {|hostRef: React.Ref<typeof View>|}>>,
|
||||||
React.ElementRef<typeof View>,
|
React.ElementRef<typeof View>,
|
||||||
>);
|
>);
|
||||||
|
|
||||||
|
Touchable.displayName = 'TouchableHighlight';
|
||||||
|
|
||||||
|
module.exports = Touchable;
|
||||||
|
|
|
@ -313,4 +313,6 @@ const getBackgroundProp =
|
||||||
: {nativeBackgroundAndroid: background}
|
: {nativeBackgroundAndroid: background}
|
||||||
: (background, useForeground) => null;
|
: (background, useForeground) => null;
|
||||||
|
|
||||||
|
TouchableNativeFeedback.displayName = 'TouchableNativeFeedback';
|
||||||
|
|
||||||
module.exports = TouchableNativeFeedback;
|
module.exports = TouchableNativeFeedback;
|
||||||
|
|
|
@ -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} />
|
<TouchableOpacity {...props} hostRef={ref} />
|
||||||
)): React.AbstractComponent<Props, React.ElementRef<typeof Animated.View>>);
|
)): React.AbstractComponent<Props, React.ElementRef<typeof Animated.View>>);
|
||||||
|
|
||||||
|
Touchable.displayName = 'TouchableOpacity';
|
||||||
|
|
||||||
|
module.exports = Touchable;
|
||||||
|
|
|
@ -157,4 +157,6 @@ function createPressabilityConfig(props: Props): PressabilityConfig {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
TouchableWithoutFeedback.displayName = 'TouchableWithoutFeedback';
|
||||||
|
|
||||||
module.exports = TouchableWithoutFeedback;
|
module.exports = TouchableWithoutFeedback;
|
||||||
|
|
|
@ -11,14 +11,15 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import ReactTestRenderer from 'react-test-renderer';
|
|
||||||
import Text from '../../../Text/Text';
|
import Text from '../../../Text/Text';
|
||||||
import View from '../../View/View';
|
import View from '../../View/View';
|
||||||
import TouchableHighlight from '../TouchableHighlight';
|
import TouchableHighlight from '../TouchableHighlight';
|
||||||
|
|
||||||
|
const render = require('../../../../jest/renderer');
|
||||||
|
|
||||||
describe('TouchableHighlight', () => {
|
describe('TouchableHighlight', () => {
|
||||||
it('renders correctly', () => {
|
it('renders correctly', () => {
|
||||||
const instance = ReactTestRenderer.create(
|
const instance = render.create(
|
||||||
<TouchableHighlight style={{}}>
|
<TouchableHighlight style={{}}>
|
||||||
<Text>Touchable</Text>
|
<Text>Touchable</Text>
|
||||||
</TouchableHighlight>,
|
</TouchableHighlight>,
|
||||||
|
@ -26,12 +27,16 @@ describe('TouchableHighlight', () => {
|
||||||
|
|
||||||
expect(instance.toJSON()).toMatchSnapshot();
|
expect(instance.toJSON()).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('has displayName', () => {
|
||||||
|
expect(TouchableHighlight.displayName).toEqual('TouchableHighlight');
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('TouchableHighlight with disabled state', () => {
|
describe('TouchableHighlight with disabled state', () => {
|
||||||
it('should be disabled when disabled is true', () => {
|
it('should be disabled when disabled is true', () => {
|
||||||
expect(
|
expect(
|
||||||
ReactTestRenderer.create(
|
render.create(
|
||||||
<TouchableHighlight disabled={true}>
|
<TouchableHighlight disabled={true}>
|
||||||
<View />
|
<View />
|
||||||
</TouchableHighlight>,
|
</TouchableHighlight>,
|
||||||
|
@ -41,7 +46,7 @@ describe('TouchableHighlight with disabled state', () => {
|
||||||
|
|
||||||
it('should be disabled when disabled is true and accessibilityState is empty', () => {
|
it('should be disabled when disabled is true and accessibilityState is empty', () => {
|
||||||
expect(
|
expect(
|
||||||
ReactTestRenderer.create(
|
render.create(
|
||||||
<TouchableHighlight disabled={true} accessibilityState={{}}>
|
<TouchableHighlight disabled={true} accessibilityState={{}}>
|
||||||
<View />
|
<View />
|
||||||
</TouchableHighlight>,
|
</TouchableHighlight>,
|
||||||
|
@ -51,7 +56,7 @@ describe('TouchableHighlight with disabled state', () => {
|
||||||
|
|
||||||
it('should keep accessibilityState when disabled is true', () => {
|
it('should keep accessibilityState when disabled is true', () => {
|
||||||
expect(
|
expect(
|
||||||
ReactTestRenderer.create(
|
render.create(
|
||||||
<TouchableHighlight
|
<TouchableHighlight
|
||||||
disabled={true}
|
disabled={true}
|
||||||
accessibilityState={{checked: true}}>
|
accessibilityState={{checked: true}}>
|
||||||
|
@ -63,7 +68,7 @@ describe('TouchableHighlight with disabled state', () => {
|
||||||
|
|
||||||
it('should overwrite accessibilityState with value of disabled prop', () => {
|
it('should overwrite accessibilityState with value of disabled prop', () => {
|
||||||
expect(
|
expect(
|
||||||
ReactTestRenderer.create(
|
render.create(
|
||||||
<TouchableHighlight
|
<TouchableHighlight
|
||||||
disabled={true}
|
disabled={true}
|
||||||
accessibilityState={{disabled: false}}>
|
accessibilityState={{disabled: false}}>
|
||||||
|
@ -75,7 +80,7 @@ describe('TouchableHighlight with disabled state', () => {
|
||||||
|
|
||||||
it('should disable button when accessibilityState is disabled', () => {
|
it('should disable button when accessibilityState is disabled', () => {
|
||||||
expect(
|
expect(
|
||||||
ReactTestRenderer.create(
|
render.create(
|
||||||
<TouchableHighlight accessibilityState={{disabled: true}}>
|
<TouchableHighlight accessibilityState={{disabled: true}}>
|
||||||
<View />
|
<View />
|
||||||
</TouchableHighlight>,
|
</TouchableHighlight>,
|
||||||
|
|
|
@ -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',
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
|
@ -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');
|
||||||
|
});
|
||||||
|
});
|
|
@ -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',
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
|
@ -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,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>
|
||||||
|
`;
|
|
@ -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>
|
||||||
|
`;
|
Загрузка…
Ссылка в новой задаче