test(e2e, Fabric): add e2e tests for issue/PR examples 748..758, remove Test713 (#2932)

## Description

Check which example screens from issues/PRs can be used in e2e testing
for tests `Test748, ..., Test758` and implement them if possible for
Fabric.

### Test713
Test screen removed because the issue is not planned to be fixed, full
discussion
[here](#2928 (comment)).

### Test748
Skipped because the issue description does not contain enough
information about the original bug. It is most likely connected with
`headerRight` appearing/disappearing in the right moments when
navigating between screens and `Test432` already covers even more
complex cases.

### Test750
Skipped because we can't check whether insets are respected.

### Test758
Test created, only on iOS (original PR introduced `SearchBar` to iOS).
It checks interactions with the search bar.

## Changes

- add `Test758` e2e test
- modify`Test758` test screen (change placeholder and cancel button
text, fix TS issue)
- add comments for every test screen from this PR 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

Author: kligarski

FabricExample/e2e/issue-tests/Test758.e2e.ts

@@ -0,0 +1,79 @@
+import { device, expect, element, by } from 'detox';
+import { describeIfiOS, selectIssueTestScreen } from '../e2e-utils';
+import isVersionEqualOrHigherThan from '../helpers/isVersionEqualOrHigherThan';
+
+const { getIOSVersionNumber } = require('../../../scripts/e2e/ios-devices.js');
+
+// On iOS 26+ cancel button does not contain any text.
+function getSearchBarCloseButton() {
+  const iosVersion = getIOSVersionNumber();
+  if (isVersionEqualOrHigherThan(iosVersion, '26.0')) {
+    return element(by.label('Close').and(by.traits(['button'])));
+  } else {
+    return element(by.text('Cancel text'));
+  }
+}
+
+// PR related to iOS search bar
+describeIfiOS('Test758', () => {
+  beforeAll(async () => {
+    await device.reloadReactNative();
+  });
+
+  it('Test758 should exist', async () => {
+    await selectIssueTestScreen('Test758');
+  });
+
+  it('search bar should not be initially visible', async () => {
+    await expect(element(by.traits(['searchField']))).not.toBeVisible();
+  });
+
+  it('search bar should appear on scroll', async () => {
+    await element(by.text('Stuff')).swipe('down');
+    await expect(element(by.traits(['searchField']))).toBeVisible();
+  });
+
+  it('search bar should have correct placeholder text', async () => {
+    await expect(element(by.text('Placeholder text'))).toBeVisible();
+  });
+
+  it('search bar should show correct cancel button when focused', async () => {
+    await element(by.traits(['searchField'])).tap();
+    await expect(getSearchBarCloseButton()).toBeVisible();
+  });
+
+  it('cancel button should disappear after being clicked', async () => {
+    await getSearchBarCloseButton().tap();
+    await expect(getSearchBarCloseButton()).not.toBeVisible();
+  });
+
+  it('search bar should show correct results', async () => {
+    await element(by.traits(['searchField'])).tap();
+    await element(by.traits(['searchField'])).typeText('th');
+
+    await expect(element(by.text('Other'))).toBeVisible();
+    await expect(element(by.text('The'))).toBeVisible();
+    await expect(element(by.text('Nuggets'))).not.toBeVisible();
+  });
+
+  it('search bar should not be visible on another screen', async () => {
+    await element(by.text('Tap me for second screen')).tap();
+    await expect(element(by.traits(['searchField']))).not.toBeVisible();
+  });
+
+  it('search bar query should still be present after coming back from another screen', async () => {
+    await element(by.text('First')).tap();
+    await expect(element(by.text('th'))).toBeVisible();
+  });
+
+  it('search results should still be correct after coming back from another screen', async () => {
+    await expect(element(by.text('Other'))).toBeVisible();
+    await expect(element(by.text('The'))).toBeVisible();
+    await expect(element(by.text('Nuggets'))).not.toBeVisible();
+  });
+
+  it('search should still be responsive after coming back from another screen', async () => {
+    await element(by.traits(['searchField'])).clearText();
+    await expect(element(by.text('Nuggets'))).toBeVisible();
+  });
+});

apps/src/tests/issue-tests/Test713.js

@@ -38,19 +38,19 @@ function First({ navigation }: NativeStackScreenProps<ParamListBase>) {
 
   const [search, setSearch] = React.useState('');
 
-  const searchBarOptions = {
+  const searchBarOptions: SearchBarProps = {
     barTintColor: 'powderblue',
     tintColor: 'red',
     textColor: 'red',
     hideWhenScrolling: true,
     obscureBackground: false,
     hideNavigationBar: false,
     autoCapitalize: 'sentences',
-    placeholder: 'Some text',
+    placeholder: 'Placeholder text',
     // Added in https://github.com/software-mansion/react-native-screens/pull/3186
     // to preserve test's original search bar configuration.
     placement: 'stacked',
-    cancelButtonText: 'Some text',
+    cancelButtonText: 'Cancel text',
     onChangeText: (e: NativeSyntheticEvent<{ text: string }>) =>
       setSearch(e.nativeEvent.text),
     onCancelButtonPress: () => console.warn('Cancel button pressed'),

apps/src/tests/issue-tests/Test758.tsx

@@ -25,11 +25,10 @@ export { default as Test662 } from './Test662'; // [E2E skipped]: can't check an
 export { default as Test691 } from './Test691'; // [E2E created](iOS): issue related to iOS modal behavior
 export { default as Test702 } from './Test702'; // [E2E skipped]: can't check animation in a meaningful way
 export { default as Test706 } from './Test706'; // [E2E skipped]: can't check font weight
-export { default as Test713 } from './Test713'; // [E2E skipped]: issue still present
 export { default as Test726 } from './Test726'; // [E2E created](iOS): issue related to iOS
-export { default as Test748 } from './Test748';
-export { default as Test750 } from './Test750';
-export { default as Test758 } from './Test758';
+export { default as Test748 } from './Test748'; // [E2E skipped]: issue unclear, Test432 covers more complex cases already
+export { default as Test750 } from './Test750'; // [E2E skipped]: can't check insets
+export { default as Test758 } from './Test758'; // [E2E created](iOS): PR related to iOS search bar
 export { default as Test761 } from './Test761'; // [E2E skipped]: can't check animation in a meaningful way
 export { default as Test779 } from './Test779'; // [E2E skipped]: can't check animation in a meaningful way
 export { default as Test780 } from './Test780'; // [E2E skipped]: can't use native swipe back gesture