Merge branch 'master' into circleci-20-test

Author: roman01la

test/clj/cljss/core_test.clj

@@ -1,78 +1,31 @@
 (ns cljss.core-test
   (:require [clojure.test :refer :all]
             [cljss.core :refer :all]
+            [cljss.rum :refer :all]
             [cljss.builder :refer :all]
             [cljss.font-face :as ff]
             [cljss.inject-global :as ig]))
 
-(def basic-styles {:color "red"})
+(deftest test-styles-builder
+  (testing "static"
+    (is (= (build-styles "cls" {:color "#fff"})
+           ["cls" [".cls{color:#fff;}"] []])))
 
-(def dynamic-styles {:background-color #(:bg %)
-                     :margin           #(if (:large %) "10px" "5px")})
+  (testing "pseudos"
+    (is (= (build-styles "cls" {:&:hover {:color "red"}})
+           ["cls" [".cls{}" ".cls:hover{color:red;}"] []])))
 
-(def pseudo-styles (merge basic-styles {:&:hover {:color "blue"}}))
+  (testing "string selector"
+    (is (= (build-styles "cls" {"a" {:color "blue"}})
+           ["cls" [".cls{}" ".cls a{color:blue;}"] []])))
 
-(def pseudo-dynamic-styles
-  (assoc
-    pseudo-styles
-    :&:active
-    {:color #(:active-color %)}))
+  (testing "dynamic"
+    (is (= (build-styles "cls" {:color 'x})
+           '["cls" [".cls{color:var(--var-cls-0);}"] [["--var-cls-0" x]]])))
 
-(def complete-styles
-  (merge
-    basic-styles
-    dynamic-styles
-    pseudo-dynamic-styles))
-
-;;; unique ids for style classes are generated
-;;; from the hashed set of non pseudo styles
-;;; this function replicates initialization
-;;; of styles in cljss.builder/build-styles
-;;; and produces the same hashed value used in
-;;; style ids
-(defn remove-pseudo [styles]
-  (filterv
-    (comp not #'cljss.builder/pseudo?)
-    styles))
-
-(deftest test-build-styles
-  (testing "building basic styles"
-    (let [[[id static vals]] (build-styles "test" basic-styles)]
-      (is (= "test" id))
-      (is (= ".test{color:red;}" static))
-      (is (empty? vals))))
-
-  (testing "building dynamic styles"
-    (let [[[id static vals]] (build-styles "test" dynamic-styles)]
-      (is (= "test" id))
-      (is (= ".test{background-color:var(--var-test-0);margin:var(--var-test-1);}" static))
-      (is (= [["--var-test-0" (:background-color dynamic-styles)] ["--var-test-1" (:margin dynamic-styles)]] vals))))
-
-  (testing "building basic pseudo styles"
-    (let [result (build-styles "test" pseudo-styles)]
-      (is (= result
-             [["test" ".test{color:red;}" []]
-              [".test:hover" ".test:hover{color:blue;}" []]]))))
-
-  (testing "building dynamic pseudo styles"
-    (let [result (build-styles "test" pseudo-dynamic-styles)]
-      (is (= result
-             [["test"
-               ".test{color:red;}"
-               [["--var-test-1" (get-in pseudo-dynamic-styles [:&:active :color])]]]
-              [".test:hover" ".test:hover{color:blue;}" []]
-              [".test:active" ".test:active{color:var(--var-test-1);}" []]]))))
-
-  (testing "building a complete set of styles"
-    (let [result (build-styles "test" complete-styles)]
-      (is (= result
-             [["test"
-               ".test{color:red;background-color:var(--var-test-0);margin:var(--var-test-1);}"
-               [["--var-test-0" (:background-color complete-styles)]
-                ["--var-test-1" (:margin complete-styles)]
-                ["--var-test-3" (get-in complete-styles [:&:active :color])]]]
-              [".test:hover" ".test:hover{color:blue;}" []]
-              [".test:active" ".test:active{color:var(--var-test-3);}" []]])))))
+  (testing "dynamic pseudos"
+    (is (= (build-styles "cls" {:&:hover {:color 'x}})
+           '["cls" [".cls{}" ".cls:hover{color:var(--var-cls-0);}"] [["--var-cls-0" x]]]))))
 
 (deftest test-font-face
   (testing "build @font-face"

test/cljs/cljss/core_test.cljs

@@ -6,7 +6,7 @@
   (testing "static css only"
     (let [[tag static vals attrs] (test-styled Test :h1 {:color "white"})]
       (is (= "h1" tag))
-      (is (= ".cljss_core-test__Test{color:white;}" static))))
+      (is (= [".cljss_core-test__Test{color:white;}"] static))))
 
   (testing "static with attrs"
     (let [[tag static vals attrs] (test-styled Test :h1 {:v-margin   "8px"
@@ -15,21 +15,21 @@
           varname                 (aget val 0)
           class-name              ".cljss_core-test__Test"
           attr                    (aget attrs 0)]
-      (is (= static (str class-name "{v-margin:8px;margin-top:var(" varname ");}")))
+      (is (= static [(str class-name "{v-margin:8px;margin-top:var(" varname ");}")]))
       (is (= :v-margin attr))))
 
   (testing "dynamic values"
     (let [[tag static vals attrs] (test-styled Test :h1 {:margin #(if (:large %) "10px" "5px")})
           val                     (aget vals 0)
           varname                 (aget val 0)]
       (is (= "--var-cljss_core-test__Test-0" varname))
-      (is (= (str ".cljss_core-test__Test{margin:var(" varname ");}") static))))
+      (is (= [(str ".cljss_core-test__Test{margin:var(" varname ");}")] static))))
 
   (testing "pseudo styles"
     (let [[tag static vals attrs]
           (test-styled Test :h1 {:color "white" :&:hover {:color "red"}})
           class-name ".cljss_core-test__Test"]
-      (is (= static (str class-name "{color:white;}" class-name ":hover{color:red;}")))))
+      (is (= static [(str class-name "{color:white;}") (str class-name ":hover{color:red;}")]))))
 
   (testing "dynamic pseudo styles"
     (let [[tag static vals attrs]
@@ -40,8 +40,8 @@
           val        (aget vals 0)
           varname    (aget val 0)
           class-name ".cljss_core-test__Test"]
-      (is (= "--var-cljss_core-test__Test:hover-0" varname))
-      (is (= static (str class-name "{color:blue;}" class-name ":hover{color:var(" varname ");}")))))
+      (is (= "--var-cljss_core-test__Test-0" varname))
+      (is (= static [(str class-name "{color:blue;}") (str class-name ":hover{color:var(" varname ");}")]))))
 
   (testing "status attributes"
     (let [[tag static vals attrs]
@@ -50,7 +50,7 @@
           val        (aget vals 0)
           varname    (aget val 0)
           func       (aget val 1)]
-      (is (= static (str class-name "{font-size:var(" varname ");}")))
+      (is (= static [(str class-name "{font-size:var(" varname ");}")]))
       (is (= "14px" (func {:active? true})))))
 
   (testing "a complete set of styles"
@@ -72,10 +72,10 @@
           varname-1  (aget val-1 0)
           val-2      (aget vals 2)
           varname-2  (aget val-2 0)]
-      (is (= static (-> class-name
-                      (str "{color:white;")
-                      (str "font-size:var(" varname-0 ");")
-                      (str "background-color:var(" varname-1 ");}")
-                      (str class-name ":hover")
-                      (str "{color:green;")
-                      (str "text-decoration:var(" varname-2 ");}")))))))
+      (is (= static [(-> class-name
+                         (str "{color:white;")
+                         (str "font-size:var(" varname-0 ");")
+                         (str "background-color:var(" varname-1 ");}"))
+                     (-> (str class-name ":hover")
+                         (str "{color:green;")
+                         (str "text-decoration:var(" varname-2 ");}"))])))))