I'm trying to figure out how to insert a new Electric component into already existing DOM node, in a test. I tried this:
(e/defn AddDiv []
(e/client
(binding [dom/node (.getElementById js/document "root-div")]
(dom/div (dom/props {:id "added-div"})
(dom/text "some text"))
(println dom/node)
(println (js/document.getElementById "added-div"))
(js/setTimeout #(println (js/document.getElementById "added-div")) 1000))))
(tests
(with
((l/local {}
(AddDiv)
(tap 1))
tap tap)
% := 1))
When I run this test, root-div is found, but added-div is not. I thought calling dom/div produces the side-effect of mounting a new DOM element?The rcf test finishes after the first tap. Maybe the div mounted and unmounted immediately. You should tap more stuff instead of adding settimeouts
I recommend you play around in a browser with a hot code reloading setup, I dont think you're going to be happy trying to do TDD for an Electric app
e.g. we have not trailblazed or polished this experience so even if it technically works, it's not likely to be pleasant
I have hot reload, just want to add a couple tests ensuring that I put all the pieces together correctly. I might break something during refactoring, and don't want to check pages manually.
@xifi I tried adding some taps, but couldn't get it to work. How would you write a test for a code using electric-dom3? Maybe there are examples somewhere?
Here is a working example. I used to have a bunch of browser tests for our v2 UI components like the typeahead. It would test behavior, like type something press enter this text should show up etc. It was hand rolled though. Have you considered writing playwright tests?
I haven't considered Playwright tests yet. Will take a look.