-
Notifications
You must be signed in to change notification settings - Fork 985
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* Align docstring * Create share-qr-code component * Remove empty style file * Implement common.share-qr-code including call to media server * Add share-qr-code preview screen * Use share-qr-code component in shell's share screen * Add tests and some fixes
- Loading branch information
1 parent
107246d
commit 6ae5cf9
Showing
11 changed files
with
715 additions
and
204 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
147 changes: 116 additions & 31 deletions
147
src/quo/components/share/share_qr_code/component_spec.cljs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,34 +1,119 @@ | ||
(ns quo.components.share.share-qr-code.component-spec | ||
(:require | ||
[quo.components.share.share-qr-code.view :as share-qr-code] | ||
[test-helpers.component :as h])) | ||
(:require [quo.components.share.share-qr-code.view :as share-qr-code] | ||
[test-helpers.component :as h])) | ||
|
||
(defn render-share-qr-code | ||
[{share-qr-type :type :as props}] | ||
(let [component-rendered (h/render [share-qr-code/view {:type share-qr-type}]) | ||
rerender-fn (h/get-rerender-fn component-rendered) | ||
share-qr-code (h/get-by-label-text :share-qr-code)] | ||
;; Fires on-layout since it's needed to render the content | ||
(h/fire-event :layout share-qr-code #js {:nativeEvent #js {:layout #js {:width 500}}}) | ||
(rerender-fn [share-qr-code/view props]))) | ||
|
||
(h/describe "Share QR Code component" | ||
(h/test "renders share qr code component" | ||
(h/render [share-qr-code/view | ||
{:link-title " A test title"}]) | ||
(-> (js/expect (h/get-by-text "A test title")) | ||
(.toBeTruthy))) | ||
|
||
(h/test "renders share qr code url" | ||
(h/render [share-qr-code/view | ||
{:qr-url " A test url"}]) | ||
(-> (js/expect (h/get-by-text "A test url")) | ||
(.toBeTruthy))) | ||
|
||
(h/test "on press link event fires" | ||
(let [event (h/mock-fn)] | ||
(h/render [share-qr-code/view | ||
{:url-on-press event | ||
:qr-url " A test url"}]) | ||
(h/fire-event :press (h/get-by-text "A test url")) | ||
(-> (js/expect event) | ||
(.toHaveBeenCalledTimes 1)))) | ||
|
||
(h/test "on press share event fires" | ||
(let [event (h/mock-fn)] | ||
(h/render [share-qr-code/view | ||
{:share-on-press event}]) | ||
(h/fire-event :press (h/get-by-label-text :share-profile)) | ||
(-> (js/expect event) | ||
(.toHaveBeenCalledTimes 1))))) | ||
(h/describe "Renders share-qr-code component in all types" | ||
(let [qr-label "Text shown below QR"] | ||
(h/test "Profile" | ||
(render-share-qr-code {:type :profile | ||
:qr-data qr-label}) | ||
(h/is-truthy (h/get-by-text qr-label))) | ||
|
||
(h/test "Wallet Legacy" | ||
(render-share-qr-code {:type :wallet-legacy | ||
:qr-data qr-label | ||
:emoji "👻"}) | ||
(h/is-truthy (h/get-by-text qr-label))) | ||
|
||
(h/test "Wallet Multichain" | ||
(render-share-qr-code {:type :wallet-multichain | ||
:qr-data qr-label | ||
:emoji "👻"}) | ||
(h/is-truthy (h/get-by-text qr-label))))) | ||
|
||
(h/describe "Fires all events for all types" | ||
(letfn [(test-fire-events [props test-seq] | ||
(doseq [{:keys [test-name event-name | ||
callback-prop-key | ||
accessibility-label]} test-seq | ||
:let [event-fn (h/mock-fn)]] | ||
(h/test test-name | ||
(render-share-qr-code (assoc props callback-prop-key event-fn)) | ||
(h/fire-event event-name (h/get-by-label-text accessibility-label)) | ||
(h/was-called-times event-fn 1))))] | ||
|
||
(h/describe "Profile" | ||
(test-fire-events | ||
{:type :profile} | ||
[{:test-name "Text pressed" | ||
:accessibility-label :share-qr-code-info-text | ||
:event-name :press | ||
:callback-prop-key :on-text-press} | ||
{:test-name "Text long pressed" | ||
:accessibility-label :share-qr-code-info-text | ||
:event-name :long-press | ||
:callback-prop-key :on-text-long-press} | ||
{:test-name "Share button" | ||
:accessibility-label :link-to-profile | ||
:event-name :press | ||
:callback-prop-key :on-share-press}])) | ||
|
||
(h/describe "Wallet Legacy" | ||
(test-fire-events | ||
{:type :wallet-legacy :emoji "👽"} | ||
[{:test-name "Text pressed" | ||
:accessibility-label :share-qr-code-info-text | ||
:event-name :press | ||
:callback-prop-key :on-text-press} | ||
{:test-name "Text long pressed" | ||
:accessibility-label :share-qr-code-info-text | ||
:event-name :long-press | ||
:callback-prop-key :on-text-long-press} | ||
{:test-name "Share button pressed" | ||
:accessibility-label :link-to-profile | ||
:event-name :press | ||
:callback-prop-key :on-share-press} | ||
{:test-name "Info icon pressed" | ||
:accessibility-label :share-qr-code-info-icon | ||
:event-name :press | ||
:callback-prop-key :on-info-press} | ||
{:test-name "Legacy tab pressed" | ||
:accessibility-label :share-qr-code-legacy-tab | ||
:event-name :press | ||
:callback-prop-key :on-legacy-press} | ||
{:test-name "Multichain tab pressed" | ||
:accessibility-label :share-qr-code-multichain-tab | ||
:event-name :press | ||
:callback-prop-key :on-multichain-press}])) | ||
|
||
(h/describe "Wallet Multichain" | ||
(test-fire-events | ||
{:type :wallet-multichain :emoji "👽"} | ||
[{:test-name "Text pressed" | ||
:accessibility-label :share-qr-code-info-text | ||
:event-name :press | ||
:callback-prop-key :on-text-press} | ||
{:test-name "Text long pressed" | ||
:accessibility-label :share-qr-code-info-text | ||
:event-name :long-press | ||
:callback-prop-key :on-text-long-press} | ||
{:test-name "Share button pressed" | ||
:accessibility-label :link-to-profile | ||
:event-name :press | ||
:callback-prop-key :on-share-press} | ||
{:test-name "Info icon pressed" | ||
:accessibility-label :share-qr-code-info-icon | ||
:event-name :press | ||
:callback-prop-key :on-info-press} | ||
{:test-name "Legacy tab pressed" | ||
:accessibility-label :share-qr-code-legacy-tab | ||
:event-name :press | ||
:callback-prop-key :on-legacy-press} | ||
{:test-name "Multichain tab pressed" | ||
:accessibility-label :share-qr-code-multichain-tab | ||
:event-name :press | ||
:callback-prop-key :on-multichain-press} | ||
{:test-name "Settings pressed" | ||
:accessibility-label :share-qr-code-settings | ||
:event-name :press | ||
:callback-prop-key :on-settings-press}]))))) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,45 +1,116 @@ | ||
(ns quo.components.share.share-qr-code.style | ||
(:require | ||
[quo.foundations.colors :as colors])) | ||
|
||
(def qr-code-container | ||
{:padding-top 12 | ||
:padding-horizontal 12 | ||
:padding-bottom 8 | ||
:border-radius 16 | ||
:background-color colors/white-opa-5 | ||
:flex-direction :column | ||
:justify-content :center | ||
:align-items :center}) | ||
|
||
(def profile-address-column | ||
{:margin-horizontal :auto | ||
:flex 4}) | ||
|
||
(def profile-address-container | ||
{:flex-direction :row | ||
:justify-content :space-between | ||
:margin-top 6}) | ||
(:require [quo.foundations.colors :as colors])) | ||
|
||
(def outer-container | ||
{:border-radius 16 | ||
:width "100%" | ||
:overflow :hidden}) | ||
|
||
(def overlay-color colors/white-opa-5) | ||
|
||
(def ^:private padding-horizontal 12) | ||
|
||
(def content-container | ||
{:z-index 1 | ||
:padding-horizontal padding-horizontal | ||
:padding-top 12 | ||
:padding-bottom 8}) | ||
|
||
;;; Header | ||
(def header-container | ||
{:flex-direction :row | ||
:margin-bottom 12}) | ||
|
||
(def header-tab-active {:background-color colors/white-opa-20}) | ||
(def header-tab-inactive {:background-color colors/white-opa-5}) | ||
(def space-between-tabs {:width 8}) | ||
|
||
(def info-icon | ||
{:margin-left :auto | ||
:align-self :center}) | ||
|
||
(def info-icon-color colors/white-opa-40) | ||
|
||
;;; QR code | ||
(defn qr-code-size | ||
[total-width] | ||
(- total-width (* 2 padding-horizontal))) | ||
|
||
;;; Bottom part | ||
(def bottom-container | ||
{:margin-top 8 | ||
:flex-direction :row | ||
:justify-content :space-between}) | ||
|
||
(def profile-address-content-container | ||
{:padding-top 2 | ||
:align-self :flex-start}) | ||
(def title {:color colors/white-opa-40}) | ||
|
||
(def profile-address-content | ||
{:color colors/white}) | ||
(def share-button-size 32) | ||
(def ^:private share-button-gap 16) | ||
|
||
(def profile-address-label | ||
{:color colors/white-opa-40}) | ||
(defn share-button-container | ||
[alignment] | ||
{:justify-content (if (= alignment :top) :flex-start :center) | ||
:margin-left share-button-gap}) | ||
|
||
(def share-button-container | ||
{:flex 1 | ||
:flex-direction :column | ||
:justify-content :center | ||
:align-items :flex-end}) | ||
(defn data-text | ||
[total-width] | ||
{:width (- total-width (* 2 padding-horizontal) share-button-size share-button-gap)}) | ||
|
||
(def icon-container | ||
{:height 36 | ||
;;; Wallet variants | ||
(def wallet-data-and-share-container | ||
{:margin-top 2 | ||
:flex-direction :row | ||
:align-items :center | ||
:justify-content :space-between}) | ||
|
||
(def wallet-legacy-container {:flex 1}) | ||
|
||
(def wallet-multichain-container {:flex 1 :margin-top 4}) | ||
|
||
(def wallet-multichain-networks | ||
{:flex-direction :row | ||
:justify-content :space-between | ||
:padding-bottom 12}) | ||
:margin-bottom 8}) | ||
|
||
(def wallet-multichain-data-container {:margin-top 4}) | ||
|
||
;;; Dashed line | ||
(def divider-container | ||
{:height 8 | ||
:margin-horizontal 4 | ||
:justify-content :center | ||
:overflow :hidden}) | ||
|
||
(def ^:private padding-for-divider (+ padding-horizontal 4)) | ||
(def ^:private dashed-line-width 2) | ||
(def ^:private dashed-line-space 4) | ||
|
||
(def dashed-line | ||
{:flex-direction :row | ||
:margin-left -1}) | ||
|
||
(def line | ||
{:background-color colors/white-opa-20 | ||
:width dashed-line-width | ||
:height 1}) | ||
|
||
(def line-space | ||
{:width dashed-line-space | ||
:height 1}) | ||
|
||
(defn number-lines-and-spaces-to-fill | ||
[component-width] | ||
(let [line-and-space-width (+ dashed-line-width dashed-line-space) | ||
width-to-fill (- component-width (* 2 padding-for-divider)) | ||
number-of-lines (* (/ width-to-fill line-and-space-width) 2)] | ||
(inc (int number-of-lines)))) | ||
|
||
(def ^:private get-network-full-name | ||
{"eth" :ethereum | ||
"opt" :optimism | ||
"arb1" :arbitrum}) | ||
|
||
(defn network-short-name-text | ||
[network-short-name] | ||
{:color (-> network-short-name | ||
(get-network-full-name :unknown) | ||
(colors/resolve-color nil))}) |
Oops, something went wrong.