Thank you guys for your answers. I am still learning and trying to understandthe better way to write tests. What should I do in the case I want to test a login page for instance? For example. I have a login component containing email, password and a login button. So far I am able to test If the components are present, the click on the login without values and when I want to change the input, set some specific value and call the onchange event it simply does not work. So I have found this library in order to simulate clicks and events in JS, however, it i a nightmare to add it to a clojure script project. What do you normally do to write tests like that? I will just paste the test here to see if someone could guide me to the right direction,
["@testing-library/react" :as tlr]
[reagent.core :as r]
(defn with-mounted-component [comp f]
(let [mounted-component (tlr/render (r/as-element comp))]
(try
(f mounted-component)
(finally
(.unmount mounted-component)
(r/flush)))))
(defn change-event [input, value]
(.change tlr/fireEvent input value )
(r/flush)
)
(deftest test-login-component
(testing "Check login page fields, try to login with and without values"
(with-mounted-component
[l/login-component]
(fn [component]
(is
(= "email"
(-> component
(.getByPlaceholderText "Your e-mail")
(.-type)
) ))
(is
(= "password"
(-> component
(.getByPlaceholderText "Your password")
(.-type))))
(is
(= "submit"
(-> component
(.getByText "Login")
(.-type))))
(click-element
(.getByText component "Login"))
(is
(= "email is required"
(-> component
(.getByText "email is required")
(.-innerHTML))))
There is the part which I have no idea how to test, because it does not work:
(let [cp (.getByRole component "email") ]
(set! (.-value cp ) "<mailto:test@test.com|test@test.com>" )
(change-event cp "{target: {value: { 'aaa'}}") ;; => change event is not triggered, it works if I do the same using pure react
(click-element (.getByText cp "Login")) )
Is "{target: {value: { 'aaa'}}"
really supposed to be a string?
Yes, I have tried with different values as well click works fine and onchange does not, But I am trying to find simpler ways of doing it
that's a page and a half with lots of newlines and lots of commented out code. i don't think many will read through it. probably better to clean it up and create a snippet. this allows it to be collapsible and have syntax highlighting
It is because there is a logic behind it and I wanted to show that. I will try to simplify, thanks