Clean up all DOM nodes when tests end

As the test suite grows it's bad for debugging to leak tons of elements
onto document.body. In order to concisely append/remove on the tests'
"end" event, we need to make sure the root tagName doesn't change. If it
does, the `tree` returned from `app.start` will no longer be the root
node and the removal fn will throw.

package.json

@@ -34,6 +34,7 @@
     "yo-yo": "^1.2.2"
   },
   "devDependencies": {
+    "append-child": "~1.0.0",
     "bankai": "^2.0.2",
     "browserify": "^13.0.1",
     "browserify-istanbul": "^2.0.0",

tests/browser/basic.js

@@ -1,4 +1,5 @@
 const test = require('tape')
+const append = require('append-child')
 const choo = require('../../')
 const view = require('../../html')
 
@@ -55,5 +56,5 @@ test('state is immutable', function (t) {
   ])
 
   const tree = app.start()
-  document.body.appendChild(tree)
+  t.on('end', append(tree))
 })

tests/browser/hooks.js

@@ -1,4 +1,5 @@
 const test = require('tape')
+const append = require('append-child')
 const choo = require('../../')
 const view = require('../../html')
 
@@ -51,5 +52,5 @@ test('hooks', function (t) {
   ])
 
   const tree = app.start()
-  document.body.appendChild(tree)
+  t.on('end', append(tree))
 })

tests/browser/rehydration.js

@@ -1,5 +1,6 @@
 const test = require('tape')
 const onReady = require('document-ready')
+const append = require('append-child')
 const choo = require('../../')
 const view = require('../../html')
 
@@ -17,7 +18,7 @@ test('rehydration', function (t) {
   var node = document.createElement('div')
   node.innerHTML = app.toString('/')
   node = node.childNodes[0]
-  document.body.appendChild(node)
+  t.on('end', append(node))
 
   app.start('#app-root')
 

tests/browser/routing.js

@@ -1,6 +1,7 @@
 const test = require('tape')
 const Event = require('geval/event')
 const proxyquire = require('proxyquire')
+const append = require('append-child')
 const view = require('../../html')
 
 test('routing', function (t) {
@@ -39,7 +40,7 @@ test('routing', function (t) {
     ])
 
     const tree = app.start()
-    document.body.appendChild(tree)
+    t.on('end', append(tree))
 
     t.equal(tree.innerHTML.trim(), 'Open')
     tree.onclick()
@@ -54,7 +55,7 @@ test('routing', function (t) {
 
     function childView (state, prev, send) {
       t.equal(state.user, 1)
-      return view`<div>${state.user}</div>`
+      return view`<button>${state.user}</button>`
     }
   })
 
@@ -92,7 +93,7 @@ test('routing', function (t) {
     ])
 
     const tree = app.start({hash: true})
-    document.body.appendChild(tree)
+    t.on('end', append(tree))
 
     tree.onclick()
 
@@ -106,7 +107,7 @@ test('routing', function (t) {
 
     function childView (state, prev, send) {
       t.equal(state.user, 1)
-      return view`<div>${state.user}</div>`
+      return view`<button>${state.user}</button>`
     }
   })