Recovery phrase onboarding (#15831)

* Add missing tests for recovery phrase input

src/quo2/components/inputs/recovery_phrase/component_spec.cljs

@@ -1,8 +1,59 @@
 (ns quo2.components.inputs.recovery-phrase.component-spec
-  (:require [quo2.components.inputs.recovery-phrase.view :as recovery-phrase]
+  (:require [clojure.string :as string]
+            [oops.core :as oops]
+            [quo2.components.inputs.recovery-phrase.view :as recovery-phrase]
             [test-helpers.component :as h]))
 
 (h/describe "Recovery phrase input"
   (h/test "Default render"
     (h/render [recovery-phrase/recovery-phrase-input {}])
-    (h/is-truthy (h/get-by-label-text :recovery-phrase-input))))
+    (h/is-truthy (h/get-by-label-text :recovery-phrase-input)))
+
+  (h/test "Renders specified text"
+    (let [text-expected "My custom text"]
+      (h/render [recovery-phrase/recovery-phrase-input {} text-expected])
+      (h/is-equal (oops/oget (h/get-by-label-text :recovery-phrase-input) "props" "children")
+                  text-expected)))
+
+  (h/test "Text changes and dispatches on-change-text"
+    (let [new-text       "New text"
+          on-change-mock (h/mock-fn)
+          get-new-text   #(-> % (oops/oget "props" "onChangeText" "mock" "calls") (aget 0 0))]
+      (h/render [recovery-phrase/recovery-phrase-input {:on-change-text on-change-mock}
+                 "Old text"])
+      (h/fire-event :change-text (h/get-by-label-text :recovery-phrase-input) new-text)
+      (h/is-equal (get-new-text (h/get-by-label-text :recovery-phrase-input)) new-text)
+      (h/was-called on-change-mock)))
+
+  (h/describe "Error text"
+    (h/test "Marked when words doesn't satisfy a predicate"
+      (h/render [recovery-phrase/recovery-phrase-input
+                 {:mark-errors? true
+                  :error-pred   #(>= (count %) 5)}
+                 "Text with some error words that don't satisfy the predicate"])
+      (let [children-text-nodes            (-> (h/get-by-label-text :recovery-phrase-input)
+                                               (oops/oget "props" "children" "props" "children")
+                                               (js->clj :keywordize-keys true))
+            {:keys [ok-words error-words]} (group-by #(if (string? %) :ok-words :error-words)
+                                                     children-text-nodes)]
+        (h/is-equal (apply str ok-words) "Text with some   that   the ")
+        (h/is-truthy (= (map #(-> % :props :argv second) error-words)
+                        ["error" "words" "don't" "satisfy" "predicate"]))))
+
+    (h/test "Marked when words exceed the limit given"
+      (h/render [recovery-phrase/recovery-phrase-input
+                 {:mark-errors? true
+                  :word-limit   4}
+                 "these are ok words, these words exceed the limit"])
+      (let [children-text-nodes            (-> (h/get-by-label-text :recovery-phrase-input)
+                                               (oops/oget "props" "children" "props" "children")
+                                               (js->clj :keywordize-keys true))
+            {:keys [ok-words error-words]} (group-by #(if (string? %) :ok-words :error-words)
+                                                     children-text-nodes)]
+        (h/is-equal (string/trim (apply str ok-words))
+                    "these are ok words,")
+        (h/is-equal (->> error-words
+                         (map #(-> % :props :argv second))
+                         (interpose " ")
+                         (apply str))
+                    "these words exceed the limit")))))

src/quo2/components/inputs/recovery_phrase/view.cljs

@@ -31,7 +31,8 @@
         set-default #(reset! state :default)]
     (fn [{:keys [customization-color override-theme blur? on-focus on-blur mark-errors?
                  error-pred word-limit]
-          :or   {customization-color :blue}
+          :or   {customization-color :blue
+                 error-pred          (constantly false)}
           :as   props}
          text]
       (let [extra-props (apply dissoc props custom-props)]

src/status_im2/contexts/onboarding/enter_seed_phrase/style.cljs

@@ -8,3 +8,7 @@
    :left             0
    :right            0
    :background-color colors/neutral-80-opa-80-blur})
+
+(def input-container
+  {:height            120
+   :margin-horizontal -20})

src/status_im2/contexts/onboarding/enter_seed_phrase/view.cljs

@@ -1,18 +1,17 @@
 (ns status-im2.contexts.onboarding.enter-seed-phrase.view
-  (:require [quo2.core :as quo]
+  (:require [clojure.string :as string]
-            [quo.core :as quo1]
+            [quo2.core :as quo]
-            [clojure.string :as string]
-            [status-im.ethereum.mnemonic :as mnemonic]
-            [status-im2.constants :as constants]
-            [utils.security.core :as security]
-            [utils.re-frame :as rf]
-            [reagent.core :as reagent]
             [react-native.core :as rn]
             [react-native.safe-area :as safe-area]
-            [status-im2.contexts.onboarding.enter-seed-phrase.style :as style]
+            [reagent.core :as reagent]
+            [status-im.ethereum.mnemonic :as mnemonic]
+            [status-im2.constants :as constants]
             [status-im2.contexts.onboarding.common.background.view :as background]
             [status-im2.contexts.onboarding.common.navigation-bar.view :as navigation-bar]
-            [utils.i18n :as i18n]))
+            [status-im2.contexts.onboarding.enter-seed-phrase.style :as style]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]
+            [utils.security.core :as security]))
 
 (def button-disabled?
   (comp not constants/seed-phrase-valid-length mnemonic/words-count))
@@ -40,20 +39,19 @@
          (i18n/label :t/use-recovery-phrase)]
         [quo/text
          (i18n/label-pluralize (mnemonic/words-count @seed-phrase) :t/words-n)]
-        [:<>
+        [rn/view {:style style/input-container}
-         [quo1/text-input
+         [quo/recovery-phrase-input
           {:on-change-text      (fn [t]
                                   (reset! seed-phrase (clean-seed-phrase t))
                                   (reset! error-message ""))
+           :mark-errors?        true
+           :error-pred          (constantly false)
+           :word-limit          24
            :auto-focus          true
            :accessibility-label :passphrase-input
            :placeholder         (i18n/label :t/seed-phrase-placeholder)
-           :show-cancel         false
+           :auto-correct        false}
-           :bottom-value        40
+          @seed-phrase]]
-           :multiline           true
-           :auto-correct        false
-           :keyboard-type       :visible-password
-           :monospace           true}]]
         [quo/button
          {:disabled (button-disabled? @seed-phrase)
           :on-press #(rf/dispatch [:onboarding-2/seed-phrase-entered

src/test_helpers/component.cljs

@@ -192,6 +192,10 @@
   [element]
   (.toBeNull (js/expect element)))
 
+(defn is-equal
+  [element-1 element-2]
+  (.toBe (js/expect element-1) element-2))
+
 (defn was-called
   [mock]
   (.toHaveBeenCalled (js/expect mock)))