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 ( -