From 6a05d43b759dbf3daabe646e23db2ae9266df238 Mon Sep 17 00:00:00 2001 From: Jamie Caprani Date: Tue, 13 Dec 2022 22:19:20 +0000 Subject: [PATCH] chore: add some component tests (#14511) --- .gitignore | 3 + .../__tests__/counter_component_spec.cljs | 34 +++++++++ src/quo2/components/counter/counter.cljs | 3 +- .../action_drawers_component_spec.cljs | 63 ++++++++++++++++ .../components/drawers/action_drawers.cljs | 23 ++++-- .../__tests__/selectors_component_spec.cljs | 74 ++++++++++++++++++- src/quo2/components/selectors/selectors.cljs | 9 ++- src/quo2/core_spec.cljs | 4 +- 8 files changed, 198 insertions(+), 15 deletions(-) create mode 100644 src/quo2/components/counter/__tests__/counter_component_spec.cljs create mode 100644 src/quo2/components/drawers/__tests__/action_drawers_component_spec.cljs diff --git a/.gitignore b/.gitignore index 6868c2f710..348a11dc83 100644 --- a/.gitignore +++ b/.gitignore @@ -181,3 +181,6 @@ test/appium/tests/users.py /artifacts /.calva/ + +## component-tests +*.log \ No newline at end of file diff --git a/src/quo2/components/counter/__tests__/counter_component_spec.cljs b/src/quo2/components/counter/__tests__/counter_component_spec.cljs new file mode 100644 index 0000000000..ef00cabbd3 --- /dev/null +++ b/src/quo2/components/counter/__tests__/counter_component_spec.cljs @@ -0,0 +1,34 @@ +(ns quo2.components.counter.--tests--.counter-component-spec + (:require ["@testing-library/react-native" :as rtl] + [quo2.components.counter.counter :as counter] + [reagent.core :as reagent])) + +(defn render-counter + ([] + (render-counter {} nil)) + ([opts value] + (rtl/render (reagent/as-element [counter/counter opts value])))) + +(js/global.test "default render of counter component" + (fn [] + (render-counter) + (-> (js/expect (rtl/screen.getByTestId "counter-component")) + (.toBeTruthy)))) + +(js/global.test "renders counter with a string value" + (fn [] + (render-counter {} "1") + (-> (js/expect (rtl/screen.getByText "1")) + (.toBeTruthy)))) + +(js/global.test "renders counter with an integer value" + (fn [] + (render-counter {} 1) + (-> (js/expect (rtl/screen.getByText "1")) + (.toBeTruthy)))) + +(js/global.test "renders counter with value 99+ when the value is greater than 99" + (fn [] + (render-counter {} "100") + (-> (js/expect (rtl/screen.getByText "99+")) + (.toBeTruthy)))) \ No newline at end of file diff --git a/src/quo2/components/counter/counter.cljs b/src/quo2/components/counter/counter.cljs index 7bad174661..51334f9e27 100644 --- a/src/quo2/components/counter/counter.cljs +++ b/src/quo2/components/counter/counter.cljs @@ -38,7 +38,8 @@ 1 16 2 20 28)] - [rn/view {:accessible true + [rn/view {:test-ID :counter-component + :accessible true :accessibility-label accessibility-label :style (cond-> (merge {:align-items :center diff --git a/src/quo2/components/drawers/__tests__/action_drawers_component_spec.cljs b/src/quo2/components/drawers/__tests__/action_drawers_component_spec.cljs new file mode 100644 index 0000000000..d8dc290976 --- /dev/null +++ b/src/quo2/components/drawers/__tests__/action_drawers_component_spec.cljs @@ -0,0 +1,63 @@ +(ns quo2.components.drawers.--tests--.action-drawers-component-spec + (:require ["@testing-library/react-native" :as rtl] + [quo2.components.drawers.action-drawers :as action-drawer] + [reagent.core :as reagent])) + +(defn render-action-drawer + ([options] + (rtl/render (reagent/as-element [action-drawer/action-drawer options])))) + +(js/global.test "action-drawer renders with elements label displaying" + (fn [] + (render-action-drawer [[{:icon :i/friend + :label "a sample label"}]]) + (-> (js/expect (rtl/screen.getByText "a sample label")) + (.toBeTruthy)))) + +(js/global.test "action-drawer renders with elements sub-label displaying" + (fn [] + (render-action-drawer [[{:icon :i/friend + :label "a sample label" + :sub-label "a sample sub label"}]]) + (-> (js/expect (rtl/screen.getByText "a sample sub label")) + (.toBeTruthy)))) + +(js/global.test "action-drawer on click action works on element" + (let [event (js/jest.fn)] + (fn [] + (render-action-drawer [[{:icon :i/friend + :label "a sample label" + :on-press event}]]) + (rtl/fireEvent.press (rtl/screen.getByText "a sample label")) + (-> (js/expect event) + (.toHaveBeenCalled))))) + +(js/global.test "action-drawer renders two icons when set" + (fn [] + (render-action-drawer [[{:icon :i/friend + :label "a sample label" + :right-icon :i/friend + :accessibility-label :first-element}]]) + (-> (js/expect (rtl/screen.getByLabelText "right-icon-for-action")) + (.toBeTruthy)) + (-> (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 + :label "a sample label" + :add-divider? true + :accessibility-label :first-element}]]) + (-> (js/expect (rtl/screen.getAllByLabelText "divider")) + (.toBeTruthy)))) \ No newline at end of file diff --git a/src/quo2/components/drawers/action_drawers.cljs b/src/quo2/components/drawers/action_drawers.cljs index c70f9bd28a..c25d22832b 100644 --- a/src/quo2/components/drawers/action_drawers.cljs +++ b/src/quo2/components/drawers/action_drawers.cljs @@ -9,14 +9,16 @@ colors/danger-50 (colors/theme-colors colors/neutral-50 colors/neutral-40))) -(defn divider [] +(def divider [rn/view {:style {:border-top-width 1 :border-top-color (colors/theme-colors colors/neutral-10 colors/neutral-90) :margin-top 8 :margin-bottom 7 :align-items :center - :flex-direction :row}}]) + :flex-direction :row} + :accessible true + :accessibility-label :divider}]) (defn action [{:keys [icon label @@ -24,21 +26,24 @@ right-icon danger? on-press - add-divider?] :as action-props}] + add-divider? + accessibility-label] :as action-props}] (when action-props [:<> {:key label} - (when add-divider? [divider]) - [rn/touchable-highlight {:style {:border-radius 12 + (when add-divider? divider) + [rn/touchable-highlight {:accessibility-label accessibility-label + :style {:border-radius 12 :height (if sub-label 58 50) :margin-horizontal 8} :underlay-color (colors/theme-colors colors/neutral-5 colors/neutral-90) :on-press on-press} [rn/view {:style {:height (if sub-label 58 50) - :margin-horizontal 12 :flex-direction :row}} - [rn/view {:style + [rn/view {:accessibility-label :left-icon-for-action + :accessible true + :style {:height 20 :margin-top :auto :margin-bottom :auto @@ -69,7 +74,9 @@ {:height 20 :margin-top :auto :margin-bottom :auto - :width 20}} + :width 20} + :accessible true + :accessibility-label :right-icon-for-action} [icon/icon right-icon {:color (get-icon-color danger?) :size 20}]])]]])) diff --git a/src/quo2/components/selectors/__tests__/selectors_component_spec.cljs b/src/quo2/components/selectors/__tests__/selectors_component_spec.cljs index 9ab829cfbd..be61f7c3e8 100644 --- a/src/quo2/components/selectors/__tests__/selectors_component_spec.cljs +++ b/src/quo2/components/selectors/__tests__/selectors_component_spec.cljs @@ -5,10 +5,80 @@ (defn render-toggle ([] - (rtl/render (reagent/as-element [selectors/toggle {:disabled? (:disabled? false)}])))) + (render-toggle {})) + ([opts] + (rtl/render (reagent/as-element [selectors/toggle opts])))) + +(defn render-checkbox + ([] + (render-checkbox {})) + ([opts] + (rtl/render (reagent/as-element [selectors/checkbox opts])))) + +(defn render-checkbox-prefill + ([] + (render-checkbox-prefill {})) + ([opts] + (rtl/render (reagent/as-element [selectors/checkbox-prefill opts])))) + +(defn render-radio + ([] + (render-radio {})) + ([opts] + (rtl/render (reagent/as-element [selectors/radio opts])))) (js/global.test "default render of toggle component" (fn [] (render-toggle) (-> (js/expect (rtl/screen.getByTestId "toggle-component")) - (.toBeTruthy)))) \ No newline at end of file + (.toBeTruthy)))) + +(js/global.test "toggle component on change is working" + (let [mock-fn (js/jest.fn)] + (fn [] + (render-toggle {:on-change mock-fn}) + (rtl/fireEvent.press (rtl/screen.getByTestId "toggle-component")) + (-> (js/expect mock-fn) + (.toHaveBeenCalledTimes 1))))) + +(js/global.test "default render of radio component" + (fn [] + (render-radio) + (-> (js/expect (rtl/screen.getByTestId "radio-component")) + (.toBeTruthy)))) + +(js/global.test "radio component on change is working" + (let [mock-fn (js/jest.fn)] + (fn [] + (render-radio {:on-change mock-fn}) + (rtl/fireEvent.press (rtl/screen.getByTestId "radio-component")) + (-> (js/expect mock-fn) + (.toHaveBeenCalledTimes 1))))) + +(js/global.test "default render of checkbox component" + (fn [] + (render-checkbox) + (-> (js/expect (rtl/screen.getByTestId "checkbox-component")) + (.toBeTruthy)))) + +(js/global.test "checkbox component on change is working" + (let [mock-fn (js/jest.fn)] + (fn [] + (render-checkbox {:on-change mock-fn}) + (rtl/fireEvent.press (rtl/screen.getByTestId "checkbox-component")) + (-> (js/expect mock-fn) + (.toHaveBeenCalledTimes 1))))) + +(js/global.test "default render of checkbox-prefill component" + (fn [] + (render-checkbox-prefill) + (-> (js/expect (rtl/screen.getByTestId "checkbox-prefill-component")) + (.toBeTruthy)))) + +(js/global.test "checkbox-prefill component on change is working" + (let [mock-fn (js/jest.fn)] + (fn [] + (render-checkbox-prefill {:on-change mock-fn}) + (rtl/fireEvent.press (rtl/screen.getByTestId "checkbox-prefill-component")) + (-> (js/expect mock-fn) + (.toHaveBeenCalledTimes 1))))) \ No newline at end of file diff --git a/src/quo2/components/selectors/selectors.cljs b/src/quo2/components/selectors/selectors.cljs index dd2ae85ebb..c50753acc0 100644 --- a/src/quo2/components/selectors/selectors.cljs +++ b/src/quo2/components/selectors/selectors.cljs @@ -43,7 +43,8 @@ (colors/alpha colors/neutral-20 (if disabled? 0.3 1)) (colors/alpha colors/neutral-70 (if disabled? 0.3 1))))}) :accessibility-label (str "checkbox-" (if @checked? "on" "off")) - :accessibility-role :checkbox} + :accessibility-role :checkbox + :testID "checkbox-prefill-component"} (when @checked? [rn/view {:style {:height 20 @@ -82,7 +83,8 @@ :border-color (if @checked? :none (get-color @checked? disabled? blurred-background?))} :accessibility-label (str "checkbox-" (if @checked? "on" "off")) - :accessibility-role :checkbox} + :accessibility-role :checkbox + :testID "checkbox-component"} (when @checked? [rn/view {:style {:height 20 @@ -108,7 +110,8 @@ (colors/theme-colors colors/white (colors/alpha colors/neutral-80 0.4)))}) :accessibility-label (str "radio-" (if @checked? "on" "off")) - :accessibility-role :checkbox} + :accessibility-role :checkbox + :testID "radio-component"} [rn/view {:style {:margin-left :auto diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index c8baa5ac88..ddab67d566 100644 --- a/src/quo2/core_spec.cljs +++ b/src/quo2/core_spec.cljs @@ -1,2 +1,4 @@ (ns quo2.core-spec - (:require [quo2.components.selectors.--tests--.selectors-component-spec])) + (:require [quo2.components.selectors.--tests--.selectors-component-spec] + [quo2.components.counter.--tests--.counter-component-spec] + [quo2.components.drawers.--tests--.action-drawers-component-spec]))