From 0dd3cb51fd936f845e6c4c72a3e80cf32e440bb3 Mon Sep 17 00:00:00 2001 From: Icaro Motta Date: Wed, 31 May 2023 21:25:19 -0300 Subject: [PATCH] Improve option to mark all notifications read (#16044) - [x] Use correct icon to mark notifications as read - [x] Add support for the disabled state in action drawer actions - [x] Update quo2 preview `drawers` > `action-drawers` - [x] Rewrite the action drawer component spec to use our test helpers Fixes https://github.com/status-im/status-mobile/issues/14983 --- .../action_drawers/component_spec.cljs | 101 ++++++++++-------- .../drawers/action_drawers/style.cljs | 3 +- .../drawers/action_drawers/view.cljs | 13 ++- .../contexts/activity_center/view.cljs | 22 ++-- .../quo_preview/drawers/action_drawers.cljs | 10 +- src/test_helpers/component.cljs | 4 + 6 files changed, 87 insertions(+), 66 deletions(-) diff --git a/src/quo2/components/drawers/action_drawers/component_spec.cljs b/src/quo2/components/drawers/action_drawers/component_spec.cljs index 25b516ee3e..638f0e38b9 100644 --- a/src/quo2/components/drawers/action_drawers/component_spec.cljs +++ b/src/quo2/components/drawers/action_drawers/component_spec.cljs @@ -1,53 +1,62 @@ (ns quo2.components.drawers.action-drawers.component-spec - (:require ["@testing-library/react-native" :as rtl] - [quo2.components.drawers.action-drawers.view :as action-drawer] - [reagent.core :as reagent])) + (:require [quo2.components.drawers.action-drawers.view :as action-drawer] + [test-helpers.component :as h])) -(defn render-action-drawer - ([options] - (rtl/render (reagent/as-element [action-drawer/action-drawer options])))) +(h/describe "action drawer" + (h/test "default render" + (h/render [action-drawer/action-drawer + [[{:icon :i/friend + :label "a sample label"}]]]) + (h/is-truthy (h/get-by-text "a sample label"))) -(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)))) + (h/test "renders with elements sub-label displaying" + (h/render [action-drawer/action-drawer + [[{:icon :i/friend + :label "a sample label" + :sub-label "a sample sub label"}]]]) + (h/is-truthy (h/get-by-text "a sample sub label"))) -(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)))) + (h/test "on click action works on element" + (let [on-press (js/jest.fn)] + (h/render [action-drawer/action-drawer + [[{:icon :i/friend + :label "a sample label" + :on-press on-press}]]]) + (h/fire-event :press (h/get-by-text "a sample label")) + (h/was-called on-press))) -(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))))) + (h/test "disabled state" + (let [on-press-muted (js/jest.fn) + on-press-friend (js/jest.fn) + label-mute "Mute" + label-friend "View member details"] + (h/render [action-drawer/action-drawer + [[{:icon :i/muted + :label label-mute + :on-press on-press-muted} + {:icon :i/friend + :label label-friend + :disabled? true + :on-press on-press-friend}]]]) + (h/fire-event :press (h/get-by-text label-mute)) + (h/was-called on-press-muted) -(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)))) + (h/fire-event :press (h/get-by-text label-friend)) + (h/was-not-called on-press-friend))) -(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)))) + (h/test "renders two icons when set" + (h/render [action-drawer/action-drawer + [[{:icon :i/friend + :label "a sample label" + :right-icon :i/friend + :accessibility-label :first-element}]]]) + (h/is-truthy (h/get-by-label-text "right-icon-for-action")) + (h/is-truthy (h/query-by-label-text "left-icon-for-action"))) + + (h/test "renders a divider when the add-divider? prop is true" + (h/render [action-drawer/action-drawer + [[{:icon :i/friend + :label "a sample label" + :add-divider? true + :accessibility-label :first-element}]]]) + (h/is-truthy (h/get-all-by-label-text "divider")))) diff --git a/src/quo2/components/drawers/action_drawers/style.cljs b/src/quo2/components/drawers/action_drawers/style.cljs index 7b7644666b..94ab55a954 100644 --- a/src/quo2/components/drawers/action_drawers/style.cljs +++ b/src/quo2/components/drawers/action_drawers/style.cljs @@ -11,9 +11,10 @@ :flex-direction :row}) (defn container - [sub-label] + [sub-label disabled?] {:border-radius 12 :height (if sub-label 58 50) + :opacity (when disabled? 0.3) :margin-horizontal 8}) (defn row-container diff --git a/src/quo2/components/drawers/action_drawers/view.cljs b/src/quo2/components/drawers/action_drawers/view.cljs index ca3802a09f..06b3675038 100644 --- a/src/quo2/components/drawers/action_drawers/view.cljs +++ b/src/quo2/components/drawers/action_drawers/view.cljs @@ -18,12 +18,19 @@ :accessible true :accessibility-label :divider}]) -(defn action +(defn- maybe-pressable + [disabled? props child] + (if disabled? + [rn/view (dissoc props :on-press) child] + [rn/touchable-highlight props child])) + +(defn- action [{:keys [icon label sub-label right-icon danger? + disabled? on-press add-divider? override-theme @@ -33,9 +40,9 @@ [:<> {:key label} (when add-divider? [divider]) - [rn/touchable-highlight + [maybe-pressable disabled? {:accessibility-label accessibility-label - :style (style/container sub-label) + :style (style/container sub-label disabled?) :underlay-color (colors/theme-colors colors/neutral-5 colors/neutral-90 override-theme) :on-press on-press} [rn/view diff --git a/src/status_im2/contexts/activity_center/view.cljs b/src/status_im2/contexts/activity_center/view.cljs index c70a065aac..7ecef45a40 100644 --- a/src/status_im2/contexts/activity_center/view.cljs +++ b/src/status_im2/contexts/activity_center/view.cljs @@ -38,22 +38,18 @@ [] (let [unread-count (rf/sub [:activity-center/unread-count])] [quo/action-drawer - [[{:icon :i/check + [[{:icon :i/mark-as-read :override-theme :dark :label (i18n/label :t/mark-all-notifications-as-read) + :disabled? (zero? unread-count) :on-press (fn [] - (if (pos? unread-count) - (rf/dispatch [:activity-center.notifications/mark-all-as-read-locally - (fn [] - {:icon :up-to-date - :icon-color colors/success-50 - :text (i18n/label :t/notifications-marked-as-read - {:count unread-count}) - :override-theme :dark})]) - ;; Need design improvements if there is NO unread - ;; notifications to mark as read - ;; https://github.com/status-im/status-mobile/issues/14983 - (js/alert "No unread notifications to mark as read")) + (rf/dispatch [:activity-center.notifications/mark-all-as-read-locally + (fn [] + {:icon :up-to-date + :icon-color colors/success-50 + :text (i18n/label :t/notifications-marked-as-read + {:count unread-count}) + :override-theme :dark})]) (rf/dispatch [:hide-bottom-sheet]))}]]])) (defn empty-tab diff --git a/src/status_im2/contexts/quo_preview/drawers/action_drawers.cljs b/src/status_im2/contexts/quo_preview/drawers/action_drawers.cljs index 2cf941f128..659e90cbff 100644 --- a/src/status_im2/contexts/quo_preview/drawers/action_drawers.cljs +++ b/src/status_im2/contexts/quo_preview/drawers/action_drawers.cljs @@ -10,6 +10,9 @@ [{:label "Muted?" :key :muted? :type :boolean} + {:label "Mark as read disabled?" + :key :mark-as-read-disabled? + :type :boolean} {:label "Show red options?" :key :show-red-options? :type :boolean}]) @@ -31,9 +34,10 @@ [[{:icon :i/friend :label "View channel members and details" :on-press #(js/alert "View channel members and details")} - {:icon :i/communities - :label "Mark as read" - :on-press #(js/alert "Mark as read")} + {:icon :i/communities + :label "Mark as read" + :disabled? (:mark-as-read-disabled? @state) + :on-press #(js/alert "Mark as read")} {:icon :i/muted :label (if (:muted? @state) "Unmute channel" "Mute channel") :on-press #(js/alert (if (:muted? @state) "Unmute channel" "Mute channel")) diff --git a/src/test_helpers/component.cljs b/src/test_helpers/component.cljs index 0c2d884602..e202cab9b8 100644 --- a/src/test_helpers/component.cljs +++ b/src/test_helpers/component.cljs @@ -207,3 +207,7 @@ (defn was-called-times [^js mock number-of-times] (.toHaveBeenCalledTimes (js/expect mock) number-of-times)) + +(defn was-not-called + [mock] + (was-called-times mock 0))