penpot/frontend/test/token_tests/logic/token_actions_test.cljs

(ns token-tests.logic.token-actions-test
  (:require
   [app.common.pprint :refer [pprint]]
   [app.common.logging :as log]
   [app.common.test-helpers.compositions :as ctho]
   [app.common.test-helpers.files :as cthf]
   [app.common.test-helpers.shapes :as cths]
   [app.main.data.tokens :as wdt]
   [app.main.ui.workspace.tokens.changes :as wtch]
   [app.main.ui.workspace.tokens.token :as wtt]
   [app.main.ui.workspace.tokens.token-set :as wtts]
   [cljs.test :as t :include-macros true]
   [frontend-tests.helpers.pages :as thp]
   [frontend-tests.helpers.state :as ths]
   [token-tests.helpers.state :as tohs]
   [token-tests.helpers.tokens :as toht]))


(t/use-fixtures :each
  {:before (fn []
             ;; Ignore rxjs async errors
             (log/set-level! "app.main.data.changes" :error)
             (thp/reset-idmap!))})

(defn setup-file []
  (cthf/sample-file :file-1 :page-label :page-1))

(def border-radius-token
  {:value "12"
   :name "borderRadius.sm"
   :type :border-radius})

(def reference-border-radius-token
  {:value "{borderRadius.sm} * 2"
   :name "borderRadius.md"
   :type :border-radius})

;; (defn setup-file-with-tokens
;;   [& {:keys [rect-1 rect-2 rect-3]}]
;;   (-> (setup-file)
;;       (ctho/add-rect :rect-1 rect-1)
;;       (ctho/add-rect :rect-2 rect-2)
;;       (ctho/add-rect :rect-3 rect-3)
;;       (toht/add-token :token-1 border-radius-token)
;;       (toht/add-token :token-2 reference-border-radius-token)))

;; (t/deftest test-apply-token
;;   (t/testing "applies token to shape and updates shape attributes to resolved value"
;;     (t/async
;;      done
;;      (let [file (setup-file-with-tokens)
;;            store (ths/setup-store file)
;;            rect-1 (cths/get-shape file :rect-1)
;;            events [(wtch/apply-token {:shape-ids [(:id rect-1)]
;;                                       :attributes #{:rx :ry}
;;                                       :token (toht/get-token file :token-2)
;;                                       :on-update-shape wtch/update-shape-radius-all})]]
;;        (tohs/run-store-async
;;         store done events
;;         (fn [new-state]
;;           (let [file' (ths/get-file-from-store new-state)
;;                 token-2' (toht/get-token file' :token-2)
;;                 rect-1' (cths/get-shape file' :rect-1)]
;;             (t/testing "shape `:applied-tokens` got updated"
;;               (t/is (some? (:applied-tokens rect-1')))
;;               (t/is (= (:rx (:applied-tokens rect-1')) (wtt/token-identifier token-2')))
;;               (t/is (= (:ry (:applied-tokens rect-1')) (wtt/token-identifier token-2'))))
;;             (t/testing "shape radius got update to the resolved token value."
;;               (t/is (= (:rx rect-1') 24))
;;               (t/is (= (:ry rect-1') 24))))))))))

;; (t/deftest test-apply-multiple-tokens
;;   (t/testing "applying a token twice with the same attributes will override the previously applied tokens values"
;;     (t/async
;;      done
;;      (let [file (setup-file-with-tokens)
;;            store (ths/setup-store file)
;;            rect-1 (cths/get-shape file :rect-1)
;;            events [(wtch/apply-token {:shape-ids [(:id rect-1)]
;;                                       :attributes #{:rx :ry}
;;                                       :token (toht/get-token file :token-1)
;;                                       :on-update-shape wtch/update-shape-radius-all})
;;                    (wtch/apply-token {:shape-ids [(:id rect-1)]
;;                                       :attributes #{:rx :ry}
;;                                       :token (toht/get-token file :token-2)
;;                                       :on-update-shape wtch/update-shape-radius-all})]]
;;        (tohs/run-store-async
;;         store done events
;;         (fn [new-state]
;;           (let [file' (ths/get-file-from-store new-state)
;;                 token-2' (toht/get-token file' :token-2)
;;                 rect-1' (cths/get-shape file' :rect-1)]
;;             (t/testing "shape `:applied-tokens` got updated"
;;               (t/is (some? (:applied-tokens rect-1')))
;;               (t/is (= (:rx (:applied-tokens rect-1')) (wtt/token-identifier token-2')))
;;               (t/is (= (:ry (:applied-tokens rect-1')) (wtt/token-identifier token-2'))))
;;             (t/testing "shape radius got update to the resolved token value."
;;               (t/is (= (:rx rect-1') 24))
;;               (t/is (= (:ry rect-1') 24))))))))))

;; (t/deftest test-apply-token-overwrite
;;   (t/testing "removes old token attributes and applies only single attribute"
;;     (t/async
;;      done
;;      (let [file (setup-file-with-tokens)
;;            store (ths/setup-store file)
;;            rect-1 (cths/get-shape file :rect-1)
;;            events [;; Apply `:token-1` to all border radius attributes
;;                    (wtch/apply-token {:attributes #{:rx :ry :r1 :r2 :r3 :r4}
;;                                       :token (toht/get-token file :token-1)
;;                                       :shape-ids [(:id rect-1)]
;;                                       :on-update-shape wtch/update-shape-radius-all})
;;                    ;; Apply single `:r1` attribute to same shape
;;                    ;; while removing other attributes from the border-radius set
;;                    ;; but keep `:r4` for testing purposes
;;                    (wtch/apply-token {:attributes #{:r1}
;;                                       :attributes-to-remove #{:rx :ry :r1 :r2 :r3}
;;                                       :token (toht/get-token file :token-2)
;;                                       :shape-ids [(:id rect-1)]
;;                                       :on-update-shape wtch/update-shape-radius-all})]]
;;        (tohs/run-store-async
;;         store done events
;;         (fn [new-state]
;;           (let [file' (ths/get-file-from-store new-state)
;;                 token-1' (toht/get-token file' :token-1)
;;                 token-2' (toht/get-token file' :token-2)
;;                 rect-1' (cths/get-shape file' :rect-1)]
;;             (t/testing "other border-radius attributes got removed"
;;               (t/is (nil? (:rx (:applied-tokens rect-1')))))
;;             (t/testing "r1 got applied with :token-2"
;;               (t/is (= (:r1 (:applied-tokens rect-1')) (wtt/token-identifier token-2'))))
;;             (t/testing "while :r4 was kept"
;;               (t/is (= (:r4 (:applied-tokens rect-1')) (wtt/token-identifier token-1')))))))))));)))))))))))

;; (t/deftest test-apply-dimensions
;;   (t/testing "applies dimensions token and updates the shapes width and height"
;;     (t/async
;;      done
;;      (let [file (-> (setup-file-with-tokens)
;;                     (toht/add-token :token-target {:value "100"
;;                                                    :name "dimensions.sm"
;;                                                    :type :dimensions}))
;;            store (ths/setup-store file)
;;            rect-1 (cths/get-shape file :rect-1)
;;            events [(wtch/apply-token {:shape-ids [(:id rect-1)]
;;                                       :attributes #{:width :height}
;;                                       :token (toht/get-token file :token-target)
;;                                       :on-update-shape wtch/update-shape-dimensions})]]
;;        (tohs/run-store-async
;;         store done events
;;         (fn [new-state]
;;           (let [file' (ths/get-file-from-store new-state)
;;                 token-target' (toht/get-token file' :token-target)
;;                 rect-1' (cths/get-shape file' :rect-1)]
;;             (t/testing "shape `:applied-tokens` got updated"
;;               (t/is (some? (:applied-tokens rect-1')))
;;               (t/is (= (:width (:applied-tokens rect-1')) (wtt/token-identifier token-target')))
;;               (t/is (= (:height (:applied-tokens rect-1')) (wtt/token-identifier token-target'))))
;;             (t/testing "shapes width and height got updated"
;;               (t/is (= (:width rect-1') 100))
;;               (t/is (= (:height rect-1') 100))))))))))

;; (t/deftest test-apply-sizing
;;   (t/testing "applies sizing token and updates the shapes width and height"
;;     (t/async
;;      done
;;      (let [file (-> (setup-file-with-tokens)
;;                     (toht/add-token :token-target {:value "100"
;;                                                    :name "sizing.sm"
;;                                                    :type :sizing}))
;;            store (ths/setup-store file)
;;            rect-1 (cths/get-shape file :rect-1)
;;            events [(wtch/apply-token {:shape-ids [(:id rect-1)]
;;                                       :attributes #{:width :height}
;;                                       :token (toht/get-token file :token-target)
;;                                       :on-update-shape wtch/update-shape-dimensions})]]
;;        (tohs/run-store-async
;;         store done events
;;         (fn [new-state]
;;           (let [file' (ths/get-file-from-store new-state)
;;                 token-target' (toht/get-token file' :token-target)
;;                 rect-1' (cths/get-shape file' :rect-1)]
;;             (t/testing "shape `:applied-tokens` got updated"
;;               (t/is (some? (:applied-tokens rect-1')))
;;               (t/is (= (:width (:applied-tokens rect-1')) (wtt/token-identifier token-target')))
;;               (t/is (= (:height (:applied-tokens rect-1')) (wtt/token-identifier token-target'))))
;;             (t/testing "shapes width and height got updated"
;;               (t/is (= (:width rect-1') 100))
;;               (t/is (= (:height rect-1') 100))))))))))

;; (t/deftest test-apply-opacity
;;   (t/testing "applies opacity token and updates the shapes opacity"
;;     (t/async
;;      done
;;      (let [file (-> (setup-file-with-tokens)
;;                     (toht/add-token :opacity-float {:value "0.3"
;;                                                     :name "opacity.float"
;;                                                     :type :opacity})
;;                     (toht/add-token :opacity-percent {:value "40%"
;;                                                       :name "opacity.percent"
;;                                                       :type :opacity})
;;                     (toht/add-token :opacity-invalid {:value "100"
;;                                                       :name "opacity.invalid"
;;                                                       :type :opacity}))
;;            store (ths/setup-store file)
;;            rect-1 (cths/get-shape file :rect-1)
;;            rect-2 (cths/get-shape file :rect-2)
;;            rect-3 (cths/get-shape file :rect-3)
;;            events [(wtch/apply-token {:shape-ids [(:id rect-1)]
;;                                       :attributes #{:opacity}
;;                                       :token (toht/get-token file :opacity-float)
;;                                       :on-update-shape wtch/update-opacity})
;;                    (wtch/apply-token {:shape-ids [(:id rect-2)]
;;                                       :attributes #{:opacity}
;;                                       :token (toht/get-token file :opacity-percent)
;;                                       :on-update-shape wtch/update-opacity})
;;                    (wtch/apply-token {:shape-ids [(:id rect-3)]
;;                                       :attributes #{:opacity}
;;                                       :token (toht/get-token file :opacity-invalid)
;;                                       :on-update-shape wtch/update-opacity})]]
;;        (tohs/run-store-async
;;         store done events
;;         (fn [new-state]
;;           (let [file' (ths/get-file-from-store new-state)
;;                 rect-1' (cths/get-shape file' :rect-1)
;;                 rect-2' (cths/get-shape file' :rect-2)
;;                 rect-3' (cths/get-shape file' :rect-3)
;;                 token-opacity-float (toht/get-token file' :opacity-float)
;;                 token-opacity-percent (toht/get-token file' :opacity-percent)
;;                 token-opacity-invalid (toht/get-token file' :opacity-invalid)]
;;             (t/testing "float value got translated to float and applied to opacity"
;;               (t/is (= (:opacity (:applied-tokens rect-1')) (wtt/token-identifier token-opacity-float)))
;;               (t/is (= (:opacity rect-1') 0.3)))
;;             (t/testing "percentage value got translated to float and applied to opacity"
;;               (t/is (= (:opacity (:applied-tokens rect-2')) (wtt/token-identifier token-opacity-percent)))
;;               (t/is (= (:opacity rect-2') 0.4)))
;;             (t/testing "invalid opacity value got applied but did not change shape"
;;               (t/is (= (:opacity (:applied-tokens rect-3')) (wtt/token-identifier token-opacity-invalid)))
;;               (t/is (nil? (:opacity rect-3')))))))))))

;; (t/deftest test-apply-rotation
;;   (t/testing "applies rotation token and updates the shapes rotation"
;;     (t/async
;;       done
;;       (let [file (-> (setup-file-with-tokens)
;;                      (toht/add-token :token-target {:value "120"
;;                                                     :name "rotation.medium"
;;                                                     :type :rotation}))
;;             store (ths/setup-store file)
;;             rect-1 (cths/get-shape file :rect-1)
;;             events [(wtch/apply-token {:shape-ids [(:id rect-1)]
;;                                        :attributes #{:rotation}
;;                                        :token (toht/get-token file :token-target)
;;                                        :on-update-shape wtch/update-rotation})]]
;;         (tohs/run-store-async
;;          store done events
;;          (fn [new-state]
;;            (let [file' (ths/get-file-from-store new-state)
;;                  token-target' (toht/get-token file' :token-target)
;;                  rect-1' (cths/get-shape file' :rect-1)]
;;              (t/is (some? (:applied-tokens rect-1')))
;;              (t/is (= (:rotation (:applied-tokens rect-1')) (wtt/token-identifier token-target')))
;;              (t/is (= (:rotation rect-1') 120)))))))))

;; (t/deftest test-apply-stroke-width
;;   (t/testing "applies stroke-width token and updates the shapes with stroke"
;;     (t/async
;;      done
;;      (let [file (-> (setup-file-with-tokens {:rect-1 {:strokes [{:stroke-alignment :inner,
;;                                                                  :stroke-style :solid,
;;                                                                  :stroke-color "#000000",
;;                                                                  :stroke-opacity 1,
;;                                                                  :stroke-width 5}]}})
;;                     (toht/add-token :token-target {:value "10"
;;                                                    :name "stroke-width.sm"
;;                                                    :type :stroke-width}))
;;            store (ths/setup-store file)
;;            rect-with-stroke (cths/get-shape file :rect-1)
;;            rect-without-stroke (cths/get-shape file :rect-2)
;;            events [(wtch/apply-token {:shape-ids [(:id rect-with-stroke) (:id rect-without-stroke)]
;;                                       :attributes #{:stroke-width}
;;                                       :token (toht/get-token file :token-target)
;;                                       :on-update-shape wtch/update-stroke-width})]]
;;        (tohs/run-store-async
;;         store done events
;;         (fn [new-state]
;;           (let [file' (ths/get-file-from-store new-state)
;;                 token-target' (toht/get-token file' :token-target)
;;                 rect-with-stroke' (cths/get-shape file' :rect-1)
;;                 rect-without-stroke' (cths/get-shape file' :rect-2)]
;;             (t/testing "token got applied to rect with stroke and shape stroke got updated"
;;               (t/is (= (:stroke-width (:applied-tokens rect-with-stroke')) (wtt/token-identifier token-target')))
;;               (t/is (= (get-in rect-with-stroke' [:strokes 0 :stroke-width]) 10)))
;;             (t/testing "token got applied to rect without stroke but shape didnt get updated"
;;               (t/is (= (:stroke-width (:applied-tokens rect-without-stroke')) (wtt/token-identifier token-target')))
;;               (t/is (empty? (:strokes rect-without-stroke')))))))))))

;; (t/deftest test-toggle-token-none
;;   (t/testing "should apply token to all selected items, where no item has the token applied"
;;     (t/async
;;       done
;;       (let [file (setup-file-with-tokens)
;;             store (ths/setup-store file)
;;             rect-1 (cths/get-shape file :rect-1)
;;             rect-2 (cths/get-shape file :rect-2)
;;             events [(wtch/toggle-token {:shapes [rect-1 rect-2]
;;                                         :token-type-props {:attributes #{:rx :ry}
;;                                                            :on-update-shape wtch/update-shape-radius-all}
;;                                         :token (toht/get-token file :token-2)})]]
;;         (tohs/run-store-async
;;          store done events
;;          (fn [new-state]
;;            (let [file' (ths/get-file-from-store new-state)
;;                       token-2' (toht/get-token file' :token-2)
;;                       rect-1' (cths/get-shape file' :rect-1)
;;                       rect-2' (cths/get-shape file' :rect-2)]
;;              (t/is (some? (:applied-tokens rect-1')))
;;              (t/is (some? (:applied-tokens rect-2')))
;;              (t/is (= (:rx (:applied-tokens rect-1')) (wtt/token-identifier token-2')))
;;              (t/is (= (:rx (:applied-tokens rect-2')) (wtt/token-identifier token-2')))
;;              (t/is (= (:ry (:applied-tokens rect-1')) (wtt/token-identifier token-2')))
;;              (t/is (= (:ry (:applied-tokens rect-2')) (wtt/token-identifier token-2')))
;;              (t/is (= (:rx rect-1') 24))
;;              (t/is (= (:rx rect-2') 24)))))))))

;; (t/deftest test-toggle-token-mixed
;;   (t/testing "should unapply given token if one of the selected items has the token applied while keeping other tokens with some attributes"
;;     (t/async
;;       done
;;       (let [file (-> (setup-file-with-tokens)
;;                      (toht/apply-token-to-shape :rect-1 :token-1 #{:rx :ry})
;;                      (toht/apply-token-to-shape :rect-3 :token-2 #{:rx :ry}))
;;             store (ths/setup-store file)

;;             rect-with-token (cths/get-shape file :rect-1)
;;             rect-without-token (cths/get-shape file :rect-2)
;;             rect-with-other-token (cths/get-shape file :rect-3)

;;             events [(wtch/toggle-token {:shapes [rect-with-token rect-without-token rect-with-other-token]
;;                                         :token (toht/get-token file :token-1)
;;                                         :token-type-props {:attributes #{:rx :ry}}})]]
;;         (tohs/run-store-async
;;          store done events
;;          (fn [new-state]
;;            (let [file' (ths/get-file-from-store new-state)
;;                  rect-with-token' (cths/get-shape file' :rect-1)
;;                  rect-without-token' (cths/get-shape file' :rect-2)
;;                  rect-with-other-token' (cths/get-shape file' :rect-3)]

;;              (t/testing "rect-with-token got the token remove"
;;                (t/is (nil? (:rx (:applied-tokens rect-with-token'))))
;;                (t/is (nil? (:ry (:applied-tokens rect-with-token')))))

;;              (t/testing "rect-without-token didn't get updated"
;;                (t/is (= (:applied-tokens rect-without-token') (:applied-tokens rect-without-token))))

;;              (t/testing "rect-with-other-token didn't get updated"
;;                (t/is (= (:applied-tokens rect-with-other-token') (:applied-tokens rect-with-other-token)))))))))))

;; (t/deftest test-toggle-token-apply-to-all
;;   (t/testing "should apply token to all if none of the shapes has it applied"
;;     (t/async
;;       done
;;       (let [file (-> (setup-file-with-tokens)
;;                      (toht/apply-token-to-shape :rect-1 :token-2 #{:rx :ry})
;;                      (toht/apply-token-to-shape :rect-3 :token-2 #{:rx :ry}))
;;             store (ths/setup-store file)

;;             rect-with-other-token-1 (cths/get-shape file :rect-1)
;;             rect-without-token (cths/get-shape file :rect-2)
;;             rect-with-other-token-2 (cths/get-shape file :rect-3)

;;             events [(wtch/toggle-token {:shapes [rect-with-other-token-1 rect-without-token rect-with-other-token-2]
;;                                         :token (toht/get-token file :token-1)
;;                                         :token-type-props {:attributes #{:rx :ry}}})]]
;;         (tohs/run-store-async
;;          store done events
;;          (fn [new-state]
;;            (let [file' (ths/get-file-from-store new-state)
;;                  target-token (toht/get-token file' :token-1)
;;                  rect-with-other-token-1' (cths/get-shape file' :rect-1)
;;                  rect-without-token' (cths/get-shape file' :rect-2)
;;                  rect-with-other-token-2' (cths/get-shape file' :rect-3)]

;;              (t/testing "token got applied to all shapes"
;;                (t/is (= (:rx (:applied-tokens rect-with-other-token-1')) (wtt/token-identifier target-token)))
;;                (t/is (= (:rx (:applied-tokens rect-without-token')) (wtt/token-identifier target-token)))
;;                (t/is (= (:rx (:applied-tokens rect-with-other-token-2')) (wtt/token-identifier target-token)))

;;                (t/is (= (:ry (:applied-tokens rect-with-other-token-1')) (wtt/token-identifier target-token)))
;;                (t/is (= (:ry (:applied-tokens rect-without-token')) (wtt/token-identifier target-token)))
;;                (t/is (= (:ry (:applied-tokens rect-with-other-token-2')) (wtt/token-identifier target-token)))))))))))