From acb462f496b815fee10aa57a65319ec06b1921e6 Mon Sep 17 00:00:00 2001 From: yqrashawn Date: Thu, 22 Feb 2024 19:20:13 +0800 Subject: [PATCH] chore(schema): for user-avatar component (#18913) --- .../avatars/user_avatar/component_spec.cljs | 6 ++--- .../avatars/user_avatar/schema.cljs | 24 +++++++++++++++++++ .../components/avatars/user_avatar/view.cljs | 8 +++++-- .../inputs/profile_input/component_spec.cljs | 7 +++--- .../saved_contact_address/component_spec.cljs | 23 +++++++++--------- .../navigation/top_nav/component_spec.cljs | 13 +++++----- .../select_profile/component_spec.cljs | 4 ++-- .../tags/summary_tag/component_spec.cljs | 11 +++++---- 8 files changed, 64 insertions(+), 32 deletions(-) create mode 100644 src/quo/components/avatars/user_avatar/schema.cljs diff --git a/src/quo/components/avatars/user_avatar/component_spec.cljs b/src/quo/components/avatars/user_avatar/component_spec.cljs index 1fd149b0bdce..5458be45c275 100644 --- a/src/quo/components/avatars/user_avatar/component_spec.cljs +++ b/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))))) diff --git a/src/quo/components/avatars/user_avatar/schema.cljs b/src/quo/components/avatars/user_avatar/schema.cljs new file mode 100644 index 000000000000..bbfdfde7ed29 --- /dev/null +++ b/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]) diff --git a/src/quo/components/avatars/user_avatar/view.cljs b/src/quo/components/avatars/user_avatar/view.cljs index 621ef9845e04..880357655be1 100644 --- a/src/quo/components/avatars/user_avatar/view.cljs +++ b/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))) diff --git a/src/quo/components/inputs/profile_input/component_spec.cljs b/src/quo/components/inputs/profile_input/component_spec.cljs index 1411a52e8826..9bdfe5708303 100644 --- a/src/quo/components/inputs/profile_input/component_spec.cljs +++ b/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 - {:placeholder "Your Name" - :on-press event}]) + (h/render-with-theme-provider + [profile-input/profile-input + {: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)))) diff --git a/src/quo/components/list_items/saved_contact_address/component_spec.cljs b/src/quo/components/list_items/saved_contact_address/component_spec.cljs index 4185a3ff8a8d..aeef59d29350 100644 --- a/src/quo/components/list_items/saved_contact_address/component_spec.cljs +++ b/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 - {:accounts (repeat 1 account) - :active-state? false}]) + (h/render-with-theme-provider [saved-contact-address/view + {:accounts (repeat 1 account) + :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 - {:on-press on-press - :accounts (repeat 1 account)}]) + (h/render-with-theme-provider + [saved-contact-address/view + {:on-press on-press + :accounts (repeat 1 account)}]) (h/fire-event :on-press (h/get-by-label-text :container)) (h/was-called on-press)))) diff --git a/src/quo/components/navigation/top_nav/component_spec.cljs b/src/quo/components/navigation/top_nav/component_spec.cljs index e7204213a8c5..db9c6cf137ed 100644 --- a/src/quo/components/navigation/top_nav/component_spec.cljs +++ b/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 - {:avatar-on-press avatar-on-press - :scan-on-press scan-on-press - :activity-center-on-press activity-center-on-press - :qr-code-on-press qr-code-on-press}]) + (h/render-with-theme-provider + [top-nav/view + {:avatar-on-press avatar-on-press + :scan-on-press scan-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) diff --git a/src/quo/components/profile/select_profile/component_spec.cljs b/src/quo/components/profile/select_profile/component_spec.cljs index 5751a709a26e..fe2d8bae57d1 100644 --- a/src/quo/components/profile/select_profile/component_spec.cljs +++ b/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))))) diff --git a/src/quo/components/tags/summary_tag/component_spec.cljs b/src/quo/components/tags/summary_tag/component_spec.cljs index e3217dda640f..13795e34a0cb 100644 --- a/src/quo/components/tags/summary_tag/component_spec.cljs +++ b/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 - {:type :user - :label "Bob Smith" - :image-source "path/to/profile-pic.png" - :customization-color "#0000ff"}]) + (h/render-with-theme-provider + [summary-tag/view + {:type :user + :label "Bob Smith" + :image-source "path/to/profile-pic.png" + :customization-color "#0000ff"}]) (h/is-truthy (h/get-by-text "Bob Smith"))) (h/test "Token view render"