hey guys, how do you test reagent components with states?

I have a simple input using a r/atom:

(defn input-component [value]
  [:input {:type "text"
           :value @value
           :placeholder "Enter some text"
           :on-change #(reset! value (-> % .-target .-value))}])

My test is like that

(deftest input-component-test
  (let [state (r/atom "")]
    (render-to "#react-root" [app/input-component state])
    (let [elem-input (aget (query "input") 0)]
      (is (= (.-value elem-input)
             ""))
      (is (= @state
             ""))

      (swap! state (fn [] "something"))      
      (is (= (.-value elem-input)
             "something")))))

And the result

FAIL in (input-component-test) (at http:418:14)
expected: (= (.-value elem-input) "something")
  actual: (not (= "" "something"))

So, what I understand is that the DOM isn't updated when my last assertion runs.

How do you test that kind of thing?

does the component work in the browser the way you expect?

yes, it does

you can see it there http://www.webp.ch/boot-cljs-experiments/

So … you guys have no idea how to handle that situation?

@dgellow: [not 100% sure] - have you tried calling regent/flush before doing the test. doing it should explicitly flush to DOM

also have a look at the test suite of reagent. This looks close to what you are doing: https://github.com/reagent-project/reagent/blob/master/test/reagenttest/testreagent.cljs#L108

thank your rohit, I'll check reagent.core/flush

Is there a documentation of reagent's api somewhere? I see a lot of references to reaction and flush in the code but no references to them in the README.md and the website.

ya. the API is lacking documentation. imho, the functions in reagent.core have pretty good doc strings. There is a GH issue for it: https://github.com/reagent-project/reagent/issues/191

@dgellow: i’m generating the codox docs. I’ll put them up on GH shortly

👍

@rohit my tests work when I call to r/flush after my swap!'s, thank you for your help!

great

here are the API docs: https://ducky427.github.io/reagent-docs

Nice!

I've created a page on reagent's wiki with the link to your github page https://github.com/reagent-project/reagent/wiki/API-Documentation

oh cool. thanks. I hope it ultimately lives under the reagent-project umbrella. mine is a temporary hack or rather scratching an itch

still better than nothing I think

i agree