Add e2e to ensure buttons with predefined componentId are not recreat…

…ed (#6704)
wix · Oct 21, 2020 · 46e4d92 · 46e4d92
1 parent 6536973
commit 46e4d92
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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`
+  );
 }