mirror of
https://github.com/status-im/react-native.git
synced 2025-02-23 06:38:13 +00:00
9cd6ae2f4b
Summary: Previously the e2e test for Butto looked up elements by label. This can be fragile, and based on my understanding from TheSavior we would prefer to use testIDs. This also sets a consistent pattern we can point future contributors to, to follow. Note that we are still looking up elements in the alerts shown by label. I haven't yet looked into whether it would be possible to add testIDs to alerts; it might be too complex to be worth it. Pull Request resolved: https://github.com/facebook/react-native/pull/22593 Differential Revision: D13410799 Pulled By: TheSavior fbshipit-source-id: 4bda80f4b8e7fe3ef17cd33209ec86d9183fd5e9
109 lines
2.8 KiB
JavaScript
109 lines
2.8 KiB
JavaScript
/**
|
|
* 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
|
|
* @flow strict-local
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
const React = require('react');
|
|
const ReactNative = require('react-native');
|
|
const {Alert, Button, View, StyleSheet} = ReactNative;
|
|
|
|
function onButtonPress(buttonName) {
|
|
Alert.alert(`${buttonName} has been pressed!`);
|
|
}
|
|
|
|
exports.displayName = 'ButtonExample';
|
|
exports.framework = 'React';
|
|
exports.title = '<Button>';
|
|
exports.description = 'Simple React Native button component.';
|
|
|
|
exports.examples = [
|
|
{
|
|
title: 'Simple Button',
|
|
description:
|
|
'The title and onPress handler are required. It is ' +
|
|
'recommended to set accessibilityLabel to help make your app usable by ' +
|
|
'everyone.',
|
|
render: function() {
|
|
return (
|
|
<Button
|
|
onPress={() => onButtonPress('Simple')}
|
|
testID="simple_button"
|
|
title="Press Me"
|
|
accessibilityLabel="See an informative alert"
|
|
/>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Adjusted color',
|
|
description:
|
|
'Adjusts the color in a way that looks standard on each ' +
|
|
'platform. On iOS, the color prop controls the color of the text. On ' +
|
|
'Android, the color adjusts the background color of the button.',
|
|
render: function() {
|
|
return (
|
|
<Button
|
|
onPress={() => onButtonPress('Purple')}
|
|
testID="purple_button"
|
|
title="Press Purple"
|
|
color="#841584"
|
|
accessibilityLabel="Learn more about purple"
|
|
/>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Fit to text layout',
|
|
description:
|
|
'This layout strategy lets the title define the width of ' + 'the button',
|
|
render: function() {
|
|
return (
|
|
<View style={styles.container}>
|
|
<Button
|
|
onPress={() => onButtonPress('Left')}
|
|
testID="left_button"
|
|
title="This looks great!"
|
|
accessibilityLabel="This sounds great!"
|
|
/>
|
|
<Button
|
|
onPress={() => onButtonPress('Right')}
|
|
testID="right_button"
|
|
title="Ok!"
|
|
color="#841584"
|
|
accessibilityLabel="Ok, Great!"
|
|
/>
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Disabled Button',
|
|
description: 'All interactions for the component are disabled.',
|
|
render: function() {
|
|
return (
|
|
<Button
|
|
disabled
|
|
onPress={() => onButtonPress('Disabled')}
|
|
testID="disabled_button"
|
|
title="I Am Disabled"
|
|
accessibilityLabel="See an informative alert"
|
|
/>
|
|
);
|
|
},
|
|
},
|
|
];
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
},
|
|
});
|