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
This commit is contained in:
Icaro Motta 2023-05-31 21:25:19 -03:00 committed by GitHub
parent 9960a5c958
commit 0dd3cb51fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 87 additions and 66 deletions

View File

@ -1,53 +1,62 @@
(ns quo2.components.drawers.action-drawers.component-spec (ns quo2.components.drawers.action-drawers.component-spec
(:require ["@testing-library/react-native" :as rtl] (:require [quo2.components.drawers.action-drawers.view :as action-drawer]
[quo2.components.drawers.action-drawers.view :as action-drawer] [test-helpers.component :as h]))
[reagent.core :as reagent]))
(defn render-action-drawer (h/describe "action drawer"
([options] (h/test "default render"
(rtl/render (reagent/as-element [action-drawer/action-drawer options])))) (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" (h/test "renders with elements sub-label displaying"
(fn [] (h/render [action-drawer/action-drawer
(render-action-drawer [[{:icon :i/friend [[{: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" :label "a sample label"
:sub-label "a sample sub label"}]]) :sub-label "a sample sub label"}]]])
(-> (js/expect (rtl/screen.getByText "a sample sub label")) (h/is-truthy (h/get-by-text "a sample sub label")))
(.toBeTruthy))))
(js/global.test "action-drawer on click action works on element" (h/test "on click action works on element"
(let [event (js/jest.fn)] (let [on-press (js/jest.fn)]
(fn [] (h/render [action-drawer/action-drawer
(render-action-drawer [[{:icon :i/friend [[{:icon :i/friend
:label "a sample label" :label "a sample label"
:on-press event}]]) :on-press on-press}]]])
(rtl/fireEvent.press (rtl/screen.getByText "a sample label")) (h/fire-event :press (h/get-by-text "a sample label"))
(-> (js/expect event) (h/was-called on-press)))
(.toHaveBeenCalled)))))
(js/global.test "action-drawer renders two icons when set" (h/test "disabled state"
(fn [] (let [on-press-muted (js/jest.fn)
(render-action-drawer [[{:icon :i/friend 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)
(h/fire-event :press (h/get-by-text label-friend))
(h/was-not-called on-press-friend)))
(h/test "renders two icons when set"
(h/render [action-drawer/action-drawer
[[{:icon :i/friend
:label "a sample label" :label "a sample label"
:right-icon :i/friend :right-icon :i/friend
:accessibility-label :first-element}]]) :accessibility-label :first-element}]]])
(-> (js/expect (rtl/screen.getByLabelText "right-icon-for-action")) (h/is-truthy (h/get-by-label-text "right-icon-for-action"))
(.toBeTruthy)) (h/is-truthy (h/query-by-label-text "left-icon-for-action")))
(-> (js/expect (rtl/screen.queryByLabelText "left-icon-for-action"))
(.toBeTruthy))))
(js/global.test "action-drawer renders a divider when the add-divider? prop is true" (h/test "renders a divider when the add-divider? prop is true"
(fn [] (h/render [action-drawer/action-drawer
(render-action-drawer [[{:icon :i/friend [[{:icon :i/friend
:label "a sample label" :label "a sample label"
:add-divider? true :add-divider? true
:accessibility-label :first-element}]]) :accessibility-label :first-element}]]])
(-> (js/expect (rtl/screen.getAllByLabelText "divider")) (h/is-truthy (h/get-all-by-label-text "divider"))))
(.toBeTruthy))))

View File

@ -11,9 +11,10 @@
:flex-direction :row}) :flex-direction :row})
(defn container (defn container
[sub-label] [sub-label disabled?]
{:border-radius 12 {:border-radius 12
:height (if sub-label 58 50) :height (if sub-label 58 50)
:opacity (when disabled? 0.3)
:margin-horizontal 8}) :margin-horizontal 8})
(defn row-container (defn row-container

View File

@ -18,12 +18,19 @@
:accessible true :accessible true
:accessibility-label :divider}]) :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 [{:keys [icon
label label
sub-label sub-label
right-icon right-icon
danger? danger?
disabled?
on-press on-press
add-divider? add-divider?
override-theme override-theme
@ -33,9 +40,9 @@
[:<> {:key label} [:<> {:key label}
(when add-divider? (when add-divider?
[divider]) [divider])
[rn/touchable-highlight [maybe-pressable disabled?
{:accessibility-label accessibility-label {: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) :underlay-color (colors/theme-colors colors/neutral-5 colors/neutral-90 override-theme)
:on-press on-press} :on-press on-press}
[rn/view [rn/view

View File

@ -38,11 +38,11 @@
[] []
(let [unread-count (rf/sub [:activity-center/unread-count])] (let [unread-count (rf/sub [:activity-center/unread-count])]
[quo/action-drawer [quo/action-drawer
[[{:icon :i/check [[{:icon :i/mark-as-read
:override-theme :dark :override-theme :dark
:label (i18n/label :t/mark-all-notifications-as-read) :label (i18n/label :t/mark-all-notifications-as-read)
:disabled? (zero? unread-count)
:on-press (fn [] :on-press (fn []
(if (pos? unread-count)
(rf/dispatch [:activity-center.notifications/mark-all-as-read-locally (rf/dispatch [:activity-center.notifications/mark-all-as-read-locally
(fn [] (fn []
{:icon :up-to-date {:icon :up-to-date
@ -50,10 +50,6 @@
:text (i18n/label :t/notifications-marked-as-read :text (i18n/label :t/notifications-marked-as-read
{:count unread-count}) {:count unread-count})
:override-theme :dark})]) :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 [:hide-bottom-sheet]))}]]])) (rf/dispatch [:hide-bottom-sheet]))}]]]))
(defn empty-tab (defn empty-tab

View File

@ -10,6 +10,9 @@
[{:label "Muted?" [{:label "Muted?"
:key :muted? :key :muted?
:type :boolean} :type :boolean}
{:label "Mark as read disabled?"
:key :mark-as-read-disabled?
:type :boolean}
{:label "Show red options?" {:label "Show red options?"
:key :show-red-options? :key :show-red-options?
:type :boolean}]) :type :boolean}])
@ -33,6 +36,7 @@
:on-press #(js/alert "View channel members and details")} :on-press #(js/alert "View channel members and details")}
{:icon :i/communities {:icon :i/communities
:label "Mark as read" :label "Mark as read"
:disabled? (:mark-as-read-disabled? @state)
:on-press #(js/alert "Mark as read")} :on-press #(js/alert "Mark as read")}
{:icon :i/muted {:icon :i/muted
:label (if (:muted? @state) "Unmute channel" "Mute channel") :label (if (:muted? @state) "Unmute channel" "Mute channel")

View File

@ -207,3 +207,7 @@
(defn was-called-times (defn was-called-times
[^js mock number-of-times] [^js mock number-of-times]
(.toHaveBeenCalledTimes (js/expect mock) number-of-times)) (.toHaveBeenCalledTimes (js/expect mock) number-of-times))
(defn was-not-called
[mock]
(was-called-times mock 0))