How to use the tst function in tst

let el = html`<${a}>foo ${baz}${qux}`
  t.is(el.outerHTML, `<a>foo </a>`)
})

t('html: function renders external component', async t =&gt; {
  let el = html`<a>foo &lt;${bar}/&gt;<b>`

  function bar () {
    return html``
  }

  t.is(el.firstChild.outerHTML, `</b></a><b><a>foo </a>`)
  t.is(el.lastChild.outerHTML, `<b></b>`)
})

t('html: rerendering with props: must persist', async t =&gt; {
  let el = document.createElement('x')
  let div = document.createElement('div')

  html`&lt;${el}&gt;${div}`
  // t.equal(el.firstChild, div)
  t.equal(el.childNodes.length, 2)

  html`&lt;${el}&gt;&lt;${div}/&gt;`
  // t.equal(el.firstChild, div)
  t.equal(el.childNodes.length, 2)

  html`&lt;${el}&gt;&lt;${div}/&gt;`
  // t.equal(el.firstChild, div)
  t.equal(el.childNodes.length, 2)

  html`&lt;${el}&gt;<div>`</div></b>

function bar(el, props) {
    t.is(props, {x: 1, use: bar})
  }
})

t('html: assigned id must be accessible', async t => {
  let el = html``
  t.is(el.id, 'x1')

  $(el, (el, props) => {
    t.is(el.id, 'x1')
    // t.is(props.id, 'x1')
  })
})

t('html: must update text content', async t => {
  const foo = html`foo`
  const bar = html`bar`

  let el = html`<div>`

  html`&lt;${el}&gt;${ foo }`
  t.is(el.textContent, 'foo')
  t.is(foo.textContent, 'foo')
  t.is(bar.textContent, 'bar')
  html`&lt;${el}&gt;${ bar }`
  t.is(el.textContent, 'bar')
  t.is(foo.textContent, 'foo')
  t.is(bar.textContent, 'bar')
  html`&lt;${el}&gt;${ foo }`
  t.is(el.textContent, 'foo')
  t.is(foo.textContent, 'foo')</div>

import t from 'tst'
import enhook from './enhook.js'
import { useInit } from '../src/index'

t('useInit: basic', t => {
  let log = []

  let f = enhook((i) => {
    useInit(() => {
      log.push('on')
      return () => log.push('off')
    })
  })

  f(1)
  t.deepEqual(log, ['on'])
  f(2)
  t.deepEqual(log, ['on'])

  t.end()
})

})

t('legacy readme: standalone effects', async t => {
  let foo = { x: 1 }

  state(foo).y = 2
  prop(foo).x = 3

  fx(() => {
    t.is(state(foo).y, 2)
    t.is(prop(foo).x, 3)
  })
})


t('core: awaiting doesn\'t cause recursion', async t => {
  let log = []

  run(async () => {await ''; log.push(2)})
  log.push(1)
  t.is(log, [1])
  await ''
  t.is(log, [1,2])
})

t.skip('core: await returns promise', async t => {
  let x = await spect()
  console.log(x.then)
  t.is(!!x.then, true)
})

let log = []
  await $a3.use(([el]) => {
    t.is(el, a)
    log.push('a3')
  })

  t.is(log, ['a3'])
  t.is($a1[0], a)
  t.is($a2[0], a)
  t.is($a3[0], a)
  t.is($a4[0], a)
  t.is($a5[0], a)
})

t('aspects must be called in order', async t => {
  let log = []
  let a = document.createElement('a')

  let unspect = $(a, [() => (log.push(1)), () => log.push(2), () => log.push(3)])

  document.body.appendChild(a)

  await tick()

  t.deepEqual(log, [1, 2, 3])

  document.body.removeChild(a)
  unspect()
})

t('each aspect must have own hooks scope', async t => {

fn()
  await frame(2)
  t.deepEqual(log, [1])

  fn()
  await frame(2)
  t.deepEqual(log, [1, 2])

  storage.set(PREFIX + 'items', null)
  teardown()
  t.end()
})


t('useAction: actions are not reactive', async t => {
  let log = []
  let action = createAction(function () {
    let [x, setX] = useState(0)
    log.push(x)
    setX(++x)
  })
  action()
  t.deepEqual(log, [0])
  action()
  t.deepEqual(log, [0, 1])
  action()
  t.deepEqual(log, [0, 1, 2])

  teardown()
  t.end()
})

import t from 'tst'
import enhook from './enhook.js'
import { useEffect } from '../src/index'
import { tick, frame } from 'wait-please'

t('useEffect: microtask guaranteed', async t => {
  let log = []

  let f = (i) => {
    log.push('call', i)
    useEffect(() => {
      log.push('effect', i)
      return 1
    })
  }

  let f1 = enhook(f)
  let f2 = enhook(f)
  f1(1)
  f2(2)
  await tick(2)
  t.deepEqual(log, ['call', 1, 'call', 2, 'effect', 1, 'effect', 2])

})


t.skip('defined props must be available', async t => {
  let log = []

  let el = document.createElement('div')
  el.setAttribute('x', 1)
  $(el, (el) => {
    log.push(el.x)
  })

  t.is(log, [1])
})

t('dynamically assigned selector', async t => {
  let log = []

  $('.x', el => {
    log.push(el)
  })

  let el = document.createElement('div')
  document.body.appendChild(el)

  await idle()
  t.is(log, [])

  el.classList.add('x')
  await tick()

  t.is(log, [el])

import t from 'tst'
import enhook from './enhook.js'
import { tick, frame } from 'wait-please'
import { useAttribute, useEffect, useRef } from '../src/index'

t('useAttribute: basics', async t => {
  let log = []
  let el = document.createElement('div')
  el.setAttribute('foo', 'bar')
  let f = enhook(() => {
    let [foo, setFoo] = useAttribute(el, 'foo')
    log.push(foo)
    useEffect(() => {
      setFoo('baz')
    }, [])
  })

  f()

  t.deepEqual(log, ['bar'])
  await tick(2)
  t.deepEqual(log, ['bar', 'baz'])

let container = document.createElement('div')
  container.innerHTML = '<div class="foo"></div>'
  document.body.appendChild(container)

  let unuse = use('.foo', el =&gt; {
    return [html``, 'bar']
  })
  let els = await unuse

  t.is(container.innerHTML, 'bar')

  els.forEach(el =&gt; el.remove())
  unuse()
})

t('simple hooks', async t =&gt; {
  let el = document.createElement('div')

  $(el, el =&gt; {
    let [count, setCount] = useState(0)
    el.count = count
    useEffect(() =&gt; {
      setCount(1)
    }, [])
  })

  t.is(el.count, 0)
  await tick()
  t.is(el.count, 1)
})