chore: Refactor library examples & tests (#3528)

Closes
software-mansion/react-native-screens-labs#781

## Description

This PR is the first in series of example app refactors, as discussed in
software-mansion/react-native-screens-labs#759.
Two new test categories are added: Single Feature Tests and Component
Integration Tests. The former is meant to test separately each single
prop exposed by the library, and the latter is meant to test
interactions between multiple props / multiple components. This
distinction, however, is sometimes blurry, and the membership to each
group will be decided on per-case basis. Let's talk over some examples
in the discussion below.

## Changes

Added Two entries to the Examples list: Single Feature Tests, Component
Integration Tests.

Added a way to quickly write simple tests
- BottomTabsConfigProvider, StackConfigProvider
- they provide context for `useStackConfig`/`useBottomTabsConfig` and
`useDispatchStackConfig`/`useDispatchBottomTabsConfig` - it uses
`useReducer` with `useContext` under the hood to configure single
feature under test by passing a config object "diff"
- `BottomTabsAutoconfig`, `StackAutoconfig`
- Uses the contex providers above to apply config diff to the respective
component

See the usage in the examples created for this PR. tl;dr: You provide a
ConfigScreen that uses dispatch() for configuration, define a simple app
with XAutoconfig wrapped in XConfigProvider, and it should work.

## Test plan

Click through the new tests & check if they are working. This is a
preparatory commit, so there is little to test.

## Checklist
n/a

---------

Co-authored-by: Kacper Kafara <kacper.kafara@swmansion.com>

Author: kmichalikk

apps/Example.tsx

@@ -6,11 +6,7 @@ import {
   Platform,
   useColorScheme,
 } from 'react-native';
-import {
-  NavigationContainer,
-  NavigationIndependentTree,
-  useTheme,
-} from '@react-navigation/native';
+import { NavigationContainer, useTheme } from '@react-navigation/native';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import RNRestart from 'react-native-restart';
@@ -34,9 +30,15 @@ import BarButtonItems from './src/screens/BarButtonItems';
 
 import { GestureDetectorProvider } from 'react-native-screens/gesture-handler';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import {
+  ScreensDarkTheme,
+  ScreensLightTheme,
+} from './src/shared/styling/adapter/react-navigation';
 
-import * as Tests from './src/tests';
-import { ScreensDarkTheme, ScreensLightTheme } from './src/shared/styling/adapter/react-navigation';
+import IssueTestsScreen from './src/tests/IssueTestsScreen';
+import SingleFeatureTests from './src/tests/single-feature-tests';
+import ComponentIntegrationTests from './src/tests/component-integration-tests';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 function isPlatformReady(name: keyof typeof SCREENS) {
   if (Platform.isTV) {
@@ -46,16 +48,12 @@ function isPlatformReady(name: keyof typeof SCREENS) {
   return true;
 }
 
-function isTestSectionEnabled() {
-  return true;
-}
-
 const SCREENS: Record<
   string,
   {
     title: string;
     component: () => React.JSX.Element;
-    type: 'example' | 'playground' | 'test';
+    type: 'example' | 'playground';
     isTVOSReady?: boolean;
   }
 > = {
@@ -135,56 +133,16 @@ const SCREENS: Record<
   },
 };
 
-if (isTestSectionEnabled()) {
-  Object.keys(Tests).forEach(testName => {
-    SCREENS[testName] = {
-      title: testName,
-      component: () => {
-        const TestComponent = Tests[testName as keyof typeof Tests];
-        return (
-          <NavigationIndependentTree>
-            <TestComponent />
-          </NavigationIndependentTree>
-        );
-      },
-      type: 'test',
-    };
-  });
-}
-
 const screens = Object.keys(SCREENS);
 const examples = screens.filter(name => SCREENS[name].type === 'example');
 const playgrounds = screens.filter(name => SCREENS[name].type === 'playground');
-const issueRegex = /Test(?<issue>\d+)(?<case>.*)/
-const tests = isTestSectionEnabled()
-  ? screens
-    .filter(name => SCREENS[name].type === 'test')
-    .sort((name1, name2) => {
-      const spec1 = issueRegex.exec(name1)?.groups
-      const spec2 = issueRegex.exec(name2)?.groups
-
-      const testNumber1 = parseInt(spec1?.issue as string)
-      const testNumber2 = parseInt(spec2?.issue as string)
-
-      if (Number.isNaN(testNumber1) && Number.isNaN(testNumber2)) {
-        return 0;
-      } else if (Number.isNaN(testNumber1)) {
-        return 1;
-      } else if (Number.isNaN(testNumber2)) {
-        return -1;
-      } else if (testNumber1 !== testNumber2) {
-        return testNumber1 - testNumber2;
-      } else if ((spec1?.case as string) < (spec2?.case as string)) {
-        return -1;
-      } else {
-        return (spec1?.case as string) > (spec2?.case as string) ? 1 : 0;
-      }
-    })
-  : [];
 
 type RootStackParamList = {
   Main: undefined;
   Tests: undefined;
+  SingleFeatureTests: undefined;
+  ComponentIntegrationTests: undefined;
+  IssueTests: undefined;
 } & {
   [P in keyof typeof SCREENS]: undefined;
 };
@@ -198,96 +156,69 @@ interface MainScreenProps {
 const MainScreen = ({ navigation }: MainScreenProps): React.JSX.Element => {
   const { toggleTheme } = useContext(ThemeToggle);
   const isDark = useTheme().dark;
-  const [searchQuery, setSearchQuery] = React.useState('');
-  const [searchBarEnabled, setSearchBarEnabled] = React.useState(false);
-
-  React.useLayoutEffect(() => {
-    if (searchBarEnabled) {
-      navigation.setOptions({
-        headerSearchBarOptions: {
-          onChangeText: (event) => setSearchQuery(event.nativeEvent.text),
-        },
-      });
-    } else {
-      setSearchQuery('');
-      navigation.setOptions({
-        headerSearchBarOptions: undefined,
-      });
-    }
-  }, [navigation, searchBarEnabled]);
-
-  const searchFilter = React.useCallback(
-    (name: string) =>
-      searchQuery === '' ||
-      name.toLowerCase().includes(searchQuery.toLowerCase()),
-    [searchQuery],
-  );
-
-  const filteredExamples = examples.filter(searchFilter);
-  const filteredPlaygrounds = playgrounds.filter(searchFilter);
-  const filteredTests = tests.filter(searchFilter);
 
   return (
-    <ScrollView testID="root-screen-examples-scrollview" contentInsetAdjustmentBehavior="automatic">
-      <SettingsSwitch
-        style={styles.switch}
-        label="Right to left"
-        value={I18nManager.isRTL}
-        onValueChange={() => {
-          I18nManager.forceRTL(!I18nManager.isRTL);
-          RNRestart.Restart();
-        }}
-        testID="root-screen-switch-rtl"
-      />
-      <SettingsSwitch
-        style={styles.switch}
-        label="Dark mode"
-        value={isDark}
-        onValueChange={toggleTheme}
-      />
-      <SettingsSwitch
-        style={styles.switch}
-        label="Search bar"
-        value={searchBarEnabled}
-        onValueChange={() => setSearchBarEnabled(!searchBarEnabled)}
-        testID="root-screen-switch-search-bar"
-      />
-      <ThemedText style={styles.label} testID="root-screen-examples-header">
-        Examples
-      </ThemedText>
-      {filteredExamples.map(name => (
-        <ListItem
-          key={name}
-          testID={`root-screen-example-${name}`}
-          title={SCREENS[name].title}
-          onPress={() => navigation.navigate(name)}
-          disabled={!isPlatformReady(name)}
+    <SafeAreaView edges={{ top: 'off', bottom: 'maximum' }}>
+      <ScrollView testID="root-screen-examples-scrollview">
+        <SettingsSwitch
+          style={styles.switch}
+          label="Right to left"
+          value={I18nManager.isRTL}
+          onValueChange={() => {
+            I18nManager.forceRTL(!I18nManager.isRTL);
+            RNRestart.Restart();
+          }}
+          testID="root-screen-switch-rtl"
         />
-      ))}
-      <ThemedText style={styles.label}>Playgrounds</ThemedText>
-      {filteredPlaygrounds.map(name => (
-        <ListItem
-          key={name}
-          testID={`root-screen-playground-${name}`}
-          title={SCREENS[name].title}
-          onPress={() => navigation.navigate(name)}
-          disabled={!isPlatformReady(name)}
+        <SettingsSwitch
+          style={styles.switch}
+          label="Dark mode"
+          value={isDark}
+          onValueChange={toggleTheme}
         />
-      ))}
-      {isTestSectionEnabled() && (
-        <ThemedText style={styles.label}>Tests</ThemedText>
-      )}
-      {isTestSectionEnabled() &&
-        filteredTests.map(name => (
+        <ThemedText style={styles.label} testID="root-screen-examples-header">
+          Examples
+        </ThemedText>
+        {examples.map(name => (
           <ListItem
             key={name}
-            testID={`root-screen-tests-${name}`}
+            testID={`root-screen-example-${name}`}
             title={SCREENS[name].title}
             onPress={() => navigation.navigate(name)}
-            disabled={false}
+            disabled={!isPlatformReady(name)}
           />
         ))}
-    </ScrollView>
+        <ThemedText style={styles.label}>Playgrounds</ThemedText>
+        {playgrounds.map(name => (
+          <ListItem
+            key={name}
+            testID={`root-screen-playground-${name}`}
+            title={SCREENS[name].title}
+            onPress={() => navigation.navigate(name)}
+            disabled={!isPlatformReady(name)}
+          />
+        ))}
+        <ThemedText style={styles.label}>Tests</ThemedText>
+        <ListItem
+          key="SingleFeatureTests"
+          testID="root-screen-single-feature-tests"
+          title="Single Feature Tests"
+          onPress={() => navigation.navigate('SingleFeatureTests')}
+        />
+        <ListItem
+          key="ComponentIntegrationTests"
+          testID="root-screen-component-integration-tests"
+          title="Component Integration Tests"
+          onPress={() => navigation.navigate('ComponentIntegrationTests')}
+        />
+        <ListItem
+          key="IssueTests"
+          testID="root-screen-issue-tests"
+          title="Issue Tests"
+          onPress={() => navigation.navigate('IssueTests')}
+        />
+      </ScrollView>
+    </SafeAreaView>
   );
 };
 
@@ -305,14 +236,16 @@ const ExampleApp = (): React.JSX.Element => {
     <GestureHandlerRootView style={{ flex: 1 }}>
       <GestureDetectorProvider>
         <ThemeToggle.Provider value={{ toggleTheme }}>
-          <NavigationContainer theme={isDark ? ScreensDarkTheme : ScreensLightTheme}>
+          <NavigationContainer
+            theme={isDark ? ScreensDarkTheme : ScreensLightTheme}>
             <Stack.Navigator
               screenOptions={{ statusBarStyle: isDark ? 'light' : 'dark' }}>
               <Stack.Screen
                 name="Main"
                 options={{
-                  title: `${Platform.isTV ? '📺' : '📱'
-                    } React Native Screens Examples`,
+                  title: `${
+                    Platform.isTV ? '📺' : '📱'
+                  } React Native Screens Examples`,
                 }}
                 component={MainScreen}
               />
@@ -324,6 +257,24 @@ const ExampleApp = (): React.JSX.Element => {
                   options={{ headerShown: false }}
                 />
               ))}
+              <Stack.Screen
+                key="SingleFeatureTests"
+                name="SingleFeatureTests"
+                options={{ headerShown: false }}
+                component={SingleFeatureTests}
+              />
+              <Stack.Screen
+                key="ComponentIntegrationTests"
+                name="ComponentIntegrationTests"
+                options={{ headerShown: false }}
+                component={ComponentIntegrationTests}
+              />
+              <Stack.Screen
+                key="IssueTests"
+                name="IssueTests"
+                options={{ headerShown: false }}
+                component={IssueTestsScreen}
+              />
             </Stack.Navigator>
           </NavigationContainer>
         </ThemeToggle.Provider>