test(e2e,Fabric): add e2e tests for issue/PR examples 42..528 (#2787)

## Description

Check which example screens from issues/PRs can be used in e2e testing
for tests `Test42, ..., Test528` and implement them if possible for
Fabric. In the future, each non-skipped test will be in a seperate PR.

### Test42
Skipped because we can’t really check what is the orientation of the
screen with Detox.

### Test111
Skipped because we can’t test flickering with Detox.

### Test263
Skipped because example differs from the problem mentioned in
#263.
Even when I recreated the issue, it still occurs. [This comment from the
PR](#263 (comment))
explains why it is the case.

### Test349
Skipped because we can’t test autofill with Detox. The test also uses
outdated prop name.

### Test364
Skipped because the test uses `tabBarVisible` prop that no longer
exists. `react-navigation` documentation suggests other
[solution](https://reactnavigation.org/docs/hiding-tabbar-in-screens/)
to this problem.

### Test 432
Test created. It checks whether correct squares are fully visible. For
some reason, on Android, these squares are not `100%` visible from the
start (but I don’t see the problem in manual testing). For the test,
`waitingFor` the squares to become `100%` visible works.

### Test 528
Test created but only for iOS because Detox supports changing
orientation of the device [only on
iOS](https://wix.github.io/Detox/docs/api/device/#devicesetorientationorientation).
Test checks if the headerRight button is visible after changing
screens/orientation.

## Changes

- add `Test432` and `Test528`
- add comments for every test screen in `apps/src/tests/index.ts` with
the reason for (not) implementing e2e test for it

## Test code and steps to reproduce

CI

## Checklist

- [x] Ensured that CI passes

---------

Co-authored-by: Kacper Kafara <[email protected]>

Author: kligarski

FabricExample/Gemfile.lock

@@ -95,6 +95,7 @@ PLATFORMS
 DEPENDENCIES
   activesupport (>= 6.1.7.5, != 7.1.0)
   cocoapods (>= 1.13, != 1.15.1, != 1.15.0)
+  xcodeproj (< 1.26.0)
 
 RUBY VERSION
    ruby 3.2.1p31

FabricExample/e2e/examplesTests/tests.e2e.ts

@@ -0,0 +1,110 @@
+import { device, expect, element, by } from 'detox';
+
+describe('Test432', () => {
+  beforeAll(async () => {
+    await device.reloadReactNative();
+  });
+
+  it('Test432 should exist', async () => {
+    await waitFor(element(by.id('root-screen-tests-Test432')))
+      .toBeVisible()
+      .whileElement(by.id('root-screen-examples-scrollview'))
+      .scroll(600, 'down', NaN, 0.85);
+
+    await expect(element(by.id('root-screen-tests-Test432'))).toBeVisible();
+    await element(by.id('root-screen-tests-Test432')).tap();
+  });
+
+  it('headerRight element should be fully visible', async () => {
+    await expect(element(by.id('home-headerRight'))).toBeVisible(100);
+  });
+
+  it('headerRight elements should toggle and stay fully visible', async () => {
+    await element(by.id('home-button-go-to-details')).tap();
+    await expect(element(by.id('details-headerRight-red'))).toBeVisible(100);
+
+    await element(by.id('details-button-toggle-subviews')).tap();
+    // On Android, we need to wait for some elements (e.g. at first, this square is only 25% visible)
+    waitFor(element(by.id('details-headerRight-green'))).toBeVisible(100);
+
+    await element(by.id('details-button-toggle-subviews')).tap();
+    await expect(element(by.id('details-headerRight-red'))).toBeVisible(100);
+
+    if (device.getPlatform() === 'ios') {
+      await element(by.id('BackButton')).tap();
+    } else {
+      await device.pressBack();
+    }
+
+    await expect(element(by.id('home-headerRight'))).toBeVisible(100);
+  });
+
+  it('headerLeft and headerRight elements should toggle and stay fully visible', async () => {
+    await element(by.id('home-button-go-to-info')).tap();
+    await expect(element(by.id('info-headerRight-green-1'))).toBeVisible(100);
+
+    await element(by.id('info-button-toggle-subviews')).tap();
+    waitFor(element(by.id('info-headerRight-green-1'))).toBeVisible(100);
+    waitFor(element(by.id('info-headerRight-green-2'))).toBeVisible(100);
+    waitFor(element(by.id('info-headerLeft-red'))).toBeVisible(100);
+
+    await element(by.id('info-button-toggle-subviews')).tap();
+    waitFor(element(by.id('info-headerRight-green-1'))).toBeVisible(100);
+
+    if (device.getPlatform() === 'ios') {
+      await element(by.id('BackButton')).tap();
+    } else {
+      await device.pressBack();
+    }
+
+    await expect(element(by.id('home-headerRight'))).toBeVisible(100);
+  });
+
+  it('headerRight element on modal should be fully visible', async () => {
+    await element(by.id('home-button-show-settings')).tap();
+    await expect(element(by.id('settings-headerRight'))).toBeVisible(100);
+
+    if (device.getPlatform() === 'ios') {
+      await element(by.id('settings-text')).swipe('down', 'fast');
+    } else {
+      await device.pressBack();
+    }
+    await expect(element(by.id('home-headerRight'))).toBeVisible(100);
+  });
+});
+
+// Detox currently supports orientation only on iOS
+if (device.getPlatform() === 'ios') {
+  describe('Test528', () => {
+    beforeAll(async () => {
+      await device.reloadReactNative();
+    });
+
+    it('Test528 should exist', async () => {
+      await waitFor(element(by.id('root-screen-tests-Test528')))
+        .toBeVisible()
+        .whileElement(by.id('root-screen-examples-scrollview'))
+        .scroll(600, 'down', NaN, 0.85);
+
+      await expect(element(by.id('root-screen-tests-Test528'))).toBeVisible();
+      await element(by.id('root-screen-tests-Test528')).tap();
+    });
+
+    it('headerRight button should be visible after orientation change', async () => {
+      await expect(element(by.text('Custom Button'))).toBeVisible(100);
+      await device.setOrientation('landscape');
+      await expect(element(by.text('Custom Button'))).toBeVisible(100);
+      await device.setOrientation('portrait');
+      await expect(element(by.text('Custom Button'))).toBeVisible(100);
+    });
+
+    it('headerRight button should be visible after coming back from horizontal screen', async () => {
+      await element(by.text('Go to Screen 2')).tap();
+      await device.setOrientation('landscape');
+      await element(by.id('BackButton')).tap();
+      await expect(element(by.text('Custom Button'))).toBeVisible(100);
+      await device.setOrientation('portrait');
+      await expect(element(by.text('Custom Button'))).toBeVisible(100);
+    });
+  });
+}

FabricExample/ios/Podfile.lock

@@ -1733,7 +1733,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNScreens (4.10.0-beta.3):
+  - RNScreens (4.10.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1754,9 +1754,9 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNScreens/common (= 4.10.0-beta.3)
+    - RNScreens/common (= 4.10.0)
     - Yoga
-  - RNScreens/common (4.10.0-beta.3):
+  - RNScreens/common (4.10.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2075,7 +2075,7 @@ SPEC CHECKSUMS:
   ReactCommon: 179964ffc47fa62ad0e1eebac704e88c59b46667
   RNGestureHandler: 4e7defe5095e936424173fc75f0bf2af5bba8e23
   RNReanimated: 183ca222293bd622678e387100e54d03d952c73b
-  RNScreens: b40d97d6ad4b6f1f55552bed30b845ae01ff3d2c
+  RNScreens: 0f01bbed9bd8045a8d58e4b46993c28c7f498f3c
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   Yoga: 330be28eee1242da875db9e851b19a4df496b999
 

apps/src/shared/Square.tsx

@@ -4,11 +4,13 @@ import { View } from 'react-native';
 interface Props {
   color?: string;
   size?: number;
+  testID?: string;
 }
 
 export const Square = ({
   size = 100,
   color = 'red',
+  testID,
 }: Props): React.JSX.Element => (
-  <View style={{ width: size, height: size, backgroundColor: color }} />
+  <View style={{ width: size, height: size, backgroundColor: color }} testID={testID} />
 );

apps/src/tests/Test432.tsx

@@ -26,14 +26,17 @@ const HomeScreen = ({ navigation }: StackScreenProps<'Home'>) => {
       <Button
         title={'Go to details'}
         onPress={() => navigation.navigate('Details')}
+        testID="home-button-go-to-details"
       />
       <Button
         title={'Go to info'}
         onPress={() => navigation.navigate('Info')}
+        testID="home-button-go-to-info"
       />
       <Button
         title={'Show settings'}
         onPress={() => navigation.navigate('Settings')}
+        testID="home-button-show-settings"
       />
     </View>
   );
@@ -45,29 +48,51 @@ const DetailsScreen = ({ navigation }: StackScreenProps<'Details'>) => {
     navigation.setOptions({
       headerBackVisible: !x,
       headerRight: () =>
-        x ? <Square size={20} color="green" /> : <Square size={10} />,
+        x ? (
+          <Square size={20} color="green" testID="details-headerRight-green" />
+        ) : (
+          <Square size={10} testID="details-headerRight-red" />
+        ),
     });
   }, [navigation, x]);
 
-  return <Button title="Toggle subviews" onPress={() => setX(prev => !prev)} />;
+  return (
+    <Button
+      title="Toggle subviews"
+      onPress={() => setX(prev => !prev)}
+      testID="details-button-toggle-subviews"
+    />
+  );
 };
 
 const SettingsScreen = () => {
-  return <Text>Settings</Text>;
+  return <Text testID="settings-text">Settings</Text>;
 };
 
 const InfoScreen = ({ navigation }: StackScreenProps<'Info'>) => {
   const [hasLeftItem, setHasLeftItem] = useState(false);
 
   const square1 = (props: { tintColor?: string }) => (
     <View style={{ gap: 8, flexDirection: 'row' }}>
-      {hasLeftItem && <Square {...props} color="green" size={20} />}
-      <Square {...props} color="green" size={20} />
+      {hasLeftItem && (
+        <Square
+          {...props}
+          color="green"
+          size={20}
+          testID="info-headerRight-green-2"
+        />
+      )}
+      <Square
+        {...props}
+        color="green"
+        size={20}
+        testID="info-headerRight-green-1"
+      />
     </View>
   );
 
   const square2 = (props: { tintColor?: string }) => (
-    <Square {...props} color="red" size={20} />
+    <Square {...props} color="red" size={20} testID="info-headerLeft-red" />
   );
 
   useLayoutEffect(() => {
@@ -82,6 +107,7 @@ const InfoScreen = ({ navigation }: StackScreenProps<'Info'>) => {
     <Button
       title="Toggle subviews"
       onPress={() => setHasLeftItem(prev => !prev)}
+      testID="info-button-toggle-subviews"
     />
   );
 };
@@ -95,7 +121,9 @@ const StackNavigator = () => {
         name="Home"
         component={HomeScreen}
         options={{
-          headerRight: () => <Square size={20} color="black" />,
+          headerRight: () => (
+            <Square size={20} color="black" testID="home-headerRight" />
+          ),
         }}
       />
       <Stack.Screen name="Details" component={DetailsScreen} />
@@ -112,7 +140,7 @@ const StackNavigator = () => {
         options={{
           presentation: 'modal',
           animation: 'slide_from_bottom',
-          headerRight: () => <Square size={30} />,
+          headerRight: () => <Square size={30} testID="settings-headerRight" />,
         }}
       />
     </Stack.Navigator>

apps/src/tests/index.ts

@@ -1,12 +1,12 @@
 // @ts-nocheck
 
-export { default as Test42 } from './Test42';
-export { default as Test111 } from './Test111';
-export { default as Test263 } from './Test263';
-export { default as Test349 } from './Test349';
-export { default as Test364 } from './Test364';
-export { default as Test432 } from './Test432';
-export { default as Test528 } from './Test528';
+export { default as Test42 } from './Test42';       // [E2E skipped]: can't check orientation, unclear problem description
+export { default as Test111 } from './Test111';     // [E2E skipped]: can't check flickering
+export { default as Test263 } from './Test263';     // [E2E skipped]: example differs from PR, even if changed the problem still occurs
+export { default as Test349 } from './Test349';     // [E2E skipped]: can't check autofill easily, wrong prop name
+export { default as Test364 } from './Test364';     // [E2E skipped]: tabBarVisible prop doesn't exist anymore, suggested solution is to change navigator hierarchy (proposed in PR and in react-navigation docs)
+export { default as Test432 } from './Test432';     // [E2E created]
+export { default as Test528 } from './Test528';     // [E2E created](iOS): Detox supports changing orientation only on iOS
 export { default as Test550 } from './Test550';
 export { default as Test556 } from './Test556';
 export { default as Test564 } from './Test564';