Merge pull request #25 from hyperdivision/improve-add-remove-child

Breaking: rename unload to onunload and add removeChild heloper

Author: bcomnes

README.md

@@ -138,19 +138,19 @@ Same as `tape` `t.only`.
 
 The HTMLElement element where your test should work inside.
 
-### `await t.appendChild(el, [msg])`
+### `await t.appendChild([parentElOrQuery], el, [msg])`
 
-Takes an element, append it and then waits for onload.  Asserts when complete with a `msg`.
+Takes an element `el`, append it and then waits for onload.  You can also pass a different parent element or query selector `parentElOrQuery` to append to.  Asserts when complete with a `msg`.
 
 ```js
 const newDiv = document.createElement('div')
 newDiv.innerText = 'New div to append'
 await t.appendChild(newDiv, 'Appended newDiv')
 ```
 
-### `await t.removeChild(el, [msg])`
+### `await t.removeChild(elementOrQuerySelector, [msg])`
 
-Takes a loaded element `el` and removes it from the test element and then waits for onunload.  Asserts when complete with a `msg`.
+Takes a loaded element `el` or query selector and removes it from its parent element and then waits for onunload.  Asserts when complete with a `msg`.
 
 ### `await t.sleep(ms, [msg])`
 

example.js

@@ -53,4 +53,5 @@ vhs('A simple appended div in a simple html component', async t => {
   const newDiv = document.createElement('div')
   newDiv.innerText = 'New div to append'
   await t.appendChild(newDiv)
+  await t.removeChild(newDiv, 'Removed child from test element')
 })

index.js

@@ -120,14 +120,16 @@ function create (delay, fn) {
         }
         return t.delay().then(() => t.pass(msg))
       },
-      appendChild (el, msg = 'Appended child to test element') {
-        t.element.appendChild(el)
-        return t.onload(el, msg).then(t.delay)
+      appendChild (parentElOrQuery, el, msg = 'Appended child to test element') {
+        let parentEl = arguments.length >= 3 ? toElement(parentElOrQuery) : t.element
+        let childEl = arguments.length >= 3 ? el : parentElOrQuery
+        parentEl.appendChild(childEl)
+        return t.onload(childEl, msg).then(t.delay)
       },
-      removeChild (el, msg = 'Removed child from test element') {
-        const unloadP = t.onload(el, msg).then(t.delay)
-        t.element.removeChild(el)
-        return unloadP
+      removeChild (stringOrElement, msg = 'Removed child from its parent element') {
+        const el = toElement(stringOrElement)
+        el.remove()
+        return t.onunload(el, msg).then(t.delay)
       },
       once (emitter, name, msg) {
         // t is expected to be an event emitter