penpot/frontend/test/frontend_tests/tokens/copy_paste_props_test.cljs

;; This Source Code Form is subject to the terms of the Mozilla Public
;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;;
;; Copyright (c) KALEIDOS INC Sucursal en España SL

(ns frontend-tests.tokens.copy-paste-props-test
  (:require
   [app.common.types.shape :as cts]
   [cljs.test :as t :include-macros true]))

(defn- rect
  [attrs]
  (merge {:type :rect
          :fills [{:fill-color "#111111" :fill-opacity 1}]
          :r1 4 :r2 4 :r3 4 :r4 4
          :opacity 1}
         attrs))

(defn- content
  [node]
  {:type "root"
   :children [{:type "paragraph-set"
               :children [{:type "paragraph"
                           :children [node]}]}]})

(defn- text
  [attrs]
  (merge {:type :text
          :opacity 1
          :content (content {:text "hello"
                             :font-size "14"
                             :fills [{:fill-color "#111111" :fill-opacity 1}]})}
         attrs))

(defn- paste-props
  [source target]
  (cts/patch-props target (cts/extract-props source) {}))

;; ---------------------------------------------------------------------------
;; Token references must survive a copy/paste of properties
;; ---------------------------------------------------------------------------

(t/deftest copy-props-keeps-token-references
  (let [source (rect {:fills [{:fill-color "#ff0000" :fill-opacity 1}]
                      :r1 12
                      :applied-tokens {:fill "brand.primary" :r1 "radius.sm"}})
        target (rect {})
        result (paste-props source target)]

    (t/testing "the fill token reference is pasted, not only its resolved value"
      (t/is (= "brand.primary" (get-in result [:applied-tokens :fill]))))

    (t/testing "the border radius token reference is pasted"
      (t/is (= "radius.sm" (get-in result [:applied-tokens :r1]))))

    (t/testing "the resolved values are still pasted"
      (t/is (= [{:fill-color "#ff0000" :fill-opacity 1}] (:fills result)))
      (t/is (= 12 (:r1 result))))))

(t/deftest paste-props-removes-stale-target-tokens
  (let [source (rect {:fills [{:fill-color "#ff0000" :fill-opacity 1}]})
        target (rect {:applied-tokens {:fill "brand.secondary"}})
        result (paste-props source target)]

    (t/testing "a token-less source clears the token of the overwritten property"
      (t/is (nil? (get-in result [:applied-tokens :fill]))))))

(t/deftest paste-props-keeps-target-tokens-out-of-the-copied-domain
  (let [source (rect {:applied-tokens {:fill "brand.primary"}})
        target (rect {:applied-tokens {:width "size.lg"}})
        result (paste-props source target)]

    (t/testing "tokens of properties that are not copied are left untouched"
      (t/is (= "size.lg" (get-in result [:applied-tokens :width]))))

    (t/testing "tokens of copied properties are replaced"
      (t/is (= "brand.primary" (get-in result [:applied-tokens :fill]))))))

(t/deftest copy-props-ignores-tokens-of-non-copied-properties
  (let [source (rect {:applied-tokens {:width "size.lg" :height "size.lg"}})
        props  (cts/extract-props source)
        result (cts/patch-props (rect {}) props {})]

    (t/testing "sizing tokens are not copied because sizing is not a copied property"
      (t/is (nil? (get-in result [:applied-tokens :width])))
      (t/is (nil? (get-in result [:applied-tokens :height]))))))

(t/deftest copy-props-without-tokens-adds-no-empty-payload
  (let [source (rect {})
        props  (cts/extract-props source)
        result (cts/patch-props (rect {}) props {})]

    (t/testing "no empty :applied-tokens is introduced in the copied props"
      (t/is (not (contains? props :applied-tokens))))

    (t/testing "no empty :applied-tokens is introduced in the pasted shape"
      (t/is (not (contains? result :applied-tokens))))))

(t/deftest copy-props-keeps-layout-tokens-between-layout-frames
  (let [source (rect {:type :frame
                      :layout :flex
                      :layout-padding {:p1 8 :p2 8 :p3 8 :p4 8}
                      :layout-gap {:row-gap 4 :column-gap 4}
                      :applied-tokens {:p1 "spacing.md" :row-gap "spacing.sm"}})
        target (rect {:type :frame :layout :flex})
        result (paste-props source target)]

    (t/testing "padding and gap tokens travel with the layout properties"
      (t/is (= "spacing.md" (get-in result [:applied-tokens :p1])))
      (t/is (= "spacing.sm" (get-in result [:applied-tokens :row-gap])))
      (t/is (= {:p1 8 :p2 8 :p3 8 :p4 8} (:layout-padding result))))))

;; ---------------------------------------------------------------------------
;; A token may only leave the target when the value it resolves is overwritten
;; ---------------------------------------------------------------------------

(t/deftest paste-props-keeps-tokens-of-margin-edges-the-source-does-not-set
  (let [source (rect {:layout-item-margin {:m1 8 :m3 8}})
        target (rect {:layout-item-margin {:m4 16}
                      :applied-tokens {:m4 "spacing.md"}})
        result (paste-props source target)]

    (t/testing "the edges the source does not set keep their value"
      (t/is (= {:m1 8 :m3 8 :m4 16} (:layout-item-margin result))))

    (t/testing "and so do the tokens that resolve them"
      (t/is (= "spacing.md" (get-in result [:applied-tokens :m4]))))))

(t/deftest copy-props-ignores-tokens-of-margin-edges-the-source-does-not-set
  (let [source (rect {:layout-item-margin {:m1 8}
                      :applied-tokens {:m1 "spacing.sm" :m2 "spacing.lg"}})
        target (rect {:layout-item-margin {:m2 2}})
        result (paste-props source target)]

    (t/testing "the edge the source does not set keeps its value"
      (t/is (= {:m1 8 :m2 2} (:layout-item-margin result))))

    (t/testing "so its token does not travel either"
      (t/is (nil? (get-in result [:applied-tokens :m2]))))

    (t/testing "the token of the edge the source does set travels"
      (t/is (= "spacing.sm" (get-in result [:applied-tokens :m1]))))))

(t/deftest paste-props-keeps-gap-tokens-the-source-does-not-set
  (let [source (rect {:type :frame
                      :layout :flex
                      :layout-gap {:column-gap 4}})
        target (rect {:type :frame
                      :layout :flex
                      :layout-gap {:row-gap 2 :column-gap 2}
                      :applied-tokens {:row-gap "gap.row" :column-gap "gap.column"}})
        result (paste-props source target)]

    (t/testing "the gap axis the source does not set keeps its value"
      (t/is (= {:row-gap 2 :column-gap 4} (:layout-gap result))))

    (t/testing "and so does the token that resolves it"
      (t/is (= "gap.row" (get-in result [:applied-tokens :row-gap]))))

    (t/testing "the overwritten axis loses its stale token"
      (t/is (nil? (get-in result [:applied-tokens :column-gap]))))))

(t/deftest paste-props-keeps-padding-tokens-the-source-does-not-set
  (let [source (rect {:type :frame
                      :layout :flex
                      :layout-padding {:p1 8}})
        target (rect {:type :frame
                      :layout :flex
                      :layout-padding {:p1 1 :p3 3}
                      :applied-tokens {:p1 "padding.top" :p3 "padding.bottom"}})
        result (paste-props source target)]

    (t/testing "the padding edge the source does not set keeps its value"
      (t/is (= {:p1 8 :p3 3} (:layout-padding result))))

    (t/testing "and so does the token that resolves it"
      (t/is (= "padding.bottom" (get-in result [:applied-tokens :p3]))))

    (t/testing "the overwritten edge loses its stale token"
      (t/is (nil? (get-in result [:applied-tokens :p1]))))))

(t/deftest paste-props-keeps-tokens-of-properties-the-source-does-not-carry
  (let [source {:type :circle
                :fills [{:fill-color "#ff0000" :fill-opacity 1}]
                :opacity 1}
        target (rect {:shadow [{:color {:color "#000000"}}]
                      :layout-item-margin {:m1 5 :m2 5 :m3 5 :m4 5}
                      :applied-tokens {:r1 "radius.sm"
                                       :m1 "spacing.xs"
                                       :shadow "shadow.md"}})
        result (paste-props source target)]

    (t/testing "the values the source does not carry are untouched"
      (t/is (= 4 (:r1 result)))
      (t/is (= {:m1 5 :m2 5 :m3 5 :m4 5} (:layout-item-margin result))))

    (t/testing "and so are the tokens that resolve them"
      (t/is (= "radius.sm" (get-in result [:applied-tokens :r1])))
      (t/is (= "spacing.xs" (get-in result [:applied-tokens :m1])))
      (t/is (= "shadow.md" (get-in result [:applied-tokens :shadow]))))))

(t/deftest paste-props-keeps-layout-tokens-of-a-frame-when-the-source-has-no-layout
  (let [source (rect {:applied-tokens {:fill "brand.primary"}})
        target (rect {:type :frame
                      :layout :flex
                      :layout-padding {:p1 8 :p2 8 :p3 8 :p4 8}
                      :layout-gap {:row-gap 4 :column-gap 4}
                      :applied-tokens {:p1 "spacing.md" :row-gap "spacing.sm"}})
        result (paste-props source target)]

    (t/testing "the layout values are untouched because the source has none"
      (t/is (= {:p1 8 :p2 8 :p3 8 :p4 8} (:layout-padding result)))
      (t/is (= {:row-gap 4 :column-gap 4} (:layout-gap result))))

    (t/testing "and so are the padding and gap tokens"
      (t/is (= "spacing.md" (get-in result [:applied-tokens :p1])))
      (t/is (= "spacing.sm" (get-in result [:applied-tokens :row-gap]))))

    (t/testing "the copied fill token is still applied"
      (t/is (= "brand.primary" (get-in result [:applied-tokens :fill]))))))

;; ---------------------------------------------------------------------------
;; Text shapes carry their fill inside the content nodes
;; ---------------------------------------------------------------------------

(t/deftest copy-props-of-a-text-shape-carries-the-fill-token
  (let [source (text {:content (content {:text "hello"
                                         :font-size "14"
                                         :fills [{:fill-color "#ff0000" :fill-opacity 1}]})
                      :applied-tokens {:fill "brand.primary"
                                       :font-size "font.lg"}})
        props  (cts/extract-props source)
        result (cts/patch-props (rect {:applied-tokens {:fill "brand.old"}}) props {})]

    (t/testing "the fill of the text content is copied"
      (t/is (= [{:fill-color "#ff0000" :fill-opacity 1}] (:fills props))))

    (t/testing "so is the fill token that resolves it"
      (t/is (= "brand.primary" (get-in result [:applied-tokens :fill]))))

    (t/testing "typography tokens are not applied to a shape without text content"
      (t/is (nil? (get-in result [:applied-tokens :font-size]))))))

(t/deftest paste-props-on-a-text-target-replaces-the-fill-token
  (let [source (rect {:fills [{:fill-color "#ff0000" :fill-opacity 1}]
                      :applied-tokens {:fill "brand.primary"}})
        target (text {:applied-tokens {:fill "brand.old"}})
        result (paste-props source target)]

    (t/testing "the fill of the text content is overwritten"
      (t/is (= [{:fill-color "#ff0000" :fill-opacity 1}]
               (get-in result [:content :children 0 :children 0 :children 0 :fills]))))

    (t/testing "so the stale fill token cannot survive"
      (t/is (= "brand.primary" (get-in result [:applied-tokens :fill]))))))

(t/deftest paste-props-keeps-typography-tokens-of-a-text-target-when-the-source-is-not-text
  (let [source (rect {:applied-tokens {:fill "brand.primary"}})
        target (text {:applied-tokens {:font-size "font.lg" :fill "brand.old"}})
        result (paste-props source target)]

    (t/testing "the font size of the text content is untouched"
      (t/is (= "14" (get-in result [:content :children 0 :children 0 :children 0 :font-size]))))

    (t/testing "and so is the typography token that resolves it"
      (t/is (= "font.lg" (get-in result [:applied-tokens :font-size]))))))

(t/deftest copy-props-of-a-text-shape-does-not-apply-typography-to-a-non-text-target
  (let [source (text {:applied-tokens {:font-size "font.lg" :opacity "opacity.50"}})
        target (rect {})
        result (paste-props source target)]

    (t/testing "typography tokens of a text source are not applied to a non text target"
      (t/is (nil? (get-in result [:applied-tokens :font-size]))))

    (t/testing "tokens shared by both shapes are applied"
      (t/is (= "opacity.50" (get-in result [:applied-tokens :opacity]))))))