Merge pull request #372 from reagent-project/feature/context-tests

Feature/context tests

CHANGELOG.md

@@ -7,6 +7,9 @@
 - Fix problem which caused using e.g. `:class` property with custom HTML element to break normal elements
 - Fix problem using keyword or symbol as `:class` together with element tag class shorthand, e.g. `[:p.a {:class :b}]` ([#367](https://github.com/reagent-project/reagent/issues/367))
 - Added support for using keywords and symbols in `:class` collection
+- Removed component type assertion for `:>` (#[369](https://github.com/reagent-project/reagent/issues/369), [#372](https://github.com/reagent-project/reagent/pull/372)))
+  - This caused problems with React Context where component is Plain JS object with special properties
+  - `React/createElement` will still provide error if `:>` is used with invalid values
 
 ## 0.8.0 (2018-04-19)
 

src/reagent/impl/template.cljs

@@ -383,11 +383,10 @@
             pos (.indexOf n ">")]
         (case pos
           -1 (native-element (cached-parse n) v 1)
+          ;; TODO: Doesn't this match :>foo or any keyword starting with >
           0 (let [comp (nth v 1 nil)]
               ;; Support [:> comp ...]
               (assert (= ">" n) (hiccup-err v "Invalid Hiccup tag"))
-              (assert (or (string? comp) (fn? comp))
-                      (hiccup-err v "Expected React component in"))
               (native-element #js{:name comp} v 2))
           ;; Support extended hiccup syntax, i.e :div.bar>a.foo
           ;; Apply metadata (e.g. :key) to the outermost element.

test/reagenttest/testreagent.cljs

@@ -962,9 +962,19 @@
     (is (thrown-with-msg?
          :default #"Invalid Hiccup form: \[23]"
          (rstr [23])))
-    (is (thrown-with-msg?
-         :default #"Expected React component in: \[:> \[:div]]"
-         (rstr [:> [:div]])))
+    ;; This used to be asserted by Reagent, but because it is hard to validate
+    ;; components, now we just trust React will validate elements.
+    ; (is (thrown-with-msg?
+    ;      :default #"Expected React component in: \[:> \[:div]]"
+    ;      (rstr [:> [:div]])))
+    ;; This is from React.createElement
+    ;; NOTE: browser-npm uses production cjs bundle for now which only shows
+    ;; the minified error
+    (debug/track-warnings
+      (wrap-capture-console-error
+        #(is (thrown-with-msg?
+               :default #"(Element type is invalid:|Minified React error)"
+               (rstr [:> [:div]])))))
     (is (thrown-with-msg?
          :default #"Invalid tag: 'p.'"
          (rstr [:p.])))
@@ -1182,3 +1192,40 @@
                     [children])])]
       (is (= "<div><div>hello</div><div>world</div><div>foo</div></div>"
              (as-string [comp]))))))
+
+(defonce my-context (react/createContext "default"))
+
+(def Provider (.-Provider my-context))
+(def Consumer (.-Consumer my-context))
+
+(deftest new-context-test
+  (is (= "<div>Context: foo</div>"
+         (rstr (r/create-element
+                 Provider #js {:value "foo"}
+                 (r/create-element
+                   Consumer #js {}
+                   (fn [v]
+                     (r/as-element [:div "Context: " v])))))))
+
+  (testing "context default value works"
+    (is (= "<div>Context: default</div>"
+           (rstr (r/create-element
+                   Consumer #js {}
+                   (fn [v]
+                     (r/as-element [:div "Context: " v])))))))
+
+  (testing "context works with adapt-react-class"
+    (let [provider (r/adapt-react-class Provider)
+          consumer (r/adapt-react-class Consumer)]
+      (is (= "<div>Context: bar</div>"
+             (rstr [provider {:value "bar"}
+                    [consumer {}
+                     (fn [v]
+                       (r/as-element [:div "Context: " v]))]])))))
+
+  (testing "context works with :>"
+    (is (= "<div>Context: bar</div>"
+           (rstr [:> Provider {:value "bar"}
+                  [:> Consumer {}
+                   (fn [v]
+                     (r/as-element [:div "Context: " v]))]])))))