I have a problem with tests. I have a form and I w...

# fritz2

[Pitel]

I have a problem with tests. I have a form and I want to test that when I click the button, validation happens and errors are displayed.

class LoginTest {
    @Test
    fun validation() = runTest {
        initDocument()

        render {
            loginForm()
        }

        val login = document.getElementById(".login") as HTMLInputElement
        val loginErrorContainer = login.nextSibling as HTMLDivElement
        val password = document.getElementById(".password") as HTMLInputElement
        val passwordErrorContainer = password.nextSibling as HTMLDivElement
        assertTrue(login.value.isEmpty(), "Empty login field")
        assertFalse(loginErrorContainer.hasChildNodes(), "No login field error")
        assertTrue(password.value.isEmpty(), "Empty password field")
        assertFalse(passwordErrorContainer.hasChildNodes(), "No password field error")

        val button = document.getElementById("button") as HTMLButtonElement
        button.click()
        delay(50)

        assertTrue(loginErrorContainer.hasChildNodes(), "Some login field error")
        assertTrue(password.hasChildNodes(), "Some password field error")
    }
}

But the tests just hangs on button.click() :

> :jsBrowserTest > 25 06 2021 10:50:11.085:INFO [Chrome Headless 93.0.4549.3 (Linux x86_64)]: Connected on socket pIy-SHLUQGTGeug6AAAB with id 99633649 > 0 tests completed

When I open chrome:inspect, I see the headles chrome here but when I try to inspect it, it magicaly finishes with some weird errors.
I've tried running fritz2 tests, and they works, so I guess my Chrome is ok.

[Pitel]

The cu;riot seems to be with preventDefault() in form:

render {
    form {
        clickButton(id = "button").preventDefault()
    }
}

This doesn't work in test. I fi replace form with div, it starts working.

[Pitel]

Hm, byt it seems the handler is not called. WTF?!

[Pitel]

Oh, that's why there is a delat after render 🤦‍♂️

[Pitel]

But the problem with button in form and preventdefault still holds. Do you think it's fritz bug, or somethiong else?

[Christian Hausknecht]

Why do you have the preventDefault call on the button? What is the intention of this?
(Imho it does not make sense, as I do not see any event handling at all...)

Edit: After all you should show us more of the form-rendering code and ist binding to the appropriate store.

[Jan Weidenhaupt]

Hi, you should also try to add some delay(200) before you select your elements, because it needs some time that the elements gets rendered to be available in the DOM.
The problem with a button in a form is a know problem with html itself https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
I think you should avoid to use the html form element when not needed. Also I think you must prevent the submit event on the form and not the click event on the button https://stackoverflow.com/a/31032405

[Pitel]

Thanks for your replies. I've created an issue for that. If you don't mind, I'd like to continue the discussion there for better asynchronous communication.