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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
src/quo2/components/drawers/action_drawers/component_spec.cljs
View File

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

3
src/quo2/components/drawers/action_drawers/style.cljs
View File

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

13
src/quo2/components/drawers/action_drawers/view.cljs
View File

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

22
src/status_im2/contexts/activity_center/view.cljs
View File

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

10
src/status_im2/contexts/quo_preview/drawers/action_drawers.cljs
View File

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

4
src/test_helpers/component.cljs
View File

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