Hi! How do you do testing when you require an ele...

# javascript

[Dra]

Hi!

How do you do testing when you require an element from the document?

For more details :
I am testing a method that requires a value modified in the HTML of the page so I have created a getter that looks like this :

val prompt get() = document.querySelector(".prompt-box")!!

When I run the page "normally" it works I can use the things how I want but when I try to run my test I always get this stacktrace :

NullPointerException
	at Object.captureStack(/tmp/_karma_webpack_318847/commons.js:40068)
	at NullPointerException.constructor(/tmp/_karma_webpack_318847/commons.js:40401)
	at NullPointerException.constructor(/tmp/_karma_webpack_318847/commons.js:40427)
	at RuntimeException.init(/tmp/_karma_webpack_318847/commons.js:40438)
	at <global>.new NullPointerException(/tmp/_karma_webpack_318847/commons.js:40547)
	at Object.throwNPE(/tmp/_karma_webpack_318847/commons.js:44251)
	at Kotlin.ensureNotNull(/tmp/_karma_webpack_318847/commons.js:2224)
	at Object.get_prompt(/tmp/_karma_webpack_318847/commons.js:66566)
	at TestClient.testAddCharToOperation(/tmp/_karma_webpack_318847/commons.js:66475)
	at <global>.<unknown>(/tmp/_karma_webpack_318847/commons.js:66523)

(The div with a class exists in my HTML)
I tried out some things but I couldn't manage to make the tests work properly... Here's my last try :

@Test
    fun testAddCharToOperation() {
        val div = document.createElement("div")
        div.innerHTML = """<div class="prompt-box">0</div> """

        assertEquals("", operation)
        assertEquals("0", prompt.textContent)

        addCharToOperations('1')
        assertEquals("1", operation)
        assertEquals("1", prompt.textContent)
}

[Big Chungus]

Remember that tests are run in nodejs environment, not the browser. So you need to make use of virtual browser frameworks to do this kind of testing

[Big Chungus]

Have a read here to give you some ideas

[Dra]

I have this in my build.gradle.kts about tests :

testTask {
    useKarma {
        useChromium()
    }
}

How should I change it ?

[Big Chungus]

No idea, never done this kind of testing on kotlin.js

[Dra]

Hmmm.. I'll dig up a bit more on what you said then, ty for the hint !

[andylamax]

Assuming you have

kotlin {
  js {
     browser {  // important
       testTask {
           useKarma {
              // . . .
           }
       }      
     }
  }
}

In your tests, try appending those created elements to the dom. It should work

[Dra]

I tried doing smth like that in my different tries :

val container = document.createElement("div")
container.append {
    div {
         +"0"
         classes = setOf("prompt-box")
    }
}
//followed by tests assert

but in the end it didn't work @andylamax :/

[Dra]

Ok, so I just changed my test to :

@Test
    fun testAddCharToOperation() {
        document.body?.append {
            div {
                +"0"
                classes = setOf("prompt-box")
            }
        }
        val prompt = document.querySelector(".prompt-box")!!

        assertEquals("", operation)
        assertEquals("0", prompt.textContent)

        addCharToOperations('1')
        assertEquals("1", operation)
        assertEquals("1", prompt.textContent)
}

and it started to work out of the blue

[Dra]

Thanks @andylamax and @Big Chungus for your help !