 (deftest tag-names
   (testing "basic tags"
     (are-html-expanded
-     [:div] '(js/React.DOM.div nil)
-     [:div] '(js/React.DOM.div nil)
-     ["div"] '(js/React.DOM.div nil)
-     ['div] '(sablono.interpreter/interpret [div])))
+     '[:div] '(js/React.DOM.div nil)
+     '[:div] '(js/React.DOM.div nil)
+     '["div"] '(js/React.DOM.div nil)
+     '['div] '(js/React.DOM.div nil)))
   (testing "tag syntax sugar"
     (are-html-expanded
-     [:div#foo] '(js/React.DOM.div #js {:id "foo"})
-     [:div.foo] '(js/React.DOM.div #js {:className "foo"})
-     [:div.foo (str "bar" "baz")] '(js/React.DOM.div #js {:className "foo"} "barbaz")
-     [:div.a.b] '(js/React.DOM.div #js {:className "a b"})
-     [:div.a.b.c] '(js/React.DOM.div #js {:className "a b c"})
-     [:div#foo.bar.baz] '(js/React.DOM.div #js {:id "foo", :className "bar baz"}))))
+     '[:div#foo] '(js/React.DOM.div #js {:id "foo"})
+     '[:div.foo] '(js/React.DOM.div #js {:className "foo"})
+     '[:div.foo (str "bar" "baz")]
+     '(let* [attrs (str "bar" "baz")]
+            (if (clojure.core/map? attrs)
+              (js/React.DOM.div (sablono.interpreter/attributes (sablono.util/merge-with-class {:className ["foo"]} attrs)) nil)
+              (js/React.DOM.div {:className "foo"} (sablono.interpreter/interpret attrs))))
+     '[:div.a.b] '(js/React.DOM.div #js {:className "a b"})
+     '[:div.a.b.c] '(js/React.DOM.div #js {:className "a b c"})
+     '[:div#foo.bar.baz] '(js/React.DOM.div #js {:id "foo", :className "bar baz"}))))
 
 (deftest tag-contents
   (testing "empty tags"
     (are-html-expanded
-     [:div] '(js/React.DOM.div nil)
-     [:h1] '(js/React.DOM.h1 nil)
-     [:script] '(js/React.DOM.script nil)
-     [:text] '(js/React.DOM.text nil)
-     [:a] '(js/React.DOM.a nil)
-     [:iframe] '(js/React.DOM.iframe nil)
-     [:title] '(js/React.DOM.title nil)
-     [:section] '(js/React.DOM.section nil)))
+     '[:div] '(js/React.DOM.div nil)
+     '[:h1] '(js/React.DOM.h1 nil)
+     '[:script] '(js/React.DOM.script nil)
+     '[:text] '(js/React.DOM.text nil)
+     '[:a] '(js/React.DOM.a nil)
+     '[:iframe] '(js/React.DOM.iframe nil)
+     '[:title] '(js/React.DOM.title nil)
+     '[:section] '(js/React.DOM.section nil)))
   (testing "tags containing text"
     (are-html-expanded
-     [:text "Lorem Ipsum"] '(js/React.DOM.text nil "Lorem Ipsum")))
+     '[:text "Lorem Ipsum"] '(js/React.DOM.text nil "Lorem Ipsum")))
   (testing "contents are concatenated"
     (are-html-expanded
-     [:div "foo" "bar"]
+     '[:div "foo" "bar"]
      '(js/React.DOM.div nil "foo" "bar")
-     [:div [:p] [:br]]
+     '[:div [:p] [:br]]
      '(js/React.DOM.div
-          nil
-          (js/React.DOM.p nil)
-          (js/React.DOM.br nil))))
+       nil
+       (js/React.DOM.p nil)
+       (js/React.DOM.br nil))))
   (testing "seqs are expanded"
     ;; (is (= (html [:div (list "foo" "bar")]) "<div><span>foo</span><span>bar</span></div>"))
     ;; (is (= (html (list [:p "a"] [:p "b"])) "<p>a</p><p>b</p>"))


(deftest test-issue-3-recursive-js-literal
  (are-html-expanded
   [:div.interaction-row {:style {:position "relative"}}]
   '(js/React.DOM.div #js {:className "interaction-row", :style #js {:position "relative"}}))
  (let [username "foo", hidden #(if %1 {:display "none"} {:display "block"})]
    (are-html-expanded
     `[:ul.nav.navbar-nav.navbar-right.pull-right
       [:li.dropdown {:style (hidden (nil? ~username))}
        [:a.dropdown-toggle {:role "button" :href "#"} (str "Welcome, " ~username)
         [:span.caret]]
        [:ul.dropdown-menu {:role "menu" :style {:left 0}}]]]
     '(js/React.DOM.ul
          #js {:className "nav navbar-nav navbar-right pull-right"}
          (js/React.DOM.li
              #js {:style (clj->js (sablono.compiler-test/hidden (clojure.core/nil? "foo"))), :className "dropdown"}
              (js/React.DOM.a
                  #js {:role "button", :href "#", :className "dropdown-toggle"}
                  (sablono.interpreter/interpret (clojure.core/str "Welcome, " "foo"))
                  (js/React.DOM.span #js {:className "caret"}))
              (js/React.DOM.ul #js {:role "menu", :style #js {:left 0}, :className "dropdown-menu"}))))))

      (is (= @times-called 1)))))

(deftest test-benchmark-template
  (are-html-expanded
   '[:li
     [:a {:href (str "#show/" (:key datum))}]
     [:div {:id (str "item" (:key datum))
            :className ["class1" "class2"]}
      [:span {:className "anchor"} (:name datum)]]]
   '(js/React.DOM.li
     nil
     (js/React.DOM.a
      #js {:href (str "#show/" (:key datum))})
     (js/React.DOM.div
      #js {:id (str "item" (:key datum)), :className "class1 class2"}
      (js/React.DOM.span {:className "anchor"} (sablono.interpreter/interpret (:name datum)))))))

(deftest test-issue-2-merge-classname
  (are-html-expanded
