Wallet - Add malli spec to Quo Wallet components (batch 1) #18354 (#1…

…8707)

* draft

* add account_card

* add account-origin

* add account_overview

* add account_permission

* add address_text

* add confirmation_progress

* wrapping up

* resolve comments and fix ci issues

* fix ci issues

* fix transaction_progress tests

* fix all tests

* fix lint issues

src/quo/components/drawers/drawer_top/component_spec.cljs

@@ -3,97 +3,110 @@
     [quo.core :as quo]
     [test-helpers.component :as h]))
 
+(def ^:private theme :light)
+
 (h/describe "drawer top tests"
   (h/test "component renders in default type"
-    (h/render [quo/drawer-top
-               {:title "Title"
-                :type  :default}])
+    (h/render-with-theme-provider [quo/drawer-top
+                                   {:title "Title"
+                                    :type  :default}]
+                                  theme)
     (h/is-truthy (h/get-by-text "Title")))
 
   (h/test "component renders in default + description type"
-    (h/render [quo/drawer-top
-               {:title       "Title"
-                :type        :default
-                :description "Description"}])
+    (h/render-with-theme-provider [quo/drawer-top
+                                   {:title       "Title"
+                                    :type        :default
+                                    :description "Description"}]
+                                  theme)
     (h/is-truthy (h/get-by-text "Title"))
     (h/is-truthy (h/get-by-text "Description")))
 
   (h/test "component renders in info type"
-    (h/render [quo/drawer-top
-               {:title "Title"
-                :type  :info}])
+    (h/render-with-theme-provider [quo/drawer-top
+                                   {:title "Title"
+                                    :type  :info}]
+                                  theme)
     (h/is-truthy (h/get-by-text "Title"))
     (h/is-truthy (h/get-by-label-text :info-icon)))
 
   (h/test "component renders in info + description type"
-    (h/render [quo/drawer-top
-               {:title       "Title"
-                :description "Description"
-                :type        :info}])
+    (h/render-with-theme-provider [quo/drawer-top
+                                   {:title       "Title"
+                                    :description "Description"
+                                    :type        :info}]
+                                  theme)
     (h/is-truthy (h/get-by-text "Title"))
     (h/is-truthy (h/get-by-text "Description"))
     (h/is-truthy (h/get-by-label-text :info-icon)))
 
   (h/test "component renders in context-tag type"
-    (h/render [quo/drawer-top
-               {:title          "Title"
-                :type           :context-tag
-                :community-name "Coinbase"}])
+    (h/render-with-theme-provider [quo/drawer-top
+                                   {:title          "Title"
+                                    :type           :context-tag
+                                    :community-name "Coinbase"}]
+                                  theme)
     (h/is-truthy (h/get-by-text "Title"))
     (h/is-truthy (h/get-by-label-text :context-tag-wrapper)))
 
   (h/test "component renders in context-tag + button type"
-    (h/render [quo/drawer-top
-               {:title          "Title"
-                :type           :context-tag
-                :button-icon    :i/placeholder
-                :community-name "Coinbase"}])
+    (h/render-with-theme-provider [quo/drawer-top
+                                   {:title          "Title"
+                                    :type           :context-tag
+                                    :button-icon    :i/placeholder
+                                    :community-name "Coinbase"}]
+                                  theme)
     (h/is-truthy (h/get-by-text "Title"))
     (h/is-truthy (h/get-by-label-text :button-icon))
     (h/is-truthy (h/get-by-label-text :context-tag-wrapper)))
 
   (h/test "component renders in account type"
-    (h/render [quo/drawer-top
-               {:title                "Title"
-                :type                 :account
-                :account-avatar-emoji "🍿"
-                :networks             [{:name :ethereum :short-name "eth"}]
-                :description          "0x62b...0a5"
-                :customization-color  :purple}])
+    (h/render-with-theme-provider [quo/drawer-top
+                                   {:title                "Title"
+                                    :type                 :account
+                                    :account-avatar-emoji "🍿"
+                                    :networks             [{:name :ethereum :short-name "eth"}]
+                                    :description          "0x62b...0a5"
+                                    :customization-color  :purple}]
+                                  theme)
     (h/is-truthy (h/get-by-text "Title"))
     (h/is-truthy (h/get-by-text "0x62b...0a5"))
     (h/is-truthy (h/get-by-label-text :account-avatar)))
 
   (h/test "component renders in keypair type when keycard? is false"
-    (h/render [quo/drawer-top
-               {:title       "Title"
-                :keycard?    false
-                :icon-avatar :i/placeholder
-                :type        :keypair}])
+    (h/render-with-theme-provider [quo/drawer-top
+                                   {:title       "Title"
+                                    :keycard?    false
+                                    :icon-avatar :i/placeholder
+                                    :type        :keypair}]
+                                  theme)
     (h/is-truthy (h/get-by-text "Title"))
     (-> (h/expect (h/get-by-translation-text :t/on-device))
         (.toBeTruthy)))
 
   (h/test "component renders in keypair type when keycard? is true"
-    (h/render [quo/drawer-top
-               {:title       "Title"
-                :keycard?    true
-                :icon-avatar :i/placeholder
-                :type        :keypair}])
+    (h/render-with-theme-provider [quo/drawer-top
+                                   {:title       "Title"
+                                    :keycard?    true
+                                    :icon-avatar :i/placeholder
+                                    :type        :keypair}]
+                                  theme)
     (h/is-truthy (h/get-by-text "Title"))
     (-> (h/expect (h/get-by-translation-text :t/on-keycard))
         (.toBeTruthy)))
 
   (h/test "component renders in default-keypair type"
-    (h/render [quo/drawer-top
-               {:title       "Title"
-                :description "0x62b...0a5"
-                :type        :default-keypair}])
+    (h/render-with-theme-provider [quo/drawer-top
+                                   {:title       "Title"
+                                    :description "0x62b...0a5"
+                                    :type        :default-keypair}]
+                                  theme)
     (h/is-truthy (h/get-by-text "Title"))
     (h/is-truthy (h/get-by-label-text :default-keypair-text)))
 
   (h/test "component renders in label type"
-    (h/render [quo/drawer-top
-               {:label "label"
-                :type  :label}])
+    (h/render-with-theme-provider [quo/drawer-top
+                                   {:label "label"
+                                    :type  :label}]
+                                  theme)
     (h/is-truthy (h/get-by-text "label"))))

src/quo/components/list_items/account/component_spec.cljs

@@ -4,79 +4,83 @@
     [quo.foundations.colors :as colors]
     [test-helpers.component :as h]))
 
+(def ^:private theme :light)
+
 (h/describe "List items: account"
   (h/test "default render'"
-    (h/render [account/view])
+    (h/render-with-theme-provider [account/view] theme)
     (h/is-truthy (h/query-by-label-text :container)))
 
   (h/test "on-press-in changes state to :pressed"
-    (h/render [account/view])
+    (h/render-with-theme-provider [account/view] theme)
     (h/fire-event :on-press-in (h/get-by-label-text :container))
     (h/wait-for #(h/has-style (h/query-by-label-text :container)
                               {:backgroundColor (colors/resolve-color :blue :light 5)})))
 
   (h/test "on-press-in changes state to :pressed with blur? enabled"
-    (h/render [account/view {:blur? true}])
+    (h/render-with-theme-provider [account/view {:blur? true}] theme)
     (h/fire-event :on-press-in (h/get-by-label-text :container))
     (h/wait-for #(h/has-style (h/query-by-label-text :container)
                               {:backgroundColor colors/white-opa-5})))
 
   (h/test "render with state :active"
-    (h/render [account/view {:state :active}])
+    (h/render-with-theme-provider [account/view {:state :active}] theme)
     (h/has-style (h/query-by-label-text :container)
                  {:backgroundColor (colors/resolve-color :blue :light 10)}))
 
   (h/test "render with state :active and blur? enabled"
-    (h/render [account/view
-               {:blur? true
-                :state :active}])
+    (h/render-with-theme-provider [account/view
+                                   {:blur? true
+                                    :state :active}]
+                                  theme)
     (h/has-style (h/query-by-label-text :container)
                  {:backgroundColor colors/white-opa-10}))
 
   (h/test "render with state :selected"
-    (h/render [account/view {:state :selected}])
+    (h/render-with-theme-provider [account/view {:state :selected}] theme)
     (h/is-truthy (h/query-by-label-text :check-icon)))
 
   (h/test "calls on-press"
     (let [on-press (h/mock-fn)]
-      (h/render [account/view {:on-press on-press}])
+      (h/render-with-theme-provider [account/view {:on-press on-press}] theme)
       (h/fire-event :on-press (h/get-by-label-text :container))
       (h/was-called on-press)))
 
   (h/test "renders token props if type :tag"
-    (h/render [account/view {:type :tag}])
+    (h/render-with-theme-provider [account/view {:type :tag}] theme)
     (h/is-truthy (h/query-by-label-text :tag-container)))
 
   (h/test "renders keycard icon if title-icon is present"
-    (h/render [account/view {:title-icon :i/placeholder}])
+    (h/render-with-theme-provider [account/view {:title-icon :i/placeholder}] theme)
     (h/is-truthy (h/query-by-label-text :title-icon)))
 
   (h/test "doesn't render keycard icon if title-icon is missing"
-    (h/render [account/view])
+    (h/render-with-theme-provider [account/view] theme)
     (h/is-falsy (h/query-by-label-text :title-icon)))
 
   (h/test "renders balance container but not arrow icon if type :balance-neutral"
-    (h/render [account/view {:type :balance-neutral}])
+    (h/render-with-theme-provider [account/view {:type :balance-neutral}] theme)
     (h/is-truthy (h/query-by-label-text :balance-container))
     (h/is-falsy (h/query-by-label-text :arrow-icon)))
 
   (h/test "renders balance container and negative arrow icon if type :balance-negative"
-    (h/render [account/view {:type :balance-negative}])
+    (h/render-with-theme-provider [account/view {:type :balance-negative}] theme)
     (h/is-truthy (h/query-by-label-text :balance-container))
     (h/is-truthy (h/query-by-label-text :icon-negative))
     (h/is-falsy (h/query-by-label-text :icon-positive)))
 
   (h/test "renders balance container and positive arrow icon if type :balance-positive"
-    (h/render [account/view {:type :balance-positive}])
+    (h/render-with-theme-provider [account/view {:type :balance-positive}] theme)
     (h/is-truthy (h/query-by-label-text :balance-container))
     (h/is-falsy (h/query-by-label-text :icon-negative))
     (h/is-truthy (h/query-by-label-text :icon-positive)))
 
   (h/test "renders options button if type :action"
     (let [on-options-press (h/mock-fn)]
-      (h/render [account/view
-                 {:type             :action
-                  :on-options-press on-options-press}])
+      (h/render-with-theme-provider [account/view
+                                     {:type             :action
+                                      :on-options-press on-options-press}]
+                                    theme)
       (h/is-truthy (h/query-by-label-text :options-button))
       (h/fire-event :on-press (h/get-by-label-text :options-button))
       (h/was-called on-options-press))))

src/quo/components/wallet/account_card/component_spec.cljs

@@ -5,6 +5,7 @@
 
 (def username "Alisher account")
 (def empty-username "Account 1")
+(def ^:private theme :light)
 
 (defn get-test-data
   [{:keys [type watch-only? empty-type? loading? no-metrics?]}]
@@ -21,54 +22,54 @@
 (h/describe "Account_card tests"
   (h/test "Renders Default"
     (let [data (get-test-data {:type :default})]
-      (h/render [account-card/view data])
+      (h/render-with-theme-provider [account-card/view data] theme)
       (h/is-truthy (h/get-by-text username))))
 
   (h/test "Renders Watch-Only"
     (let [data (get-test-data {:type        :watch-only
                                :watch-only? true})]
-      (h/render [account-card/view data])
+      (h/render-with-theme-provider [account-card/view data] theme)
       (h/is-truthy (h/get-by-text username))))
 
   (h/test "Renders Add-Account"
     (let [data {:type :add-account}]
-      (h/render [account-card/view data])
+      (h/render-with-theme-provider [account-card/view data] theme)
       (h/is-truthy (h/get-by-label-text :add-account))))
 
   (h/test "Renders Empty"
     (let [data (get-test-data {:type        :empty
                                :empty-type? true})]
-      (h/render [account-card/view data])
+      (h/render-with-theme-provider [account-card/view data] theme)
       (h/is-truthy (h/get-by-text empty-username))))
 
   (h/test "Renders Missing Keypair"
     (let [data (get-test-data {:type :missing-keypair})]
-      (h/render [account-card/view data])
+      (h/render-with-theme-provider [account-card/view data] theme)
       (h/is-truthy (h/get-by-text username))))
 
   (h/test "Add account on press fires correctly"
     (let [on-press (h/mock-fn)
           data     {:type     :add-account
                     :on-press on-press}]
-      (h/render [account-card/view data])
+      (h/render-with-theme-provider [account-card/view data] theme)
       (h/fire-event :on-press (h/get-by-label-text :add-account))
       (h/was-called on-press)))
 
   (h/test "Renders component without metrics"
     (let [data (get-test-data {:type        :default
                                :no-metrics? true})]
-      (h/render [account-card/view data])
+      (h/render-with-theme-provider [account-card/view data] theme)
       (h/is-falsy (h/query-by-label-text :metrics))))
 
   (h/test "Renders loading state"
     (let [data (get-test-data {:type     :default
                                :loading? true})]
-      (h/render [account-card/view data])
+      (h/render-with-theme-provider [account-card/view data] theme)
       (h/is-truthy (h/get-by-label-text :loading))))
 
   (h/test "Renders loading state without metrics"
     (let [data (get-test-data {:type        :default
                                :no-metrics? true
                                :loading?    true})]
-      (h/render [account-card/view data])
+      (h/render-with-theme-provider [account-card/view data] theme)
       (h/is-falsy (h/query-by-label-text :metrics)))))

src/quo/components/wallet/account_card/schema.cljs

@@ -0,0 +1,33 @@
+(ns quo.components.wallet.account-card.schema)
+
+(def ^:private ?base
+  [:map
+   [:type {:optional true} [:enum :default :watch-only :add-account :empty :missing-keypair]]
+   [:customization-color {:optional true} [:maybe :schema.common/customization-color]]
+   [:theme :schema.common/theme]
+   [:metrics? {:optional true} [:maybe :boolean]]
+   [:on-press {:optional true} [:maybe fn?]]])
+
+(def ^:private ?amount
+  [:map
+   [:amount {:optional true} [:maybe :string]]])
+
+(def ^:private ?card
+  [:map
+   [:balance {:optional true} [:maybe :string]]
+   [:loading? {:optional true} [:maybe :boolean]]
+   [:name {:optional true} [:maybe :string]]
+   [:percentage-value {:optional true} [:maybe :string]]
+   [:emoji {:optional true} [:maybe :string]]])
+
+(def ?schema
+  [:=>
+   [:catn
+    [:props
+     [:multi {:dispatch :type}
+      [:default [:merge ?base ?amount ?card]]
+      [:watch-only [:merge ?base ?amount ?card]]
+      [:missing-keypair [:merge ?base ?amount ?card]]
+      [:empty [:merge ?base ?card]]
+      [:add-account ?base]]]]
+   :any])

src/quo/components/wallet/account_card/view.cljs

@@ -4,13 +4,15 @@
     [quo.components.icon :as icon]
     [quo.components.markdown.text :as text]
     [quo.components.wallet.account-card.properties :as properties]
+    [quo.components.wallet.account-card.schema :as component-schema]
     [quo.components.wallet.account-card.style :as style]
     [quo.foundations.colors :as colors]
     [quo.foundations.customization-colors :as customization-colors]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
     [react-native.linear-gradient :as linear-gradient]
-    [reagent.core :as reagent]))
+    [reagent.core :as reagent]
+    [schema.core :as schema]))
 
 (defn- loading-view
   [{:keys [customization-color type theme metrics?]}]
@@ -183,4 +185,6 @@
     :add-account                                   [add-account-view props]
     nil))
 
-(def view (quo.theme/with-theme view-internal))
+(def view
+  (quo.theme/with-theme
+   (schema/instrument #'view-internal component-schema/?schema)))