diff --git a/packages/rn-tester/e2e/__tests__/Button-test.js b/packages/rn-tester/e2e/__tests__/Button-test.js
index 53588b168a525a..9a0d6ff526cf6e 100644
--- a/packages/rn-tester/e2e/__tests__/Button-test.js
+++ b/packages/rn-tester/e2e/__tests__/Button-test.js
@@ -23,36 +23,83 @@ describe('Button', () => {
);
});
- it('Simple button should be tappable', async () => {
- await openExampleWithTitle('Simple Button');
- await element(by.id('simple_button')).tap();
- await expect(element(by.text('Simple has been pressed!'))).toBeVisible();
+ it('Default Styling button should be tappable', async () => {
+ await openExampleWithTitle('Default Styling');
+ await element(by.id('button_default_styling')).tap();
+ await expect(
+ element(by.text('Your application has been submitted!')),
+ ).toBeVisible();
await element(by.text('OK')).tap();
});
- it('Adjusted color button should be tappable', async () => {
- await openExampleWithTitle('Adjusted color');
- await element(by.id('purple_button')).tap();
- await expect(element(by.text('Purple has been pressed!'))).toBeVisible();
+ it('Red color button should be tappable', async () => {
+ await openExampleWithTitle('Color');
+ await element(by.id('cancel_button')).tap();
+ await expect(
+ element(by.text('Your application has been cancelled!')),
+ ).toBeVisible();
await element(by.text('OK')).tap();
});
it("Two buttons with JustifyContent:'space-between' should be tappable", async () => {
- await openExampleWithTitle('Fit to text layout');
- await element(by.id('left_button')).tap();
- await expect(element(by.text('Left has been pressed!'))).toBeVisible();
+ await openExampleWithTitle('Two Buttons');
+ await element(by.id('two_cancel_button')).tap();
+ await expect(
+ element(by.text('Your application has been cancelled!')),
+ ).toBeVisible();
+ await element(by.text('OK')).tap();
+
+ await element(by.id('two_submit_button')).tap();
+ await expect(
+ element(by.text('Your application has been submitted!')),
+ ).toBeVisible();
+ await element(by.text('OK')).tap();
+ });
+
+ it("Three buttons with JustifyContent:'space-between' should be tappable", async () => {
+ await openExampleWithTitle('Three Buttons');
+ await element(by.id('three_cancel_button')).tap();
+ await expect(
+ element(by.text('Your application has been cancelled!')),
+ ).toBeVisible();
await element(by.text('OK')).tap();
- await element(by.id('right_button')).tap();
- await expect(element(by.text('Right has been pressed!'))).toBeVisible();
+ await openExampleWithTitle('Three Buttons');
+ await element(by.id('three_save_button')).tap();
+ await expect(
+ element(by.text('Your application has been saved!')),
+ ).toBeVisible();
+ await element(by.text('OK')).tap();
+
+ await element(by.id('three_submit_button')).tap();
+ await expect(
+ element(by.text('Your application has been submitted!')),
+ ).toBeVisible();
await element(by.text('OK')).tap();
});
it('Disabled button should not interact', async () => {
- await openExampleWithTitle('Disabled Button');
+ await openExampleWithTitle('Disabled');
await element(by.id('disabled_button')).tap();
await expect(
- element(by.text('Disabled has been pressed!')),
+ element(by.text('Your application has been submitted!')),
).toBeNotVisible();
});
});
+
+it('AccessibilityLabel button should be tappable', async () => {
+ await openExampleWithTitle('AccessibilityLabel');
+ await element(by.id('accessibilityLabel_button')).tap();
+ await expect(
+ element(by.text('Your application has been submitted!')),
+ ).toBeVisible();
+ await element(by.text('OK')).tap();
+});
+
+it('No onPress button should not interact', async () => {
+ await openExampleWithTitle('OnPress');
+ await element(by.id('onPress_button')).tap();
+ await expect(
+ element(by.text('Your application has been submitted!')),
+ ).toBeNotVisible();
+});
diff --git a/packages/rn-tester/js/examples/Button/ButtonExample.js b/packages/rn-tester/js/examples/Button/ButtonExample.js
index 7c3a8a56f2dc31..f4336062376681 100644
--- a/packages/rn-tester/js/examples/Button/ButtonExample.js
+++ b/packages/rn-tester/js/examples/Button/ButtonExample.js
@@ -13,10 +13,9 @@
const React = require('react');
const {Alert, Button, View, StyleSheet} = require('react-native');
-import {RNTesterThemeContext} from '../../components/RNTesterTheme';
function onButtonPress(buttonName) {
- Alert.alert(`${buttonName} has been pressed!`);
+ Alert.alert(`Your application has been ${buttonName}!`);
}
exports.displayName = 'ButtonExample';
@@ -26,92 +25,129 @@ 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.': string),
- render: function(): React.Node {
+ title: 'Button with default styling',
+ render: function (): React.Node {
return (
-
- {theme => {
- return (
-
+