对于一个有文本框的组件,我需要能够从测试中更改其中的文本:
(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....
现在使用jQuery触发器,我试图在文本上模拟onChange:
我们试过
(.change ($ :#txt_city) {"target" {"value" "Paris"}})
和
(.trigger ($ :#txt_city) "change" {"target" {"value" "Paris"}}))
但它不起作用。。。
我不太了解jQuery,但您的代码不应该更像(js/$ "#txt_city")
吗(注意:参数是字符串,而不是关键字)。
此外,从试剂测试本身中寻找灵感:https://github.com/reagent-project/reagent/blob/master/test/reagenttest/testreagent.cljs
答案是cljs反应测试:
(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))
)))
我们使用的位置:
[cljs-react-test.simulate :as sim]
[dommy.core :as dommy :refer-macros [sel1 sel]]
和在项目.clj
:dependencies [[org.clojure/clojure "1.7.0"]
[org.clojure/clojurescript "1.7.170"]
[org.clojure/core.async "0.2.374"]
[reagent "0.5.1" :exclusions [cljsjs/react]]
[cljs-react-test "0.1.3-SNAPSHOT"]
[cljsjs/react-with-addons "0.13.3-0"]
[cljs-ajax "0.5.2"]
[jayq "2.5.4"]]