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

chore: add component tests (#14538)

This commit is contained in:
Jamie Caprani 2022-12-21 23:35:27 +00:00 committed by GitHub
parent 3dda878742
commit 2610f27190
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 114 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/quo2/components/buttons/__tests__/buttons_component_spec.cljs Normal file
View File

@ -0,0 +1,28 @@
(ns quo2.components.buttons.--tests--.buttons-component-spec
(:require ["@testing-library/react-native" :as rtl]
[quo2.components.buttons.button :as button]
[reagent.core :as reagent]))
(defn render-button
([options label]
(rtl/render (reagent/as-element [button/button options label]))))
(js/global.test "default render of button component"
(fn []
(render-button {:accessibility-label "test-button"} "")
(-> (js/expect (rtl/screen.getByLabelText "test-button"))
(.toBeTruthy))))
(js/global.test "button renders with a label"
(fn []
(render-button {} "test-label")
(-> (js/expect (rtl/screen.getByText "test-label"))
(.toBeTruthy))))
(js/global.test "button on-press works"
(let [event (js/jest.fn)]
(fn []
(render-button {:on-press event} "test-label")
(rtl/fireEvent.press (rtl/screen.getByText "test-label"))
(-> (js/expect event)
(.toHaveBeenCalledTimes 1)))))

45
src/quo2/components/dividers/__tests__/divider_label_component_spec.cljs Normal file
View File

@ -0,0 +1,45 @@
(ns quo2.components.dividers.--tests--.divider-label-component-spec
(:require ["@testing-library/react-native" :as rtl]
[quo2.components.dividers.divider-label :as divider-label]
[reagent.core :as reagent]))
(defn render-divider-label
([]
(render-divider-label {}))
([opts]
(rtl/render (reagent/as-element [divider-label/divider-label opts]))))
(js/global.test "default render of divider-label component"
(fn []
(render-divider-label)
(-> (js/expect (rtl/screen.getByLabelText "divider-label"))
(.toBeTruthy))))
(js/global.test "render divider-label component with a label"
(fn []
(render-divider-label {:label :hello})
(-> (js/expect (rtl/screen.getByText "hello"))
(.toBeTruthy))))
(js/global.test "render divider-label component with a counter-value"
(fn []
(render-divider-label {:label :hello
:counter-value "1"})
(-> (js/expect (rtl/screen.getByText "1"))
(.toBeTruthy))))
(js/global.test "divider-label chevron icon renders to the left when set"
(fn []
(render-divider-label {:label :hello
:counter-value "1"
:chevron-position :left})
(-> (js/expect (rtl/screen.getByTestId "divider-label-icon-left"))
(.toBeTruthy))))
(js/global.test "divider-label chevron icon renders to the right when set"
(fn []
(render-divider-label {:label :hello
:counter-value "1"
:chevron-position :right})
(-> (js/expect (rtl/screen.getByTestId "divider-label-icon-right"))
(.toBeTruthy))))

39
src/quo2/components/dividers/divider_label.cljs
View File

@ -15,22 +15,22 @@
increase-padding-top? -> boolean
blur? -> boolean"
[{:keys [label chevron-position counter-value increase-padding-top? blur?]}]
(let [dark? (colors/dark?)
border-and-counter-bg-color (if dark?
(if blur? colors/white-opa-5 colors/neutral-70)
colors/neutral-10)
padding-top (if increase-padding-top? 16 8)
text-and-icon-color (if dark? colors/neutral-40 colors/neutral-50)
counter-text-color (if dark? colors/white colors/neutral-100)]
[rn/view
{:style {:border-top-width 1
:border-top-color border-and-counter-bg-color
:padding-top padding-top
:padding-horizontal 16
:align-items :center
:flex-direction :row}}
(let [dark? (colors/dark?)
border-and-counter-bg-color (if dark? (if blur? colors/white-opa-5 colors/neutral-70) colors/neutral-10)
padding-top (if increase-padding-top? 16 8)
text-and-icon-color (if dark? colors/neutral-40 colors/neutral-50)
counter-text-color (if dark? colors/white colors/neutral-100)]
[rn/view {:accessible true
:accessibility-label :divider-label
:style {:border-top-width 1
:border-top-color border-and-counter-bg-color
:padding-top padding-top
:padding-horizontal 16
:align-items :center
:flex-direction :row}}
(when (= chevron-position :left)
[rn/view {:style {:margin-right 4}}
[rn/view {:test-ID :divider-label-icon-left
:style {:margin-right 4}}
[icons/icon
:main-icons/chevron-down
{:color text-and-icon-color
@ -43,10 +43,11 @@
:flex 1}}
label]
(when (= chevron-position :right)
[icons/icon
:main-icons/chevron-down
{:color text-and-icon-color
:size chevron-icon-container-width}])
[rn/view {:test-ID :divider-label-icon-right}
[icons/icon
:main-icons/chevron-down
{:color text-and-icon-color
:size chevron-icon-container-width}]])
(when (pos? counter-value)
[rn/view
{:style {:border-radius 6

10
src/quo2/components/drawers/__tests__/action_drawers_component_spec.cljs
View File

@ -43,16 +43,6 @@
(-> (js/expect (rtl/screen.queryByLabelText "left-icon-for-action"))
(.toBeTruthy))))
(js/global.test "action-drawer does not render a divider when the add-divider? prop is false"
(fn []
(render-action-drawer [[{:icon :i/friend
:label "a sample label"
:add-divider? false
:accessibility-label :first-element}]])
(-> (js/expect (rtl/screen.getAllByLabelText "divider"))
(.not)
(.toBeTruthy))))
(js/global.test "action-drawer renders a divider when the add-divider? prop is true"
(fn []
(render-action-drawer [[{:icon :i/friend

14
src/quo2/components/markdown/__tests__/text_component_spec.cljs Normal file
View File

@ -0,0 +1,14 @@
(ns quo2.components.markdown.--tests--.text-component-spec
(:require ["@testing-library/react-native" :as rtl]
[quo2.components.markdown.text :as text]
[reagent.core :as reagent]))
(defn render-text
([options value]
(rtl/render (reagent/as-element [text/text options value]))))
(js/global.test "text renders with text"
(fn []
(render-text {} "hello")
(-> (js/expect (rtl/screen.getByText "hello"))
(.toBeTruthy))))

10
src/quo2/core_spec.cljs
View File

@ -1,4 +1,8 @@
(ns quo2.core-spec
(:require [quo2.components.counter.--tests--.counter-component-spec]
[quo2.components.drawers.--tests--.action-drawers-component-spec]
[quo2.components.selectors.--tests--.selectors-component-spec]))
(:require
[quo2.components.buttons.--tests--.buttons-component-spec]
[quo2.components.counter.--tests--.counter-component-spec]
[quo2.components.dividers.--tests--.divider-label-component-spec]
[quo2.components.drawers.--tests--.action-drawers-component-spec]
[quo2.components.markdown.--tests--.text-component-spec]
[quo2.components.selectors.--tests--.selectors-component-spec]))