From b6defc138b2c82f717fe917ff5f3d3112f25495d Mon Sep 17 00:00:00 2001
From: chirag-singhal <csinghal208@gmail.com>
Date: Thu, 13 Aug 2020 17:43:15 +0530
Subject: [PATCH 1/3] use cases for button example

---
 .../js/examples/Button/ButtonExample.js       | 174 +++++++++++-------
 1 file changed, 105 insertions(+), 69 deletions(-)

diff --git a/packages/rn-tester/js/examples/Button/ButtonExample.js b/packages/rn-tester/js/examples/Button/ButtonExample.js
index 7c3a8a56f2dc31..5b382c320c08ba 100644
--- a/packages/rn-tester/js/examples/Button/ButtonExample.js
+++ b/packages/rn-tester/js/examples/Button/ButtonExample.js
@@ -13,105 +13,141 @@
 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';
 exports.framework = 'React';
-exports.title = 'Button';
+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.': string),
-    render: function(): React.Node {
+    title: 'Button with default styling',
+    render: function (): React.Node {
       return (
-        <RNTesterThemeContext.Consumer>
-          {theme => {
-            return (
-              <Button
-                onPress={() => onButtonPress('Simple')}
-                testID="simple_button"
-                color={theme.LinkColor}
-                title="Press Me"
-                accessibilityLabel="See an informative alert"
-              />
-            );
-          }}
-        </RNTesterThemeContext.Consumer>
+        <Button
+          onPress={() => onButtonPress('submitted')}
+          testID="button_default_styling"
+          title="Submit Application"
+          accessibilityLabel="Press to submit your application!"
+        />
       );
     },
   },
   {
-    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 ' +
+    title: 'Button with color="red"',
+    description: ('Note: On iOS, the color prop controls the color of the text. On ' +
       'Android, the color adjusts the background color of the button.': string),
-    render: function(): React.Node {
+    render: function (): React.Node {
+      return (
+        <Button
+          onPress={() => onButtonPress('cancelled')}
+          testID="cancel_button"
+          color="red"
+          title="Cancel Application"
+          accessibilityLabel="Press to cancel your application!"
+        />
+      );
+    },
+  },
+  {
+    title: 'Two Buttons with Flexbox layout',
+    description: ('Two buttons wrapped inside view with justifyContent: spaceBetween,' +
+      'This layout strategy lets the title define the width of the button': string),
+    render: function (): React.Node {
       return (
-        <RNTesterThemeContext.Consumer>
-          {theme => {
-            return (
-              <Button
-                onPress={() => onButtonPress('Purple')}
-                testID="purple_button"
-                color={theme.SystemPurpleColor}
-                title="Press Purple"
-                accessibilityLabel="Learn more about purple"
-              />
-            );
-          }}
-        </RNTesterThemeContext.Consumer>
+        <View style={styles.container}>
+          <Button
+            onPress={() => onButtonPress('cancelled')}
+            testID="two_cancel_button"
+            color="red"
+            title="Cancel"
+            accessibilityLabel="Press to cancel your application!"
+          />
+          <Button
+            onPress={() => onButtonPress('submitted')}
+            testID="two_submit_button"
+            color="green"
+            title="Submit"
+            accessibilityLabel="Press to submit your application!"
+          />
+        </View>
       );
     },
   },
   {
-    title: 'Fit to text layout',
-    description: ('This layout strategy lets the title define the width of ' +
-      'the button': string),
-    render: function(): React.Node {
+    title: 'Three Buttons with Flexbox layout',
+    render: function (): React.Node {
       return (
-        <RNTesterThemeContext.Consumer>
-          {theme => {
-            return (
-              <View style={styles.container}>
-                <Button
-                  onPress={() => onButtonPress('Left')}
-                  testID="left_button"
-                  color={theme.LinkColor}
-                  title="This looks great!"
-                  accessibilityLabel="This sounds great!"
-                />
-                <Button
-                  onPress={() => onButtonPress('Right')}
-                  testID="right_button"
-                  color={theme.SystemPurpleColor}
-                  title="Ok!"
-                  accessibilityLabel="Ok, Great!"
-                />
-              </View>
-            );
-          }}
-        </RNTesterThemeContext.Consumer>
+        <View style={styles.container}>
+          <Button
+            onPress={() => onButtonPress('cancelled')}
+            testID="three_cancel_button"
+            color="red"
+            title="Cancel"
+            accessibilityLabel="Press to cancel your application!"
+          />
+          <Button
+            onPress={() => onButtonPress('saved')}
+            testID="three_save_button"
+            title="Save For Later"
+            accessibilityLabel="Press to save your application!"
+          />
+          <Button
+            onPress={() => onButtonPress('submitted')}
+            testID="three_submit_button"
+            color="green"
+            title="Submit"
+            accessibilityLabel="Press to submit your application!"
+          />
+        </View>
       );
     },
   },
   {
-    title: 'Disabled Button',
-    description: 'All interactions for the component are disabled.',
-    render: function(): React.Node {
+    title: 'Button with disabled={true}',
+    description:
+      'By passing disabled={true} all interactions for the button are disabled.',
+    render: function (): React.Node {
       return (
         <Button
           disabled
-          onPress={() => onButtonPress('Disabled')}
+          onPress={() => onButtonPress('submitted')}
           testID="disabled_button"
-          title="I Am Disabled"
+          title="Submit Application"
+          accessibilityLabel="Press to submit your application!"
+        />
+      );
+    },
+  },
+  {
+    title: 'Button with accessibilityLabel="label"',
+    description:
+      'Note: This prop changes the text that a screen ' +
+      'reader announces (there are no visual differences).',
+    render: function (): React.Node {
+      return (
+        <Button
+          onPress={() => onButtonPress('submitted')}
+          testID="accessibilityLabel_button"
+          title="Submit Application"
+          accessibilityLabel="Press to submit your application!"
+        />
+      );
+    },
+  },
+  {
+    title: 'Button with no onPress',
+    description:
+      'Note: This button does not interact on touch. To fix, always remember to pass onPress handler to the button.',
+    render: function (): React.Node {
+      return (
+        <Button
+          testID="onPress_button"
+          title="Submit Application"
           accessibilityLabel="See an informative alert"
         />
       );

From c680d5d2c7d8cf2402b36a2a0267622e086e1088 Mon Sep 17 00:00:00 2001
From: chirag-singhal <csinghal208@gmail.com>
Date: Thu, 13 Aug 2020 17:43:32 +0530
Subject: [PATCH 2/3] e2e tests for button example

---
 .../rn-tester/e2e/__tests__/Button-test.js    | 81 +++++++++++++++----
 1 file changed, 64 insertions(+), 17 deletions(-)

diff --git a/packages/rn-tester/e2e/__tests__/Button-test.js b/packages/rn-tester/e2e/__tests__/Button-test.js
index 53588b168a525a..57474d872bfb7c 100644
--- a/packages/rn-tester/e2e/__tests__/Button-test.js
+++ b/packages/rn-tester/e2e/__tests__/Button-test.js
@@ -18,41 +18,88 @@ describe('Button', () => {
   beforeAll(async () => {
     await device.reloadReactNative();
     await openComponentWithLabel(
-      'Button',
-      'Button Simple React Native button component.',
+      '<Button>',
+      '<Button> Simple React Native button component.',
     );
   });
 
-  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();
+});

From 716b96ef72e4408f5619727d641beaef67ae56e1 Mon Sep 17 00:00:00 2001
From: Ankit Tiwari <ankitt255@gmail.com>
Date: Fri, 14 Aug 2020 16:18:12 +0530
Subject: [PATCH 3/3] fix Button tests

---
 packages/rn-tester/e2e/__tests__/Button-test.js        | 4 ++--
 packages/rn-tester/js/examples/Button/ButtonExample.js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/rn-tester/e2e/__tests__/Button-test.js b/packages/rn-tester/e2e/__tests__/Button-test.js
index 57474d872bfb7c..9a0d6ff526cf6e 100644
--- a/packages/rn-tester/e2e/__tests__/Button-test.js
+++ b/packages/rn-tester/e2e/__tests__/Button-test.js
@@ -18,8 +18,8 @@ describe('Button', () => {
   beforeAll(async () => {
     await device.reloadReactNative();
     await openComponentWithLabel(
-      '<Button>',
-      '<Button> Simple React Native button component.',
+      'Button',
+      'Button Simple React Native button component.',
     );
   });
 
diff --git a/packages/rn-tester/js/examples/Button/ButtonExample.js b/packages/rn-tester/js/examples/Button/ButtonExample.js
index 5b382c320c08ba..f4336062376681 100644
--- a/packages/rn-tester/js/examples/Button/ButtonExample.js
+++ b/packages/rn-tester/js/examples/Button/ButtonExample.js
@@ -20,7 +20,7 @@ function onButtonPress(buttonName) {
 
 exports.displayName = 'ButtonExample';
 exports.framework = 'React';
-exports.title = '<Button>';
+exports.title = 'Button';
 exports.description = 'Simple React Native button component.';
 
 exports.examples = [