test(e2e, Fabric): add e2e test for issue/PR example 654 (#2898)

## Description

Create e2e test for `Test654`.

### Test654
Test created, only on iOS. It checks that native back button is rendered
correctly in RTL mode.

## Changes

- add testID to RTL mode switch in Example screen
- add e2e test for `Test654`
- add comment in `apps/src/tests/index.ts`

## Test code and steps to reproduce
CI

## Checklist

- [x] Ensured that CI passes

Author: kligarski

FabricExample/e2e/issuesTests/Test654.e2e.ts

@@ -0,0 +1,26 @@
+import { device, expect, element, by } from 'detox';
+import { describeIfiOS } from '../e2e-utils';
+
+// issue related to iOS native back button
+describeIfiOS('Test654', () => {
+  beforeAll(async () => {
+    await device.reloadReactNative();
+    await element(by.id('root-screen-switch-rtl')).tap();
+  });
+
+  it('Test654 should exist', async () => {
+    await waitFor(element(by.id('root-screen-tests-Test654')))
+      .toBeVisible()
+      .whileElement(by.id('root-screen-examples-scrollview'))
+      .scroll(600, 'down', NaN, 0.85);
+
+    await expect(element(by.id('root-screen-tests-Test654'))).toBeVisible();
+    await element(by.id('root-screen-tests-Test654')).tap();
+  });
+
+  it('back button should be visible on Second screen', async () => {
+    await element(by.id('first-button-go-to-second')).tap();
+    await expect(element(by.type('_UIButtonBarButton'))).toBeVisible(100);
+    await expect(element(by.id('chevron.backward'))).toBeVisible(100);
+  });
+});

apps/Example.tsx

@@ -197,6 +197,7 @@ const MainScreen = ({ navigation }: MainScreenProps): React.JSX.Element => {
           I18nManager.forceRTL(!I18nManager.isRTL);
           RNRestart.Restart();
         }}
+        testID="root-screen-switch-rtl"
       />
       <SettingsSwitch
         style={styles.switch}

apps/src/shared/SettingsSwitch.tsx

@@ -7,16 +7,18 @@ type Props = {
   value: boolean;
   onValueChange: (value: boolean) => void;
   style?: ViewStyle;
+  testID?: string;
 };
 
 export const SettingsSwitch = ({
   label,
   value,
   onValueChange,
   style = {},
+  testID,
 }: Props): React.JSX.Element => {
   return (
-    <TouchableOpacity onPress={() => onValueChange(!value)}>
+    <TouchableOpacity onPress={() => onValueChange(!value)} testID={testID}>
       <ThemedView style={[styles.container, style]}>
         <ThemedText style={styles.label}>{`${label}: ${value}`}</ThemedText>
       </ThemedView>

apps/src/tests/Test654.js

@@ -29,6 +29,7 @@ function First({ navigation }) {
     <Button
       title="Tap me for second screen"
       onPress={() => navigation.navigate('Second')}
+      testID="first-button-go-to-second"
     />
   );
 }

apps/src/tests/index.ts

@@ -19,7 +19,7 @@ export { default as Test642 } from './Test642';     // [E2E skipped]: can't chec
 export { default as Test645 } from './Test645';     // [E2E created](iOS): headerLargeTitle is supported only on iOS
 export { default as Test648 } from './Test648';     // [E2E skipped]: can't check animation in a meaningful way
 export { default as Test649 } from './Test649';     // [E2E created](iOS): headerLargeTitle is supported only on iOS
-export { default as Test654 } from './Test654';
+export { default as Test654 } from './Test654';     // [E2E created](iOS): issue related to iOS native back button
 export { default as Test658 } from './Test658';
 export { default as Test662 } from './Test662';
 export { default as Test691 } from './Test691';