Fork me on GitHub
#reagent
<
2015-12-22
>
danbunea09:12:46

Hi, I'm trying to write a test for a simple reagent component, with a textbox: (defn choose-city-component [] (let [inner-state (r/atom {:text ""})] (fn [] [:div [:input#txt_city { :type "text" :value (@inner-state :text) :on-change #(swap! inner-state assoc :text (-> % .-target .-value)) ... (deftest choose-city-component-test-out ;;GIVEN render component in test (let [comp (r/render-component [w/choose-city-component] (. js/document (getElementById "test")))] ;;WHEN changing the city (let [$txt_city ($ :#txt_city)] (val $txt_city "london") (trigger $txt_city :change ) basically rendering the component in a div, then using jquery (jayq) trying to simulate an on-change on the text box. Can anyone come with a better idea? Thank you

danbunea16:12:09

I answered my own problem by using cljs-react-test, which was designed for om but it works with reagent as well

danbunea16:12:02

(deftest choose-city-component-test-out (let [comp (r/render-component [w/choose-city-component] (. js/document (getElementById "test"))) expected-invocations (atom [])] (with-redefs [weather-app.core/fetch-weather #(swap! expected-invocations conj %)] ;;GIVEN render component in test ;;WHEN changing the city and submitting (sim/change (sel1 :#txt_city) {:target {:value "london"}}) (sim/click (sel1 :#btn_go) nil) ;;ASSERT london should be sent to fetch-weather (is (=["london"] @expected-invocations)) )))

danbunea16:12:21

change is done: (sim/change (sel1 :#txt_city) {:target {:value "london"}})

danbunea16:12:42

and sel and sel1 come from dommy

gadfly36119:12:59

Yeah, cljs-react-test is nice

gadfly36121:12:19

added a few testing recipes to reagent cookbook (includes doo, ReactTestUtils and test.check)