Add tests for example app via detox

.gitignore

@@ -63,3 +63,5 @@ yarn-error.log
 .metro-health-check*
 
 rose-hulman-react-native-dropdown-selector-*.tgz
+
+.fake

README.md

@@ -30,12 +30,14 @@ and
 [`MultiSelect`](https://github.com/rhventures/react-native-dropdown-selector/wiki/MultiSelect)
 
 Using one of these components looks something like the following:
+
 ```tsx
 <Select
   data={data}
   onSelect={console.log}
 />
 ```
+
 The data prop takes in an array of the [`Data`](https://github.com/rhventures/react-native-dropdown-selector/wiki/Data) object to act as options for the Selector, and the onSelect prop takes in a function that accepts an argument of type `Data` to be called when a new item is selected.
 
 These components may also take in optional props. For more information about the usage of these components, check out the
@@ -46,30 +48,38 @@ These components may also take in optional props. For more information about the
 The following example uses TypeScript.
 
 First, import a selector component and the `Data` type. In this case, we use `Select`:
+
 ```tsx
 import { Select, type Data } from 'react-native-dropdown-selector';
 ```
+
 Then, create an array of items of type `Data`. This will be used for the `data` prop of the selector:
+
 ```tsx
 const data: Data[] = [
   { label: 'Item 1' },
   { label: 'Item 2' },
   { label: 'Item 3' },
 ]
 ```
+
 Next, define that function that will be used for the `onSelect` prop:
+
 ```tsx
 const onDataSelected = (data: Data) => {
   console.log(data.label + ' was selected!');
 };
 ```
+
 Finally, create the component with the previously defined props:
+
 ```tsx
 <Select
   data={data}
   onSelect={onDataSelected}
 />
 ```
+
 For a more detailed guide on the usage of these components, please read [Getting Started](https://github.com/rhventures/react-native-dropdown-selector/wiki/Getting-Started).
 
 ## Demo

example/.detoxrc.js

@@ -0,0 +1,87 @@
+const isWin = process.platform === 'win32';
+
+/** @type {Detox.DetoxConfig} */
+module.exports = {
+  testRunner: {
+    args: {
+      '$0': 'jest',
+      config: 'e2e/jest.config.js'
+    },
+    jest: {
+      setupTimeout: 120000
+    }
+  },
+  apps: {
+    'ios.debug': {
+      type: 'ios.app',
+      binaryPath: 'ios/build/Build/Products/Debug-iphonesimulator/example.app',
+      build: 'xcodebuild -workspace ios/example.xcworkspace -scheme example -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build'
+    },
+    'ios.release': {
+      type: 'ios.app',
+      binaryPath: 'ios/build/Build/Products/Release-iphonesimulator/example.app',
+      build: 'xcodebuild -workspace ios/example.xcworkspace -scheme example -configuration Release -sdk iphonesimulator -derivedDataPath ios/build'
+    },
+    'android.debug': {
+      type: 'android.apk',
+      build: `cd android && ${isWin ? 'gradlew.bat' : './gradlew'} assembleDebug assembleAndroidTest -DtestBuildType=debug`,
+      binaryPath: 'android/app/build/outputs/apk/debug/app-debug.apk',
+      // testBinaryPath: 'custom/path/to/app-debug-androidTest.apk', // if you have a separate test APK, put it here
+      reversePorts: [
+        8081
+      ]
+    },
+    'android.release': {
+      type: 'android.apk',
+      build: `cd android && ${isWin ? 'gradlew.bat' : './gradlew'} assembleRelease assembleAndroidTest -DtestBuildType=release`,
+      binaryPath: 'android/app/build/outputs/apk/release/app-release.apk',
+      // testBinaryPath: 'custom/path/to/app-release-androidTest.apk', // if you have a separate release APK, put it here
+    }
+  },
+  devices: {
+    simulator: {
+      type: 'ios.simulator',
+      device: {
+        type: 'iPhone 15'
+      }
+    },
+    attached: {
+      type: 'android.attached',
+      device: {
+        adbName: '.*'
+      }
+    },
+    emulator: {
+      type: 'android.emulator',
+      device: {
+        avdName: 'demophone' //Replace it with your AVD name
+      }
+    }
+  },
+  configurations: {
+    'ios.sim.debug': {
+      device: 'simulator',
+      app: 'ios.debug'
+    },
+    'ios.sim.release': {
+      device: 'simulator',
+      app: 'ios.release'
+    },
+    'android.att.debug': {
+      device: 'attached',
+      app: 'android.debug'
+    },
+    'android.att.release': {
+      device: 'attached',
+      app: 'android.release'
+    },
+    'android.emu.debug': {
+      device: 'emulator',
+      app: 'android.debug'
+    },
+    'android.emu.release': {
+      device: 'emulator',
+      app: 'android.release'
+    }
+  }
+};

example/App.tsx

@@ -43,7 +43,6 @@ const Content = ({ onThemeSelect, theme }: ContentProperties): React.JSX.Element
   const [disabled, setDisabled] = React.useState(false);
   const [searchable, setSearchable] = React.useState(false);
   const style = useThemeStyles(theme);
-
   const onSimpleDataSelect = (datum: Data) =>
     setItem(datum.label);
   const onSimpleMultiDataSelect = (data: Data[]) =>
@@ -70,6 +69,7 @@ const Content = ({ onThemeSelect, theme }: ContentProperties): React.JSX.Element
           disabled={disabled}
           searchable={searchable}
           theme={theme}
+          testID="SimpleDataSelect"
         />
         <Text style={style.text}>
           Selected: {item || 'None'} (scroll down)
@@ -97,13 +97,15 @@ const Content = ({ onThemeSelect, theme }: ContentProperties): React.JSX.Element
             alignSelf: 'center',
             width: 200,
           }}
+          testID='SimpleDataSelect2'
         />
         <MultiSelect
           data={data}
           onSelect={onSimpleMultiDataSelect}
           disabled={disabled}
           searchable={searchable}
           theme={theme}
+          testID='SimpleMultiDataSelect'
         />
         <View style={{ height: 400 }}/>
         <Text style={style.text}>Single Selects:</Text>
@@ -115,6 +117,7 @@ const Content = ({ onThemeSelect, theme }: ContentProperties): React.JSX.Element
               disabled={disabled}
               searchable={searchable}
               theme={theme}
+              testID='DataSelect(1)'
             />
           </View>
           <View style={{ flex: 1 }}>
@@ -124,6 +127,7 @@ const Content = ({ onThemeSelect, theme }: ContentProperties): React.JSX.Element
               disabled={disabled}
               searchable={searchable}
               theme={theme}
+              testID='DataSelect(2)'
             />
           </View>
           <View style={{ flex: 1 }}>
@@ -133,6 +137,7 @@ const Content = ({ onThemeSelect, theme }: ContentProperties): React.JSX.Element
               disabled={disabled}
               searchable={searchable}
               theme={theme}
+              testID='DataSelect(3)'
             />
           </View>
         </View>
@@ -147,6 +152,7 @@ const Content = ({ onThemeSelect, theme }: ContentProperties): React.JSX.Element
                 disabled={disabled}
                 searchable={searchable}
                 theme={theme}
+                testID='MultiDataSelect(4)'
               />
             </View>
             <View style={{ flex: 1 }}>
@@ -157,6 +163,7 @@ const Content = ({ onThemeSelect, theme }: ContentProperties): React.JSX.Element
                 disabled={disabled}
                 searchable={searchable}
                 theme={theme}
+                testID='MultiDataSelect(5)'
               />
             </View>
             <View style={{ flex: 1 }}>
@@ -167,6 +174,7 @@ const Content = ({ onThemeSelect, theme }: ContentProperties): React.JSX.Element
                 disabled={disabled}
                 searchable={searchable}
                 theme={theme}
+                testID='MultiDataSelect(6)'
               />
             </View>
           </View>
@@ -192,6 +200,7 @@ const Content = ({ onThemeSelect, theme }: ContentProperties): React.JSX.Element
             }}
             placeholderText='Selector Settings'
             theme={theme}
+            testID='SelectorSettings'
           />
         </View>
         <View style={{ height: 200 }}>
@@ -202,6 +211,7 @@ const Content = ({ onThemeSelect, theme }: ContentProperties): React.JSX.Element
             searchable={searchable}
             placeholderText={`Select a theme`}
             theme={theme}
+            testID='ThemeSelect'
           />
           <Text style={[style.text, { textAlign: 'center'}]}>
             Select a theme to see all the dropdowns change! Current theme is "{theme}"
@@ -284,6 +294,7 @@ const Content = ({ onThemeSelect, theme }: ContentProperties): React.JSX.Element
             paddingHorizontal: 12,
             paddingTop: 14,
           }}
+          testID='StyledSingleSelect'
         />
         <View style={{height: 50}} />
         <Text style={style.text}>Styled Multi Select:</Text>
@@ -383,6 +394,7 @@ const Content = ({ onThemeSelect, theme }: ContentProperties): React.JSX.Element
             paddingHorizontal: 12,
             paddingTop: 14,
           }}
+          testID='StyledMultiSelect'
         />
         <View style={{ height: 700 }} />
       </ScrollView>

example/TestInstruction.md

@@ -0,0 +1,86 @@
+# Instruction for Example App Tests
+
+## Introduction
+
+This document provides detailed instruction about how to run and modify tests for `Example App` in `react-native-dropdown-selector` project. The example app is designed to demonstrate the usage of the `Select` and `MultiSelect` components. The tests are written to ensure that these components work as expected in various scenarios.
+
+Tests for `Example App` are based on framework [**Detox**](https://wix.github.io/Detox/). The main configuration file is located at `example/.detoxrc.js`. All the test files are located in the `example/e2e` directory. The tests are written in JavaScript.
+
+## Running Tests
+
+To run the tests for the Example App, follow these steps:
+
+1. **Go to the Example Directory**: Navigate to the `example` directory of the project. This is where the example app and its tests are located.
+
+   ```bash
+   cd example
+   ```
+
+2. **Install Dependencies**: Make sure you have all the necessary dependencies installed. You can do this by running:
+
+   ```bash
+   npm install
+   ```
+
+3. **Replace Demo Phone avd**: You can use **Android Studio** to create a phone only for this test. We highly recommend you to use default **Medium Phone** in Android Studio, as this test's setup is based on **Medium Phone**, if you choose to use other devices, some data migh be wrong, and you need to manually justify the number in all tests to fit your demo phone. Besides, remember to name the demo phone in **lower case** with **no space** (for example: `demophone`, `testphone`), otherwise it may cause some problems. Finally, go to the configuration file `.detoxrc.js`, find the following lines, and put your demo phone name after `avdName`:
+
+   ```
+    emulator: {
+      type: 'android.emulator',
+      device: {
+        avdName: 'put your demo phone name here'
+      }
+    }
+   ```
+
+4. **Build the App**: Make sure you build the app before running tests by running the following command:
+
+    ```bash
+    detox build --configuration android.emu.debug
+    ```
+
+5. **Run the Tests**: Once everything above is done, you are ready to run the tests!
+   - Here is the overview of all test files under `e2e` directory:
+
+      1. `jest.config.js`: Jest configuration file for running tests.
+      2. `SingleSelect.test.js`: Tests for `Single Selector`.
+      3. `MultiSelect.test.js`: Tests for `Multi Selector`.
+      4. `ClearButton.test.js`: Tests for `Clear Button`.
+      5. `Theme.test.js`: Tests for `Theme Change`.
+      6. `Settings.test.js`: Tests for `Settings`, including `disable` and `searchable`.
+      7. `testAll.test.js`: This test file contains all the tests above, it can largely save your time if you want to test all features at the same time, as it will only launch the device and app once and reload react-native only when necessary. If you want to test everything really quick, please run this file.
+
+   - Notice before running tests:
+
+      1. When you run tests with a new Android emulator, it may take a while to start the emulator and install the app. Please be patient.
+      2. First time when you run the tests, if you encounter any issues related to `device not found`, `device.launchapp()`, `device.reloadReactNative()`, etc. this may be due to the emulator not being started properly. Please open a new terminal, go into the example folder, and run the following command:
+
+         ```bash
+         npx react-native start
+         ```
+
+         Then re-run the tests. This should resolve the issue. If you still encounter issues, please try to restart the emulator or your computer, and make sure you followed all the instructions above.
+
+      3. First time when you run `Searchable Selection Tests` (in `Settings.test.js` and `testAll.test.js`), you may encounter an issue like `text not being found`, this is because the first time you try to **type in** something on a new Android emulator, there will be a pop-up window to show some tips about how to use the keyboard. You can just click on the ***Cancel*** button to close the pop-up window, and then re-run the tests (you might need to re-run two to three times). This should resolve the issue. If you still encounter issues, please try to restart the emulator, and make sure you followed all the instructions above.
+
+   - Commands to run tests:
+
+      1. Run all `test files` under `e2e` directory (This is really slow! If you want to test everything really quick, please see the next command):
+
+         ```bash
+         detox test --configuration android.emu.debug
+         ```
+
+      2. Run all `tests` once:
+
+         ```bash
+         detox test /e2e/testAll.test.js --configuration android.emu.debug
+         ```
+
+      3. Run a specific test file:
+
+         ```bash
+         detox test /e2e/(filename) --configuration android.emu.debug
+         ```
+
+   - Results: After running the tests, you will see the results in the terminal. If all tests pass, you will see a message indicating that all tests have passed. If any test fails, you will see an error message indicating which test failed and why.

example/android/app/build.gradle

@@ -84,6 +84,8 @@ android {
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
         versionName "1.0"
+        testBuildType System.getProperty('testBuildType', 'debug')
+        testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'
     }
     signingConfigs {
         debug {
@@ -100,16 +102,21 @@ android {
         release {
             // Caution! In production, you need to generate your own keystore file.
             // see https://reactnative.dev/docs/signed-apk-android.
-            signingConfig signingConfigs.debug
-            minifyEnabled enableProguardInReleaseBuilds
+            // minifyEnabled enableProguardInReleaseBuilds
+            minifyEnabled true
             proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+            proguardFile "${rootProject.projectDir}/../node_modules/detox/android/detox/proguard-rules-app.pro"
+            signingConfig signingConfigs.debug
         }
     }
 }
 
 dependencies {
     // The version of react-native is set by the React Native Gradle Plugin
     implementation("com.facebook.react:react-android")
+    androidTestImplementation('com.wix:detox:+')
+    implementation 'androidx.appcompat:appcompat:1.1.0'
+    implementation fileTree(dir: "libs", include: ["*.jar"])
 
     if (hermesEnabled.toBoolean()) {
         implementation("com.facebook.react:hermes-android")