From ee4bcf91169a7e3b5f3d7f39357611d557f02b87 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ulises=20Manuel=20C=C3=A1rdenas?= <90291778+ulisesmac@users.noreply.github.com> Date: Tue, 9 May 2023 21:55:09 -0600 Subject: [PATCH] Recovery phrase onboarding (#15831) * Add missing tests for recovery phrase input --- .../recovery_phrase/component_spec.cljs | 55 ++++++++++++++++++- .../inputs/recovery_phrase/view.cljs | 3 +- .../onboarding/enter_seed_phrase/style.cljs | 4 ++ .../onboarding/enter_seed_phrase/view.cljs | 34 ++++++------ src/test_helpers/component.cljs | 4 ++ 5 files changed, 79 insertions(+), 21 deletions(-) diff --git a/src/quo2/components/inputs/recovery_phrase/component_spec.cljs b/src/quo2/components/inputs/recovery_phrase/component_spec.cljs index 15de0749fd..7c8e07fad8 100644 --- a/src/quo2/components/inputs/recovery_phrase/component_spec.cljs +++ b/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"))))) diff --git a/src/quo2/components/inputs/recovery_phrase/view.cljs b/src/quo2/components/inputs/recovery_phrase/view.cljs index b7c725de89..4ab02fc637 100644 --- a/src/quo2/components/inputs/recovery_phrase/view.cljs +++ b/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)] diff --git a/src/status_im2/contexts/onboarding/enter_seed_phrase/style.cljs b/src/status_im2/contexts/onboarding/enter_seed_phrase/style.cljs index 57db8d7ed9..bb8cf099aa 100644 --- a/src/status_im2/contexts/onboarding/enter_seed_phrase/style.cljs +++ b/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}) diff --git a/src/status_im2/contexts/onboarding/enter_seed_phrase/view.cljs b/src/status_im2/contexts/onboarding/enter_seed_phrase/view.cljs index a03fed0628..34f45238f7 100644 --- a/src/status_im2/contexts/onboarding/enter_seed_phrase/view.cljs +++ b/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] - [quo.core :as quo1] - [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] + (:require [clojure.string :as string] + [quo2.core :as quo] [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)] - [:<> - [quo1/text-input + [rn/view {:style style/input-container} + [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 - :bottom-value 40 - :multiline true - :auto-correct false - :keyboard-type :visible-password - :monospace true}]] + :auto-correct false} + @seed-phrase]] [quo/button {:disabled (button-disabled? @seed-phrase) :on-press #(rf/dispatch [:onboarding-2/seed-phrase-entered diff --git a/src/test_helpers/component.cljs b/src/test_helpers/component.cljs index e7b777dc82..ffde6ca5d6 100644 --- a/src/test_helpers/component.cljs +++ b/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)))