From 74085c421179837349e7ac0260c2358011450e72 Mon Sep 17 00:00:00 2001
From: Daniel Leong <me@dhleong.net>
Date: Fri, 1 Nov 2024 13:26:38 -0400
Subject: [PATCH] Add explicit tests for "complex" defkeyframes forms

Any form that needs top level language structures (like `(let)`) instead
of directly emitting their garden forms are "complex." For style
declarations like defclass, we can rely on garden's support for `[:&]`
as a self-referential symbol to handle these cases. `(at-keyframes)`
*could* support this symbol, but per API expects a variadic sequence of
rules, eg `(at-keyframes [:from {:opacity 0}] [:to {:opacity 1}])`.

In the currently published version of garden, `defkeyframes` sort of
abuses the fact that it incorrectly also accepts a list containing the
sequence of rules. However, there's an unpublished change that "fixes"
this bug, breaking defkeyframes. Relatedly, our unofficial support for
manual `^{:key key}` meta on the first rule doesn't work with
complex `defkeyframes`. I'm not *the most* worried about that, but we'll
definitely need to fix the first issue, so if we can fix the second
while we're there, we might as well.
---
 test/spade/core_test.cljs | 58 +++++++++++++++++++++++++++++++++++++--
 1 file changed, 56 insertions(+), 2 deletions(-)

diff --git a/test/spade/core_test.cljs b/test/spade/core_test.cljs
index a501716..eb7ce33 100644
--- a/test/spade/core_test.cljs
+++ b/test/spade/core_test.cljs
@@ -10,7 +10,9 @@
          composed-factory$
          composed-list-factory$
          composed-attrs-factory$
-         parameterized-key-frames-factory$)
+         parameterized-key-frames-factory$
+         complex-keyframes-factory$
+         multi-complex-keyframes-factory$)
 
 (defclass computed-key [color]
   ^{:key (str/upper-case color)}
@@ -123,6 +125,29 @@
           :opacity ::*from*}]
   [:to {:opacity 1}])
 
+(defkeyframes complex-keyframes [from]
+  (let [k (* 2 from)]
+    ^{:key k}
+    ; NOTE: This :& form is not *really* supported by garden's
+    ; (at-keyframes) function, but it is a familiar syntax for
+    ; the other def* forms, so let's make it work here so we can
+    ; support complex forms with a shared computation.
+    [:&
+     [:from {::*from* from
+             :opacity ::*from*}]
+     [:to {:opacity 1}]]))
+
+(defkeyframes multi-complex-keyframes [from]
+  (let [k (* 2 from)]
+    ^{:key k}
+    ; NOTE: This :& form is not *really* supported by garden's
+    ; (at-keyframes) function, but it is a familiar syntax for
+    ; the other def* forms, so let's make it work here so we can
+    ; support complex forms with a shared computation.
+    [:from {::*from* from
+            :opacity ::*from*}])
+  [:to {:opacity 1}])
+
 (deftest defkeyframes-test
   (testing "Return keyframes name from defkeyframes"
     (is (fn? key-frames))
@@ -134,6 +159,14 @@
     (is (= (str "spade-core-test-parameterized-key-frames_" (hash [0]))
            (parameterized-key-frames 0))))
 
+  (testing "Return dynamic name for complex defkeyframes"
+    (is (fn? complex-keyframes))
+    (is (fn? multi-complex-keyframes))
+    (is (= (str "spade-core-test-complex-keyframes_84")
+           (complex-keyframes 42)))
+    (is (= (str "spade-core-test-multi-complex-keyframes_84")
+           (multi-complex-keyframes 42))))
+
   (testing "CSS var declaration and usage"
     (let [generated (-> (parameterized-key-frames-factory$
                          "with-vars" [42])
@@ -147,7 +180,28 @@
                 " }")))
       (is (str/includes?
            generated
-           (str "to { opacity: 1; }"))))))
+           (str "to { opacity: 1; }")))))
+
+  (testing "CSS var declaration and usage within a block"
+    ; NOTE: The styles generated should be identical to above
+    (let [generated (-> (complex-keyframes-factory$
+                         "with-vars" [42])
+                        :css
+                        (str/replace #"\s+" " "))
+          multi-generated (-> (multi-complex-keyframes-factory$
+                               "with-vars" [42])
+                              :css
+                              (str/replace #"\s+" " "))]
+      (is (str/includes?
+           generated
+           (str "from {"
+                " --spade-core-test--from: 42;"
+                " opacity: var(--spade-core-test--from);"
+                " }")))
+      (is (str/includes?
+           generated
+           (str "to { opacity: 1; }")))
+      (is (= generated multi-generated)))))
 
 (defclass composed [color]
   ^{:key color}