From fc0ef72b6a11786ab254317804f96cb3ec2cfc39 Mon Sep 17 00:00:00 2001
From: Dave Smith <davesmith00000@users.noreply.github.com>
Date: Sat, 22 Jan 2022 11:15:28 +0000
Subject: [PATCH] Added a working example to the README

The purpose of adding this example is to demystify the plugins usage, hopefully making it easier for people to get started.
---
 README.md | 55 +++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 53 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 595f274..14a4d66 100644
--- a/README.md
+++ b/README.md
@@ -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`:
 
@@ -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)
+  }
+
+}
+```