Get a full DOM object back from nanohtml on the server side.
Currently the nanohtml package returns a string when used in Node.js. The reason is to provide a performant server-rendering experience. What it doesn't allow is easy testing.
This package behaves a little like nanohtml did back when it was called bel. It uses domino, a Node.js implementation of the DOM, so that when using nanohtml it returns a DOM element.
This lets us test our nanohtml elements much more thoroughly than comparing strings. Returning a DOM element allows us to test attributes and event handlers without a bunch of hassle.
npm install --save nanohtml-node
Here's a very simple example testing interaction with a button click handler:
const test = require('tape')
const html = require('nanohtml-node')
test('test that element', function (t) {
t.plan(4)
function onclick (e) {
t.ok(typeof e === 'object')
t.ok(e.target.childNodes.length === 1)
const child = e.target.childNodes[0]
t.ok(child.nodeValue === 'ok')
}
const result = html`<button onclick=${onclick}>ok</button>`
t.ok(result.outerHTML === '<button>ok</button>')
result.click()
})
A conventient way to use this as an application dependency is to require this module only if the NODE_ENV
is test
:
module.exports = process.env.NODE_ENV === 'test'
? require('nanohtml-node')
: require('nanohtml')
Put the above in a file called html.js in your application and require it instead of requiring those modules independently.
This package is a simple wrapper around domino and nanohtml. You may find that you have slightly different needs than this package allows. The good news is that the code is very small and easy to copy/paste:
const domino = require('domino')
const nanohtml = require('nanohtml/lib/browser')
const dom = domino.createDOMImplementation()
global.document = dom.createHTMLDocument()
module.exports = nanohtml
module.exports.default = module.exports
You can use domino to create a document as part of the setup of your tests instead of relying on this package. Up to you!
Contributions are welcome! Please read the contributing guidelines first.
It's important that this project contributes to a friendly, safe, and welcoming environment for all, particularly for folks that are historically underrepresented in technology. Read this project's code of conduct
Read about the changes to this project in CHANGELOG.md. The format is based on Keep a Changelog and this project adheres to Semantic Versioning.
- chat – You can chat about this project in the #choo irc channel on freenode
- issues – Please open issues in the issues queue