Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 53 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@ This repository contains `scalajs-env-jsdom-nodejs` for Scala.js 1.x. In
Scala.js 0.6.x, the Node.js with jsdom environment is part of the core
distribution.

## Usage
## Setup

These instructions setup your test environment on Node.js such that you can write tests as if they were running on an HTML page.

Add the following line to `project/plugins.sbt`:

Expand All @@ -26,7 +28,56 @@ Finally, make sure that [jsdom](https://github.com/jsdom/jsdom) 10.0.0 or later
You can install it with

```bash
$ npm install jsdom
$ npm install jsdom --save-dev
```

Or with yarn if you prefer

```bash
$ yarn add jsdom --dev
```

See [the Scaladoc](https://javadoc.io/doc/org.scala-js/scalajs-env-jsdom-nodejs_2.13/latest/org/scalajs/jsenv/jsdomnodejs/index.html) for other configuration options.

## Usage - Writing a test

To access the dom, you will need to install [`scala-js-dom`](https://github.com/scala-js/scala-js-dom):

```scala
libraryDependencies += "org.scala-js" %%% "scalajs-dom" % "2.1.0"
```

Create a test in your favourite test framework, here is an example using [MUnit](https://scalameta.org/munit/).

```scala
import org.scalajs.dom.document

class ExampleJsDomTests extends munit.FunSuite {

test("Example jsdom test") {
val id = "my-fancy-element"
val content = "Hi there and greetings!"

// Create a new div element
val newDiv = document.createElement("div")

// Create an id attribute and assign it to the div
val a = document.createAttribute("id")
a.value = id
newDiv.setAttributeNode(a)

// Create some text content
val newContent = document.createTextNode(content)

// Add the text node to the newly created div
newDiv.appendChild(newContent)

// Add the newly created element and its content into the DOM
document.body.appendChild(newDiv)

// Find the element by id on the page, and compare the contents
assertEquals(document.getElementById(id).innerHTML, content)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does MUnit reverse the meaning of the arguments to assertEquals? Normally the expected value is on the left, and the actual value on the right.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did not know that. I've always treated it like a predicate e.g. if index == 0.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

However, I think it does flip them:

  test("assert") {
    assertEquals(1, 2)
  }

gives

values are not the same
=> Obtained
1
=> Diff (- obtained, + expected)
-1
+2

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK, then let's keep it as is.

}

}
```