Skip to content

Commit 7754460

Browse files
vkjrvkjr
authored
Malli schemas added to components (#18949)
1 parent 7d55c98 commit 7754460

File tree

30 files changed

+357
-113
lines changed

30 files changed

+357
-113
lines changed

Diff for: ‎src/quo/components/drawers/drawer_top/component_spec.cljs

+1-1
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@
6565
{:title "Title"
6666
:type :account
6767
:account-avatar-emoji "🍿"
68-
:networks [{:name :ethereum :short-name "eth"}]
68+
:networks [{:network-name :ethereum :short-name "eth"}]
6969
:description "0x62b...0a5"
7070
:customization-color :purple}]
7171
theme)

Diff for: ‎src/quo/components/list_items/account/component_spec.cljs

+47-16
Original file line numberDiff line numberDiff line change
@@ -6,80 +6,111 @@
66

77
(def ^:private theme :light)
88

9+
(def ^:private default-props
10+
{:account-props {:name "Account name"
11+
:address "0x1234567890"
12+
:emoji "🍑"
13+
:customization-color "blue"}})
14+
15+
(defn- with-defaults
16+
([] default-props)
17+
([props] (merge default-props props)))
18+
919
(h/describe "List items: account"
1020
(h/test "default render'"
11-
(h/render-with-theme-provider [account/view] theme)
21+
(h/render-with-theme-provider [account/view (with-defaults)] theme)
1222
(h/is-truthy (h/query-by-label-text :container)))
1323

1424
(h/test "on-press-in changes state to :pressed"
15-
(h/render-with-theme-provider [account/view] theme)
25+
(h/render-with-theme-provider [account/view (with-defaults)] theme)
1626
(h/fire-event :on-press-in (h/get-by-label-text :container))
1727
(h/wait-for #(h/has-style (h/query-by-label-text :container)
1828
{:backgroundColor (colors/resolve-color :blue :light 5)})))
1929

2030
(h/test "on-press-in changes state to :pressed with blur? enabled"
21-
(h/render-with-theme-provider [account/view {:blur? true}] theme)
31+
(h/render-with-theme-provider [account/view (with-defaults {:blur? true})] theme)
2232
(h/fire-event :on-press-in (h/get-by-label-text :container))
2333
(h/wait-for #(h/has-style (h/query-by-label-text :container)
2434
{:backgroundColor colors/white-opa-5})))
2535

2636
(h/test "render with state :active"
27-
(h/render-with-theme-provider [account/view {:state :active}] theme)
37+
(h/render-with-theme-provider [account/view (with-defaults {:state :active})] theme)
2838
(h/has-style (h/query-by-label-text :container)
2939
{:backgroundColor (colors/resolve-color :blue :light 10)}))
3040

3141
(h/test "render with state :active and blur? enabled"
3242
(h/render-with-theme-provider [account/view
33-
{:blur? true
34-
:state :active}]
43+
(with-defaults
44+
{:blur? true
45+
:state :active})]
3546
theme)
3647
(h/has-style (h/query-by-label-text :container)
3748
{:backgroundColor colors/white-opa-10}))
3849

3950
(h/test "render with state :selected"
40-
(h/render-with-theme-provider [account/view {:state :selected}] theme)
51+
(h/render-with-theme-provider [account/view (with-defaults {:state :selected})] theme)
4152
(h/is-truthy (h/query-by-label-text :check-icon)))
4253

4354
(h/test "calls on-press"
4455
(let [on-press (h/mock-fn)]
45-
(h/render-with-theme-provider [account/view {:on-press on-press}] theme)
56+
(h/render-with-theme-provider [account/view (with-defaults {:on-press on-press})] theme)
4657
(h/fire-event :on-press (h/get-by-label-text :container))
4758
(h/was-called on-press)))
4859

4960
(h/test "renders token props if type :tag"
50-
(h/render-with-theme-provider [account/view {:type :tag}] theme)
61+
(h/render-with-theme-provider [account/view
62+
(with-defaults {:type :tag
63+
:token-props {:symbol "SNT"
64+
:value "1,000"}})]
65+
theme)
5166
(h/is-truthy (h/query-by-label-text :tag-container)))
5267

5368
(h/test "renders keycard icon if title-icon is present"
54-
(h/render-with-theme-provider [account/view {:title-icon :i/placeholder}] theme)
69+
(h/render-with-theme-provider [account/view (with-defaults {:title-icon :i/placeholder})] theme)
5570
(h/is-truthy (h/query-by-label-text :title-icon)))
5671

5772
(h/test "doesn't render keycard icon if title-icon is missing"
58-
(h/render-with-theme-provider [account/view] theme)
73+
(h/render-with-theme-provider [account/view (with-defaults)] theme)
5974
(h/is-falsy (h/query-by-label-text :title-icon)))
6075

6176
(h/test "renders balance container but not arrow icon if type :balance-neutral"
62-
(h/render-with-theme-provider [account/view {:type :balance-neutral}] theme)
77+
(h/render-with-theme-provider [account/view
78+
(with-defaults {:type :balance-neutral
79+
:balance-props {:fiat-value "€0.00"
80+
:percentage-change "0.0"
81+
:fiat-change "€0.00"}})]
82+
theme)
6383
(h/is-truthy (h/query-by-label-text :balance-container))
6484
(h/is-falsy (h/query-by-label-text :arrow-icon)))
6585

6686
(h/test "renders balance container and negative arrow icon if type :balance-negative"
67-
(h/render-with-theme-provider [account/view {:type :balance-negative}] theme)
87+
(h/render-with-theme-provider [account/view
88+
(with-defaults {:type :balance-negative
89+
:balance-props {:fiat-value "€0.00"
90+
:percentage-change "0.0"
91+
:fiat-change "€0.00"}})]
92+
theme)
6893
(h/is-truthy (h/query-by-label-text :balance-container))
6994
(h/is-truthy (h/query-by-label-text :icon-negative))
7095
(h/is-falsy (h/query-by-label-text :icon-positive)))
7196

7297
(h/test "renders balance container and positive arrow icon if type :balance-positive"
73-
(h/render-with-theme-provider [account/view {:type :balance-positive}] theme)
98+
(h/render-with-theme-provider [account/view
99+
(with-defaults {:type :balance-positive
100+
:balance-props {:fiat-value "€0.00"
101+
:percentage-change "0.0"
102+
:fiat-change "€0.00"}})]
103+
theme)
74104
(h/is-truthy (h/query-by-label-text :balance-container))
75105
(h/is-falsy (h/query-by-label-text :icon-negative))
76106
(h/is-truthy (h/query-by-label-text :icon-positive)))
77107

78108
(h/test "renders options button if type :action"
79109
(let [on-options-press (h/mock-fn)]
80110
(h/render-with-theme-provider [account/view
81-
{:type :action
82-
:on-options-press on-options-press}]
111+
(with-defaults
112+
{:type :action
113+
:on-options-press on-options-press})]
83114
theme)
84115
(h/is-truthy (h/query-by-label-text :options-button))
85116
(h/fire-event :on-press (h/get-by-label-text :options-button))

Diff for: ‎src/quo/components/list_items/account/schema.cljs

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
(ns quo.components.list-items.account.schema)
2+
3+
(def ^:private ?balance
4+
[:map
5+
[:balance-props
6+
[:map
7+
[:fiat-value :string]
8+
[:percentage-change :string]
9+
[:fiat-change :string]]]])
10+
11+
(def ^:private ?tag
12+
[:map
13+
[:token-props
14+
[:map
15+
[:symbol :string]
16+
[:value :string]]]])
17+
18+
(def ^:private ?action
19+
[:map
20+
[:on-options-press {:optional true} [:maybe fn?]]])
21+
22+
(def ^:private ?base
23+
[:map
24+
[:type {:optional true}
25+
[:enum :default :tag :action :balance-neutral :balance-negative :balance-positive]]
26+
[:state {:optional true} [:enum :default :selected :active]]
27+
[:blur? {:optional true} [:maybe :boolean]]
28+
[:customization-color {:optional true} [:maybe :schema.common/customization-color]]
29+
[:on-press {:optional true} [:maybe fn?]]
30+
[:theme :schema.common/theme]
31+
[:title-icon {:optional true} [:maybe :keyword]]
32+
[:account-props
33+
[:map
34+
[:name :string]
35+
[:address :string]
36+
[:emoji :string]
37+
[:customization-color {:optional true} [:maybe :schema.common/customization-color]]]]])
38+
39+
(def ?schema
40+
[:=>
41+
[:cat
42+
[:multi {:dispatch :type}
43+
[:balance-neutral [:merge ?base ?balance]]
44+
[:balance-negative [:merge ?base ?balance]]
45+
[:balance-positive [:merge ?base ?balance]]
46+
[:tag [:merge ?base ?tag]]
47+
[:action [:merge ?base ?action]]
48+
[:default ?base]
49+
[:malli.core/default ?base]]]
50+
:any])

Diff for: ‎src/quo/components/list_items/account/view.cljs

+6-2
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@
22
(:require
33
[quo.components.avatars.account-avatar.view :as account-avatar]
44
[quo.components.icon :as icon]
5+
[quo.components.list-items.account.schema :as component-schema]
56
[quo.components.list-items.account.style :as style]
67
[quo.components.markdown.text :as text]
78
[quo.components.wallet.address-text.view :as address-text]
89
[quo.foundations.colors :as colors]
910
[quo.theme :as quo.theme]
1011
[react-native.core :as rn]
11-
[reagent.core :as reagent]))
12+
[reagent.core :as reagent]
13+
[schema.core :as schema]))
1214

1315
(defn- account-view
1416
[{:keys [account-props title-icon blur? theme]}]
@@ -130,4 +132,6 @@
130132
(and (= type :default) (= state :selected))
131133
[check-icon props])]])))
132134

133-
(def view (quo.theme/with-theme internal-view))
135+
(def view
136+
(quo.theme/with-theme
137+
(schema/instrument #'internal-view component-schema/?schema)))

Diff for: ‎src/quo/components/list_items/account_list_card/component_spec.cljs

+5-5
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@
1313

1414
(h/describe "List items: account list card"
1515
(h/test "Test icon renders for ':action :icon'"
16-
(h/render [account-list-card/view
17-
{:account-props account-props
18-
:network :ethereum
19-
:state :default
20-
:action :icon}])
16+
(h/render-with-theme-provider [account-list-card/view
17+
{:account-props account-props
18+
:network :ethereum
19+
:action :icon
20+
:on-options-press (fn [])}])
2121
(h/is-truthy (h/get-by-label-text :icon))))

Diff for: ‎src/quo/components/list_items/account_list_card/schema.cljs

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
(ns quo.components.list-items.account-list-card.schema)
2+
3+
(def ^:private ?base
4+
[:map
5+
[:action {:optional true} [:enum :icon :none]]
6+
[:blur? {:optional true} [:maybe :boolean]]
7+
[:on-press {:optional true} [:maybe fn?]]
8+
[:theme :schema.common/theme]
9+
[:account-props
10+
[:map {:closed true}
11+
[:type [:enum :default :watch-only]]
12+
[:name :string]
13+
[:address :string]
14+
[:emoji :string]
15+
[:size {:optional true} [:enum 80 :size-64 48 32 28 24 20 16]]
16+
[:customization-color {:optional true} [:maybe :schema.common/customization-color]]]]
17+
[:networks {:optional true} [:* [:map [:network-name :keyword] [:short-name :string]]]]])
18+
19+
(def ^:private ?on-option-press
20+
[:map
21+
[:on-options-press [:maybe fn?]]])
22+
23+
(def ?schema
24+
[:=>
25+
[:cat
26+
[:multi {:dispatch :action}
27+
[:icon [:merge ?base ?on-option-press]]
28+
[:none ?base]
29+
[:malli.core/default ?base]]]
30+
:any])

Diff for: ‎src/quo/components/list_items/account_list_card/view.cljs

+6-2
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@
22
(:require
33
[quo.components.avatars.account-avatar.view :as account-avatar]
44
[quo.components.icon :as icon]
5+
[quo.components.list-items.account-list-card.schema :as component-schema]
56
[quo.components.list-items.account-list-card.style :as style]
67
[quo.components.markdown.text :as text]
78
[quo.components.wallet.address-text.view :as address-text]
89
[quo.foundations.colors :as colors]
910
[quo.theme :as quo.theme]
1011
[react-native.core :as rn]
11-
[reagent.core :as reagent]))
12+
[reagent.core :as reagent]
13+
[schema.core :as schema]))
1214

1315
(defn- internal-view
1416
[]
@@ -39,4 +41,6 @@
3941
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme))
4042
:accessibility-label :icon}]])])))
4143

42-
(def view (quo.theme/with-theme internal-view))
44+
(def view
45+
(quo.theme/with-theme
46+
(schema/instrument #'internal-view component-schema/?schema)))

Diff for: ‎src/quo/components/list_items/address/component_spec.cljs

+10-6
Original file line numberDiff line numberDiff line change
@@ -4,39 +4,43 @@
44
[quo.foundations.colors :as colors]
55
[test-helpers.component :as h]))
66

7+
(defn- with-defaults
8+
([] (with-defaults {}))
9+
([props] (merge {:address "0x0ah...78b"} props)))
10+
711
(h/describe "List items: address"
812
(h/test "default render"
9-
(h/render [address/view])
13+
(h/render-with-theme-provider [address/view (with-defaults)])
1014
(h/is-truthy (h/query-by-label-text :container)))
1115

1216
(h/test "on-press-in changes state to :pressed"
13-
(h/render [address/view])
17+
(h/render-with-theme-provider [address/view (with-defaults)])
1418
(h/fire-event :on-press-in (h/get-by-label-text :container))
1519
(h/wait-for #(h/has-style (h/query-by-label-text :container)
1620
{:backgroundColor (colors/custom-color :blue 50 5)})))
1721

1822
(h/test "on-press-in changes state to :pressed with blur? enabled"
19-
(h/render [address/view {:blur? true}])
23+
(h/render-with-theme-provider [address/view (with-defaults {:blur? true})])
2024
(h/fire-event :on-press-in (h/get-by-label-text :container))
2125
(h/wait-for #(h/has-style (h/query-by-label-text :container)
2226
{:backgroundColor colors/white-opa-5})))
2327

2428
(h/test "on-press-out changes state to :active"
25-
(h/render [address/view {:active-state? true}])
29+
(h/render-with-theme-provider [address/view (with-defaults {:active-state? true})])
2630
(h/fire-event :on-press-in (h/get-by-label-text :container))
2731
(h/fire-event :on-press-out (h/get-by-label-text :container))
2832
(h/wait-for #(h/has-style (h/query-by-label-text :container)
2933
{:backgroundColor (colors/custom-color :blue 50 10)})))
3034

3135
(h/test "on-press-out changes state to :active with blur? enabled"
32-
(h/render [address/view {:active-state? true :blur? true}])
36+
(h/render-with-theme-provider [address/view (with-defaults {:active-state? true :blur? true})])
3337
(h/fire-event :on-press-in (h/get-by-label-text :container))
3438
(h/fire-event :on-press-out (h/get-by-label-text :container))
3539
(h/wait-for #(h/has-style (h/query-by-label-text :container)
3640
{:backgroundColor colors/white-opa-10})))
3741

3842
(h/test "on-press event is called"
3943
(let [on-press (h/mock-fn)]
40-
(h/render [address/view {:on-press on-press}])
44+
(h/render-with-theme-provider [address/view (with-defaults {:on-press on-press})])
4145
(h/fire-event :on-press (h/get-by-label-text :container))
4246
(h/was-called on-press))))

Diff for: ‎src/quo/components/list_items/address/schema.cljs

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
(ns quo.components.list-items.address.schema)
2+
3+
(def ?schema
4+
[:=>
5+
[:cat
6+
[:map
7+
[:address :string]
8+
[:networks {:optional true} [:* [:map [:network-name :keyword] [:short-name :string]]]]
9+
[:customization-color {:optional true} [:maybe :schema.common/customization-color]]
10+
[:on-press {:optional true} [:maybe fn?]]
11+
[:blur? {:optional true} [:maybe :boolean]]
12+
[:theme :schema.common/theme]
13+
[:active-state? {:optional true} [:maybe :boolean]]]]
14+
:any])

Diff for: ‎src/quo/components/list_items/address/view.cljs

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
(ns quo.components.list-items.address.view
22
(:require
33
[quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar]
4+
(quo.components.list-items.address.schema :as component-schema)
45
[quo.components.list-items.address.style :as style]
56
[quo.components.markdown.text :as text]
67
[quo.foundations.colors :as colors]
78
[quo.theme :as quo.theme]
89
[react-native.core :as rn]
910
[reagent.core :as reagent]
11+
[schema.core :as schema]
1012
[utils.address :as address]))
1113

1214
(defn- left-container
@@ -64,4 +66,7 @@
6466
:address address
6567
:blur? blur?}]]))))
6668

67-
(def view (quo.theme/with-theme internal-view))
69+
(def view
70+
(quo.theme/with-theme
71+
(schema/instrument #'internal-view component-schema/?schema)))
72+

0 commit comments

Comments
 (0)