chore(schema): for user-avatar component (#18913)

src/quo/components/avatars/user_avatar/component_spec.cljs

@@ -3,16 +3,16 @@
     [quo.components.avatars.user-avatar.view :as user-avatar]
     [test-helpers.component :as h]))
 
-(defonce mock-picture {:uri (js/require "../resources/images/mock2/user_picture_male4.png")})
+(defonce mock-picture 1)
 
 (h/describe "user avatar"
   (h/describe "Profile picture"
     (h/test "Renders"
-      (h/render
+      (h/render-with-theme-provider
        [user-avatar/user-avatar {:profile-picture mock-picture}])
       (h/is-truthy (h/get-by-label-text :profile-picture)))
 
     (h/test "Renders even if `:full-name` is passed"
-      (h/render
+      (h/render-with-theme-provider
        [user-avatar/user-avatar {:profile-picture mock-picture}])
       (h/is-truthy (h/get-by-label-text :profile-picture)))))

src/quo/components/avatars/user_avatar/schema.cljs

@@ -0,0 +1,24 @@
+(ns quo.components.avatars.user-avatar.schema
+  (:require
+    [quo.components.avatars.user-avatar.style :as style]))
+
+(def ?schema
+  [:=>
+   [:catn
+    [:props
+     [:map
+      [:full-name {:optional true} [:maybe string?]]
+      [:size {:optional true} [:maybe (into [:enum] (keys style/sizes))]]
+      [:customization-color {:optional true} [:maybe :schema.common/customization-color]]
+      [:static? {:optional true} [:maybe boolean?]]
+      [:status-indicator? {:optional true} [:maybe boolean?]]
+      [:online? {:optional true} [:maybe boolean?]]
+      [:ring? {:optional true} [:maybe boolean?]]
+      [:theme :schema.common/theme]
+      [:profile-picture
+       {:optional true}
+       [:maybe
+        [:or
+         :schema.common/image-source
+         [:map [:fn fn?]]]]]]]]
+   :any])

src/quo/components/avatars/user_avatar/view.cljs

@@ -1,11 +1,13 @@
 (ns quo.components.avatars.user-avatar.view
   (:require
+    [quo.components.avatars.user-avatar.schema :as component-schema]
     [quo.components.avatars.user-avatar.style :as style]
     [quo.components.common.no-flicker-image :as no-flicker-image]
     [quo.components.markdown.text :as text]
     [quo.theme]
     [react-native.core :as rn]
     [react-native.fast-image :as fast-image]
+    [schema.core :as schema]
     utils.string))
 
 (defn initials-avatar
@@ -58,7 +60,7 @@
            customization-color :blue}
     :as   props}]
   (let [full-name          (or full-name "Your Name")
-        ;; image generated with profile-picture-fn is round cropped
+        ;; image generated with `profile-picture-fn` is round cropped
         ;; no need to add border-radius for them
         outer-styles       (style/outer size (not (:fn profile-picture)))
         ;; Once image is loaded, fast image re-renders view with the help of reagent atom,
@@ -108,4 +110,6 @@
 
                :else {:uri profile-picture})}])]))
 
-(def user-avatar (quo.theme/with-theme user-avatar-internal))
+(def user-avatar
+  (quo.theme/with-theme
+   (schema/instrument #'user-avatar-internal component-schema/?schema)))

src/quo/components/inputs/profile_input/component_spec.cljs

@@ -6,8 +6,9 @@
 (h/describe "Profile Input"
   (h/test "on press event fires"
     (let [event (h/mock-fn)]
-      (h/render [profile-input/profile-input
+      (h/render-with-theme-provider
-                 {:placeholder "Your Name"
+       [profile-input/profile-input
-                  :on-press    event}])
+        {:placeholder "Your Name"
+         :on-press    event}])
       (h/fire-event :press (h/get-by-label-text :select-profile-picture-button))
       (h/was-called-times event 1))))

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

@@ -12,34 +12,34 @@
 
 (h/describe "List items: saved contact address"
   (h/test "default render"
-    (h/render [saved-contact-address/view])
+    (h/render-with-theme-provider [saved-contact-address/view])
     (h/is-truthy (h/query-by-label-text :container)))
 
   (h/test "renders account detail when passing one account"
-    (h/render [saved-contact-address/view {:accounts (repeat 1 account)}])
+    (h/render-with-theme-provider [saved-contact-address/view {:accounts (repeat 1 account)}])
     (h/is-truthy (h/query-by-label-text :account-container)))
 
   (h/test "renders account count when passing multiple accounts"
-    (h/render [saved-contact-address/view {:accounts (repeat 2 account)}])
+    (h/render-with-theme-provider [saved-contact-address/view {:accounts (repeat 2 account)}])
     (h/is-truthy (h/query-by-label-text :accounts-count)))
 
   (h/test "on-press-in changes state to :pressed"
-    (h/render [saved-contact-address/view {:accounts (repeat 1 account)}])
+    (h/render-with-theme-provider [saved-contact-address/view {:accounts (repeat 1 account)}])
     (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/custom-color :blue 50 5)})))
 
   (h/test "on-press-out changes state to :active if active-state? is true (default value)"
-    (h/render [saved-contact-address/view {:accounts (repeat 1 account)}])
+    (h/render-with-theme-provider [saved-contact-address/view {:accounts (repeat 1 account)}])
     (h/fire-event :on-press-in (h/get-by-label-text :container))
     (h/fire-event :on-press-out (h/get-by-label-text :container))
     (h/wait-for #(h/has-style (h/query-by-label-text :container)
                               {:backgroundColor (colors/custom-color :blue 50 10)})))
 
   (h/test "on-press-out changes state to :default if active-state? is false"
-    (h/render [saved-contact-address/view
+    (h/render-with-theme-provider [saved-contact-address/view
-               {:accounts      (repeat 1 account)
+                                   {:accounts      (repeat 1 account)
-                :active-state? false}])
+                                    :active-state? false}])
     (h/fire-event :on-press-in (h/get-by-label-text :container))
     (h/fire-event :on-press-out (h/get-by-label-text :container))
     (h/wait-for #(h/has-style (h/query-by-label-text :container)
@@ -47,8 +47,9 @@
 
   (h/test "on-press calls on-press"
     (let [on-press (h/mock-fn)]
-      (h/render [saved-contact-address/view
+      (h/render-with-theme-provider
-                 {:on-press on-press
+       [saved-contact-address/view
-                  :accounts (repeat 1 account)}])
+        {:on-press on-press
+         :accounts (repeat 1 account)}])
       (h/fire-event :on-press (h/get-by-label-text :container))
       (h/was-called on-press))))

src/quo/components/navigation/top_nav/component_spec.cljs

@@ -5,7 +5,7 @@
 
 (h/describe "Top Nav component"
   (h/test "Renders default"
-    (h/render [top-nav/view])
+    (h/render-with-theme-provider [top-nav/view])
     (h/is-truthy (h/get-by-label-text :open-scanner-button))
     (h/is-truthy (h/get-by-label-text :open-activity-center-button))
     (h/is-truthy (h/get-by-label-text :show-qr-button))
@@ -17,11 +17,12 @@
           activity-center-on-press (h/mock-fn)
           qr-code-on-press         (h/mock-fn)]
 
-      (h/render [top-nav/view
+      (h/render-with-theme-provider
-                 {:avatar-on-press          avatar-on-press
+       [top-nav/view
-                  :scan-on-press            scan-on-press
+        {:avatar-on-press          avatar-on-press
-                  :activity-center-on-press activity-center-on-press
+         :scan-on-press            scan-on-press
-                  :qr-code-on-press         qr-code-on-press}])
+         :activity-center-on-press activity-center-on-press
+         :qr-code-on-press         qr-code-on-press}])
 
       (h/fire-event :press (h/get-by-label-text :open-scanner-button))
       (h/was-called scan-on-press)

src/quo/components/profile/select_profile/component_spec.cljs

@@ -5,12 +5,12 @@
 
 (h/describe "select-profile component"
   (h/test "render component"
-    (h/render [select-profile/view])
+    (h/render-with-theme-provider [select-profile/view])
     (-> (h/expect (h/get-by-label-text :select-profile))
         (.toBeTruthy)))
   (h/test "call on-change handler when clicked"
     (let [on-change (h/mock-fn)]
-      (h/render [select-profile/view {:on-change on-change}])
+      (h/render-with-theme-provider [select-profile/view {:on-change on-change}])
       (h/fire-event :on-press (h/get-by-label-text :select-profile))
       (-> (h/expect on-change)
           (.toHaveBeenCalledTimes 1)))))

src/quo/components/tags/summary_tag/component_spec.cljs

@@ -38,11 +38,12 @@
     (h/is-truthy (h/get-by-text "Rare Artifact")))
 
   (h/test "User view render"
-    (h/render [summary-tag/view
+    (h/render-with-theme-provider
-               {:type                :user
+     [summary-tag/view
-                :label               "Bob Smith"
+      {:type                :user
-                :image-source        "path/to/profile-pic.png"
+       :label               "Bob Smith"
-                :customization-color "#0000ff"}])
+       :image-source        "path/to/profile-pic.png"
+       :customization-color "#0000ff"}])
     (h/is-truthy (h/get-by-text "Bob Smith")))
 
   (h/test "Token view render"