ScalaJs With Play Framework (Error in Tests)

Question

I am trying to use ScalaJs cross build project with Play Framework 2.5. I am facing a problem when I am trying to run the tests for Client.scala . The error I am getting is -

caused by: TypeError: Cannot call method "appendChild" of null .

Client snippet

@JSExport
object DashboardClient extends js.JSApp {
@JSExport
def main(): Unit = {
val dashboard = new Dashboard
dom.document.getElementById("bodyContent").appendChild(dashboard.bodyFrag.render)
}

This bodyFrag is inside a different class

 def bodyFrag =
div(
  div(
    `class` := "row border-bottom",
    div(
      `class` := "col-md-12",
      div(
        `class` := "col-md-2 image-alignment",
        img(width := "161", src := "/assets/images/mountain.jpg")
      ),
      div(`class` := "col-md-10")
    )
  ),
  div(
    `class` := "row border-bottom",
    div(
      `class` := "col-md-12",
      div(
        `class` := "col-md-12",
        h1(`class` := "text-center", "Dashboard")
      )
    )
  )
)

So when I am trying to test is using utest I get the above mentioned error. Please help.

P.S - I am completely new to Scala and ScalaJs.

Answer 1

Well, the error doesn't appear to have anything to do with bodyFrag. (Or Play, or even Scala.js, really.) The error is literally saying that getElementById("bodyContent") is null, which means it doesn't yet exist. I assume it's declared in the HTML.

This is a common trap in browser code. You need to wait for the DOM to be ready before you try manipulating it; you don't show the HTML page, so I'm not sure whether you're doing that, but I suspect not.

There are various ways to wait for DOM ready -- the common (but slower) onload approach, and the jQuery approach, are discussed in the jQuery documentation. As a quick fix, I would recommend wrapping the call to your Scala.js code inside window.onload.