Add input tests

Also fixes text align on non-multiline inputs

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)))))

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})
+  (let [base-props (assoc (text/text-style {:size :paragraph-1 :weight :regular})
-         {:flex                1
+                          :flex             1
-          :text-align-vertical :top
+                          :padding-right    0
-          :padding-right       0
+                          :padding-left     (if small? 4 8)
-          :padding-left        (if small? 4 8)
+                          :padding-vertical (if small? 4 8)
-          :padding-vertical    (if small? 4 8)
+                          :color            (:text colors-by-status))]
-          :color               (:text colors-by-status)}
+    (if multiple-lines?
-         (when-not multiple-lines?
+      (assoc base-props :text-align-vertical :top)
-           {:height (if small? 30 38)})))
+      (assoc base-props :height (if small? 30 38)))))
 
 (defn right-icon-touchable-area
   [small?]

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?)
+   {:accessibility-label :input-right-icon
-    :disabled disabled?
+    :style               (style/right-icon-touchable-area small?)
-    :on-press on-press}
+    :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?)
+   {:accessibility-label :input-button
-    :disabled disabled?
+    :style               (style/button variant-colors small?)
-    :on-press on-press}
+    :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
+              :accessibility-label :password-input
-              :auto-complete     :new-password
+              :auto-capitalize     :none
-              :secure-text-entry (not @password-shown?)
+              :auto-complete       :new-password
-              :right-icon        {:style-fn  style/password-icon
+              :secure-text-entry   (not @password-shown?)
-                                  :icon-name (if @password-shown? :i/hide :i/reveal)
+              :right-icon          {:style-fn  style/password-icon
-                                  :on-press  #(swap! password-shown? not)})])))
+                                    :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:

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]))

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)))