Merge pull request #1620 from flexn-io/chore/app-harness-e2e

chore: add harness e2e coverage of test cases
flexn-io · Sep 27, 2024 · 04e61b7 · 04e61b7
2 parents 6db16c3 + 79d6d43
commit 04e61b7
Show file tree

Hide file tree

Showing 9 changed files with 119 additions and 24 deletions.
diff --git a/packages/app-harness/next-env.d.ts b/packages/app-harness/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/packages/app-harness/src/app/index.tsx b/packages/app-harness/src/app/index.tsx
@@ -122,14 +122,8 @@ const AppContent = () => {
     return (
         <View style={styles.wrapper}>
             <View style={styles.header}>
-                <Image
-                    style={styles.logo}
-                    source={ICON_LOGO}
-                    {...testProps('app-harness-home-screen-renative-image')}
-                />
-                <Text style={styles.introText} {...testProps('app-harness-home-screen-intro-text')}>
-                    ReNative Harness
-                </Text>
+                <Image style={styles.logo} source={ICON_LOGO} {...testProps('app-harness-home-renative-image')} />
+                <Text style={styles.introText}>ReNative Harness</Text>
                 <View style={{ flex: 1, alignItems: 'flex-end' }}>
                     <Text style={styles.dynamicText}>
                         {`v${config.version}, platform: ${Api.platform}, factor: ${Api.formFactor}, engine: ${Api.engine}`}
@@ -149,7 +143,7 @@ const AppContent = () => {
                     }}
                 >
                     <TestCase id={1} title="Hermes support ">
-                        <Text style={styles.text}>{`hermes: ${
+                        <Text style={styles.text} {...testProps('app-harness-home-hermes-support-text')}>{`hermes: ${
                             typeof HermesInternal === 'object' && HermesInternal !== null ? 'yes' : 'no'
                         }`}</Text>
                     </TestCase>
@@ -185,13 +179,17 @@ const AppContent = () => {
                             // this to null will remove focus from another item
                             onBlur={() => setFocusedIndex((prev) => (prev === 1 ? null : prev))}
                         >
-                            <Text style={styles.buttonTitle}>Toggle Video</Text>
+                            <Text style={styles.buttonTitle} {...testProps('app-harness-home-toggle-video-button')}>
+                                Toggle Video
+                            </Text>
                         </TouchableOpacity>
                         {showVideo && (
                             <View>
                                 <OrientationLocker orientation={LANDSCAPE} />
                                 <View style={{ width: 320, height: 180, backgroundColor: '#ccc' }}>
-                                    <Text style={styles.text}>Landscape video goes here</Text>
+                                    <Text style={styles.text} {...testProps('app-harness-home-landscape-video-text')}>
+                                        Landscape video goes here
+                                    </Text>
                                 </View>
                             </View>
                         )}
@@ -212,7 +210,11 @@ const AppContent = () => {
                         </TouchableOpacity>
                     </TestCase>
                     <TestCase id={5} title="Image Support">
-                        <Image source={ICON_LOGO} style={{ width: 100, height: 100 }} />
+                        <Image
+                            source={ICON_LOGO}
+                            style={{ width: 100, height: 100 }}
+                            {...testProps('app-harness-home-image-support-image')}
+                        />
                     </TestCase>
                     <TestCase id={6} title="Cast Support">
                         <CastComponent />
@@ -229,7 +231,10 @@ const AppContent = () => {
                         )}
                         <TouchableOpacity
                             ref={splashBtnRef}
-                            onPress={() => SplashScreen.show()}
+                            onPress={() => {
+                                SplashScreen.show();
+                                setTimeout(() => SplashScreen.hide(), 3000);
+                            }}
                             style={[
                                 styles.button,
                                 focusedIndex === 3 && styles.buttonFocused,
@@ -284,6 +289,7 @@ const AppContent = () => {
                                   { paddingHorizontal: 25 },
                                   idx === logs.length - 1 && { paddingBottom: 80 },
                               ]}
+                              {...testProps(`app-harness-home-logs-text-${idx}`)}
                           >
                               {it}
                           </Text>

diff --git a/packages/app-harness/src/components/CastButton/index.android.mobile.tsx b/packages/app-harness/src/components/CastButton/index.android.mobile.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import { CastButton, useRemoteMediaClient } from 'react-native-google-cast';
+import { testProps } from '../../config';
 
 export function CastComponent() {
     const client = useRemoteMediaClient();
@@ -15,5 +16,10 @@ export function CastComponent() {
         }
     }, [client]);
 
-    return <CastButton style={{ width: 24, height: 24, tintColor: 'black' }} />;
+    return (
+        <CastButton
+            {...testProps('app-harness-home-cast-support-button')}
+            style={{ width: 24, height: 24, tintColor: 'black' }}
+        />
+    );
 }
diff --git a/packages/app-harness/src/components/CastButton/index.tsx b/packages/app-harness/src/components/CastButton/index.tsx
@@ -1,5 +1,10 @@
 import { Text } from 'react-native';
+import { testProps } from '../../config';
 
 export const CastComponent = () => {
-    return <Text style={{ color: 'black' }}>Not supported</Text>;
+    return (
+        <Text style={{ color: 'black' }} {...testProps('app-harness-home-cast-support-text')}>
+            Not supported
+        </Text>
+    );
 };
diff --git a/packages/app-harness/src/components/NewModuleButton/index.native.tsx b/packages/app-harness/src/components/NewModuleButton/index.native.tsx
@@ -2,8 +2,9 @@ import React, { forwardRef } from 'react';
 import { NativeModules, TouchableOpacityProps, TouchableOpacity, Text } from 'react-native';
 import { useLoggerContext } from '../../context';
 import styles from '../../styles';
+import { testProps } from '../../config';
 
-interface ButtonProps extends TouchableOpacityProps {}
+type ButtonProps = TouchableOpacityProps;
 export const NewModuleButton = forwardRef<TouchableOpacity, ButtonProps>(({ onBlur, onFocus, style }, ref) => {
     const { TestNativeModule } = NativeModules;
     const { logDebug } = useLoggerContext();
@@ -23,7 +24,9 @@ export const NewModuleButton = forwardRef<TouchableOpacity, ButtonProps>(({ onBl
     };
     return (
         <TouchableOpacity ref={ref} onPress={onPress} onFocus={onFocus} onBlur={onBlur} style={style}>
-            <Text style={styles.buttonTitle}>Click to invoke native module!</Text>
+            <Text style={styles.buttonTitle} {...testProps('app-harness-home-native-call-button')}>
+                Click to invoke native module!
+            </Text>
         </TouchableOpacity>
     );
 });
diff --git a/packages/app-harness/src/components/NewModuleButton/index.tsx b/packages/app-harness/src/components/NewModuleButton/index.tsx
@@ -2,16 +2,19 @@ import React, { forwardRef } from 'react';
 import { TouchableOpacityProps, TouchableOpacity, Text } from 'react-native';
 import { useLoggerContext } from '../../context';
 import styles from '../../styles';
+import { testProps } from '../../config';
 
-interface ButtonProps extends TouchableOpacityProps {}
+type ButtonProps = TouchableOpacityProps;
 export const NewModuleButton = forwardRef<TouchableOpacity, ButtonProps>(({ onBlur, onFocus, style }, ref) => {
     const { logDebug } = useLoggerContext();
     const onPress = () => {
         logDebug('NativeModules not supported in web');
     };
     return (
         <TouchableOpacity ref={ref} onPress={onPress} onFocus={onFocus} onBlur={onBlur} style={style}>
-            <Text style={styles.buttonTitle}>Click to invoke native module!</Text>
+            <Text style={styles.buttonTitle} {...testProps('app-harness-home-native-call-button')}>
+                Click to invoke native module!
+            </Text>
         </TouchableOpacity>
     );
 });
diff --git a/packages/app-harness/src/components/PhotoEditor/index.mobile.native.tsx b/packages/app-harness/src/components/PhotoEditor/index.mobile.native.tsx
@@ -7,7 +7,7 @@ import { useLoggerContext } from '../../context';
 import { ICON_LOGO } from '../../config';
 import styles from '../../styles';
 
-interface ButtonProps extends TouchableOpacityProps {}
+type ButtonProps = TouchableOpacityProps;
 export const PhotoEditorButton = forwardRef<TouchableOpacity, ButtonProps>(({ onBlur, onFocus, style }, ref) => {
     const { logDebug } = useLoggerContext();
     const photoPath = RNFS.DocumentDirectoryPath + ICON_LOGO;

diff --git a/packages/app-harness/src/components/PhotoEditor/index.tsx b/packages/app-harness/src/components/PhotoEditor/index.tsx
@@ -3,7 +3,7 @@ import { useLoggerContext } from '../../context';
 import { Text, TouchableOpacity, TouchableOpacityProps } from 'react-native';
 import styles from '../../styles';
 
-interface ButtonProps extends TouchableOpacityProps {}
+type ButtonProps = TouchableOpacityProps;
 export const PhotoEditorButton = forwardRef<TouchableOpacity, ButtonProps>(({ onBlur, onFocus, style }, ref) => {
     const { logDebug } = useLoggerContext();
     const handlePhotoEditor = () => {

diff --git a/packages/app-harness/test/specs/e2e.cjs b/packages/app-harness/test/specs/e2e.cjs
@@ -5,7 +5,79 @@ describe('Test App Harness', () => {
         FlexnRunner.launchApp();
     });
 
-    it('--> check if ReNative logo is displayed in Home Page', async () => {
-        await FlexnRunner.expectToBeDisplayedById('app-harness-home-screen-renative-image');
+    it('--> Hermes Support ', async () => {
+        await FlexnRunner.waitForDisplayedById('app-harness-home-renative-image');
+        if (process.env.PLATFORM === 'web') {
+            await FlexnRunner.expectToHaveTextById('app-harness-home-hermes-support-text', 'hermes: no');
+        } else {
+            await FlexnRunner.expectToHaveTextById('app-harness-home-hermes-support-text', 'hermes: yes');
+        }
+    });
+
+    it('--> Native Call', async () => {
+        await FlexnRunner.clickById('app-harness-home-native-call-button');
+        // https://github.com/flexn-io/renative/issues/1733
+        if (process.env.PLATFORM === 'androidtv') {
+            await FlexnRunner.pressButtonDown(2);
+        }
+        await FlexnRunner.pressButtonSelect(1);
+        if (process.env.PLATFORM === 'web') {
+            await FlexnRunner.expectToHaveTextById(
+                'app-harness-home-logs-text-2',
+                'NativeModules not supported in web'
+            );
+        } else if (process.env.PLATFORM === 'android') {
+            await FlexnRunner.expectToHaveTextById(
+                'app-harness-home-logs-text-3',
+                'Event called with name: testName and location: testLocation'
+            );
+        } else if (process.env.PLATFORM === 'ios') {
+            await FlexnRunner.expectToHaveTextById(
+                'app-harness-home-logs-text-3',
+                'NativeModules not supported for this platform'
+            );
+        } else if (process.env.PLATFORM === 'androidtv') {
+            await FlexnRunner.expectToHaveTextById(
+                'app-harness-home-logs-text-1',
+                'NativeModules not supported for this platform'
+            );
+        } else if (process.env.PLATFORM === 'tvos') {
+            await FlexnRunner.expectToHaveTextById(
+                'app-harness-home-logs-text-2',
+                'NativeModules not supported for this platform'
+            );
+        }
+    });
+
+    it('--> Orientation support ', async () => {
+        await FlexnRunner.clickById('app-harness-home-toggle-video-button');
+        await FlexnRunner.pressButtonDown(1);
+        await FlexnRunner.pressButtonSelect(1);
+        if (process.env.PLATFORM === 'ios' || process.env.PLATFORM === 'android') {
+            await FlexnRunner.scrollById(
+                'app-harness-home-landscape-video-text',
+                'down',
+                'app-harness-home-hermes-support-text'
+            );
+        }
+        await FlexnRunner.expectToBeDisplayedById('app-harness-home-landscape-video-text');
+        await FlexnRunner.clickById('app-harness-home-toggle-video-button');
+        await FlexnRunner.pressButtonSelect(1);
+    });
+
+    it('--> Image Support ', async () => {
+        await FlexnRunner.pressButtonDown(2);
+        await FlexnRunner.expectToBeDisplayedById('app-harness-home-image-support-image');
+    });
+
+    it('--> Cast Support ', async () => {
+        if (process.env.PLATFORM === 'android') {
+            await FlexnRunner.clickById('app-harness-home-cast-support-button');
+            await FlexnRunner.expectToBeDisplayedByText('Cast to');
+            await FlexnRunner.waitForDisplayedByText('OK');
+            await FlexnRunner.expectToBeDisplayedByText('OK');
+        } else {
+            await FlexnRunner.expectToHaveTextById('app-harness-home-cast-support-text', 'Not supported');
+        }
     });
 });