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: fix component tests and permission drawer preview (#14831)

This commit is contained in:
Jamie Caprani 2023-01-19 23:03:53 +00:00 committed by GitHub
parent f0272f2e77
commit 967c869486
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 177 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Makefile
View File

@ -351,7 +351,6 @@ component-test: export COMPONENT_TEST := true
component-test: export BABEL_ENV := test
component-test: ##@test Run tests once in NodeJS
# Here we create the gyp bindings for nodejs
yarn install
yarn shadow-cljs compile component-test && \
jest --config=test/jest/jest.config.js

6
src/quo2/components/drawers/__tests__/action_drawers_component_spec.cljs → src/quo2/components/drawers/action_drawers/component_spec.cljs
View File

@ -1,6 +1,6 @@
(ns quo2.components.drawers.--tests--.action-drawers-component-spec
(ns quo2.components.drawers.action-drawers.component-spec
(:require ["@testing-library/react-native" :as rtl]
[quo2.components.drawers.action-drawers :as action-drawer]
[quo2.components.drawers.action-drawers.view :as action-drawer]
[reagent.core :as reagent]))
(defn render-action-drawer
@ -50,4 +50,4 @@
:add-divider? true
:accessibility-label :first-element}]])
(-> (js/expect (rtl/screen.getAllByLabelText "divider"))
(.toBeTruthy))))
(.toBeTruthy))))

41
src/quo2/components/drawers/action_drawers/style.cljs Normal file
View File

@ -0,0 +1,41 @@
(ns quo2.components.drawers.action-drawers.style
(:require [quo2.foundations.colors :as colors]))
(def divider
{: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})
(defn container
[sub-label]
{:border-radius 12
:height (if sub-label 58 50)
:margin-horizontal 8})
(defn row-container
[sub-label]
{:height (if sub-label 58 50)
:margin-horizontal 12
:flex-direction :row})
(def left-icon
{:height 20
:margin-top :auto
:margin-bottom :auto
:margin-right 12
:width 20})
(def text-container
{:flex 1
:justify-content :center})
(def right-icon
{:height 20
:margin-top :auto
:margin-bottom :auto
:width 20})

40
src/quo2/components/drawers/action_drawers.cljs → src/quo2/components/drawers/action_drawers/view.cljs
View File

@ -1,8 +1,9 @@
(ns quo2.components.drawers.action-drawers
(ns quo2.components.drawers.action-drawers.view
(:require [quo2.components.icon :as icon]
[quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]))
[react-native.core :as rn]
[quo2.components.drawers.action-drawers.style :as style]))
(defn- get-icon-color
[danger?]
@ -12,14 +13,7 @@
(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}
{:style style/divider
:accessible true
:accessibility-label :divider}])
@ -38,32 +32,20 @@
(when add-divider? divider)
[rn/touchable-highlight
{:accessibility-label accessibility-label
:style {:border-radius 12
:height (if sub-label 58 50)
:margin-horizontal 8}
:style style/container
: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}}
{:style style/row-container}
[rn/view
{:accessibility-label :left-icon-for-action
:accessible true
:style
{:height 20
:margin-top :auto
:margin-bottom :auto
:margin-right 12
:width 20}}
:style style/left-icon}
[icon/icon icon
{:color (get-icon-color danger?)
:size 20}]]
[rn/view
{:style
{:flex 1
:justify-content :center}}
{:style style/text-container}
[text/text
{:size :paragraph-1
:weight :medium
@ -79,11 +61,7 @@
sub-label])]
(when right-icon
[rn/view
{:style
{:height 20
:margin-top :auto
:margin-bottom :auto
:width 20}
{:style style/right-icon
:accessible true
:accessibility-label :right-icon-for-action}
[icon/icon right-icon

4
src/quo2/components/drawers/permission_context/__tests__/permission_context_component_spec.cljs → src/quo2/components/drawers/permission_context/component_spec.cljs
View File

@ -1,10 +1,10 @@
(ns quo2.components.drawers.permission-context.--tests--.permission-context-component-spec
(ns quo2.components.drawers.permission-context.component-spec
(:require [quo2.components.drawers.permission-context.view :as permission-context]
[react-native.core :as rn]
[test-helpers.component :as h]))
(h/describe "permission context"
(h/test
(h/test "it tests the default render"
(h/render [permission-context/view
[rn/text
{:accessibility-label :accessibility-id}

8
src/quo2/components/drawers/permission_context/style.cljs
View File

@ -3,9 +3,13 @@
(def radius 20)
(def container
{:padding-top 16
{:flex-direction :row
:background-color (colors/theme-colors colors/white colors/neutral-90)
:height 82
:padding-top 16
:padding-bottom 48
:padding-horizontal 20
:justify-content :center
:padding-right :auto
:shadow-offset {:width 0
:height 2}
:shadow-radius radius

8
src/quo2/components/drawers/permission_context/view.cljs
View File

@ -1,8 +1,12 @@
(ns quo2.components.drawers.permission-context.view
(:require [react-native.core :as rn]
[quo2.foundations.colors :as colors]
[quo2.components.drawers.permission-context.style :as style]))
(defn view
[children]
[rn/view {:style style/container}
[children on-press]
[rn/touchable-highlight
{:on-press on-press
:underlay-color (colors/theme-colors :transparent colors/neutral-95-opa-70)
:style style/container}
children])

24
src/quo2/core.cljs
View File

@ -20,7 +20,8 @@
quo2.components.dividers.date
quo2.components.dividers.divider-label
quo2.components.dividers.new-messages
quo2.components.drawers.action-drawers
quo2.components.drawers.action-drawers.view
quo2.components.drawers.permission-context.view
quo2.components.dropdowns.dropdown
quo2.components.header
quo2.components.icon
@ -41,6 +42,7 @@
quo2.components.notifications.info-count
quo2.components.notifications.notification-dot
quo2.components.notifications.toast
quo2.components.profile.profile-card.view
quo2.components.reactions.reaction
quo2.components.selectors.disclaimer.view
quo2.components.selectors.filter.view
@ -52,8 +54,10 @@
quo2.components.tabs.tabs
quo2.components.tags.context-tags
quo2.components.tags.status-tags
quo2.components.profile.profile-card.view
quo2.components.tags.tags))
quo2.components.tags.permission-tag
quo2.components.tags.tag
quo2.components.tags.tags
quo2.components.tags.token-tag))
(def toast quo2.components.notifications.toast/toast)
(def button quo2.components.buttons.button/button)
@ -63,7 +67,6 @@
(def separator quo2.components.separator/separator)
(def counter quo2.components.counter.counter/counter)
(def header quo2.components.header/header)
(def action-drawer quo2.components.drawers.action-drawers/action-drawer)
(def dropdown quo2.components.dropdowns.dropdown/dropdown)
(def info-message quo2.components.info.info-message/info-message)
(def information-box quo2.components.info.information-box/information-box)
@ -71,7 +74,6 @@
(def system-message quo2.components.messages.system-message/system-message)
(def reaction quo2.components.reactions.reaction/reaction)
(def add-reaction quo2.components.reactions.reaction/add-reaction)
(def tags quo2.components.tags.tags/tags)
(def user-avatar-tag quo2.components.tags.context-tags/user-avatar-tag)
(def context-tag quo2.components.tags.context-tags/context-tag)
(def group-avatar-tag quo2.components.tags.context-tags/group-avatar-tag)
@ -80,7 +82,6 @@
(def tabs quo2.components.tabs.tabs/tabs)
(def account-selector quo2.components.tabs.account-selector/account-selector)
(def floating-shell-button quo2.components.navigation.floating-shell-button/floating-shell-button)
(def status-tag quo2.components.tags.status-tags/status-tag)
(def page-nav quo2.components.navigation.page-nav/page-nav)
(def disclaimer quo2.components.selectors.disclaimer.view/view)
(def checkbox quo2.components.selectors.selectors/checkbox)
@ -118,6 +119,10 @@
(def new-messages quo2.components.dividers.new-messages/new-messages)
(def divider-date quo2.components.dividers.date/date)
;;;; DRAWERS
(def action-drawer quo2.components.drawers.action-drawers.view/action-drawer)
(def permission-context quo2.components.drawers.permission-context.view/view)
;;;; LIST ITEMS
(def channel-list-item quo2.components.list-items.channel/list-item)
(def menu-item quo2.components.list-items.menu-item/menu-item)
@ -135,3 +140,10 @@
;;;; SETTINGS
(def privacy-option quo2.components.settings.privacy-option/card)
(def account quo2.components.settings.accounts.view/account)
;;;; TAGS
(def tag quo2.components.tags.tag/tag)
(def tags quo2.components.tags.tags/tags)
(def permission-tag quo2.components.tags.permission-tag/tag)
(def status-tag quo2.components.tags.status-tags/status-tag)
(def token-tag quo2.components.tags.token-tag/tag)

4
src/quo2/core_spec.cljs
View File

@ -3,8 +3,8 @@
[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.drawers.permission-context.--tests--.permission-context-component-spec]
[quo2.components.drawers.action-drawers.component-spec]
[quo2.components.drawers.permission-context.component-spec]
[quo2.components.markdown.--tests--.text-component-spec]
[quo2.components.selectors.--tests--.selectors-component-spec]
[quo2.components.selectors.filter.component-spec]))

12
src/status_im2/common/home/actions/view.cljs
View File

@ -1,6 +1,6 @@
(ns status-im2.common.home.actions.view
(:require [utils.i18n :as i18n]
[quo2.components.drawers.action-drawers :as drawer]
[quo2.core :as quo]
[status-im2.common.confirmation-drawer.view :as confirmation-drawer]
[status-im2.constants :as constants]
[utils.re-frame :as rf]))
@ -407,7 +407,7 @@
(defn one-to-one-actions
[{:keys [chat-id] :as item} inside-chat?]
[drawer/action-drawer
[quo/action-drawer
[[(view-profile-entry chat-id)
(edit-nickname-entry chat-id)]
(notification-actions item inside-chat?)
@ -415,7 +415,7 @@
(defn public-chat-actions
[{:keys [chat-id] :as item} inside-chat?]
[drawer/action-drawer
[quo/action-drawer
[[(group-details-entry chat-id)
(when inside-chat?
(add-members-entry))]
@ -424,7 +424,7 @@
(defn private-group-chat-actions
[item inside-chat?]
[drawer/action-drawer
[quo/action-drawer
[(group-actions item inside-chat?)
(notification-actions item inside-chat?)
(destructive-actions item)]])
@ -432,7 +432,7 @@
(defn contact-actions
[{:keys [public-key] :as contact} {:keys [chat-id admin?] :as extra-data}]
(let [current-pub-key (rf/sub [:multiaccount/public-key])]
[drawer/action-drawer
[quo/action-drawer
[[(view-profile-entry public-key)
(remove-from-contacts-entry contact)
(rename-entry)
@ -460,7 +460,7 @@
[{:keys [admins] :as group}]
(let [current-pub-key (rf/sub [:multiaccount/public-key])
admin? (get admins current-pub-key)]
[drawer/action-drawer
[quo/action-drawer
[(when admin? [(edit-name-image-entry)])
[(notifications-entry admin?)]
(destructive-actions group)]]))

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

@ -1,6 +1,5 @@
(ns status-im2.contexts.quo-preview.drawers.action-drawers
(:require [quo2.components.buttons.button :as button]
[quo2.components.drawers.action-drawers :as quo2]
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
@ -27,7 +26,7 @@
[rn/view
{:height 300
:background-color (colors/theme-colors colors/white colors/neutral-95)}
[quo2/action-drawer
[quo/action-drawer
(cond->
[[{:icon :i/friend
:label "View channel members and details"
@ -59,7 +58,7 @@
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 400}
[preview/customizer state descriptor]
[button/button
[quo/button
{:style {:margin-horizontal 40}
:on-press #(rf/dispatch [:bottom-sheet/show-sheet
{:content (constantly (render-action-sheet state))

76
src/status_im2/contexts/quo_preview/drawers/permission_drawers.cljs Normal file
View File

@ -0,0 +1,76 @@
(ns status-im2.contexts.quo-preview.drawers.permission-drawers
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[status-im.react-native.resources :as resources]))
(defn example-1
[]
[:<>
[quo/text {:style {:margin-right 4}} "Hold"]
[quo/permission-tag
{:size 24
:locked false
:tokens [{:id 1
:group [{:id 1 :token-icon (resources/get-image :status-logo)}
{:id 2 :token-icon (resources/get-image :status-logo)}
{:id 3 :token-icon (resources/get-image :status-logo)}
{:id 4 :token-icon (resources/get-image :status-logo)}
{:id 5 :token-icon (resources/get-image :status-logo)}]}]
:background-color (colors/theme-colors
colors/neutral-10
colors/neutral-80)}]
[quo/text
{:style {:margin-left 4
:margin-right 4}} "Or"]
[quo/permission-tag
{:size 24
:locked false
:tokens [{:id 1
:group [{:id 1 :token-icon (resources/get-image :status-logo)}
{:id 2 :token-icon (resources/get-image :status-logo)}
{:id 3 :token-icon (resources/get-image :status-logo)}
{:id 4 :token-icon (resources/get-image :status-logo)}
{:id 5 :token-icon (resources/get-image :status-logo)}]}]
:background-color (colors/theme-colors
colors/neutral-10
colors/neutral-80)}]
[quo/text {:style {:margin-left 4}} "To post"]])
(defn example-2
[]
[:<>
[quo/text {:style {:margin-right 4}} "Hold"]
[quo/token-tag
{:size :small
:token-img-src (js/require "../resources/images/tokens/mainnet/ETH.png")} "ETH"]
[quo/text {:style {:margin-left 4}} "To post"]])
(defn example-3
[]
[:<>
[quo/icon :i/communities {:color (colors/theme-colors colors/neutral-100 colors/white)}]
[quo/text {:style {:margin-right 4}} "Join community to post"]])
(defn cool-preview
[]
(fn []
[:<>
[rn/view {:margin-top 60}
[quo/permission-context [example-1] #(js/alert "drawer pressed")]]
[rn/view {:margin-top 60}
[quo/permission-context [example-2] #(js/alert "drawer pressed")]]
[rn/view {:margin-top 60}
[quo/permission-context [example-3] #(js/alert "drawer pressed")]]]))
(defn preview-permission-drawers
[]
[rn/view
{:style {:background-color (colors/theme-colors colors/neutral-20 colors/neutral-100)}
:flex 1}
[rn/flat-list
{:flex 1
:nested-scroll-enabled true
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn hash}]])

6
src/status_im2/contexts/quo_preview/main.cljs
View File

@ -29,6 +29,7 @@
[status-im2.contexts.quo-preview.dividers.divider-label :as divider-label]
[status-im2.contexts.quo-preview.dividers.new-messages :as new-messages]
[status-im2.contexts.quo-preview.drawers.action-drawers :as drawers]
[status-im2.contexts.quo-preview.drawers.permission-drawers :as permission-drawers]
[status-im2.contexts.quo-preview.dropdowns.dropdown :as dropdown]
[status-im2.contexts.quo-preview.info.info-message :as info-message]
[status-im2.contexts.quo-preview.info.information-box :as information-box]
@ -128,7 +129,10 @@
:component divider-date/preview-divider-date}]
:drawers [{:name :action-drawers
:insets {:top false}
:component drawers/preview-action-drawers}]
:component drawers/preview-action-drawers}
{:name :permission-drawers
:insets {:top false}
:component permission-drawers/preview-permission-drawers}]
:dropdowns [{:name :dropdown
:insets {:top false}
:component dropdown/preview-dropdown}]