Fork me on GitHub
Ricardo Cabral06:02:00

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))]
      (f mounted-component)
        (.unmount mounted-component)

(defn change-event [input, value]
  (.change tlr/fireEvent input value )

(deftest test-login-component
  (testing "Check login page fields, try to login with and without values"
      (fn [component]
         (= "email"
            (-> component
                (.getByPlaceholderText "Your e-mail")
                ) ))
         (= "password"
            (-> component
                (.getByPlaceholderText "Your password")
         (=  "submit"
             (-> component
              (.getByText "Login")

                       (.getByText component "Login"))

         (= "email is required"
            (-> component
                     (.getByText "email is required")
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 ) "" )
           (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?

Ricardo Cabral15:02:45

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

Ricardo Cabral07:02:57

It is because there is a logic behind it and I wanted to show that. I will try to simplify, thanks