fix: welcome video not rendered

Author: pac-guerreiro

src/CONST.ts

@@ -5117,6 +5117,11 @@ const CONST = {
     },
     SELECTION_LIST_WITH_MODAL_TEST_ID: 'selectionListWithModalMenuItem',
 
+    IMAGE_TEST_ID: 'Image',
+    IMAGE_SVG_TEST_ID: 'ImageSVG',
+    VIDEO_PLAYER_TEST_ID: 'VideoPlayer',
+    LOTTIE_VIEW_TEST_ID: 'LottieView',
+
     CHAT_HEADER_LOADER_HEIGHT: 36,
 
     HORIZONTAL_SPACER: {

src/components/FeatureTrainingModal.tsx

@@ -219,20 +219,23 @@ function FeatureTrainingModal({
                     (!!videoURL || !!image) && {aspectRatio},
                 ]}
             >
-                {!!image && shouldRenderSVG ? (
-                    <ImageSVG
-                        src={image}
-                        contentFit={contentFitImage}
-                        width={imageWidth}
-                        height={imageHeight}
-                    />
-                ) : (
-                    <Image
-                        source={image as ImageSourcePropType}
-                        resizeMode={contentFitImage as ImageResizeMode}
-                        style={styles.featureTrainingModalImage}
-                    />
-                )}
+                {!!image &&
+                    (shouldRenderSVG ? (
+                        <ImageSVG
+                            src={image}
+                            contentFit={contentFitImage}
+                            width={imageWidth}
+                            height={imageHeight}
+                            testID={CONST.IMAGE_SVG_TEST_ID}
+                        />
+                    ) : (
+                        <Image
+                            source={image as ImageSourcePropType}
+                            resizeMode={contentFitImage as ImageResizeMode}
+                            style={styles.featureTrainingModalImage}
+                            testID={CONST.IMAGE_TEST_ID}
+                        />
+                    ))}
                 {!!videoURL && videoStatus === 'video' && (
                     <GestureHandlerRootView>
                         <VideoPlayer

src/components/ImageSVG/types.ts

@@ -32,6 +32,9 @@ type ImageSVGProps = {
 
     /** The preserveAspectRatio attribute indicates how an element with a viewBox providing a given aspect ratio must fit into a viewport with a different aspect ratio. */
     preserveAspectRatio?: string;
+
+    /** TestID for test */
+    testID?: string;
 };
 
 export default ImageSVGProps;

src/components/Lottie/index.tsx

@@ -95,7 +95,12 @@ function Lottie({source, webStyle, shouldLoadAfterInteractions, ...props}: Props
     // 1. heavy rendering, see issues: https://github.com/Expensify/App/issues/34696 and https://github.com/Expensify/App/issues/47273
     // 2. lag on react navigation transitions, see issue: https://github.com/Expensify/App/issues/44812
     if (isError || appState.isBackground || !animationFile || splashScreenState !== CONST.BOOT_SPLASH_STATE.HIDDEN || (!isInteractionComplete && shouldLoadAfterInteractions)) {
-        return <View style={[aspectRatioStyle, props.style]} />;
+        return (
+            <View
+                style={[aspectRatioStyle, props.style]}
+                testID={CONST.LOTTIE_VIEW_TEST_ID}
+            />
+        );
     }
 
     return (
@@ -116,6 +121,7 @@ function Lottie({source, webStyle, shouldLoadAfterInteractions, ...props}: Props
             style={[aspectRatioStyle, props.style]}
             webStyle={{...aspectRatioStyle, ...webStyle}}
             onAnimationFailure={() => setIsError(true)}
+            testID={CONST.LOTTIE_VIEW_TEST_ID}
         />
     );
 }

src/components/VideoPlayer/BaseVideoPlayer.tsx

@@ -504,6 +504,7 @@ function BaseVideoPlayer({
                                             onError={() => {
                                                 setHasError(true);
                                             }}
+                                            testID={CONST.VIDEO_PLAYER_TEST_ID}
                                         />
                                     </View>
                                 )}

tests/ui/components/FeatureTrainingModalTest.tsx

@@ -0,0 +1,85 @@
+import {render, screen} from '@testing-library/react-native';
+import type {ViewProps} from 'react-native';
+import type ReactNative from 'react-native';
+import ReceiptDoc from '@assets/images/receipt-doc.png';
+import FeatureTrainingModal from '@components/FeatureTrainingModal';
+import * as Illustrations from '@components/Icon/Illustrations';
+import {FullScreenContextProvider} from '@components/VideoPlayerContexts/FullScreenContext';
+import {PlaybackContextProvider} from '@components/VideoPlayerContexts/PlaybackContext';
+import {VideoPopoverMenuContextProvider} from '@components/VideoPlayerContexts/VideoPopoverMenuContext';
+import {VolumeContextProvider} from '@components/VideoPlayerContexts/VolumeContext';
+import CONST from '@src/CONST';
+
+const CONFIRM_TEXT = 'Start';
+
+jest.mock('@libs/Navigation/Navigation', () => ({
+    isTopmostRouteModalScreen: jest.fn(),
+    isNavigationReady: jest.fn(() => Promise.resolve()),
+}));
+
+jest.mock('@libs/Fullstory');
+// eslint-disable-next-line @typescript-eslint/no-unsafe-return
+jest.mock('expo-av', () => {
+    const {View} = require<typeof ReactNative>('react-native');
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+    return {
+        ...jest.requireActual('expo-av'),
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        Video: (props: ViewProps) => <View {...props} />,
+    };
+});
+
+jest.mock('@components/ImageSVG', () => {
+    const {View} = require<typeof ReactNative>('react-native');
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return (props: ViewProps) => <View {...props} />;
+});
+
+describe('FeatureTrainingModal', () => {
+    describe('renderIllustration', () => {
+        it('renders video', () => {
+            render(
+                <PlaybackContextProvider>
+                    <FullScreenContextProvider>
+                        <VolumeContextProvider>
+                            <VideoPopoverMenuContextProvider>
+                                <FeatureTrainingModal
+                                    confirmText={CONFIRM_TEXT}
+                                    videoURL={CONST.WELCOME_VIDEO_URL}
+                                />
+                            </VideoPopoverMenuContextProvider>
+                        </VolumeContextProvider>
+                    </FullScreenContextProvider>
+                </PlaybackContextProvider>,
+            );
+
+            expect(screen.getByTestId(CONST.VIDEO_PLAYER_TEST_ID)).toBeOnTheScreen();
+        });
+        it('renders svg image', () => {
+            render(
+                <FeatureTrainingModal
+                    confirmText={CONFIRM_TEXT}
+                    image={Illustrations.HoldExpense}
+                />,
+            );
+
+            expect(screen.getByTestId(CONST.IMAGE_SVG_TEST_ID)).toBeOnTheScreen();
+        });
+        it('renders non-svg image', () => {
+            render(
+                <FeatureTrainingModal
+                    confirmText={CONFIRM_TEXT}
+                    image={ReceiptDoc}
+                    shouldRenderSVG={false}
+                />,
+            );
+
+            expect(screen.getByTestId(CONST.IMAGE_TEST_ID)).toBeOnTheScreen();
+        });
+        it('renders animation', () => {
+            render(<FeatureTrainingModal confirmText={CONFIRM_TEXT} />);
+
+            expect(screen.getByTestId(CONST.LOTTIE_VIEW_TEST_ID)).toBeOnTheScreen();
+        });
+    });
+});