CalvinBackup/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-02-12 22:53:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

🔧 Add unit tests to apply layout tokens

Browse Source
This commit is contained in:
Andrés Moya
2025-09-04 12:32:03 +02:00
committed by Andrés Moya
parent 7b6aa0c12a
commit 6e6749f42e
1 changed files with 117 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
common/test/common_tests/logic/token_apply_test.cljc
View File

@@ -75,8 +75,29 @@
(ctob/make-token :id (thi/new-id! :token-font-family)
:name "token-font-family"
:type :font-family
:value ["Helvetica" "Arial" "sans-serif"]))))
(tho/add-frame :frame1)
:value ["Helvetica" "Arial" "sans-serif"]))
(ctob/add-token-in-set "test-token-set"
(ctob/make-token :id (thi/new-id! :token-sizing)
:name "token-sizing"
:type :sizing
:value 10))
(ctob/add-token-in-set "test-token-set"
(ctob/make-token :id (thi/new-id! :token-spacing)
:name "token-spacing"
:type :spacing
:value 30))))
(tho/add-frame :frame1
:layout :flex ;; TODO: those values come from main.data.workspace.shape_layout/default-layout-params
:layout-flex-dir :row ;; it should be good to use it directly, but first it should be moved to common.logic
:layout-gap-type :multiple
:layout-gap {:row-gap 0 :column-gap 0}
:layout-align-items :start
:layout-justify-content :start
:layout-align-content :stretch
:layout-wrap-type :nowrap
:layout-padding-type :simple
:layout-padding {:p1 0 :p2 0 :p3 0 :p4 0})
(ths/add-sample-shape :circle1 :parent-label :frame-1)
(tho/add-text :text1 "Hello World!")))
(defn- apply-all-tokens
@@ -91,7 +112,17 @@
(tht/apply-token-to-shape :frame1 "token-dimensions" [:width :height] [:width :height] 100)
(tht/apply-token-to-shape :text1 "token-font-size" [:font-size] [:font-size] 24)
(tht/apply-token-to-shape :text1 "token-letter-spacing" [:letter-spacing] [:letter-spacing] 2)
(tht/apply-token-to-shape :text1 "token-font-family" [:font-family] [:font-family] ["Helvetica" "Arial" "sans-serif"])))
(tht/apply-token-to-shape :text1 "token-font-family" [:font-family] [:font-family] ["Helvetica" "Arial" "sans-serif"])
(tht/apply-token-to-shape :circle1
"token-sizing"
[:layout-item-max-h :layout-item-max-w :layout-item-min-h :layout-item-min-w]
[:layout-item-max-h :layout-item-max-w :layout-item-min-h :layout-item-min-w]
10)
(tht/apply-token-to-shape :circle1
"token-spacing"
[:m1 :m2 :m3 :m4]
[:layout-item-margin]
{:m1 30 :m2 30 :m3 30 :m4 30})))
(t/deftest apply-tokens-to-shape
(let [;; ==== Setup
@@ -99,6 +130,7 @@
page (thf/current-page file)
frame1 (ths/get-shape file :frame1)
text1 (ths/get-shape file :text1)
circle1 (ths/get-shape file :circle1)
token-radius (tht/get-token file "test-token-set" (thi/id :token-radius))
token-rotation (tht/get-token file "test-token-set" (thi/id :token-rotation))
token-opacity (tht/get-token file "test-token-set" (thi/id :token-opacity))
@@ -108,6 +140,8 @@
token-font-size (tht/get-token file "test-token-set" (thi/id :token-font-size))
token-letter-spacing (tht/get-token file "test-token-set" (thi/id :token-letter-spacing))
token-font-family (tht/get-token file "test-token-set" (thi/id :token-font-family))
token-sizing (tht/get-token file "test-token-set" (thi/id :token-sizing))
token-spacing (tht/get-token file "test-token-set" (thi/id :token-spacing))
;; ==== Action
changes (-> (-> (pcb/empty-changes nil)
@@ -152,33 +186,57 @@
:shape $
:attributes [:font-family]})))
(:objects page)
{})
(cls/generate-update-shapes [(:id circle1)]
(fn [shape]
(as-> shape $
(cto/apply-token-to-shape {:token token-sizing
:shape $
:attributes [:layout-item-max-h :layout-item-max-w :layout-item-min-h :layout-item-min-w]})
(cto/apply-token-to-shape {:token token-spacing
:shape $
:attributes [:m1 :m2 :m3 :m4]})))
(:objects page)
{}))
file' (thf/apply-changes file changes)
;; ==== Get
frame1' (ths/get-shape file' :frame1)
applied-tokens' (:applied-tokens frame1')
text1' (ths/get-shape file' :text1)
text1-applied-tokens (:applied-tokens text1')]
frame1' (ths/get-shape file' :frame1)
frame1'-applied-tokens (:applied-tokens frame1')
text1' (ths/get-shape file' :text1)
text1'-applied-tokens (:applied-tokens text1')
circle1' (ths/get-shape file' :circle1)
circle1'-applied-tokens (:applied-tokens circle1')]
;; ==== Check
(t/is (= (count applied-tokens') 11))
(t/is (= (:r1 applied-tokens') "token-radius"))
(t/is (= (:r2 applied-tokens') "token-radius"))
(t/is (= (:r3 applied-tokens') "token-radius"))
(t/is (= (:r4 applied-tokens') "token-radius"))
(t/is (= (:rotation applied-tokens') "token-rotation"))
(t/is (= (:opacity applied-tokens') "token-opacity"))
(t/is (= (:stroke-width applied-tokens') "token-stroke-width"))
(t/is (= (:stroke-color applied-tokens') "token-color"))
(t/is (= (:fill applied-tokens') "token-color"))
(t/is (= (:width applied-tokens') "token-dimensions"))
(t/is (= (:height applied-tokens') "token-dimensions"))
(t/is (= (count text1-applied-tokens) 3))
(t/is (= (:font-size text1-applied-tokens) "token-font-size"))
(t/is (= (:letter-spacing text1-applied-tokens) "token-letter-spacing"))
(t/is (= (:font-family text1-applied-tokens) "token-font-family"))))
(t/is (= (count frame1'-applied-tokens) 11))
(t/is (= (:r1 frame1'-applied-tokens) "token-radius"))
(t/is (= (:r2 frame1'-applied-tokens) "token-radius"))
(t/is (= (:r3 frame1'-applied-tokens) "token-radius"))
(t/is (= (:r4 frame1'-applied-tokens) "token-radius"))
(t/is (= (:rotation frame1'-applied-tokens) "token-rotation"))
(t/is (= (:opacity frame1'-applied-tokens) "token-opacity"))
(t/is (= (:stroke-width frame1'-applied-tokens) "token-stroke-width"))
(t/is (= (:stroke-color frame1'-applied-tokens) "token-color"))
(t/is (= (:fill frame1'-applied-tokens) "token-color"))
(t/is (= (:width frame1'-applied-tokens) "token-dimensions"))
(t/is (= (:height frame1'-applied-tokens) "token-dimensions"))
(t/is (= (count text1'-applied-tokens) 3))
(t/is (= (:font-size text1'-applied-tokens) "token-font-size"))
(t/is (= (:letter-spacing text1'-applied-tokens) "token-letter-spacing"))
(t/is (= (:font-family text1'-applied-tokens) "token-font-family"))
(t/is (= (count circle1'-applied-tokens) 8))
(t/is (= (:layout-item-max-h circle1'-applied-tokens) "token-sizing"))
(t/is (= (:layout-item-min-h circle1'-applied-tokens) "token-sizing"))
(t/is (= (:layout-item-max-w circle1'-applied-tokens) "token-sizing"))
(t/is (= (:layout-item-min-w circle1'-applied-tokens) "token-sizing"))
(t/is (= (:m1 circle1'-applied-tokens) "token-spacing"))
(t/is (= (:m2 circle1'-applied-tokens) "token-spacing"))
(t/is (= (:m3 circle1'-applied-tokens) "token-spacing"))
(t/is (= (:m4 circle1'-applied-tokens) "token-spacing"))))
(t/deftest unapply-tokens-from-shape
(let [;; ==== Setup
@@ -187,6 +245,7 @@
page (thf/current-page file)
frame1 (ths/get-shape file :frame1)
text1 (ths/get-shape file :text1)
circle1 (ths/get-shape file :circle1)
;; ==== Action
changes (-> (-> (pcb/empty-changes nil)
@@ -211,19 +270,29 @@
(cto/unapply-token-id [:letter-spacing])
(cto/unapply-token-id [:font-family])))
(:objects page)
{})
(cls/generate-update-shapes [(:id circle1)]
(fn [shape]
(-> shape
(cto/unapply-token-id [:layout-item-max-h :layout-item-min-h :layout-item-max-w :layout-item-min-w])
(cto/unapply-token-id [:m1 :m2 :m3 :m4])))
(:objects page)
{}))
file' (thf/apply-changes file changes)
;; ==== Get
frame1' (ths/get-shape file' :frame1)
applied-tokens' (:applied-tokens frame1')
text1' (ths/get-shape file' :text1)
text1-applied-tokens (:applied-tokens text1')]
frame1' (ths/get-shape file' :frame1)
frame1'-applied-tokens (:applied-tokens frame1')
text1' (ths/get-shape file' :text1)
text1'-applied-tokens (:applied-tokens text1')
circle1' (ths/get-shape file' :circle1)
circle1'-applied-tokens (:applied-tokens circle1')]
;; ==== Check
(t/is (= (count applied-tokens') 0))
(t/is (= (count text1-applied-tokens) 0))))
(t/is (= (count frame1'-applied-tokens) 0))
(t/is (= (count text1'-applied-tokens) 0))
(t/is (= (count circle1'-applied-tokens) 0))))
(t/deftest unapply-tokens-automatic
(let [;; ==== Setup
@@ -232,6 +301,7 @@
page (thf/current-page file)
frame1 (ths/get-shape file :frame1)
text1 (ths/get-shape file :text1)
circle1 (ths/get-shape file :circle1)
;; ==== Action
changes (-> (-> (pcb/empty-changes nil)
@@ -263,16 +333,29 @@
:letter-spacing "0"
:font-family "Arial"}))
(:objects page)
{})
(cls/generate-update-shapes [(:id circle1)]
(fn [shape]
(-> shape
(ctn/set-shape-attr :layout-item-max-h 0)
(ctn/set-shape-attr :layout-item-min-h 0)
(ctn/set-shape-attr :layout-item-max-w 0)
(ctn/set-shape-attr :layout-item-min-w 0)
(ctn/set-shape-attr :layout-item-margin {})))
(:objects page)
{}))
file' (thf/apply-changes file changes)
;; ==== Get
frame1' (ths/get-shape file' :frame1)
text1' (ths/get-shape file' :text1)
applied-tokens-frame' (:applied-tokens frame1')
applied-tokens-text' (:applied-tokens text1')]
frame1' (ths/get-shape file' :frame1)
text1' (ths/get-shape file' :text1)
circle1' (ths/get-shape file' :circle1)
applied-tokens-frame' (:applied-tokens frame1')
applied-tokens-text' (:applied-tokens text1')
applied-tokens-circle' (:applied-tokens circle1')]
;; ==== Check
(t/is (= (count applied-tokens-frame') 0))
(t/is (= (count applied-tokens-text') 0))))
(t/is (= (count applied-tokens-text') 0))
(t/is (= (count applied-tokens-circle') 0))))