[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,39 +1,28 @@
 (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))]
+    (fn [{:keys [options blur? theme collectible-img-src collectible-name collectible-id] :as props}]
+      (let [size (or (:size props) :size-24)]
         [rn/view
          {:on-layout on-layout}
          [hole-view/hole-view
           {:holes (if options
-                [{:x            (- container-width
+                    [{:x            (- @container-width
                                        (case size
                                          :size-24 10
                                          :size-32 12
@@ -63,8 +52,8 @@
            [rn/view {:style (style/options-icon size)}
             [icons/icon (if (= options :hold) :i/hold :i/add-token)
              {:size     20
-          :no-color true}]])]))
+              :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}]}
@@ -35,12 +32,7 @@
                              :collectible-name    "Collectible"
                              :collectible-id      "#123"
                              :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]]])))