status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add input tests 

Also fixes text align on non-multiline inputs
This commit is contained in:
Ulises Manuel Cárdenas 2023-03-21 12:28:02 -06:00 committed by GitHub
parent d71cfd12c1
commit 554f8aff09
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 110 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/quo2/components/inputs/input/component_spec.cljs Normal file
View File

@ -0,0 +1,70 @@
(ns quo2.components.inputs.input.component-spec
(:require [quo2.components.inputs.input.view :as input]
[test-helpers.component :as h]))
(h/describe "Input"
(h/test "default render"
(h/render [input/input])
(h/is-truthy (h/query-by-label-text :input))
(h/is-null (h/query-by-label-text :password-input)))
(h/test "Password type"
(h/render [input/input {:type :password}])
(h/is-truthy (h/query-by-label-text :password-input))
(h/is-null (h/query-by-label-text :input)))
(h/describe "Icon"
(h/test "Doesn't exist in base input"
(h/render [input/input])
(h/is-null (h/query-by-label-text :input-icon)))
(h/test "Renders"
(h/render [input/input {:icon-name :i/placeholder}])
(h/is-truthy (h/get-by-label-text :input-icon))))
(h/describe "Right accessory"
(h/test "Doesn't exist in base input"
(h/render [input/input])
(h/is-null (h/query-by-label-text :input-right-icon)))
(h/test "Clear icon"
(h/render [input/input {:clearable? true}])
(h/is-truthy (h/query-by-label-text :input-right-icon)))
(h/test "Password icon"
(h/render [input/input {:type :password}])
(h/is-truthy (h/query-by-label-text :input-right-icon))))
(h/describe "Button"
(h/test "Doesn't exist in base input"
(h/render [input/input])
(h/is-null (h/query-by-label-text :input-button)))
(h/test "Renders with given text and it's pressable"
(let [button-text "This is a button"
button-callback (h/mock-fn)]
(h/render [input/input
{:button {:on-press button-callback
:text button-text}}])
(h/is-truthy (h/query-by-label-text :input-button))
(h/is-truthy (h/get-by-text button-text))
(h/fire-event :press (h/query-by-label-text :input-button))
(h/was-called button-callback))))
(h/describe "Label"
(h/test "Doesn't exist in base input"
(h/render [input/input])
(h/is-null (h/query-by-label-text :input-labels)))
(h/test "Renders with specified text"
(let [input-label "My label"]
(h/render [input/input {:label input-label}])
(h/is-truthy (h/query-by-label-text :input-labels))
(h/is-truthy (h/get-by-text input-label)))))
(h/test "Char limit counter"
(let [char-limit 100
char-limit-str (str "0/" char-limit)]
(h/render [input/input {:char-limit char-limit}])
(h/is-truthy (h/query-by-label-text :input-labels))
(h/is-truthy (h/get-by-text char-limit-str)))))

18
src/quo2/components/inputs/input/style.cljs
View File

@ -83,15 +83,15 @@
(defn input
[colors-by-status small? multiple-lines?]
(merge (text/text-style {:size :paragraph-1 :weight :regular})
{:flex 1
:text-align-vertical :top
:padding-right 0
:padding-left (if small? 4 8)
:padding-vertical (if small? 4 8)
:color (:text colors-by-status)}
(when-not multiple-lines?
{:height (if small? 30 38)})))
(let [base-props (assoc (text/text-style {:size :paragraph-1 :weight :regular})
:flex 1
:padding-right 0
:padding-left (if small? 4 8)
:padding-vertical (if small? 4 8)
:color (:text colors-by-status))]
(if multiple-lines?
(assoc base-props :text-align-vertical :top)
(assoc base-props :height (if small? 30 38)))))
(defn right-icon-touchable-area
[small?]

38
src/quo2/components/inputs/input/view.cljs
View File

@ -9,7 +9,9 @@
(defn- label-&-counter
[{:keys [label current-chars char-limit variant-colors]}]
(let [count-text (when char-limit (str current-chars "/" char-limit))]
[rn/view {:style style/texts-container}
[rn/view
{:accessibility-label :input-labels
:style style/texts-container}
[rn/view {:style style/label-container}
[text/text
{:style (style/label-color variant-colors)
@ -25,23 +27,27 @@
(defn- left-accessory
[{:keys [variant-colors small? icon-name]}]
[rn/view {:style (style/left-icon-container small?)}
[rn/view
{:accessibility-label :input-icon
:style (style/left-icon-container small?)}
[icon/icon icon-name (style/icon variant-colors)]])
(defn- right-accessory
[{:keys [variant-colors small? disabled? on-press icon-style-fn icon-name]}]
[rn/touchable-opacity
{:style (style/right-icon-touchable-area small?)
:disabled disabled?
:on-press on-press}
{:accessibility-label :input-right-icon
:style (style/right-icon-touchable-area small?)
:disabled disabled?
:on-press on-press}
[icon/icon icon-name (icon-style-fn variant-colors)]])
(defn- right-button
[{:keys [variant-colors colors-by-status small? disabled? on-press text]}]
[rn/touchable-opacity
{:style (style/button variant-colors small?)
:disabled disabled?
:on-press on-press}
{:accessibility-label :input-button
:style (style/button variant-colors small?)
:disabled disabled?
:on-press on-press}
[rn/text {:style (style/button-text colors-by-status)}
text]])
@ -92,6 +98,7 @@
:icon-name icon-name}])
[rn/text-input
(cond-> {:style (style/input colors-by-status small? @multiple-lines?)
:accessibility-label :input
:placeholder-text-color (:placeholder colors-by-status)
:cursor-color (:cursor variant-colors)
:editable (not disabled?)
@ -126,12 +133,13 @@
(fn [props]
[base-input
(assoc props
:auto-capitalize :none
:auto-complete :new-password
:secure-text-entry (not @password-shown?)
:right-icon {:style-fn style/password-icon
:icon-name (if @password-shown? :i/hide :i/reveal)
:on-press #(swap! password-shown? not)})])))
:accessibility-label :password-input
:auto-capitalize :none
:auto-complete :new-password
:secure-text-entry (not @password-shown?)
:right-icon {:style-fn style/password-icon
:icon-name (if @password-shown? :i/hide :i/reveal)
:on-press #(swap! password-shown? not)})])))
(defn input
"This input supports the following properties:
@ -146,7 +154,7 @@
- :clearable? - Booolean to specify if this input has a clear button at the end.
- :on-clear - Function executed when the clear button is pressed.
- :button - Map containing `:on-press` & `:text` keys, if provided renders a button
- :label - A label for this input.
- :label - A string to set as label for this input.
- :char-limit - A number to set a maximum char limit for this input.
- :on-char-limit-reach - Function executed each time char limit is reached or exceeded.
and supports the usual React Native's TextInput properties to control its behaviour:

5
src/quo2/core_spec.cljs
View File

@ -2,21 +2,22 @@
(:require [quo2.components.avatars.user-avatar.component-spec]
[quo2.components.banners.banner.component-spec]
[quo2.components.buttons.--tests--.buttons-component-spec]
[quo2.components.colors.color-picker.component-spec]
[quo2.components.counter.--tests--.counter-component-spec]
[quo2.components.dividers.--tests--.divider-label-component-spec]
[quo2.components.dividers.strength-divider.component-spec]
[quo2.components.drawers.action-drawers.component-spec]
[quo2.components.drawers.drawer-buttons.component-spec]
[quo2.components.drawers.permission-context.component-spec]
[quo2.components.colors.color-picker.component-spec]
[quo2.components.inputs.input.component-spec]
[quo2.components.inputs.profile-input.component-spec]
[quo2.components.inputs.title-input.component-spec]
[quo2.components.markdown.--tests--.text-component-spec]
[quo2.components.onboarding.small-option-card.component-spec]
[quo2.components.password.tips.component-spec]
[quo2.components.profile.select-profile.component-spec]
[quo2.components.record-audio.record-audio.--tests--.record-audio-component-spec]
[quo2.components.record-audio.soundtrack.--tests--.soundtrack-component-spec]
[quo2.components.profile.select-profile.component-spec]
[quo2.components.selectors.--tests--.selectors-component-spec]
[quo2.components.selectors.filter.component-spec]
[quo2.components.tags.--tests--.status-tags-component-spec]))

5
src/test_helpers/component.cljs
View File

@ -39,6 +39,7 @@
(rtl/screen.getByLabelText (name label)))
(defn query-by-label-text
"Returns `nil` when label is not found."
[label]
(rtl/screen.queryByLabelText (name label)))
@ -71,3 +72,7 @@
(defn is-null
[element]
(.toBeNull (js/expect element)))
(defn was-called
[element]
(.toHaveBeenCalled (js/expect element)))