clojurescript

ClojureScript, a dialect of Clojure that compiles to JavaScript http://clojurescript.org | Currently at 1.10.879
Ricardo Cabral 2021-02-06T06:46:00.017400Z

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'}}") ;; =&gt; change event is not triggered, it works if I do the same using pure react
        
           (click-element  (.getByText  cp "Login")) )

p-himik 2021-02-06T14:16:01.021200Z

Is "{target: {value: { 'aaa'}}" really supposed to be a string?

Ricardo Cabral 2021-02-06T15:03:45.021400Z

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

dpsutton 2021-02-06T06:55:32.018600Z

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 Cabral 2021-02-06T07:03:57.019200Z

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