`}
+
+ `
+ }
+})
+
+test('updates in place', function (t) {
+ var id = makeId()
+ var div = document.createElement('div')
+ div.innerHTML = 'Hi world!'
+ document.body.appendChild(div)
+
+ render(main('planet'), div)
+ var res = document.getElementById(id)
+ t.equal(res.innerText, 'planet', 'content mounted')
+ render(main('world'), div)
+ t.equal(res.innerText, 'world', 'content updated')
+ document.body.removeChild(div)
+ t.end()
+
+ function main (text) {
+ return html`
Hello ${html`${text}`}!
`
+ }
+})
+
+test('persists in DOM between mounts', function (t) {
+ var id = makeId()
+ var div = document.createElement('div')
+ div.innerHTML = 'Hi world!'
+ document.body.appendChild(div)
+
+ render(foo('planet'), div)
+ var res = document.getElementById(id)
+ t.equal(res.innerText, 'planet', 'did mount')
+
+ render(bar('world'), div)
+ var updated = document.getElementById(id)
+ t.ok(res.isSameNode(updated), 'same node')
+ t.equal(updated.innerText, 'world', 'content updated')
+ document.body.removeChild(div)
+ t.end()
+
+ function foo (text) {
+ return html`
Hello ${name(text)}!
`
+ }
+
+ function bar (text) {
+ return html`
Hello ${name(text)}!
`
}
- t.equal(result.tagName, 'UL')
- t.equal(result.querySelector('button').textContent, 'click me')
+ function name (text) {
+ return html`${text}`
+ }
+})
+
+test('updating with null', function (t) {
+ var id = makeId()
+ var div = document.createElement('div')
+ div.innerHTML = 'Hi world!'
+ document.body.appendChild(div)
+
+ render(main('planet'), div)
+ var res = document.getElementById(id)
+ t.equal(res.innerHTML, 'Hello planet!', 'did mount')
+ render(main(false), div)
+ t.equal(res.innerHTML, 'Hello !', 'node was removed')
+ render(main('world'), div)
+ t.equal(res.innerHTML, 'Hello world!', 'node added back')
+ document.body.removeChild(div)
+ t.end()
+
+ function main (text) {
+ return html`
Hello ${text || null}!
`
+ }
+})
+
+test('updating from null', function (t) {
+ var id = makeId()
+ var div = document.createElement('div')
+ div.innerHTML = 'Hi world!'
+ document.body.appendChild(div)
+
+ render(main(false), div)
+ var res = document.getElementById(id)
+ t.equal(res.innerHTML, 'Hello !', 'node was removed')
+ render(main('planet'), div)
+ t.equal(res.innerHTML, 'Hello planet!', 'did mount')
+ render(main('world'), div)
+ t.equal(res.innerHTML, 'Hello world!', 'node added back')
+ document.body.removeChild(div)
+ t.end()
+
+ function main (text) {
+ return html`
Hello ${text || null}!
`
+ }
+})
+
+test('updating with array', function (t) {
+ var div = document.createElement('div')
+ div.innerHTML = 'Hi world!'
+ document.body.appendChild(div)
+
+ var children = [
+ html`planet`,
+ html`world`
+ ]
+ render(main(children[0]), div)
+ var firstChild = div.firstElementChild
+ t.equal(div.innerText, 'Hello planet!', 'child mounted')
+ render(main(children), div)
+ t.equal(div.innerText, 'Hello planetworld!', 'all children mounted')
+ t.equal(div.firstElementChild, firstChild, 'child remained in place')
+ document.body.removeChild(div)
+ t.end()
- button.click()
+ function main (children) {
+ return html`
Hello ${children}!
`
+ }
})
-test('using class and className', function (t) {
- t.plan(2)
- var result = html``
- t.equal(result.className, 'test1')
- result = html``
- t.equal(result.className, 'test2 another')
+test('alternating partials', function (t) {
+ var id = makeId()
+ var world = html`world`
+ var planet = html`planet`
+ var div = document.createElement('div')
+ div.innerHTML = 'Hi world!'
+ document.body.appendChild(div)
+
+ render(main(planet), div)
+ var res = document.getElementById(id)
+ t.equal(res.innerText, 'Hello planet!', 'did mount')
+ render(main(world), div)
+ t.equal(res.innerText, 'Hello world!', 'did update')
+ document.body.removeChild(div)
t.end()
+
+ function main (child) {
+ return html`
Hello ${child}!
`
+ }
})
+
+test('reordering children', function (t) {
+ var ids = [makeId(), makeId()]
+ var children = [
+ html`world`,
+ html`planet`
+ ]
+ var div = document.createElement('div')
+ div.innerHTML = 'Hi world!'
+ document.body.appendChild(div)
+
+ render(main(children), div)
+ var world = document.getElementById(ids[0])
+ var planet = document.getElementById(ids[1])
+ t.equal(world.nextSibling, planet, 'mounted in order')
+ t.equal(div.innerText, 'Hello worldplanet!', 'children in order')
+ render(main(children.reverse()), div)
+ world = document.getElementById(ids[0])
+ planet = document.getElementById(ids[1])
+ t.equal(planet.nextElementSibling, world, 'children reordered')
+ t.equal(div.innerText, 'Hello planetworld!', 'children in (reversed) order')
+ document.body.removeChild(div)
+ t.end()
+
+ function main (children) {
+ return html`
Hello ${children}!
`
+ }
+})
+
+test('async partials', function (t) {
+ t.test('resolves generators', function (t) {
+ t.plan(5)
+ var div = document.createElement('div')
+ render(html`
Hello ${outer('world')}!
`, div)
+ t.equal(div.innerText, 'Hello world!', 'content rendered')
+ t.equal(div.dataset.test, 'test', 'attribute resolved')
+
+ function * outer (text) {
+ var res = yield * echo(text)
+ t.equal(res, text, 'nested generators are unwound')
+ return html`${res}`
+ }
+
+ function * echo (arg) {
+ var res = yield 'foo'
+ t.equal(res, 'foo', 'yielded values are returned')
+ return arg
+ }
+ })
+
+ t.test('resolves promises', function (t) {
+ t.plan(4)
+ var div = document.createElement('div')
+ render(html`
Hello ${Promise.resolve('world')}!
`, div)
+ t.equal(div.innerText, 'Hello !', 'promise partial left blank')
+ t.equal(div.dataset.test, undefined, 'attribute left blank')
+ window.requestAnimationFrame(function () {
+ t.equal(div.innerText, 'Hello world!', 'content updated once resolved')
+ t.equal(div.dataset.test, 'test', 'attribute updated once resolved')
+ })
+ })
+
+ t.test('recursively resolves nested generators and promises', function (t) {
+ t.plan(4)
+ var div = document.createElement('div')
+ render(html`
Hello ${outer('world')}!
`, div)
+ t.equal(div.innerText, 'Hello !', 'promise partial left blank')
+ window.requestAnimationFrame(function () {
+ t.equal(div.innerText, 'Hello world!', 'content updated once resolved')
+ t.equal(div.firstElementChild.dataset.test, 'test', 'attribute updated once resolved')
+ })
+
+ function * outer (text) {
+ var res = yield Promise.resolve(inner(text))
+ t.equal(res, text, 'yielded promises are resolved')
+ return html`${res}`
+
+ function * inner (text) {
+ var res = yield text
+ return res
+ }
+ }
+ })
+
+ t.test('top level async generators resolve', function (t) {
+ t.plan(3)
+ var div = document.createElement('div')
+ var res = render(main('world'), div)
+ t.ok(res instanceof Promise, 'returns promise')
+ t.equal(div.innerText, '', 'nothing renderd async')
+ res.then(function () {
+ t.equal(div.innerText, 'Hello world!', 'content updated once resolved')
+ })
+
+ function * main (text) {
+ var res = yield Promise.resolve(text)
+ return html`
Hello ${res}!
`
+ }
+ })
+
+ t.test('does not succomb to race condition', function (t) {
+ t.plan(4)
+ var div = document.createElement('div')
+ render(Promise.resolve(main(Promise.resolve('world'))), div)
+ render(main('planet'), div)
+ t.equal(div.innerText, 'Hello planet!', 'sync content rendered')
+ t.equal(div.dataset.test, 'planet', 'sync attribute rendered')
+ window.requestAnimationFrame(function () {
+ t.equal(div.innerText, 'Hello planet!', 'sync content persisted')
+ t.equal(div.dataset.test, 'planet', 'sync attribute persisted')
+ })
+
+ function main (val) {
+ return html`
Hello ${val}!
`
+ }
+ })
+
+ t.test('does not affect ordering', function (t) {
+ t.plan(2)
+ var state = 0
+ var list = render(main())
+ t.equal(list.textContent, '1246', 'sync content rendered')
+ render(main(), list)
+ list.children.four.remove()
+ window.requestAnimationFrame(function () {
+ t.equal(list.textContent, '1356', 'async content in place')
+ })
+
+ function main (val) {
+ return html`
+
+
1
+ ${state++ ? null : html`
2
`}
+ ${Promise.resolve(html`
3
`)}
+ ${[
+ html`
4
`,
+ Promise.resolve(html`
5
`),
+ html`
6
`
+ ]}
+
+ `
+ }
+ })
+})
+
+test('can access elements with ref', function (t) {
+ var ref1 = new Ref('test')
+ var ref2
+
+ t.throws(function () {
+ ref1.className // eslint-disable-line
+ }, 'throws when accessing Element prototype property before render')
+ t.doesNotThrow(function () {
+ ref1.foo // eslint-disable-line
+ }, 'does not throw when accessing arbitrary prop')
+ t.throws(function () {
+ 'use strict'
+ ref1.className = 'foo'
+ }, 'mutating ref before render in strict mode throws')
+ t.doesNotThrow(function () {
+ ref1.className = 'foo'
+ }, 'mutation fails silently in non-strict mode')
+
+ var div = document.createElement('div')
+ document.body.appendChild(div)
+ render(main(ref1), div)
+
+ t.equal(div.id, 'test', 'custom ref id assigned')
+ t.equal(ref1.element, div, 'ref.element references element')
+ t.equal(ref1.className, 'test1', 'properties are read from element')
+ ref1.className = 'test2'
+ t.equal(div.className, 'test2', 'properties are set to element')
+ var id = ref2.id
+ render(main(ref1), div)
+ t.equal(id, ref2.id, 'id persist between renders')
+ document.body.removeChild(div)
+ t.end()
+
+ function main () {
+ ref2 = new Ref()
+ return html`
+
+ Hello world!
+
+ `
+ }
+})
+
+function makeId () {
+ return 'uid-' + Math.random().toString(36).substr(-4)
+}
diff --git a/tests/browser/component.js b/tests/browser/component.js
new file mode 100644
index 0000000..f868825
--- /dev/null
+++ b/tests/browser/component.js
@@ -0,0 +1,154 @@
+var test = require('tape')
+var { html, render } = require('../../')
+var { Component, memo, onupdate, onload } = require('../../component')
+
+// TODO: test alternating return value (null/array/partial)
+
+test('component can render', function (t) {
+ var id = makeId()
+ var div = document.createElement('div')
+ div.innerHTML = 'Hi world!'
+ document.body.appendChild(div)
+
+ var Greeting = Component(function Greeting (text) {
+ return html`Hello ${text}!`
+ })
+
+ render(main('planet'), div)
+ var res = document.getElementById(id)
+ t.equal(res.innerText, 'planet', 'content mounted')
+ render(main('world'), div)
+ t.equal(res.innerText, 'world', 'content updated')
+ document.body.removeChild(div)
+ t.end()
+
+ function main (text) {
+ return html`
${Greeting(text)}
`
+ }
+})
+
+test('component can render fragment', function (t) {
+ var update
+ var Greeting = Component(function Greeting (text) {
+ update = onupdate()
+ return html`Hello${text}!`
+ })
+ var div = document.createElement('div')
+ render(html`
${Greeting('world')}
`, div)
+ t.equal(div.innerText, 'Hello world!', 'children rendered')
+ update('planet')
+ t.equal(div.innerText, 'Hello planet!', 'children updated')
+ t.end()
+})
+
+test('component can update', function (t) {
+ t.plan(6)
+
+ var id = makeId()
+ var div = document.createElement('div')
+ div.innerHTML = 'Hi world!'
+ document.body.appendChild(div)
+
+ var update
+ var BEFORE_UPDATE = 0
+ var AFTER_UPDATE = 1
+ var state = BEFORE_UPDATE
+ var Greeting = Component(function Greeting (value) {
+ update = onupdate(function afterupdate (value) {
+ t.equal(value, state, 'afterupdate called with latest argument')
+ return function beforeupdate (value) {
+ t.equal(value, state, 'beforeupdate called with latest argument')
+ }
+ })
+ return html`Hello ${value}!`
+ })
+
+ render(main(state), div)
+ var res = document.getElementById(id)
+ t.equal(res.innerText, BEFORE_UPDATE.toString(), 'content mounted')
+ t.equal(typeof update, 'function', 'onupdate returns function')
+ update(++state)
+ t.equal(res.innerText, AFTER_UPDATE.toString(), 'content updated')
+ document.body.removeChild(div)
+
+ function main (value) {
+ return html`
${Greeting(value)}
`
+ }
+})
+
+test('component can memoize arguments', function (t) {
+ t.plan(12)
+
+ var id = makeId()
+ var div = document.createElement('div')
+ div.innerHTML = 'Hi world!'
+ document.body.appendChild(div)
+
+ var update
+ var BEFORE_UPDATE = [0, 0, 0]
+ var AFTER_UPDATE = [1, 1, 1]
+ var state = BEFORE_UPDATE
+ var Greeting = Component(function Greeting (a, b = memo(state[1]), c = memo(init)) {
+ t.deepEqual([a, b, c], state, 'all arguments in place')
+ update = onupdate(function afterupdate (a, b, c, d = memo(1)) {
+ t.deepEqual([a, b, c], state, 'afterupdate called with latest argument')
+ t.equal(d, 1, 'afterupdate can add more args')
+ return function beforeupdate (a, b, c, d = memo()) {
+ t.deepEqual([a, b, c], state, 'beforeupdate called with latest argument')
+ t.equal(d, 1, 'beforeupdate received additional arg')
+ }
+ })
+ return html`Hello ${[a, b, c].join('')}!`
+ })
+
+ render(main(state[0]), div)
+ var res = document.getElementById(id)
+ t.equal(res.innerText, BEFORE_UPDATE.join(''), 'content mounted')
+ state = AFTER_UPDATE
+ update(...state)
+ t.equal(res.innerText, AFTER_UPDATE.join(''), 'content updated')
+ document.body.removeChild(div)
+
+ function init (a, b) {
+ t.equal(a, state[0], 'static arg forwarded to init')
+ t.equal(b, state[1], 'dynamic arg forwarded to init')
+ return state[2]
+ }
+
+ function main (value) {
+ return html`
${Greeting(value)}
`
+ }
+})
+
+test('component is notified of being added to the DOM', function (t) {
+ t.plan(4)
+
+ var id = makeId()
+ var div = document.createElement('div')
+ div.innerHTML = 'Hi world!'
+ document.body.appendChild(div)
+
+ var Greeting = Component(function Greeting () {
+ onload(function (element) {
+ var el = document.getElementById(id)
+ t.pass('onload handler called')
+ t.equal(element, el, 'onload handler called with root element')
+ document.body.removeChild(div)
+ return function (value) {
+ t.pass('onload callback called')
+ t.equal(element, el, 'onload callback called with root element')
+ }
+ })
+ return html`Hello planet!`
+ })
+
+ render(main(), div)
+
+ function main (value) {
+ return html`
${Greeting(value)}
`
+ }
+})
+
+function makeId () {
+ return 'uid-' + Math.random().toString(36).substr(-4)
+}
diff --git a/tests/browser/elements.js b/tests/browser/elements.js
index 408a722..c4095b2 100644
--- a/tests/browser/elements.js
+++ b/tests/browser/elements.js
@@ -1,86 +1,20 @@
var test = require('tape')
-if (typeof window !== 'undefined') {
- var document = window.document
- var html = require('../../')
-} else {
- var nano = require('./html')
- document = nano.document
- html = nano.html
-}
+var { html, render } = require('../../')
test('create inputs', function (t) {
- t.plan(7)
-
var expected = 'testing'
- var result = html``
+ var result = render(html``)
t.equal(result.tagName, 'INPUT', 'created an input')
t.equal(result.value, expected, 'set the value of an input')
-
- result = html``
- t.equal(result.getAttribute('type'), 'checkbox', 'created a checkbox')
- t.equal(result.getAttribute('checked'), 'checked', 'set the checked attribute')
- t.equal(result.getAttribute('disabled'), null, 'should not have set the disabled attribute')
- t.equal(result.indeterminate, true, 'should have set indeterminate property')
-
- result = html``
- t.equal(result.indeterminate, true, 'should have set indeterminate property')
-
t.end()
})
-test('create inputs with object spread', function (t) {
- t.plan(7)
-
- var expected = 'testing'
- var props = { type: 'text', value: expected }
- var result = html``
- t.equal(result.tagName, 'INPUT', 'created an input')
- t.equal(result.value, expected, 'set the value of an input')
-
- props = { type: 'checkbox', checked: true, disabled: false, indeterminate: true }
- result = html``
- t.equal(result.getAttribute('type'), 'checkbox', 'created a checkbox')
- t.equal(result.getAttribute('checked'), 'checked', 'set the checked attribute')
- t.equal(result.getAttribute('disabled'), null, 'should not have set the disabled attribute')
- t.equal(result.indeterminate, true, 'should have set indeterminate property')
-
- props = { indeterminate: true }
- result = html``
- t.equal(result.indeterminate, true, 'should have set indeterminate property')
-
- t.end()
-})
-
-test('can update and submit inputs', function (t) {
- t.plan(2)
- document.body.innerHTML = ''
- var expected = 'testing'
- function render (data, onsubmit) {
- var input = html``
- return html`
- ${input}
-
-
`
- }
- var result = render(expected, function onsubmit (newvalue) {
- t.equal(newvalue, 'changed')
- document.body.innerHTML = ''
- t.end()
- })
- document.body.appendChild(result)
- t.equal(document.querySelector('input').value, expected, 'set the input correctly')
- document.querySelector('input').value = 'changed'
- document.querySelector('button').click()
-})
-
test('svg', function (t) {
t.plan(4)
- var result = html``)
t.equal(result.tagName, 'svg', 'create svg tag')
t.equal(result.childNodes[0].tagName, 'rect', 'created child rect tag')
t.equal(result.childNodes[1].getAttribute('xlink:href'), '#test', 'created child use tag with xlink:href')
@@ -92,9 +26,9 @@ test('svg with namespace', function (t) {
t.plan(3)
var result
function create () {
- result = html``)
}
t.doesNotThrow(create)
t.equal(result.tagName, 'svg', 'create svg tag')
@@ -105,9 +39,9 @@ test('svg with xmlns:svg', function (t) {
t.plan(3)
var result
function create () {
- result = html``)
}
t.doesNotThrow(create)
t.equal(result.tagName, 'svg', 'create svg tag')
@@ -115,7 +49,7 @@ test('svg with xmlns:svg', function (t) {
})
test('comments', function (t) {
- var result = html``
+ var result = render(html``)
t.equal(result.outerHTML, '', 'created comment')
t.end()
})
@@ -123,7 +57,7 @@ test('comments', function (t) {
test('style', function (t) {
t.plan(2)
var name = 'test'
- var result = html`
Hey ${name.toUpperCase()}, This is a card!!!
`
+ var result = render(html`
Hey ${name.toUpperCase()}, This is a card!!!
`)
t.equal(result.style.color, 'red', 'set style color on parent')
t.equal(result.querySelector('span').style.color, 'blue', 'set style color on child')
t.end()
@@ -133,114 +67,141 @@ test('adjacent text nodes', function (t) {
t.plan(2)
var who = 'world'
var exclamation = ['!', ' :)']
- var result = html`
hello ${who}${exclamation}
`
- t.equal(result.childNodes.length, 1, 'should be merged')
+ var result = render(html`
', 'should have correct output')
t.end()
})
test('space in only-child text nodes', function (t) {
t.plan(1)
- var result = html`
+ var result = render(html`
surrounding
newlines
- `
+ `)
t.equal(result.outerHTML, 'surrounding newlines', 'should remove extra space')
t.end()
})
test('space between text and non-text nodes', function (t) {
t.plan(1)
- var result = html`
+ var result = render(html`
whitespace
is empty
- `
+ `)
t.equal(result.outerHTML, '
whitespace is empty
', 'should have correct output')
t.end()
})
test('space between text followed by non-text nodes', function (t) {
t.plan(1)
- var result = html`
+ var result = render(html`
whitespace
is strong
- `
+ `)
t.equal(result.outerHTML, '
whitespace is strong
', 'should have correct output')
t.end()
})
test('space around text surrounded by non-text nodes', function (t) {
t.plan(1)
- var result = html`
+ var result = render(html`
I agree
whitespace
is strong
- `
+ `)
t.equal(result.outerHTML, '
I agree whitespace is strong
', 'should have correct output')
t.end()
})
test('space between non-text nodes', function (t) {
t.plan(1)
- var result = html`
+ var result = render(html`
whitespace
is beautiful
- `
+ `)
t.equal(result.outerHTML, '
whitespace is beautiful
', 'should have correct output')
t.end()
})
test('space in
', function (t) {
t.plan(1)
- var result = html`
+ var result = render(html`
whitespace is empty
- `
+ `)
t.equal(result.outerHTML, '
\n whitespace is empty\n
', 'should preserve space')
t.end()
})
test('space in
- `
+ `)
t.equal(result.outerHTML, '', 'should preserve space')
t.end()
})
+test('class is set correctly', function (t) {
+ var div = render(html``)
+ t.equal(div.className, 'test', 'class attribute set')
+ t.end()
+})
+
+test('boolean and direct props are set correctly', function (t) {
+ var input = render(html``)
+ t.equal(input.getAttribute('hidden'), null, 'false bool prop not set')
+ t.equal(input.getAttribute('disabled'), 'disabled', 'bool prop set to key')
+ t.equal(input.getAttribute('indeterminate'), null, 'direct prop is not an attribute')
+ t.ok(input.indeterminate, 'direct prop is set')
+ t.equal(input.required, false, 'does not assign null to attributes')
+ t.end()
+})
+
test('for attribute is set correctly', function (t) {
t.plan(1)
- var result = html`
+ var result = render(html`
-
`
+
`)
t.ok(result.outerHTML.indexOf('') !== -1, 'contains for="heyo"')
t.end()
})
test('allow objects to be passed', function (t) {
t.plan(1)
- var result = html`
+ var result = render(html`
hey
-
`
+
`)
t.ok(result.outerHTML.indexOf('
hey
') !== -1, 'contains foo="bar"')
t.end()
})
+test('allow mixed partial attribute names', function (t) {
+ t.plan(1)
+ var result = render(html`
hey
`)
+ t.equal(result.outerHTML, '
hey
', 'data attribute set')
+ t.end()
+})
+
test('supports extended build-in elements', function (t) {
t.plan(1)
@@ -255,7 +216,7 @@ test('supports extended build-in elements', function (t) {
}
})()
- ;html``
+ ;render(html``)
t.ok(typeof optionsArg === 'object' && optionsArg.is === 'my-div', 'properly passes optional extends object')
diff --git a/tests/browser/events.js b/tests/browser/events.js
index ed99a83..ebabe47 100644
--- a/tests/browser/events.js
+++ b/tests/browser/events.js
@@ -1,12 +1,5 @@
let test = require('tape')
-if (typeof window !== 'undefined') {
- var document = window.document
- var html = require('../../')
-} else {
- var nano = require('./html')
- document = nano.document
- html = nano.html
-}
+var { html, render } = require('../../')
/* Note:
Failing tests have been commented. They include the following:
@@ -28,7 +21,7 @@ function raiseEvent (element, eventName) {
test('should have onabort events(html attribute) ', function (t) {
t.plan(1)
let expectationMet = false
- let res = html``
+ let res = render(html``)
raiseEvent(res, 'abort')
@@ -42,7 +35,7 @@ test('should have onabort events(html attribute) ', function (t) {
test('should have onblur events(html attribute) ', function (t) {
t.plan(1)
let expectationMet = false
- let res = html``
+ let res = render(html``)
raiseEvent(res, 'blur')
@@ -56,7 +49,7 @@ test('should have onblur events(html attribute) ', function (t) {
test('should have onchange events(html attribute) ', function (t) {
t.plan(1)
let expectationMet = false
- let res = html``
+ let res = render(html``)
raiseEvent(res, 'change')
@@ -70,7 +63,7 @@ test('should have onchange events(html attribute) ', function (t) {
test('should have onclick events(html attribute) ', function (t) {
t.plan(1)
let expectationMet = false
- let res = html``
+ let res = render(html``)
raiseEvent(res, 'click')
@@ -84,7 +77,7 @@ test('should have onclick events(html attribute) ', function (t) {
test('should have oncontextmenu events(html attribute) ', function (t) {
t.plan(1)
let expectationMet = false
- let res = html``
+ let res = render(html``)
raiseEvent(res, 'contextmenu')
@@ -98,7 +91,7 @@ test('should have oncontextmenu events(html attribute) ', function (t) {
test('should have ondblclick events(html attribute) ', function (t) {
t.plan(1)
let expectationMet = false
- let res = html``
+ let res = render(html``)
raiseEvent(res, 'dblclick')
@@ -112,7 +105,7 @@ test('should have ondblclick events(html attribute) ', function (t) {
test('should have ondrag events(html attribute) ', function (t) {
t.plan(1)
let expectationMet = false
- let res = html``
+ let res = render(html``)
raiseEvent(res, 'drag')
@@ -126,7 +119,7 @@ test('should have ondrag events(html attribute) ', function (t) {
test('should have ondragend events(html attribute) ', function (t) {
t.plan(1)
let expectationMet = false
- let res = html``
+ let res = render(html``)
raiseEvent(res, 'dragend')
@@ -140,7 +133,7 @@ test('should have ondragend events(html attribute) ', function (t) {
test('should have ondragenter events(html attribute) ', function (t) {
t.plan(1)
let expectationMet = false
- let res = html``
+ let res = render(html``)
raiseEvent(res, 'dragenter')
@@ -154,7 +147,7 @@ test('should have ondragenter events(html attribute) ', function (t) {
test('should have ondragleave events(html attribute) ', function (t) {
t.plan(1)
let expectationMet = false
- let res = html``
+ let res = render(html``)
raiseEvent(res, 'dragleave')
@@ -168,7 +161,7 @@ test('should have ondragleave events(html attribute) ', function (t) {
test('should have ondragover events(html attribute) ', function (t) {
t.plan(1)
let expectationMet = false
- let res = html``
+ let res = render(html``)
raiseEvent(res, 'dragover')
@@ -182,7 +175,7 @@ test('should have ondragover events(html attribute) ', function (t) {
test('should have ondragstart events(html attribute) ', function (t) {
t.plan(1)
let expectationMet = false
- let res = html``
+ let res = render(html``)
raiseEvent(res, 'dragstart')
@@ -196,7 +189,7 @@ test('should have ondragstart events(html attribute) ', function (t) {
test('should have ondrop events(html attribute) ', function (t) {
t.plan(1)
let expectationMet = false
- let res = html``
+ let res = render(html``)
raiseEvent(res, 'drop')
@@ -210,7 +203,7 @@ test('should have ondrop events(html attribute) ', function (t) {
test('should have onerror events(html attribute) ', function (t) {
t.plan(1)
let expectationMet = false
- let res = html``
+ let res = render(html``)
raiseEvent(res, 'error')
@@ -224,7 +217,7 @@ test('should have onerror events(html attribute) ', function (t) {
test('should have onfocus events(html attribute) ', function (t) {
t.plan(1)
let expectationMet = false
- let res = html``
+ let res = render(html``)
raiseEvent(res, 'focus')
@@ -238,7 +231,7 @@ test('should have onfocus events(html attribute) ', function (t) {
/* test('should have onfocusin events(html attribute) ', function (t) {
t.plan(1)
let expectationMet = false
- let res = html``
+ let res = render(html``)
raiseEvent(res, 'focusin')
@@ -252,7 +245,7 @@ test('should have onfocus events(html attribute) ', function (t) {
/* test('should have onfocusout events(html attribute) ', function (t) {
t.plan(1)
let expectationMet = false
- let res = html``
+ let res = render(html``)
raiseEvent(res, 'focusout')
@@ -266,7 +259,7 @@ test('should have onfocus events(html attribute) ', function (t) {
test('should have oninput events(html attribute) ', function (t) {
t.plan(1)
let expectationMet = false
- let res = html``
+ let res = render(html``)
raiseEvent(res, 'input')
@@ -280,7 +273,7 @@ test('should have oninput events(html attribute) ', function (t) {
test('should have onkeydown events(html attribute) ', function (t) {
t.plan(1)
let expectationMet = false
- let res = html``
+ let res = render(html``)
raiseEvent(res, 'keydown')
@@ -294,7 +287,7 @@ test('should have onkeydown events(html attribute) ', function (t) {
test('should have onkeypress events(html attribute) ', function (t) {
t.plan(1)
let expectationMet = false
- let res = html``
+ let res = render(html``)
raiseEvent(res, 'keypress')
@@ -308,7 +301,7 @@ test('should have onkeypress events(html attribute) ', function (t) {
test('should have onkeyup events(html attribute) ', function (t) {
t.plan(1)
let expectationMet = false
- let res = html``
+ let res = render(html``)
raiseEvent(res, 'keyup')
@@ -322,7 +315,7 @@ test('should have onkeyup events(html attribute) ', function (t) {
test('should have onmousedown events(html attribute) ', function (t) {
t.plan(1)
let expectationMet = false
- let res = html``
+ let res = render(html``)
raiseEvent(res, 'mousedown')
@@ -336,7 +329,7 @@ test('should have onmousedown events(html attribute) ', function (t) {
test('should have onmouseenter events(html attribute) ', function (t) {
t.plan(1)
let expectationMet = false
- let res = html``
+ let res = render(html``)
raiseEvent(res, 'mouseenter')
@@ -350,7 +343,7 @@ test('should have onmouseenter events(html attribute) ', function (t) {
test('should have onmouseleave events(html attribute) ', function (t) {
t.plan(1)
let expectationMet = false
- let res = html``
+ let res = render(html``)
raiseEvent(res, 'mouseleave')
@@ -364,7 +357,7 @@ test('should have onmouseleave events(html attribute) ', function (t) {
test('should have onmousemove events(html attribute) ', function (t) {
t.plan(1)
let expectationMet = false
- let res = html``
+ let res = render(html``)
raiseEvent(res, 'mousemove')
@@ -378,7 +371,7 @@ test('should have onmousemove events(html attribute) ', function (t) {
test('should have onmouseout events(html attribute) ', function (t) {
t.plan(1)
let expectationMet = false
- let res = html``
+ let res = render(html``)
raiseEvent(res, 'mouseout')
@@ -392,7 +385,7 @@ test('should have onmouseout events(html attribute) ', function (t) {
test('should have onmouseover events(html attribute) ', function (t) {
t.plan(1)
let expectationMet = false
- let res = html``
+ let res = render(html``)
raiseEvent(res, 'mouseover')
@@ -406,7 +399,7 @@ test('should have onmouseover events(html attribute) ', function (t) {
test('should have onmouseup events(html attribute) ', function (t) {
t.plan(1)
let expectationMet = false
- let res = html``
+ let res = render(html``)
raiseEvent(res, 'mouseup')
@@ -420,7 +413,7 @@ test('should have onmouseup events(html attribute) ', function (t) {
test('should have onreset events(html attribute) ', function (t) {
t.plan(1)
let expectationMet = false
- let res = html``
+ let res = render(html``)
raiseEvent(res, 'reset')
@@ -434,7 +427,7 @@ test('should have onreset events(html attribute) ', function (t) {
test('should have onresize events(html attribute) ', function (t) {
t.plan(1)
let expectationMet = false
- let res = html``
+ let res = render(html``)
raiseEvent(res, 'resize')
@@ -448,7 +441,7 @@ test('should have onresize events(html attribute) ', function (t) {
test('should have onscroll events(html attribute) ', function (t) {
t.plan(1)
let expectationMet = false
- let res = html``
+ let res = render(html``)
raiseEvent(res, 'scroll')
@@ -462,7 +455,7 @@ test('should have onscroll events(html attribute) ', function (t) {
test('should have onselect events(html attribute) ', function (t) {
t.plan(1)
let expectationMet = false
- let res = html``
+ let res = render(html``)
raiseEvent(res, 'select')
@@ -476,7 +469,7 @@ test('should have onselect events(html attribute) ', function (t) {
test('should have onsubmit events(html attribute) ', function (t) {
t.plan(1)
let expectationMet = false
- let res = html``
+ let res = render(html``)
raiseEvent(res, 'submit')
@@ -490,7 +483,7 @@ test('should have onsubmit events(html attribute) ', function (t) {
test('should have ontouchcancel events(html attribute) ', { skip: true }, function (t) {
t.plan(1)
let expectationMet = false
- let res = html``
+ let res = render(html``)
raiseEvent(res, 'touchcancel')
@@ -504,7 +497,7 @@ test('should have ontouchcancel events(html attribute) ', { skip: true }, functi
test('should have ontouchend events(html attribute) ', { skip: true }, function (t) {
t.plan(1)
let expectationMet = false
- let res = html``
+ let res = render(html``)
raiseEvent(res, 'touchend')
@@ -518,7 +511,7 @@ test('should have ontouchend events(html attribute) ', { skip: true }, function
test('should have ontouchmove events(html attribute) ', { skip: true }, function (t) {
t.plan(1)
let expectationMet = false
- let res = html``
+ let res = render(html``)
raiseEvent(res, 'touchmove')
@@ -532,7 +525,7 @@ test('should have ontouchmove events(html attribute) ', { skip: true }, function
test('should have ontouchstart events(html attribute) ', { skip: true }, function (t) {
t.plan(1)
let expectationMet = false
- let res = html``
+ let res = render(html``)
raiseEvent(res, 'touchstart')
diff --git a/tests/browser/html.js b/tests/browser/html.js
deleted file mode 100644
index d62c21b..0000000
--- a/tests/browser/html.js
+++ /dev/null
@@ -1,4 +0,0 @@
-var doc = new (require('js' + 'dom').JSDOM)().window.document
-
-module.exports.document = doc
-module.exports.html = require('../../dom')(doc)
diff --git a/tests/browser/index.js b/tests/browser/index.js
index 422f7dd..6cb2f2b 100644
--- a/tests/browser/index.js
+++ b/tests/browser/index.js
@@ -2,4 +2,3 @@ require('./api.js')
require('./elements.js')
require('./raw.js')
require('./events.js')
-require('./multiple.js')
diff --git a/tests/browser/lazy.js b/tests/browser/lazy.js
new file mode 100644
index 0000000..88876b9
--- /dev/null
+++ b/tests/browser/lazy.js
@@ -0,0 +1,92 @@
+var test = require('tape')
+var { html, render } = require('../../')
+
+// TODO: test alternating return value (null/array/partial)
+
+test('fallback is required', function (t) {
+ t.throws(function () {
+ lazy(html`Hello planet!`)
+ }, 'throws when missing fallback')
+ t.end()
+})
+
+test('renders any type of mixed content', function (t) {
+ var noop = Function.prototype
+ var div = render(html`
+
+ `)
+ t.equal(div.innerText.trim(), 'Hello world!', 'content rendered')
+ t.end()
+})
+
+test('renders fallback in place of null', function (t) {
+ var div = render(html`
+