From f522bbae68750c582ba01142c2e6dcf5b6fd79d9 Mon Sep 17 00:00:00 2001
From: Utku <74243531+utkubakir@users.noreply.github.com>
Date: Sat, 9 Mar 2024 01:56:24 -0500
Subject: [PATCH] Add mobile tests back (#2183)

* add tests back

* fix tests
---
 .../src/components/browse/BrowseTags.tsx      |  9 ++-
 apps/mobile/src/components/layout/Modal.tsx   |  8 ++-
 .../components/modal/tag/CreateTagModal.tsx   |  2 +-
 .../src/components/overview/OverviewStats.tsx |  1 -
 apps/mobile/src/screens/Tags.tsx              |  1 +
 .../src/screens/onboarding/GetStarted.tsx     | 57 +++++++++++--------
 apps/mobile/tests/add-tag.yml                 | 11 ++++
 apps/mobile/tests/onboarding.yml              | 10 ++++
 8 files changed, 69 insertions(+), 30 deletions(-)

diff --git a/apps/mobile/src/components/browse/BrowseTags.tsx b/apps/mobile/src/components/browse/BrowseTags.tsx
index 0a33378ec..2a79a5777 100644
--- a/apps/mobile/src/components/browse/BrowseTags.tsx
+++ b/apps/mobile/src/components/browse/BrowseTags.tsx
@@ -27,6 +27,7 @@ type TagItemProps = {
 export const TagItem = ({ tag, onPress, tagStyle, viewStyle = 'grid' }: TagItemProps) => {
 	const modalRef = useRef<ModalRef>(null);
 
+	// NOTE: Might wanna move this function to a separate file/component
 	const renderTagView = () => (
 		<View
 			style={twStyle(
@@ -55,6 +56,7 @@ export const TagItem = ({ tag, onPress, tagStyle, viewStyle = 'grid' }: TagItemP
 		</View>
 	);
 
+	// NOTE: Might wanna move this function to a separate file/component
 	const renderRightActions = (
 		progress: Animated.AnimatedInterpolation<number>,
 		_dragX: Animated.AnimatedInterpolation<number>,
@@ -143,7 +145,10 @@ const BrowseTags = () => {
 			<View style={tw`w-full flex-row items-center justify-between px-6`}>
 				<Text style={tw`text-lg font-bold text-white`}>Tags</Text>
 				<View style={tw`flex-row gap-3`}>
-					<Pressable onPress={() => navigation.navigate('Tags')}>
+					<Pressable
+						testID="navigate-tags-screen"
+						onPress={() => navigation.navigate('Tags')}
+					>
 						<View
 							style={tw`h-8 w-8 items-center justify-center rounded-md bg-accent ${
 								tags.data?.nodes.length === 0 ? 'opacity-40' : 'opacity-100'
@@ -152,7 +157,7 @@ const BrowseTags = () => {
 							<Eye weight="bold" size={18} style={tw`text-white`} />
 						</View>
 					</Pressable>
-					<Pressable testID="add-tag" onPress={() => modalRef.current?.present()}>
+					<Pressable onPress={() => modalRef.current?.present()}>
 						<View
 							style={tw`h-8 w-8 items-center justify-center rounded-md border border-dashed border-ink-faint bg-transparent`}
 						>
diff --git a/apps/mobile/src/components/layout/Modal.tsx b/apps/mobile/src/components/layout/Modal.tsx
index de20b1bf6..8625318ce 100644
--- a/apps/mobile/src/components/layout/Modal.tsx
+++ b/apps/mobile/src/components/layout/Modal.tsx
@@ -10,7 +10,7 @@ import {
 } from '@gorhom/bottom-sheet';
 import { X } from 'phosphor-react-native';
 import { forwardRef, ReactNode } from 'react';
-import { Pressable, Text, View } from 'react-native';
+import { Platform, Pressable, Text, View } from 'react-native';
 import useForwardedRef from '~/hooks/useForwardedRef';
 import { tw, twStyle } from '~/lib/tailwind';
 
@@ -62,6 +62,12 @@ export const Modal = forwardRef<ModalRef, ModalProps>((props, ref) => {
 			backgroundStyle={tw`bg-app`}
 			backdropComponent={ModalBackdrop}
 			handleComponent={(props) => ModalHandle({ modalRef, showCloseButton, ...props })}
+			// Overriding the default value for iOS to fix Maestro issue.
+			// https://github.com/mobile-dev-inc/maestro/issues/1493
+			accessible={Platform.select({
+				// setting it to false on Android seems to cause issues with TalkBack instead
+				ios: false
+			})}
 			{...otherProps}
 		>
 			{title && <Text style={tw`text-center text-base font-medium text-ink`}>{title}</Text>}
diff --git a/apps/mobile/src/components/modal/tag/CreateTagModal.tsx b/apps/mobile/src/components/modal/tag/CreateTagModal.tsx
index 20ef11bfb..4db6aed9d 100644
--- a/apps/mobile/src/components/modal/tag/CreateTagModal.tsx
+++ b/apps/mobile/src/components/modal/tag/CreateTagModal.tsx
@@ -77,7 +77,7 @@ const CreateTagModal = forwardRef<ModalRef, unknown>((_, ref) => {
 						style={twStyle({ backgroundColor: tagColor }, 'h-6 w-6 rounded-full')}
 					/>
 					<ModalInput
-						testID="create-tag-name"
+						autoFocus
 						style={tw`ml-2 flex-1`}
 						value={tagName}
 						onChangeText={(text) => setTagName(text)}
diff --git a/apps/mobile/src/components/overview/OverviewStats.tsx b/apps/mobile/src/components/overview/OverviewStats.tsx
index f5a9266bb..9fbd80443 100644
--- a/apps/mobile/src/components/overview/OverviewStats.tsx
+++ b/apps/mobile/src/components/overview/OverviewStats.tsx
@@ -73,7 +73,6 @@ const OverviewStats = ({ stats }: Props) => {
 			return await RNFS.getFSInfo();
 		};
 		getFSInfo().then((size) => {
-			console.log('size', size);
 			setSizeInfo(size);
 		});
 	}, []);
diff --git a/apps/mobile/src/screens/Tags.tsx b/apps/mobile/src/screens/Tags.tsx
index 58f6c96a0..a25c030d0 100644
--- a/apps/mobile/src/screens/Tags.tsx
+++ b/apps/mobile/src/screens/Tags.tsx
@@ -28,6 +28,7 @@ export default function Tags({ viewStyle = 'list' }: Props) {
 		<ScreenContainer scrollview={false} style={tw`relative px-6 py-0`}>
 			<Pressable
 				style={tw`absolute bottom-7 right-7 z-10 flex h-12 w-12 items-center justify-center rounded-full bg-accent`}
+				testID="create-tag-modal"
 				onPress={() => {
 					modalRef.current?.present();
 				}}
diff --git a/apps/mobile/src/screens/onboarding/GetStarted.tsx b/apps/mobile/src/screens/onboarding/GetStarted.tsx
index a5cc1cb9d..bb8083196 100644
--- a/apps/mobile/src/screens/onboarding/GetStarted.tsx
+++ b/apps/mobile/src/screens/onboarding/GetStarted.tsx
@@ -21,7 +21,7 @@ export function OnboardingContainer({ children }: React.PropsWithChildren) {
 	const store = useOnboardingStore();
 	return (
 		<View style={tw`relative flex-1`}>
-			{store.showIntro && (
+			{store.showIntro ? (
 				<View
 					style={twStyle(
 						'absolute z-50 mx-auto h-full w-full flex-1 items-center justify-center bg-black'
@@ -40,31 +40,37 @@ export function OnboardingContainer({ children }: React.PropsWithChildren) {
 						resizeMode={ResizeMode.CONTAIN}
 					/>
 				</View>
+			) : (
+				<>
+					{route.name !== 'GetStarted' && route.name !== 'CreatingLibrary' && (
+						<Pressable
+							style={twStyle('absolute left-6 z-50', { top: top + 16 })}
+							onPress={() => navigation.goBack()}
+						>
+							<CaretLeft size={24} weight="bold" color="white" />
+						</Pressable>
+					)}
+					<View style={tw`z-10 flex-1 items-center justify-center`}>
+						<KeyboardAvoidingView
+							behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+							keyboardVerticalOffset={bottom}
+							style={tw`w-full flex-1 items-center justify-center`}
+						>
+							<MotiView style={tw`w-full items-center justify-center px-4`}>
+								{children}
+							</MotiView>
+						</KeyboardAvoidingView>
+						<Text style={tw`absolute bottom-8 text-xs text-ink-dull/50`}>
+							&copy; {new Date().getFullYear()} Spacedrive Technology Inc.
+						</Text>
+					</View>
+					{/* Bloom */}
+					<Image
+						source={BloomOne}
+						style={tw`top-100 absolute h-screen w-screen opacity-20`}
+					/>
+				</>
 			)}
-			{route.name !== 'GetStarted' && route.name !== 'CreatingLibrary' && (
-				<Pressable
-					style={twStyle('absolute left-6 z-50', { top: top + 16 })}
-					onPress={() => navigation.goBack()}
-				>
-					<CaretLeft size={24} weight="bold" color="white" />
-				</Pressable>
-			)}
-			<View style={tw`z-10 flex-1 items-center justify-center`}>
-				<KeyboardAvoidingView
-					behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-					keyboardVerticalOffset={bottom}
-					style={tw`w-full flex-1 items-center justify-center`}
-				>
-					<MotiView style={tw`w-full items-center justify-center px-4`}>
-						{children}
-					</MotiView>
-				</KeyboardAvoidingView>
-				<Text style={tw`absolute bottom-8 text-xs text-ink-dull/50`}>
-					&copy; {new Date().getFullYear()} Spacedrive Technology Inc.
-				</Text>
-			</View>
-			{/* Bloom */}
-			<Image source={BloomOne} style={tw`top-100 absolute h-screen w-screen opacity-20`} />
 		</View>
 	);
 }
@@ -84,6 +90,7 @@ const GetStartedScreen = ({ navigation }: OnboardingStackScreenProps<'GetStarted
 	const store = useOnboardingStore();
 	useEffect(() => {
 		store.showIntro = true;
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 	return (
 		<OnboardingContainer>
diff --git a/apps/mobile/tests/add-tag.yml b/apps/mobile/tests/add-tag.yml
index 0e7edfcfc..893545b0e 100644
--- a/apps/mobile/tests/add-tag.yml
+++ b/apps/mobile/tests/add-tag.yml
@@ -1,3 +1,14 @@
 appId: com.spacedrive.app
 ---
 - launchApp
+- tapOn:
+    id: 'browse-tab'
+- waitForAnimationToEnd
+- tapOn:
+    id: 'navigate-tags-screen'
+- tapOn:
+    id: 'create-tag-modal'
+- inputText: 'MyTag'
+- tapOn:
+    text: 'Create'
+- assertVisible: 'MyTag'
diff --git a/apps/mobile/tests/onboarding.yml b/apps/mobile/tests/onboarding.yml
index 13cb1c191..b2f2be856 100644
--- a/apps/mobile/tests/onboarding.yml
+++ b/apps/mobile/tests/onboarding.yml
@@ -2,4 +2,14 @@ appId: com.spacedrive.app
 ---
 - launchApp:
     clearState: true
+# Wait onboarding screen
+- waitForAnimationToEnd:
+    timeout: 5000
 - tapOn: 'Get Started'
+- tapOn:
+    id: 'library-name'
+- inputText: 'TestLib'
+- tapOn: 'New Library'
+- tapOn:
+    id: 'share-minimal'
+- tapOn: 'Continue'