chore: wip tests

.storybook/storybook.requires.js

@@ -69,7 +69,7 @@ const getStories = () => {
     "./app/screens/earns-screen/earns-sections.stories.tsx": require("../app/screens/earns-screen/earns-sections.stories.tsx"),
     "./app/screens/earns-screen/section-completed.stories.tsx": require("../app/screens/earns-screen/section-completed.stories.tsx"),
     "./app/screens/email-login-screen/email-login-flow.stories.tsx": require("../app/screens/email-login-screen/email-login-flow.stories.tsx"),
-    "./app/screens/email-login-screen/email-login-validation.stories.tsx": require("../app/screens/email-login-screen/email-login-validation.stories.tsx"),
+    "./app/screens/email-login-screen/email-login-validate.stories.tsx": require("../app/screens/email-login-screen/email-login-validate.stories.tsx"),
     "./app/screens/email-registration-screen/email-registration-initiate.stories.tsx": require("../app/screens/email-registration-screen/email-registration-initiate.stories.tsx"),
     "./app/screens/email-registration-screen/email-registration-validate.stories.tsx": require("../app/screens/email-registration-screen/email-registration-validate.stories.tsx"),
     "./app/screens/error-screen/error-screen.stories.tsx": require("../app/screens/error-screen/error-screen.stories.tsx"),

app/i18n/en/index.ts

@@ -429,7 +429,7 @@ const en: BaseTranslation = {
     logInCreateAccount: "Log in / create account",
     createAccount: "Create new account",
     exploreWallet: "Explore wallet",
-    loginBackInWith: "Login back in with",
+    logBackInWith: "Log back in with",
     headline: "Wallet powered by Galoy",
     startTrialAccount: "Start with a trial account",
     iUnderstand: "I understand, continue",
@@ -796,13 +796,13 @@ const en: BaseTranslation = {
     header: "To confirm your email address, enter the code we just sent you on {email: string}",
     success: "Email {email: string} confirmed successfully",
   },
-  EmailLoginInputScreen: {
+  EmailLoginInitiateScreen: {
     title: "Login via email",
     header: "Enter your email address, and we'll send you an access code.",
     invalidEmail: "Invalid email address. Are you sure you entered the right email?",
     send: "Send code",
   },
-  EmailLoginValidationScreen: {
+  EmailLoginValidateScreen: {
     title: "Code confirmation",
     header: "If there is an account attached to {email: string}, you should have received 6 digits code to enter below.\n\nIf you are not receiving anything, it's probably either because this is not the right email, the email is in your spam folder.",
     success: "Email {email: string} confirmed successfully",

app/i18n/i18n-types.ts

@@ -1399,7 +1399,7 @@ type RootTranslation = {
 		/**
 		 * L​o​g​i​n​ ​b​a​c​k​ ​i​n​ ​w​i​t​h
 		 */
-		loginBackInWith: string
+		logBackInWith: string
 		/**
 		 * W​a​l​l​e​t​ ​p​o​w​e​r​e​d​ ​b​y​ ​G​a​l​o​y
 		 */
@@ -2684,7 +2684,7 @@ type RootTranslation = {
 		 */
 		success: RequiredParams<'email'>
 	}
-	EmailLoginInputScreen: {
+	EmailLoginInitiateScreen: {
 		/**
 		 * L​o​g​i​n​ ​v​i​a​ ​e​m​a​i​l
 		 */
@@ -2702,7 +2702,7 @@ type RootTranslation = {
 		 */
 		send: string
 	}
-	EmailLoginValidationScreen: {
+	EmailLoginValidateScreen: {
 		/**
 		 * C​o​d​e​ ​c​o​n​f​i​r​m​a​t​i​o​n
 		 */
@@ -4663,7 +4663,7 @@ export type TranslationFunctions = {
 		/**
 		 * Login back in with
 		 */
-		loginBackInWith: () => LocalizedString
+		logBackInWith: () => LocalizedString
 		/**
 		 * Wallet powered by Galoy
 		 */
@@ -5901,7 +5901,7 @@ export type TranslationFunctions = {
 		 */
 		success: (arg: { email: string }) => LocalizedString
 	}
-	EmailLoginInputScreen: {
+	EmailLoginInitiateScreen: {
 		/**
 		 * Login via email
 		 */
@@ -5919,7 +5919,7 @@ export type TranslationFunctions = {
 		 */
 		send: () => LocalizedString
 	}
-	EmailLoginValidationScreen: {
+	EmailLoginValidateScreen: {
 		/**
 		 * Code confirmation
 		 */

app/navigation/root-navigator.tsx

@@ -62,8 +62,8 @@ import {
   EmailRegistrationValidateScreen,
 } from "@app/screens/email-registration-screen"
 import {
-  EmailLoginInputScreen,
-  EmailLoginValidationScreen,
+  EmailLoginInitiateScreen,
+  EmailLoginValidateScreen,
 } from "@app/screens/email-login-screen"
 
 const useStyles = makeStyles(({ colors }) => ({
@@ -337,19 +337,19 @@ export const RootStack = () => {
         }}
       />
       <RootNavigator.Screen
-        name="emailLoginInput"
-        component={EmailLoginInputScreen}
+        name="emailLoginInitiate"
+        component={EmailLoginInitiateScreen}
         options={{
           headerShown: true,
-          title: LL.EmailRegistrationInitiateScreen.title(),
+          title: LL.EmailLoginValidateScreen.title(),
         }}
       />
       <RootNavigator.Screen
-        name="emailLoginValidation"
-        component={EmailLoginValidationScreen}
+        name="emailLoginValidate"
+        component={EmailLoginValidateScreen}
         options={{
           headerShown: true,
-          title: LL.EmailRegistrationInitiateScreen.title(),
+          title: LL.EmailLoginValidateScreen.title(),
         }}
       />
     </RootNavigator.Navigator>

app/navigation/stack-param-lists.ts

@@ -79,8 +79,8 @@ export type RootStackParamList = {
   transactionLimitsScreen: undefined
   emailRegistrationInitiate: undefined
   emailRegistrationValidate: { email: string; emailRegistrationId: string }
-  emailLoginInput: undefined
-  emailLoginValidation: { email: string; emailLoginId: string }
+  emailLoginInitiate: undefined
+  emailLoginValidate: { email: string; emailLoginId: string }
 }
 
 export type ContactStackParamList = {

app/screens/email-login-screen/email-login-flow.stories.tsx

@@ -7,7 +7,7 @@ import {
   CaptchaRequestAuthCodeDocument,
   UserEmailRegistrationInitiateDocument,
 } from "../../graphql/generated"
-import { EmailLoginInputScreen } from "./email-login-input"
+import { EmailLoginInitiateScreen } from "./email-login-initiate"
 
 const mocks = [
   {
@@ -79,7 +79,7 @@ const mocks = [
 
 export default {
   title: "EmailLoginFlow",
-  component: EmailLoginInputScreen,
+  component: EmailLoginInitiateScreen,
   decorators: [
     (Story) => (
       <MockedProvider mocks={mocks} cache={createCache()}>
@@ -89,4 +89,4 @@ export default {
   ],
 }
 
-export const Default = () => <EmailLoginInputScreen />
+export const Default = () => <EmailLoginInitiateScreen />

app/screens/email-login-screen/email-login-input.tsx → app/screens/email-login-screen/email-login-initiate.tsx

@@ -11,8 +11,8 @@ import { View } from "react-native"
 import validator from "validator"
 import { Screen } from "../../components/screen"
 import { useAppConfig } from "@app/hooks"
+import { testProps } from "@app/utils/testProps"
 
-const PLACEHOLDER_EMAIL = "[email protected]"
 const useStyles = makeStyles(({ colors }) => ({
   screenStyle: {
     padding: 20,
@@ -47,7 +47,7 @@ const useStyles = makeStyles(({ colors }) => ({
   },
 }))
 
-export const EmailLoginInputScreen: React.FC = () => {
+export const EmailLoginInitiateScreen: React.FC = () => {
   const styles = useStyles()
   const {
     appConfig: {
@@ -58,7 +58,7 @@ export const EmailLoginInputScreen: React.FC = () => {
   const urlEmailCodeRequest = `${authUrl}/auth/email/code`
 
   const navigation =
-    useNavigation<StackNavigationProp<RootStackParamList, "emailRegistrationInitiate">>()
+    useNavigation<StackNavigationProp<RootStackParamList, "emailLoginInitiate">>()
 
   const [emailInput, setEmailInput] = React.useState<string>("")
   const [errorMessage, setErrorMessage] = React.useState<string>("")
@@ -73,7 +73,7 @@ export const EmailLoginInputScreen: React.FC = () => {
 
   const submit = async () => {
     if (!validator.isEmail(emailInput)) {
-      setErrorMessage(LL.EmailLoginInputScreen.invalidEmail())
+      setErrorMessage(LL.EmailLoginInitiateScreen.invalidEmail())
       return
     }
 
@@ -92,7 +92,8 @@ export const EmailLoginInputScreen: React.FC = () => {
       const emailLoginId = res.data.result
 
       if (emailLoginId) {
-        navigation.navigate("emailLoginValidation", { emailLoginId, email: emailInput })
+        console.log({ emailLoginId })
+        navigation.navigate("emailLoginValidate", { emailLoginId, email: emailInput })
       } else {
         console.warn("no flow returned")
       }
@@ -124,13 +125,14 @@ export const EmailLoginInputScreen: React.FC = () => {
     >
       <View style={styles.viewWrapper}>
         <View style={styles.textContainer}>
-          <Text type={"p1"}>{LL.EmailLoginInputScreen.header()}</Text>
+          <Text type={"p1"}>{LL.EmailLoginInitiateScreen.header()}</Text>
         </View>
 
         <View style={styles.inputContainer}>
           <Input
+            {...testProps(LL.EmailRegistrationInitiateScreen.placeholder())}
+            placeholder={LL.EmailRegistrationInitiateScreen.placeholder()}
             autoCapitalize="none"
-            placeholder={PLACEHOLDER_EMAIL}
             inputContainerStyle={styles.inputContainerStyle}
             renderErrorMessage={false}
             textContentType="emailAddress"
@@ -148,7 +150,7 @@ export const EmailLoginInputScreen: React.FC = () => {
 
         <View style={styles.buttonsContainer}>
           <GaloyPrimaryButton
-            title={LL.EmailLoginInputScreen.send()}
+            title={LL.EmailLoginInitiateScreen.send()}
             loading={loading}
             disabled={!emailInput}
             onPress={submit}

app/screens/email-login-screen/email-login-validation.stories.tsx → app/screens/email-login-screen/email-login-validate.stories.tsx

@@ -3,29 +3,29 @@ import { Meta } from "@storybook/react"
 import { MockedProvider } from "@apollo/client/testing"
 import { createCache } from "../../graphql/cache"
 import { StoryScreen } from "../../../.storybook/views"
-import { EmailLoginValidationScreen } from "./email-login-validation"
+import { EmailLoginValidateScreen } from "./email-login-validate"
 
 const mocks = []
 
 const route = {
-  key: "EmailLoginValidationScreen",
-  name: "emailLoginValidation",
+  key: "EmailLoginValidateScreen",
+  name: "emailLoginValidate",
   params: {
     phone: "+50365055543",
     channel: "SMS",
   },
 } as const
 
 export default {
-  title: "EmailLoginValidationScreen",
-  component: EmailLoginValidationScreen,
+  title: "EmailLoginValidateScreen",
+  component: EmailLoginValidateScreen,
   decorators: [
     (Story) => (
       <MockedProvider mocks={mocks} cache={createCache()}>
         <StoryScreen>{Story()}</StoryScreen>
       </MockedProvider>
     ),
   ],
-} as Meta<typeof EmailLoginValidationScreen>
+} as Meta<typeof EmailLoginValidateScreen>
 
-export const Main = () => <EmailLoginValidationScreen route={route} />
+export const Main = () => <EmailLoginValidateScreen route={route} />

app/screens/email-login-screen/email-login-validation.tsx → app/screens/email-login-screen/email-login-validate.tsx

@@ -11,6 +11,7 @@ import { useCallback, useState } from "react"
 import { ActivityIndicator, View } from "react-native"
 import { Screen } from "../../components/screen"
 import analytics from "@react-native-firebase/analytics"
+import { testProps } from "@app/utils/testProps"
 
 const useStyles = makeStyles(({ colors }) => ({
   screenStyle: {
@@ -50,17 +51,19 @@ const useStyles = makeStyles(({ colors }) => ({
   },
 }))
 
-type EmailLoginValidationScreenProps = {
-  route: RouteProp<RootStackParamList, "emailLoginValidation">
+type EmailLoginValidateScreenProps = {
+  route: RouteProp<RootStackParamList, "emailLoginValidate">
 }
 
-export const EmailLoginValidationScreen: React.FC<EmailLoginValidationScreenProps> = ({
+const placeholder = "000000"
+
+export const EmailLoginValidateScreen: React.FC<EmailLoginValidateScreenProps> = ({
   route,
 }) => {
   const styles = useStyles()
   const { colors } = useTheme()
   const navigation =
-    useNavigation<StackNavigationProp<RootStackParamList, "emailLoginValidation">>()
+    useNavigation<StackNavigationProp<RootStackParamList, "emailLoginValidate">>()
 
   const [errorMessage, setErrorMessage] = React.useState<string>("")
 
@@ -147,11 +150,12 @@ export const EmailLoginValidationScreen: React.FC<EmailLoginValidationScreenProp
     >
       <View style={styles.viewWrapper}>
         <View style={styles.textContainer}>
-          <Text type="h2">{LL.EmailLoginValidationScreen.header({ email })}</Text>
+          <Text type="h2">{LL.EmailLoginValidateScreen.header({ email })}</Text>
         </View>
 
         <Input
-          placeholder="000000"
+          {...testProps(placeholder)}
+          placeholder={placeholder}
           containerStyle={styles.inputComponentContainerStyle}
           inputContainerStyle={styles.inputContainerStyle}
           inputStyle={styles.inputStyle}

app/screens/email-login-screen/index.ts

@@ -1,2 +1,2 @@
-export * from "./email-login-input"
-export * from "./email-login-validation"
+export * from "./email-login-initiate"
+export * from "./email-login-validate"

app/screens/get-started-screen/get-started-screen.tsx

@@ -14,6 +14,7 @@ import { GaloySecondaryButton } from "@app/components/atomic/galoy-secondary-but
 import { DeviceAccountModal } from "./device-account-modal"
 import { logGetStartedAction } from "@app/utils/analytics"
 import { useNavigation } from "@react-navigation/native"
+import { testProps } from "@app/utils/testProps"
 
 export const GetStartedScreen: React.FC = () => {
   const navigation =
@@ -76,7 +77,7 @@ export const GetStartedScreen: React.FC = () => {
       createDeviceAccountEnabled: Boolean(appCheckToken),
     })
 
-    navigation.navigate("emailLoginInput")
+    navigation.navigate("emailLoginInitiate")
   }
 
   return (
@@ -110,14 +111,18 @@ export const GetStartedScreen: React.FC = () => {
           />
         )}
         <View style={styles.loginFooterContainer}>
-          <Text type="p2">{LL.GetStartedScreen.loginBackInWith()} </Text>
+          <Text type="p2">{LL.GetStartedScreen.logBackInWith()} </Text>
           <TouchableOpacity activeOpacity={0.5} onPress={handleCreateAccount}>
             <Text type="p2" style={styles.buttonText}>
               {LL.common.phone()}
             </Text>
           </TouchableOpacity>
           <Text type="p2"> {LL.common.or()} </Text>
-          <TouchableOpacity activeOpacity={0.5} onPress={handleLoginWithEmail}>
+          <TouchableOpacity
+            activeOpacity={0.5}
+            onPress={handleLoginWithEmail}
+            {...testProps("email-button")}
+          >
             <Text type="p2" style={styles.buttonText}>
               {LL.common.email()}
             </Text>