From 554f8aff0946a49d659e710974d01afb08549fab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ulises=20Manuel=20C=C3=A1rdenas?= <90291778+ulisesmac@users.noreply.github.com> Date: Tue, 21 Mar 2023 12:28:02 -0600 Subject: [PATCH] Add input tests Also fixes text align on non-multiline inputs --- .../inputs/input/component_spec.cljs | 70 +++++++++++++++++++ src/quo2/components/inputs/input/style.cljs | 18 ++--- src/quo2/components/inputs/input/view.cljs | 38 ++++++---- src/quo2/core_spec.cljs | 5 +- src/test_helpers/component.cljs | 5 ++ 5 files changed, 110 insertions(+), 26 deletions(-) create mode 100644 src/quo2/components/inputs/input/component_spec.cljs diff --git a/src/quo2/components/inputs/input/component_spec.cljs b/src/quo2/components/inputs/input/component_spec.cljs new file mode 100644 index 0000000000..bd8f3d2499 --- /dev/null +++ b/src/quo2/components/inputs/input/component_spec.cljs @@ -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))))) diff --git a/src/quo2/components/inputs/input/style.cljs b/src/quo2/components/inputs/input/style.cljs index b6d1a6ad7e..2e5d259551 100644 --- a/src/quo2/components/inputs/input/style.cljs +++ b/src/quo2/components/inputs/input/style.cljs @@ -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?] diff --git a/src/quo2/components/inputs/input/view.cljs b/src/quo2/components/inputs/input/view.cljs index 191b3c4bd9..5d97d5572f 100644 --- a/src/quo2/components/inputs/input/view.cljs +++ b/src/quo2/components/inputs/input/view.cljs @@ -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: diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index 9cfa4dbfa3..66d48214b5 100644 --- a/src/quo2/core_spec.cljs +++ b/src/quo2/core_spec.cljs @@ -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])) diff --git a/src/test_helpers/component.cljs b/src/test_helpers/component.cljs index 790bdc7035..22fbbc4362 100644 --- a/src/test_helpers/component.cljs +++ b/src/test_helpers/component.cljs @@ -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)))