chore: Tests without scrolling (#903)

* Fixed tests by reducing spacing between elements in example App and changing iOS device to larger iPhone 15 Pro Max

* Reverted a change done to an iOS test that caused it to fail sometimes

* Changed CircleCI devices for Android and iOS

Author: JoshBarnesD

.circleci/config.yml

@@ -46,7 +46,6 @@ jobs:
           command: yarn detox:ios:build:release
           name: build app with new arch
 
-
   e2e_release_ios:
     executor:
       name: rn/macos
@@ -59,16 +58,16 @@ jobs:
             HOMEBREW_NO_INSTALL_CLEANUP=1 HOMEBREW_NO_AUTO_UPDATE=1 brew tap wix/brew >/dev/null
             HOMEBREW_NO_INSTALL_CLEANUP=1 HOMEBREW_NO_AUTO_UPDATE=1 brew install applesimutils >/dev/null
       - rn/ios_simulator_start:
-          device: 'iPhone 14'
+          device: 'iPhone 15 Pro Max'
       # - rn/yarn_install
       - run:
           command: yarn install --immutable
           name: yarn install
       - run:
           command: yarn bundle:ios
           name: bundle js
-#      - rn/pod_install:
-#          pod_install_directory: 'example/ios'
+      #      - rn/pod_install:
+      #          pod_install_directory: 'example/ios'
       - run:
           command: (cd example && npx pod-install)
           name: pod install
@@ -89,7 +88,7 @@ jobs:
     steps:
       - checkout
       - android/change-java-version:
-          java-version: 17 
+          java-version: 17
       - run:
           command: avdmanager list
           name: list avds
@@ -99,7 +98,7 @@ jobs:
       - android/create-avd:
           avd-name: TestingAVD
           system-image: system-images;android-29;default;x86
-          additional-args: --device pixel_3_xl
+          additional-args: --device pixel_6_pro
           install: true
           background: false
       - android/start-emulator:
@@ -108,7 +107,7 @@ jobs:
           wait-for-emulator: true
           disable-animations: true
           restore-gradle-cache-post-emulator-launch: false
-          post-emulator-launch-assemble-command: "pwd"
+          post-emulator-launch-assemble-command: 'pwd'
       #      - android/disable-animations
       - run:
           command: npm install --global yarn
@@ -128,7 +127,6 @@ jobs:
       - store_artifacts:
           path: ./artifacts
 
-
   new_arch_android_build_only:
     executor:
       name: android/android-machine
@@ -137,14 +135,14 @@ jobs:
     steps:
       - checkout
       - android/change-java-version:
-           java-version: 17 
+          java-version: 17
       - run:
           command: avdmanager list
           name: list avds
       - android/create-avd:
           avd-name: TestingAVD
           system-image: system-images;android-29;default;x86
-          additional-args: --device pixel_3_xl
+          additional-args: --device pixel_6_pro
           install: true
           background: false
       - android/start-emulator:
@@ -153,7 +151,7 @@ jobs:
           wait-for-emulator: true
           disable-animations: true
           restore-gradle-cache-post-emulator-launch: false
-          post-emulator-launch-assemble-command: "pwd"
+          post-emulator-launch-assemble-command: 'pwd'
       - run:
           command: npm install --global yarn
           name: install yarn

.detoxrc.js

@@ -9,7 +9,7 @@ module.exports = {
     simulator: {
       type: 'ios.simulator',
       device: {
-        type: 'iPhone 14',
+        type: 'iPhone 15 Pro Max',
       },
     },
     emulator: {

example/App.js

@@ -336,7 +336,7 @@ export const App = () => {
               placeholder="accentColor"
             />
           </View>
-          <View style={{flex: 1, flexDirection: 'row'}}>
+          <View style={styles.header}>
             <ThemedText style={styles.textLabel}>
               disabled (iOS only)
             </ThemedText>
@@ -360,15 +360,15 @@ export const App = () => {
             style={{
               flexDirection: 'column',
               flexWrap: 'wrap',
-              paddingBottom: 10,
+              paddingBottom: 0,
             }}>
             <ThemedText style={styles.textLabel}>
               firstDayOfWeek (android only)
             </ThemedText>
             <View style={styles.firstDayOfWeekContainer}>
               <FlatList
                 testID="firstDayOfWeekSelector"
-                style={{marginBottom: 10}}
+                style={{marginBottom: 5}}
                 horizontal={true}
                 renderItem={renderDayOfWeekItem}
                 data={Object.entries(DAY_OF_WEEK)}
@@ -647,7 +647,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
   },
   textLabel: {
-    margin: 10,
+    marginHorizontal: 5,
     flex: 1,
   },
   textInput: {

example/e2e/detoxTest.spec.js

@@ -14,6 +14,7 @@ const {
   userTapsOkButtonAndroid,
   userSelectsDayInCalendar,
   userSwipesTimezoneListUntilDesiredIsVisible,
+  userDismissesCompactDatePicker,
 } = require('./utils/actions');
 const {isIOS, isAndroid, wait, Platform} = require('./utils/utils');
 const {device} = require('detox');
@@ -65,15 +66,14 @@ describe('e2e tests', () => {
     await userOpensPicker({mode: 'date', display: 'default'});
 
     if (isIOS()) {
-      await elementById('DateTimePickerScrollView').scrollTo('bottom');
       await getDatePickerButtonIOS().tap();
 
       // 'label' maps to 'description' in view hierarchy debugger
       const nextMonthArrow = element(by.label('Next Month'));
 
       await nextMonthArrow.tap();
       await nextMonthArrow.tap();
-      await getDatePickerButtonIOS().tap();
+      await userDismissesCompactDatePicker();
     } else {
       const calendarHorizontalScrollView = element(
         by
@@ -121,11 +121,9 @@ describe('e2e tests', () => {
       ios: 'inline',
       android: 'default',
     });
-    await elementById('DateTimePickerScrollView').scrollTo('top');
     await userOpensPicker({mode: 'time', display});
 
     if (isIOS()) {
-      await elementById('DateTimePickerScrollView').scrollTo('bottom');
       await expect(getInlineTimePickerIOS()).toBeVisible();
     } else {
       await expect(element(by.type('android.widget.TimePicker'))).toBeVisible();
@@ -169,8 +167,6 @@ describe('e2e tests', () => {
 
       await expect(elementById('overriddenTzName')).toHaveText('Europe/Prague');
 
-      await elementById('DateTimePickerScrollView').scrollTo('bottom');
-
       let timeZone = 'America/Vancouver';
       await waitFor(elementById('timezone')).toBeVisible().withTimeout(1000);
       await userSwipesTimezoneListUntilDesiredIsVisible(timeZone);
@@ -195,8 +191,6 @@ describe('e2e tests', () => {
     });
 
     it('daylight saving should work properly', async () => {
-      await elementById('DateTimePickerScrollView').scrollTo('bottom');
-
       let timeZone = 'America/Vancouver';
       await waitFor(elementById('timezone')).toBeVisible().withTimeout(1000);
       await userSwipesTimezoneListUntilDesiredIsVisible(timeZone);
@@ -209,7 +203,6 @@ describe('e2e tests', () => {
 
       await elementByText(timeZone).multiTap(2);
 
-      await elementById('DateTimePickerScrollView').scrollTo('top');
       await userOpensPicker({mode: 'date', display: getPickerDisplay()});
 
       if (isIOS()) {
@@ -239,7 +232,6 @@ describe('e2e tests', () => {
         await uiDevice.pressEnter();
         await userTapsOkButtonAndroid();
 
-        await elementById('DateTimePickerScrollView').scrollTo('top');
         await userOpensPicker({mode: 'time', display: getPickerDisplay()});
         await userChangesTimeValue({hours: '2', minutes: '0'});
         await userTapsOkButtonAndroid();
@@ -287,8 +279,6 @@ describe('e2e tests', () => {
         tzOffsetPreset = tzOffsetPreset.toUpperCase();
       }
 
-      await elementById('DateTimePickerScrollView').scrollTo('top');
-
       await userOpensPicker({
         mode: 'time',
         display: getPickerDisplay(),
@@ -324,9 +314,7 @@ describe('e2e tests', () => {
         await expect(elementById('utcTime')).toHaveText('2021-11-13T00:00:00Z');
 
         // Ensure you can select tomorrow (iOS)
-        await elementById('DateTimePickerScrollView').scrollTo('top');
         await userOpensPicker({mode: 'date', display: getPickerDisplay()});
-        await elementById('DateTimePickerScrollView').scrollTo('bottom');
         await testElement.setDatePickerDate('2021-11-14T01:00:00Z', 'ISO8601');
       } else {
         const uiDevice = device.getUiDevice();

example/e2e/utils/actions.js

@@ -93,11 +93,16 @@ async function userSelectsDayInCalendar(uiDevice, {xPos, yPos}) {
   await uiDevice.pressEnter();
 }
 
+async function userDismissesCompactDatePicker() {
+  await element(by.type('_UIDatePickerContainerView')).tap();
+}
+
 module.exports = {
   userOpensPicker,
   userTapsCancelButtonAndroid,
   userTapsOkButtonAndroid,
   userChangesTimeValue,
   userSelectsDayInCalendar,
   userSwipesTimezoneListUntilDesiredIsVisible,
+  userDismissesCompactDatePicker,
 };