test: Add new initial screen E2E tests (#2626)

Co-authored-by: Denis Nebytov <denis@emurgo.io>

apps/wallet-mobile/e2e/screens/initialScreen.screen.ts

@@ -0,0 +1,11 @@
+import {by, element} from 'detox'
+
+export const dropDownLanguagePicker = () => element(by.id('dropDownLanguagePicker'))
+export const checkboxSelect = () => element(by.id('checkboxSelect'))
+export const linkToS = () => element(by.id('linkToS'))
+export const linkPrivacyPolicy = () => element(by.id('linkPrivacyPolicy'))
+export const buttonContinue = () => element(by.id('buttonContinue'))
+export const buttonSelectLanguageEnglish = () => element(by.id('languageSelect_en-US'))
+export const buttonSelectLanguageItalian = () => element(by.id('languageSelect_it-IT'))
+export const buttonBack = () => element(by.id('buttonBack'))
+export const buttonBack2 = () => element(by.id('buttonBack2'))

apps/wallet-mobile/e2e/tests/_android/general-checks.test.ts

@@ -0,0 +1,53 @@
+import {device, expect} from 'detox'
+
+import * as initialScreen from '../../screens/initialScreen.screen'
+import * as analyticsScreen from '../../screens/shareUserInsights.screen'
+import * as utils from '../../utils'
+
+describe('General checks', () => {
+  beforeAll(async () => {
+    await device.launchApp({newInstance: true})
+  })
+
+  it('should be able to check if initial screen is loaded', async () => {
+    await expect(element(by.text('Select language'))).toBeVisible()
+  })
+
+  it('should be able to select/reselect a language of choice', async () => {
+    await expect(initialScreen.dropDownLanguagePicker()).toBeVisible()
+    await initialScreen.dropDownLanguagePicker().tap()
+    await initialScreen.buttonSelectLanguageItalian().tap()
+    await initialScreen.buttonSelectLanguageEnglish().tap()
+
+    await initialScreen.buttonBack().tap()
+  })
+
+  it('should be able to verify the Privacy Policy link', async () => {
+    await expect(initialScreen.linkPrivacyPolicy()).toBeVisible()
+    await initialScreen.linkPrivacyPolicy().tap()
+    await expect(element(by.text('3. Collection of Personal Data'))).toBeVisible()
+    await utils.takeScreenshot('Privacy Policy is displayed')
+    await initialScreen.buttonBack2().tap()
+  })
+
+  it('should be able to verify the ToS link', async () => {
+    await expect(initialScreen.linkToS()).toBeVisible()
+    await initialScreen.linkToS().tap()
+    await expect(element(by.text('1. Rights and Obligations'))).toBeVisible()
+    await utils.takeScreenshot('Terms of Service is displayed')
+    await initialScreen.buttonBack2().tap()
+  })
+
+  it('should be able to select checkbox and proceed', async () => {
+    await initialScreen.checkboxSelect().tap({x: 5, y: 10})
+    await initialScreen.buttonContinue().tap()
+    await utils.takeScreenshot('User consent screen for sharing insights')
+  })
+
+  it('should be able to skip consent for analytics and proceed', async () => {
+    await expect(analyticsScreen.txt_PageTitle()).toBeVisible()
+    await analyticsScreen.btn_Skip().tap()
+    await expect(element(by.text('Enter PIN'))).toBeVisible()
+    await utils.takeScreenshot('Enter PIN screen')
+  })
+})

apps/wallet-mobile/e2e/tests/_ios/general-checks.test.ts

@@ -0,0 +1,53 @@
+import {device, expect} from 'detox'
+
+import * as initialScreen from '../../screens/initialScreen.screen'
+import * as analyticsScreen from '../../screens/shareUserInsights.screen'
+import * as utils from '../../utils'
+
+describe('General checks', () => {
+  beforeAll(async () => {
+    await device.launchApp({newInstance: true})
+  })
+
+  it('should be able to check if initial screen is loaded', async () => {
+    await expect(element(by.text('Select language'))).toBeVisible()
+  })
+
+  it('should be able to select/reselect a language of choice', async () => {
+    await expect(initialScreen.dropDownLanguagePicker()).toBeVisible()
+    await initialScreen.dropDownLanguagePicker().tap()
+    await initialScreen.buttonSelectLanguageItalian().tap()
+    await initialScreen.buttonSelectLanguageEnglish().tap()
+
+    await initialScreen.buttonBack().tap()
+  })
+
+  it('should be able to verify the Privacy Policy link', async () => {
+    await expect(initialScreen.linkPrivacyPolicy()).toBeVisible()
+    await initialScreen.linkPrivacyPolicy().tap()
+    await expect(element(by.text('3. Collection of Personal Data'))).toBeVisible()
+    await utils.takeScreenshot('Privacy Policy is displayed')
+    await initialScreen.buttonBack2().tap()
+  })
+
+  it('should be able to verify the ToS link', async () => {
+    await expect(initialScreen.linkToS()).toBeVisible()
+    await initialScreen.linkToS().tap()
+    await expect(element(by.text('1. Rights and Obligations'))).toBeVisible()
+    await utils.takeScreenshot('Terms of Service is displayed')
+    await initialScreen.buttonBack2().tap()
+  })
+
+  it('should be able to select checkbox and proceed', async () => {
+    await initialScreen.checkboxSelect().tap({x: 5, y: 10})
+    await initialScreen.buttonContinue().tap()
+    await utils.takeScreenshot('User consent screen for sharing insights')
+  })
+
+  it('should be able to skip consent for analytics and proceed', async () => {
+    await expect(analyticsScreen.txt_PageTitle()).toBeVisible()
+    await analyticsScreen.btn_Skip().tap()
+    await expect(element(by.text('Enter PIN'))).toBeVisible()
+    await utils.takeScreenshot('Enter PIN screen')
+  })
+})

apps/wallet-mobile/e2e/utils.ts

@@ -4,9 +4,9 @@ import {addAttach, addMsg} from 'jest-html-reporters/helper'
 import yargs from 'yargs/yargs'
 
 import {mnemonicBadgeByWord, mnemonicByIndexText} from './screens/createWalletFlow.screen'
+import * as initialScreen from './screens/initialScreen.screen'
 import * as myWalletsScreen from './screens/myWallets.screen'
 import {pinKeyButton} from './screens/pinCode.screen'
-import * as prepareScreens from './screens/prepareApp.screen'
 import {mnemonicByIndexInput} from './screens/restoreWalletFlow.screen'
 import * as userInsightScreen from './screens/shareUserInsights.screen'
 
@@ -43,22 +43,18 @@ export const enterRecoveryPhrase = async (phraseArray: string[], platform: strin
 }
 
 export const prepareApp = async (pin: string): Promise<void> => {
-  await expect(element(by.text('Select Language'))).toBeVisible()
-  await expect(prepareScreens.btn_SelectLanguageEnglish()).toBeVisible()
-  await prepareScreens.btn_Next().tap()
+  await expect(element(by.text('Select language'))).toBeVisible()
+  await expect(initialScreen.dropDownLanguagePicker()).toBeVisible()
+  await takeScreenshot('Initial screen for first time user')
+  await initialScreen.checkboxSelect().tap({x: 5, y: 10})
+  await initialScreen.buttonContinue().tap()
 
-  await expect(prepareScreens.chkbox_AcceptTos()).toBeVisible()
-  await prepareScreens.chkbox_AcceptTos().tap()
-  await expect(prepareScreens.btn_Accept()).toBeVisible()
-  await prepareScreens.btn_Accept().tap()
+  await expect(userInsightScreen.txt_PageTitle()).toBeVisible()
+  await userInsightScreen.btn_Accept().tap()
 
   await expect(pinKeyButton('1')).toBeVisible()
   await enterPIN(pin)
   await enterPIN(pin)
-  await expect(userInsightScreen.txt_PageTitle()).toBeVisible()
-  await takeScreenshot('User consent screen for sharing insights')
-  await userInsightScreen.btn_Accept().tap()
-
   await expect(myWalletsScreen.pageTitle()).toBeVisible()
 }
 

apps/wallet-mobile/package.json

@@ -21,9 +21,10 @@
     "e2e:test:ios:yoroi:debug": "detox test $npm_package_e2ePath_ios --configuration ios.sim.yoroi.debug",
     "i18n:missed": "i18n-unused display-missed",
     "i18n:unused": "i18n-unused display-unused",
-    "lint": "yarn lint:typescript && prettylint \"src/**/*.tsx\" \"src/**/*.ts\" --config .prettierrc",
-    "lint:fix": "yarn lint:typescript --fix",
-    "lint:typescript": "eslint --max-warnings=0 ./src -c ./.eslintrc.js",
+    "lint": "yarn lint:typescript && yarn lint:pretty",
+    "lint:fix": "yarn lint:typescript --fix && yarn lint:pretty --fix",
+    "lint:pretty": "prettylint \"src/**/*.tsx\" \"src/**/*.ts\"  \"e2e/**/**.ts\" --config .prettierrc",
+    "lint:typescript": "eslint --max-warnings=0 ./src ./e2e -c ./.eslintrc.js",
     "manage-translations": "node ./translations/translation-runner.js",
     "metrics:pull": "ampli pull mobile",
     "metrics:status": "ampli status --instanceName=track",

apps/wallet-mobile/src/components/BlueCheckbox/BlueCheckbox.tsx

@@ -15,7 +15,7 @@ export type BlueCheckboxProps = {
 
 export const BlueCheckbox = ({checked, onPress, children, style, spacing = 15}: BlueCheckboxProps) => {
   return (
-    <TouchableOpacity style={[styles.checkboxRow, style]} onPress={onPress}>
+    <TouchableOpacity style={[styles.checkboxRow, style]} onPress={onPress} testID="checkboxSelect">
       {checked ? <CheckboxChecked /> : <CheckboxNotChecked />}
 
       <Spacer width={spacing} />

apps/wallet-mobile/src/features/Initialization/InitialScreen/InitialScreen.tsx

@@ -59,7 +59,7 @@ export const InitialScreen = () => {
         <View style={styles.checkboxRow}>
           <Text style={styles.checkboxText}>{`${strings.tosIAgreeWith} `}</Text>
 
-          <TouchableOpacity onPress={onTosLinkPress}>
+          <TouchableOpacity onPress={onTosLinkPress} testID="linkToS">
             <Text style={[styles.checkboxText, styles.checkboxLink]}>{strings.tosAgreement}</Text>
           </TouchableOpacity>
 
@@ -69,15 +69,21 @@ export const InitialScreen = () => {
 
           <Text style={styles.checkboxText}>{` `}</Text>
 
-          <TouchableOpacity onPress={onPrivacyLinkPress}>
+          <TouchableOpacity onPress={onPrivacyLinkPress} testID="linkPrivacyPolicy">
             <Text style={[styles.checkboxText, styles.checkboxLink]}>{strings.privacyPolicy}</Text>
           </TouchableOpacity>
         </View>
       </BlueCheckbox>
 
       <Spacer fill />
 
-      <Button title={strings.continue} shelleyTheme disabled={!tosAccepted} onPress={onPressContinue} />
+      <Button
+        title={strings.continue}
+        shelleyTheme
+        disabled={!tosAccepted}
+        onPress={onPressContinue}
+        testID="buttonContinue"
+      />
     </SafeAreaView>
   )
 }
@@ -87,7 +93,7 @@ const LanguagePickRow = ({onPress}: {onPress: () => void}) => {
   const language = supportedLanguages.find((lang) => lang.code === languageCode) ?? supportedLanguages['en-US']
 
   return (
-    <TouchableOpacity onPress={onPress}>
+    <TouchableOpacity onPress={onPress} testID="dropDownLanguagePicker">
       <TextInput style={styles.input} value={language.label} pointerEvents="none" editable={false} />
 
       <View style={styles.inputIcon}>

apps/wallet-mobile/src/navigation.tsx

@@ -29,7 +29,7 @@ export const useParams = <Params, >(guard: Guard<Params>): Params => {
 type Guard<Params> = (params: Params | object) => params is Params
 
 export const BackButton = (props) => (
-  <TouchableOpacity {...props}>
+  <TouchableOpacity {...props} testID="buttonBack2">
     <Icon.Chevron direction="left" color={props.color ?? '#000000'} />
   </TouchableOpacity>
 )