From 46e4d92bd48acd7f64e110795acc042175c97c6d Mon Sep 17 00:00:00 2001
From: Guy Carmeli <guyca@users.noreply.github.com>
Date: Wed, 21 Oct 2020 14:23:33 +0300
Subject: [PATCH] Add e2e to ensure buttons with predefined componentId are not
 recreated (#6704)

---
 e2e/Buttons.test.js                      | 10 ++++++++--
 playground/src/screens/ButtonsScreen.tsx |  1 +
 playground/src/screens/RoundedButton.tsx |  7 ++++++-
 scripts/test-e2e.js                      |  3 ++-
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/e2e/Buttons.test.js b/e2e/Buttons.test.js
index 1004835aab3..b9ac9e9023b 100644
--- a/e2e/Buttons.test.js
+++ b/e2e/Buttons.test.js
@@ -32,10 +32,10 @@ describe('Buttons', () => {
 
   it('custom button is clickable', async () => {
     await elementByLabel('Two').tap();
-    await expect(elementByLabel('Thanks for that :)')).toExist();
+    await expect(elementByLabel('Times created: 1')).toExist();
   });
 
-  it(':ios: Reseting buttons should unmount button react view', async () => {
+  it(':ios: Resetting buttons should unmount button react view', async () => {
     await elementById(TestIDs.SHOW_LIFECYCLE_BTN).tap();
     await elementById(TestIDs.RESET_BUTTONS).tap();
     await expect(elementByLabel('Button component unmounted')).toBeVisible();
@@ -56,4 +56,10 @@ describe('Buttons', () => {
     await elementById(TestIDs.ADD_BUTTON).tap();
     await elementById(TestIDs.BUTTON_THREE).tap();
   });
+
+  it('Button component is not recreated if it has a predefined componentId', async () => {
+    await elementById(TestIDs.ADD_BUTTON).tap();
+    await elementById(TestIDs.ROUND_BUTTON).tap();
+    await expect(elementByLabel('Times created: 1')).toBeVisible();
+  });
 });
diff --git a/playground/src/screens/ButtonsScreen.tsx b/playground/src/screens/ButtonsScreen.tsx
index ea2a357806e..1242a70663e 100644
--- a/playground/src/screens/ButtonsScreen.tsx
+++ b/playground/src/screens/ButtonsScreen.tsx
@@ -55,6 +55,7 @@ export default class ButtonOptions extends NavigationComponent {
               name: Screens.RoundButton,
               passProps: {
                 title: 'Two',
+                timesCreated: 1,
               },
             },
           },
diff --git a/playground/src/screens/RoundedButton.tsx b/playground/src/screens/RoundedButton.tsx
index b6af74764d7..905bb5d4fde 100644
--- a/playground/src/screens/RoundedButton.tsx
+++ b/playground/src/screens/RoundedButton.tsx
@@ -5,19 +5,24 @@ import Colors from '../commons/Colors';
 
 interface Props extends NavigationComponentProps {
   title: string;
+  timesCreated?: number;
 }
 
+let timesCreated = 0;
 export default class RoundedButton extends React.Component<Props> {
   constructor(props: Props) {
     super(props);
     Navigation.events().bindComponent(this);
+    timesCreated = props.timesCreated ?? timesCreated + 1;
   }
 
   render() {
     return (
       <View style={styles.container}>
         <View style={styles.button}>
-          <TouchableOpacity onPress={() => Alert.alert(this.props.title, 'Thanks for that :)')}>
+          <TouchableOpacity
+            onPress={() => Alert.alert(this.props.title, `Times created: ${timesCreated}`)}
+          >
             <Text style={styles.text}>{this.props.title}</Text>
           </TouchableOpacity>
         </View>
diff --git a/scripts/test-e2e.js b/scripts/test-e2e.js
index e4adef80728..fd72ccf6570 100644
--- a/scripts/test-e2e.js
+++ b/scripts/test-e2e.js
@@ -27,5 +27,6 @@ function run() {
   }
   exec.execSync(
     `detox test --configuration ${configuration} ${headless$} -w ${workers} ${loglevel}`
-  ); //-f "ScreenStyle.test.js" --loglevel trace
+    // "Buttons.test.js" --loglevel trace`
+  );
 }