test(recovery): seed phrase recovery tests

e2e/01_new_user/03_recovery.spec.ts

@@ -0,0 +1,83 @@
+import { expect } from 'detox'
+import { readVisibleText } from 'e2e/utils';
+import jestExpect from 'expect'
+
+describe('Identity Recovery', () => {
+  beforeAll(async () => {
+    const recoverIdentity = element(by.id('recoverIdentity'))
+    await recoverIdentity.tap()
+  })
+
+  describe('Input Seed Phrase Screen', () => {
+    it('should show a recoveryMsg', async () => {
+      const recoveryMsg = element(by.id('recoveryMsg'))
+      await expect(recoveryMsg).toBeVisible()
+    })
+
+    it('should show a seedWordFld', async () => {
+      const seedWordFld = element(by.id('seedWordFld'))
+      await expect(seedWordFld).toBeVisible()
+      await seedWordFld.tap()
+    })
+
+    const seedPhraseWords = [
+      'school', 'leopard', 'pretty', 'shell',
+      'soup', 'paddle', 'spot', 'absurd',
+      'blame', 'morning', 'perfect', 'local',
+    ]
+
+    it('should show word suggestions based on input prefix', async () => {
+      const seedWordFld = element(by.id('seedWordFld'))
+
+      for (let w = 0; w < 4; w++) {
+        const word = seedPhraseWords[w]
+
+        // type a part of the word and expect suggestions
+        const wordPrefix = word.slice(0, word.length/2)
+        await seedWordFld.replaceText(wordPrefix)
+        for (let e = 0; e < 10; e++) {
+          let suggestion
+          try {
+            suggestion = await readVisibleText(`seedSuggestion${e}`)
+          } catch (err) {
+            // we don't know how many suggestions there are, so just break
+            // TODO figure out how to count with detox
+            break
+          }
+          jestExpect(suggestion.slice(0, wordPrefix.length)).toMatch(wordPrefix)
+        }
+      }
+    })
+
+    it('should add words to seed phrase on tap', async () => {
+      const seedWordFld = element(by.id('seedWordFld'))
+      const seedPhraseMsg = element(by.id('seedPhraseMsg'))
+      await expect(seedPhraseMsg).toBeVisible()
+
+      for (let w = 0; w < seedPhraseWords.length; w++) {
+        const word = seedPhraseWords[w]
+        // type the full word and expect to have it as the first suggestion
+        // TODO test that it is the only suggestion
+        await seedWordFld.replaceText(word)
+        const suggestionBtn = element(by.id('seedSuggestion0').withDescendant(by.text(word)))
+        await expect(suggestionBtn).toBeVisible()
+        await suggestionBtn.tap()
+
+        // expect the seedPhrase displayed to be updated
+        const curSeedPhrase = await readVisibleText('seedPhraseMsg')
+        const expectedSeedPhrase = seedPhraseWords.slice(0, w+1).join('')
+        jestExpect(curSeedPhrase).toEqual(expectedSeedPhrase)
+      }
+    })
+
+    it('should show a restoreAccount button', async () => {
+      const restoreAccount = element(by.id('restoreAccount'))
+      await expect(restoreAccount).toBeVisible()
+      await restoreAccount.tap()
+    })
+
+    it('should navigate home after a successful restore', async () => {
+      await waitFor(element(by.id('claimsScreen'))).toBeVisible().withTimeout(10000)
+    })
+  })
+})

src/ui/home/containers/claims.tsx

@@ -21,7 +21,7 @@ export class ClaimsContainer extends React.Component<Props> {
   public render(): JSX.Element {
     const { did, claimsState, openClaimDetails } = this.props
     return (
-      <View style={{ flex: 1 }}>
+      <View testID="claimsScreen" style={{ flex: 1 }}>
         <BackupWarning />
         <CredentialOverview
           did={did}

src/ui/recovery/components/inputSeedPhrase.tsx

@@ -144,9 +144,9 @@ const InputSeedPhraseComponent: React.FC<InputSeedPhraseProps> = ({
       ]}
     >
       <Text style={styles.header}>{headerText}</Text>
-      <View style={styles.mnemonicSection}>
+      <View testID="seedPhraseMsg" style={styles.mnemonicSection}>
         {mnemonic.length === 0 ? (
-          <Text style={styles.note}>
+          <Text testID="recoveryMsg" style={styles.note}>
             Start writing your seed-phrase and it will appears here word by word
           </Text>
         ) : (
@@ -175,6 +175,7 @@ const InputSeedPhraseComponent: React.FC<InputSeedPhraseProps> = ({
             {
               //@ts-ignore textAlign is missing in the typings of TextInput
               <TextInput
+                testID="seedWordFld"
                 textAlign={'center'}
                 ref={inputRef}
                 autoCapitalize={'none'}
@@ -220,10 +221,11 @@ const InputSeedPhraseComponent: React.FC<InputSeedPhraseProps> = ({
                 I18n.t(strings.CHOOSE_THE_RIGHT_WORD_OR_PRESS_ENTER)}
           </Text>
           <View style={styles.wordListWrapper}>
-            <View style={styles.wordListSection}>
+            <View testID="seedWordSuggestions" style={styles.wordListSection}>
               {inputValue.length > 1 &&
                 suggestions.map((word, i) => (
                   <Button
+                    testID={"seedSuggestion" + i}
                     key={i}
                     text={word}
                     onPress={() => selectWord(suggestions[i])}
@@ -251,6 +253,7 @@ const InputSeedPhraseComponent: React.FC<InputSeedPhraseProps> = ({
           <View style={styles.buttonSection}>
             {isMnemonicValid && (
               <Button
+                testID="restoreAccount"
                 disabled={!isMnemonicValid}
                 onPress={isMnemonicValid ? handleButtonPress : undefined}
                 raised