[Refactor#18748] - Collectible Tag (#18804)

[Refactor Collectible Tag] Improve component schema and add component_spec

src/quo/components/tags/collectible_tag/component_spec.cljs

@@ -0,0 +1,52 @@
+(ns quo.components.tags.collectible-tag.component-spec
+  (:require
+    [quo.components.tags.collectible-tag.view :as collectible-tag]
+    [test-helpers.component :as h]))
+
+(def collectible-name "Collectible")
+(def collectible-id "#123")
+
+(defn get-test-data
+  [{:keys [options blur? size]}]
+  {:collectible-name    collectible-name
+   :collectible-id      collectible-id
+   :collectible-img-src {:uri "https://example.com/image.jpg"}
+   :options             options
+   :blur?               (or blur? false)
+   :size                (or size :size-24)})
+
+(h/describe "Collectible_tag tests"
+  (h/test "Renders Default option"
+    (let [data (get-test-data {})]
+      (h/render-with-theme-provider [collectible-tag/view data])
+      (h/is-truthy (h/get-by-text collectible-name))))
+
+  (h/test "Renders Add option"
+    (let [data (get-test-data {:options :add})]
+      (h/render-with-theme-provider [collectible-tag/view data])
+      (h/is-truthy (h/get-by-text collectible-name))))
+
+  (h/test "Renders Hold option"
+    (let [data (get-test-data {:options :hold})]
+      (h/render-with-theme-provider [collectible-tag/view data])
+      (h/is-truthy (h/get-by-text collectible-name))))
+
+  (h/test "Renders with Blur"
+    (let [data (get-test-data {:blur? true})]
+      (h/render-with-theme-provider [collectible-tag/view data])
+      (h/is-truthy (h/get-by-text collectible-name))))
+
+  (h/test "Renders without Blur"
+    (let [data (get-test-data {:blur? false})]
+      (h/render-with-theme-provider [collectible-tag/view data])
+      (h/is-truthy (h/get-by-text collectible-name))))
+
+  (h/test "Renders with Size 24"
+    (let [data (get-test-data {:size :size-24})]
+      (h/render-with-theme-provider [collectible-tag/view data])
+      (h/is-truthy (h/get-by-text collectible-name))))
+
+  (h/test "Renders with Size 32"
+    (let [data (get-test-data {:size :size-32})]
+      (h/render-with-theme-provider [collectible-tag/view data])
+      (h/is-truthy (h/get-by-text collectible-name)))))

src/quo/components/tags/collectible_tag/schema.cljs

@@ -0,0 +1,15 @@
+(ns quo.components.tags.collectible-tag.schema)
+
+(def ?schema
+  [:=>
+   [:catn
+    [:props
+     [:map
+      [:options {:optional true} [:maybe [:enum :add :hold]]]
+      [:size {:optional true} [:maybe [:enum :size-24 :size-32]]]
+      [:blur? {:optional true} [:maybe :boolean]]
+      [:theme :schema.common/theme]
+      [:collectible-img-src :schema.common/image-source]
+      [:collectible-name :string]
+      [:collectible-id :string]]]]
+   :any])

src/quo/components/tags/collectible_tag/view.cljs

@@ -1,70 +1,59 @@
 (ns quo.components.tags.collectible-tag.view
   (:require
+    [oops.core :as oops]
     [quo.components.icon :as icons]
     [quo.components.markdown.text :as text]
+    [quo.components.tags.collectible-tag.schema :as component-schema]
     [quo.components.tags.collectible-tag.style :as style]
     [quo.theme]
     [react-native.core :as rn]
     [react-native.hole-view :as hole-view]
+    [reagent.core :as reagent]
     [schema.core :as schema]))
 
-(def ?schema
-  [:=>
-   [:catn
-    [:props
-     [:map {:closed true}
-      [:options {:optional true} [:maybe [:enum false :add :hold]]]
-      [:size {:optional true} [:enum :size-24 :size-32]]
-      [:blur? {:optional true} :boolean]
-      [:theme :schema.common/theme]
-      [:collectible-img-src [:or :int :string]]
-      [:collectible-name :string]
-      [:collectible-id :string]
-      [:container-width :number]
-      [:on-layout {:optional true} [:maybe fn?]]]]]
-   :any])
-
 (defn- view-internal
   []
-  (fn [{:keys [options size blur? theme collectible-img-src collectible-name collectible-id
+  (let [container-width (reagent/atom 0)
-               container-width on-layout]
+        on-layout       #(->> (oops/oget % :nativeEvent :layout :width)
-        :or   {size :size-24}}]
+                              (reset! container-width))]
-    [rn/view
+    (fn [{:keys [options blur? theme collectible-img-src collectible-name collectible-id] :as props}]
-     {:on-layout on-layout}
+      (let [size (or (:size props) :size-24)]
-     [hole-view/hole-view
+        [rn/view
-      {:holes (if options
+         {:on-layout on-layout}
-                [{:x            (- container-width
+         [hole-view/hole-view
-                                   (case size
+          {:holes (if options
-                                     :size-24 10
+                    [{:x            (- @container-width
-                                     :size-32 12
+                                       (case size
-                                     nil))
+                                         :size-24 10
-                  :y            (case size
+                                         :size-32 12
-                                  :size-24 -6
+                                         nil))
-                                  :size-32 -4
+                      :y            (case size
-                                  nil)
+                                      :size-24 -6
-                  :width        16
+                                      :size-32 -4
-                  :height       16
+                                      nil)
-                  :borderRadius 8}]
+                      :width        16
-                [])}
+                      :height       16
-      [rn/view {:style (style/container size options blur? theme)}
+                      :borderRadius 8}]
-       [rn/image {:style (style/collectible-img size) :source collectible-img-src}]
+                    [])}
-       [text/text
+          [rn/view {:style (style/container size options blur? theme)}
-        {:size   :paragraph-2
+           [rn/image {:style (style/collectible-img size) :source collectible-img-src}]
-         :weight :medium
+           [text/text
-         :style  (style/label theme)}
+            {:size   :paragraph-2
-        collectible-name]
+             :weight :medium
-       [text/text
+             :style  (style/label theme)}
-        {:size        :paragraph-2
+            collectible-name]
-         :weight      :medium
+           [text/text
-         :margin-left 5
+            {:size        :paragraph-2
-         :style       (style/label theme)}
+             :weight      :medium
-        collectible-id]]]
+             :margin-left 5
-     (when options
+             :style       (style/label theme)}
-       [rn/view {:style (style/options-icon size)}
+            collectible-id]]]
-        [icons/icon (if (= options :hold) :i/hold :i/add-token)
+         (when options
-         {:size     20
+           [rn/view {:style (style/options-icon size)}
-          :no-color true}]])]))
+            [icons/icon (if (= options :hold) :i/hold :i/add-token)
+             {:size     20
+              :no-color true}]])]))))
 
 (def view
   (quo.theme/with-theme
-   (schema/instrument #'view-internal ?schema)))
+   (schema/instrument #'view-internal component-schema/?schema)))

src/quo/core_spec.cljs

@@ -79,6 +79,7 @@
     quo.components.share.share-qr-code.component-spec
     quo.components.switchers.base-card.component-spec
     quo.components.switchers.group-messaging-card.component-spec
+    quo.components.tags.collectible-tag.component-spec
     quo.components.tags.network-tags.component-spec
     quo.components.tags.status-tags-component-spec
     quo.components.tags.summary-tag.component-spec

src/status_im/contexts/preview/quo/tags/collectible_tag.cljs

@@ -1,6 +1,5 @@
 (ns status-im.contexts.preview.quo.tags.collectible-tag
   (:require
-    [oops.core :refer [oget]]
     [quo.core :as quo]
     [react-native.core :as rn]
     [reagent.core :as reagent]
@@ -16,9 +15,7 @@
                :value "Size 32"}]}
    {:key     :options
     :type    :select
-    :options [{:key   false
+    :options [{:key   :add
-               :value false}
-              {:key   :add
                :value :add}
               {:key   :hold
                :value :hold}]}
@@ -31,16 +28,11 @@
 
 (defn view
   []
-  (let [state     (reagent/atom {:size                :size-24
+  (let [state (reagent/atom {:size                :size-24
-                                 :collectible-name    "Collectible"
+                             :collectible-name    "Collectible"
-                                 :collectible-id      "#123"
+                             :collectible-id      "#123"
-                                 :collectible-img-src (resources/mock-images :collectible)
+                             :collectible-img-src (resources/mock-images :collectible)
-                                 :options             false
+                             :blur?               false})]
-                                 :blur?               false
-                                 :container-width     0})
-        on-layout #(swap! state assoc
-                     :container-width
-                     (oget % :nativeEvent :layout :width))]
     (fn []
       [preview/preview-container
        {:state                 state
@@ -48,4 +40,4 @@
         :show-blur-background? true
         :descriptor            descriptor}
        [rn/view {:style {:align-items :center}}
-        [quo/collectible-tag (assoc @state :on-layout on-layout)]]])))
+        [quo/collectible-tag @state]]])))