chore(schema): for user-avatar component (#18913)
This commit is contained in:
parent
3c12ac870a
commit
7e228d0e66
|
@ -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)))))
|
||||
|
|
|
@ -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])
|
|
@ -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)))
|
||||
|
|
|
@ -6,7 +6,8 @@
|
|||
(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
|
||||
[profile-input/profile-input
|
||||
{:placeholder "Your Name"
|
||||
:on-press event}])
|
||||
(h/fire-event :press (h/get-by-label-text :select-profile-picture-button))
|
||||
|
|
|
@ -12,32 +12,32 @@
|
|||
|
||||
(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)
|
||||
:active-state? false}])
|
||||
(h/fire-event :on-press-in (h/get-by-label-text :container))
|
||||
|
@ -47,7 +47,8 @@
|
|||
|
||||
(h/test "on-press calls on-press"
|
||||
(let [on-press (h/mock-fn)]
|
||||
(h/render [saved-contact-address/view
|
||||
(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))
|
||||
|
|
|
@ -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,7 +17,8 @@
|
|||
activity-center-on-press (h/mock-fn)
|
||||
qr-code-on-press (h/mock-fn)]
|
||||
|
||||
(h/render [top-nav/view
|
||||
(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
|
||||
|
|
|
@ -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)))))
|
||||
|
|
|
@ -38,7 +38,8 @@
|
|||
(h/is-truthy (h/get-by-text "Rare Artifact")))
|
||||
|
||||
(h/test "User view render"
|
||||
(h/render [summary-tag/view
|
||||
(h/render-with-theme-provider
|
||||
[summary-tag/view
|
||||
{:type :user
|
||||
:label "Bob Smith"
|
||||
:image-source "path/to/profile-pic.png"
|
||||
|
|
Loading…
Reference in New Issue