🎉 Add frontend unit tests

common/src/app/common/test_helpers/tokens.cljc

@@ -0,0 +1,45 @@
+;; 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
+
+(ns app.common.test-helpers.tokens
+  (:require
+   [app.common.test-helpers.files :as thf]
+   [app.common.test-helpers.shapes :as ths]
+   [app.common.types.container :as ctn]
+   [app.common.types.file :as ctf]
+   [app.common.types.pages-list :as ctpl]
+   [app.common.types.shape-tree :as ctst]
+   [app.common.types.token :as cto]
+   [app.common.types.tokens-lib :as ctob]))
+
+(defn add-tokens-lib
+  [file]
+  (ctf/update-file-data file #(update % :tokens-lib ctob/ensure-tokens-lib)))
+
+(defn update-tokens-lib
+  [file f]
+  (ctf/update-file-data file #(update % :tokens-lib f)))
+
+(defn apply-token-to-shape
+  [file shape-label token-name token-attrs shape-attrs resolved-value]
+  (let [page   (thf/current-page file)
+        shape  (ths/get-shape file shape-label)
+        shape' (as-> shape $
+                 (cto/apply-token-to-shape {:shape $
+                                            :token {:name token-name}
+                                            :attributes token-attrs})
+                 (reduce (fn [shape attr]
+                           (ctn/set-shape-attr shape attr resolved-value {:ignore-touched true}))
+                         $
+                         shape-attrs))]
+
+    (ctf/update-file-data
+     file
+     (fn [file-data]
+       (ctpl/update-page file-data
+                         (:id page)
+                         #(ctst/set-shape % shape'))))))
+

frontend/src/app/main/data/workspace/libraries.cljs

@@ -786,7 +786,6 @@
          (rx/map #(reset-component %) (rx/from ids))
          (rx/of (dwu/commit-undo-transaction undo-id)))))))
 
-
 (defn update-component
   "Modify the component linked to the shape with the given id, in the
   current page, so that all attributes of its shapes are equal to the

frontend/src/app/main/ui/workspace/tokens/update.cljs

@@ -2,8 +2,8 @@
   (:require
    [app.common.types.token :as ctt]
    [app.main.data.workspace.shape-layout :as dwsl]
+   [app.main.data.workspace.state-helpers :as wsh]
    [app.main.data.workspace.undo :as dwu]
-   [app.main.refs :as refs]
    [app.main.ui.workspace.tokens.changes :as wtch]
    [app.main.ui.workspace.tokens.style-dictionary :as wtsd]
    [app.main.ui.workspace.tokens.token-set :as wtts]
@@ -112,8 +112,8 @@
                update-infos)))
           shapes-update-info))
 
-(defn update-tokens [resolved-tokens]
+(defn update-tokens [state resolved-tokens]
-  (->> @refs/workspace-page-objects
+  (->> (wsh/lookup-page-objects state)
        (collect-shapes-update-info resolved-tokens)
        (actionize-shapes-update-info)))
 
@@ -131,5 +131,5 @@
           (let [undo-id (js/Symbol)]
             (rx/concat
              (rx/of (dwu/start-undo-transaction undo-id))
-             (update-tokens sd-tokens)
+             (update-tokens state sd-tokens)
              (rx/of (dwu/commit-undo-transaction undo-id))))))))))

frontend/test/frontend_tests/helpers/state.cljs

@@ -57,7 +57,7 @@
                     (fn [cause]
                       (js/console.log "[error]:" cause))
                     (fn [_]
-                      (js/console.log "[complete]"))))
+                      #_(js/console.debug "[complete]"))))
 
      (doseq [event events]
        (ptk/emit! store event))

frontend/test/frontend_tests/logic/components_and_tokens.cljs

@@ -0,0 +1,286 @@
+;; 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
+(ns frontend-tests.logic.components-and-tokens
+  (:require
+   [app.common.geom.point :as geom]
+   [app.common.test-helpers.components :as cthc]
+   [app.common.test-helpers.compositions :as ctho]
+   [app.common.test-helpers.files :as cthf]
+   [app.common.test-helpers.ids-map :as cthi]
+   [app.common.test-helpers.shapes :as cths]
+   [app.common.test-helpers.tokens :as ctht]
+   [app.common.types.tokens-lib :as ctob]
+   [app.main.data.tokens :as dt]
+   [app.main.data.workspace.libraries :as dwl]
+   [app.main.data.workspace.selection :as dws]
+   [app.main.data.workspace.state-helpers :as wsh]
+   [app.main.ui.workspace.tokens.changes :as wtch]
+   [app.main.ui.workspace.tokens.update :as wtu]
+   [cljs.test :as t :include-macros true]
+   [frontend-tests.helpers.pages :as thp]
+   [frontend-tests.helpers.state :as ths]
+   [frontend-tests.tokens.helpers.state :as tohs]
+   [frontend-tests.tokens.helpers.tokens :as toht]))
+
+(t/use-fixtures :each
+  {:before thp/reset-idmap!})
+
+(defn- setup-base-file
+  []
+  (-> (cthf/sample-file :file1)
+      (ctht/add-tokens-lib)
+      (ctht/update-tokens-lib #(-> %
+                                   (ctob/add-set (ctob/make-token-set :name "test-token-set"))
+                                   (ctob/add-theme (ctob/make-token-theme :name "test-theme"
+                                                                          :sets #{"test-token-set"}))
+                                   (ctob/set-active-themes #{"/test-theme"})
+                                   (ctob/add-token-in-set "test-token-set"
+                                                          (ctob/make-token :name "test-token-1"
+                                                                           :type :border-radius
+                                                                           :value 25))
+                                   (ctob/add-token-in-set "test-token-set"
+                                                          (ctob/make-token :name "test-token-2"
+                                                                           :type :border-radius
+                                                                           :value 50))
+                                   (ctob/add-token-in-set "test-token-set"
+                                                          (ctob/make-token :name "test-token-3"
+                                                                           :type :border-radius
+                                                                           :value 75))))
+      (ctho/add-frame :frame1)
+      (ctht/apply-token-to-shape :frame1 "test-token-1" [:rx :ry] [:rx :ry] 25)))
+
+(defn- setup-file-with-main
+  []
+  (-> (setup-base-file)
+      (cthc/make-component :component1 :frame1)))
+
+(defn- setup-file-with-copy
+  []
+  (-> (setup-file-with-main)
+      (cthc/instantiate-component :component1 :c-frame1)))
+
+(t/deftest create-component-with-token
+  (t/async
+   done
+   (let [;; ==== Setup
+         file     (setup-base-file)
+         store    (ths/setup-store file)
+
+         ;; ==== Action
+         events
+         [(dws/select-shape (cthi/id :frame1))
+          (dwl/add-component)]]
+
+     (ths/run-store
+      store done events
+      (fn [new-state]
+        (let [;; ==== Get
+              file'          (ths/get-file-from-store new-state)
+              frame1'        (cths/get-shape file' :frame1)
+              tokens-frame1' (:applied-tokens frame1')]
+
+          ;; ==== Check
+          (t/is (= (count tokens-frame1') 2))
+          (t/is (= (get tokens-frame1' :rx) "test-token-1"))
+          (t/is (= (get tokens-frame1' :ry) "test-token-1"))
+          (t/is (= (get frame1' :rx) 25))
+          (t/is (= (get frame1' :ry) 25))))))))
+
+(t/deftest create-copy-with-token
+  (t/async
+   done
+   (let [;; ==== Setup
+         file     (setup-file-with-main)
+         store    (ths/setup-store file)
+
+         ;; ==== Action
+         events
+         [(dwl/instantiate-component (:id file)
+                                     (cthi/id :component1)
+                                     (geom/point 0 0))]]
+
+     (ths/run-store
+      store done events
+      (fn [new-state]
+        (let [;; ==== Get
+              selected       (wsh/lookup-selected new-state)
+              c-frame1'      (wsh/lookup-shape new-state (first selected))
+              tokens-frame1' (:applied-tokens c-frame1')]
+
+          ;; ==== Check
+          (t/is (= (count tokens-frame1') 2))
+          (t/is (= (get tokens-frame1' :rx) "test-token-1"))
+          (t/is (= (get tokens-frame1' :ry) "test-token-1"))
+          (t/is (= (get c-frame1' :rx) 25))
+          (t/is (= (get c-frame1' :ry) 25))))))))
+
+(t/deftest change-token-in-main
+  (t/async
+   done
+   (let [;; ==== Setup
+         file     (setup-file-with-copy)
+         store    (ths/setup-store file)
+
+         ;; ==== Action
+         events [(wtch/apply-token {:shape-ids [(cthi/id :frame1)]
+                                    :attributes #{:rx :ry}
+                                    :token (toht/get-token file "test-token-2")
+                                    :on-update-shape wtch/update-shape-radius-all})]
+
+         step2 (fn [_]
+                 (let [events2 [(dwl/sync-file (:id file) (:id file))]]
+                   (ths/run-store
+                    store done events2
+                    (fn [new-state]
+                      (let [;; ==== Get
+                            file'          (ths/get-file-from-store new-state)
+                            c-frame1'      (cths/get-shape file' :c-frame1)
+                            tokens-frame1' (:applied-tokens c-frame1')]
+
+                        ;; ==== Check
+                        (t/is (= (count tokens-frame1') 2))
+                        (t/is (= (get tokens-frame1' :rx) "test-token-2"))
+                        (t/is (= (get tokens-frame1' :ry) "test-token-2"))
+                        (t/is (= (get c-frame1' :rx) 50))
+                        (t/is (= (get c-frame1' :ry) 50)))))))]
+
+     (tohs/run-store-async
+      store step2 events identity))))
+
+(t/deftest remove-token-in-main
+  (t/async
+   done
+   (let [;; ==== Setup
+         file     (setup-file-with-copy)
+         store    (ths/setup-store file)
+
+         ;; ==== Action
+         events [(wtch/unapply-token {:shape-ids [(cthi/id :frame1)]
+                                      :attributes #{:rx :ry}
+                                      :token (toht/get-token file "test-token-1")})]
+
+         step2 (fn [_]
+                 (let [events2 [(dwl/sync-file (:id file) (:id file))]]
+                   (ths/run-store
+                    store done events2
+                    (fn [new-state]
+                      (let [;; ==== Get
+                            file'          (ths/get-file-from-store new-state)
+                            c-frame1'      (cths/get-shape file' :c-frame1)
+                            tokens-frame1' (:applied-tokens c-frame1')]
+
+                        ;; ==== Check
+                        (t/is (= (count tokens-frame1') 0))
+                        (t/is (= (get c-frame1' :rx) 25))
+                        (t/is (= (get c-frame1' :ry) 25)))))))]
+
+     (tohs/run-store-async
+      store step2 events identity))))
+
+(t/deftest modify-token
+  (t/async
+   done
+   (let [;; ==== Setup
+         file     (setup-file-with-copy)
+         store    (ths/setup-store file)
+
+         ;; ==== Action
+         events [(dt/update-create-token {:token (ctob/make-token :name "test-token-1"
+                                                                  :type :border-radius
+                                                                  :value 66)
+                                          :prev-token-name "test-token-1"})]
+
+         step2 (fn [_]
+                 (let [events2 [(wtu/update-workspace-tokens)
+                                (dwl/sync-file (:id file) (:id file))]]
+                   (tohs/run-store-async
+                    store done events2
+                    (fn [new-state]
+                      (let [;; ==== Get
+                            file'          (ths/get-file-from-store new-state)
+                            c-frame1'      (cths/get-shape file' :c-frame1)
+                            tokens-frame1' (:applied-tokens c-frame1')]
+
+                        ;; ==== Check
+                        (t/is (= (count tokens-frame1') 2))
+                        (t/is (= (get tokens-frame1' :rx) "test-token-1"))
+                        (t/is (= (get tokens-frame1' :ry) "test-token-1"))
+                        (t/is (= (get c-frame1' :rx) 66))
+                        (t/is (= (get c-frame1' :ry) 66)))))))]
+
+     (tohs/run-store-async
+      store step2 events identity))))
+
+(t/deftest change-token-in-copy-then-change-main
+  (t/async
+   done
+   (let [;; ==== Setup
+         file     (setup-file-with-copy)
+         store    (ths/setup-store file)
+
+         ;; ==== Action
+         events [(wtch/apply-token {:shape-ids [(cthi/id :c-frame1)]
+                                    :attributes #{:rx :ry}
+                                    :token (toht/get-token file "test-token-2")
+                                    :on-update-shape wtch/update-shape-radius-all})
+                 (wtch/apply-token {:shape-ids [(cthi/id :frame1)]
+                                    :attributes #{:rx :ry}
+                                    :token (toht/get-token file "test-token-3")
+                                    :on-update-shape wtch/update-shape-radius-all})]
+
+         step2 (fn [_]
+                 (let [events2 [(dwl/sync-file (:id file) (:id file))]]
+                   (ths/run-store
+                    store done events2
+                    (fn [new-state]
+                      (let [;; ==== Get
+                            file'          (ths/get-file-from-store new-state)
+                            c-frame1'      (cths/get-shape file' :c-frame1)
+                            tokens-frame1' (:applied-tokens c-frame1')]
+
+                        ;; ==== Check
+                        (t/is (= (count tokens-frame1') 2))
+                        (t/is (= (get tokens-frame1' :rx) "test-token-2"))
+                        (t/is (= (get tokens-frame1' :ry) "test-token-2"))
+                        (t/is (= (get c-frame1' :rx) 50))
+                        (t/is (= (get c-frame1' :ry) 50)))))))]
+
+     (tohs/run-store-async
+      store step2 events identity))))
+
+(t/deftest remove-token-in-copy-then-change-main
+  (t/async
+   done
+   (let [;; ==== Setup
+         file     (setup-file-with-copy)
+         store    (ths/setup-store file)
+
+         ;; ==== Action
+         events [(wtch/unapply-token {:shape-ids [(cthi/id :c-frame1)]
+                                      :attributes #{:rx :ry}
+                                      :token (toht/get-token file "test-token-1")})
+                 (wtch/apply-token {:shape-ids [(cthi/id :frame1)]
+                                    :attributes #{:rx :ry}
+                                    :token (toht/get-token file "test-token-3")
+                                    :on-update-shape wtch/update-shape-radius-all})]
+
+         step2 (fn [_]
+                 (let [events2 [(dwl/sync-file (:id file) (:id file))]]
+                   (ths/run-store
+                    store done events2
+                    (fn [new-state]
+                      (let [;; ==== Get
+                            file'          (ths/get-file-from-store new-state)
+                            c-frame1'      (cths/get-shape file' :c-frame1)
+                            tokens-frame1' (:applied-tokens c-frame1')]
+
+                        ;; ==== Check
+                        (t/is (= (count tokens-frame1') 0))
+                        (t/is (= (get c-frame1' :rx) 25))
+                        (t/is (= (get c-frame1' :ry) 25)))))))]
+
+     (tohs/run-store-async
+      store step2 events identity))))

frontend/test/frontend_tests/runner.cljs

@@ -4,6 +4,7 @@
    [frontend-tests.basic-shapes-test]
    [frontend-tests.helpers-shapes-test]
    [frontend-tests.logic.comp-remove-swap-slots-test]
+   [frontend-tests.logic.components-and-tokens]
    [frontend-tests.logic.copying-and-duplicating-test]
    [frontend-tests.logic.frame-guides-test]
    [frontend-tests.logic.groups-test]
@@ -28,6 +29,7 @@
   (t/run-tests
    'frontend-tests.helpers-shapes-test
    'frontend-tests.logic.comp-remove-swap-slots-test
+   'frontend-tests.logic.components-and-tokens
    'frontend-tests.logic.copying-and-duplicating-test
    'frontend-tests.logic.frame-guides-test
    'frontend-tests.logic.groups-test