Adds support for cljs testing and ->styled tests

.circleci/config.yml

@@ -24,9 +24,16 @@ jobs:
 
       - run: lein deps
 
+      - run:
+          name: Install 'phantomjs'
+          command: |
+            sudo curl --output /tmp/phantomjs https://s3.amazonaws.com/circle-downloads/phantomjs-2.1.1
+            sudo chmod ugo+x /tmp/phantomjs
+            sudo ln -sf /tmp/phantomjs /usr/local/bin/phantomjs
+
       - save_cache:
           paths:
             - ~/.m2
           key: v1-dependencies-{{ checksum "project.clj" }}
 
-      - run: lein test
+      - run: lein test-all

.gitignore

@@ -11,3 +11,8 @@ pom.xml.asc
 .hg/
 .idea
 *.iml
+*~
+\#*\#
+.\#*
+out/
+resources/

README.md

@@ -218,6 +218,28 @@ $ cd example
 $ lein figwheel
 ```
 
+## Testing
+
+cljss uses a combination of Clojure and ClojureScript tests. Clojure tests are run via `lein test` and ClojureScript tests are run via [doo](https://github.com/bensu/doo). ClojureScript tests require a valid environment in order to run - [PhantomJS](http://phantomjs.org/) being the easiest to install.
+
+Once a valid environment is setup, ClojureScript tests can be run like so:
+
+```
+$ lein doo phantom test once
+```
+
+Or with file watching:
+
+```
+$ lein doo phantom test
+```
+
+To run Clojure and ClojureScript tests at once use the `test-all` task:
+
+```
+$ lein test-all
+```
+
 If using emacs [cider](https://github.com/clojure-emacs/cider) - you can also launch the repl using `M-x cider-jack-in-clojurescript`.
 
 ## License

project.clj

@@ -1,7 +1,26 @@
 (defproject org.roman01la/cljss "1.5.5"
   :description "Clojure Style Sheets"
+
   :url "https://github.com/roman01la/cljss"
+
   :license {:name "Eclipse Public License"
             :url "http://www.eclipse.org/legal/epl-v10.html"}
+
   :dependencies [[org.clojure/clojure "1.9.0-alpha16" :scope "provided"]
-                 [org.clojure/clojurescript "1.9.562" :scope "provided"]])
+                 [org.clojure/clojurescript "1.9.562" :scope "provided"]]
+
+  :test-paths ["test/clj"]
+
+  :profiles {:dev {:source-paths ["src" "test/clj"]
+
+                   :plugins [[lein-doo "0.1.8"]
+                             [lein-cljsbuild "1.1.7"]]}}
+
+  :aliases {"test-all" ["do" ["test"] ["doo" "phantom" "test" "once"]]}
+
+  :cljsbuild
+  {:builds [{:id "test"
+             :source-paths ["src" "test/cljs"]
+             :compiler {:output-to "resources/public/js/testable.js"
+                        :main cljss.runner
+                        :optimizations :none}}]})

test/cljs/cljss/core_test.cljs

@@ -0,0 +1,81 @@
+(ns cljss.core-test
+  (:require [cljs.test :refer-macros [is testing deftest]])
+  (:require-macros [cljss.test-macros :refer [test-styled]]))
+
+(deftest test->styled
+  (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))))
+
+  (testing "static with attrs"
+    (let [[tag static vals attrs] (test-styled Test :h1 {:v-margin   "8px"
+                                                         :margin-top :v-margin})
+          val                     (aget vals 0)
+          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 (= :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))))
+
+  (testing "psuedo 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;}")))))
+
+  (testing "dynamic psuedo styles"
+    (let [[tag static vals attrs]
+          (test-styled
+            Test
+            :h1
+            {:color "blue" :&:hover {:color #(if (:bright %) "white" "black")}})
+          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 ");}")))))
+
+  (testing "status attributes"
+    (let [[tag static vals attrs]
+          (test-styled Test :h1 {:font-size "48px" :active? {:font-size "14px"}})
+          class-name ".cljss_core-test__Test"
+          val        (aget vals 0)
+          varname    (aget val 0)
+          func       (aget val 1)]
+      (is (= static (str class-name "{font-size:var(" varname ");}")))
+      (is (= "14px" (func {:active? true})))))
+
+  (testing "a complete set of styles"
+    (let [[tag static vals attrs]
+          (test-styled
+            Test
+            :h1
+            {:color            "white"
+             :font-size        "48px"
+             :background-color #(if (= "dark" (:theme %)) "black" "white")
+             :&:hover          {:color "green"
+                                :text-decoration
+                                #(if (= "underlined" (:decoration %)) "underline" "wavy")}
+             :active?          {:font-size "14px"}})
+          class-name ".cljss_core-test__Test"
+          val-0      (aget vals 0)
+          varname-0  (aget val-0 0)
+          val-1      (aget vals 1)
+          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 ");}")))))))

test/cljs/cljss/runner.cljs

@@ -0,0 +1,5 @@
+(ns cljss.runner
+  (:require [doo.runner :refer-macros [doo-tests]]
+            [cljss.core-test]))
+
+(doo-tests 'cljss.core-test)

test/cljs/cljss/test_macros.clj

@@ -0,0 +1,6 @@
+(ns cljss.test-macros
+  (:require [cljss.core :refer [->styled var->cls-name]]))
+
+(defmacro test-styled [var tag styles]
+  (let [cls-name# (var->cls-name var)]
+    (->styled tag styles cls-name#)))