How to use the tst.todo function in tst

$(document.createElement('div'), el => {
    // init/get state
    let { foo = 1, bar } = state()

    log.push('get foo,bar', foo, bar)

    // set registered listener updates element
    state({ foo: 'a', bar: 'b' })

    log.push('set foo,bar')
  })

  t.deepEqual(log, ['get foo,bar', 1, undefined, 'set foo,bar', 'get foo,bar', 'a', 'b', 'set foo,bar'])
})

t.todo('state: direct state', t => {
  let log = []
  $(document.createElement('div'), el => {
    let s = state()

    log.push('get foo,bar', s.foo, s.bar)

    Object.assign(s, { foo: 'a', bar: 'b' })

    log.push('set foo,bar')
  })

  t.deepEqual(log, ['get foo,bar', undefined, undefined, 'set foo,bar', 'get foo,bar', 'a', 'b', 'set foo,bar'])
})

t.todo('state: not shared between aspects', t => {
  let log = [], el = document.createElement('div')

})
  })

  await $el
  t.deepEqual(log, [])

  document.body.appendChild(el)
  await $el
  t.deepEqual(log, ['+a', '+b'])
})

t.skip('mount: instant remove/insert shouldn\'t trigger callback', async t => {
  // TODO
})

t.todo('mount: async callback')

t.todo('mount: generator callback')

let s = $el.state()

    setTimeout(() => {
      log.push(s.x)
    })
  })

  $a.state({x: 1})

  await new Promise(ok => setTimeout(() => {
    t.is(log, [1])
    ok()
  }))
})

t.todo('state: reading state from async stack doesnt register listener', t => {
  $a.fx($el => setTimeout(() => {
    $el.html`${$el.state.x}`
  }))
  $a.state.x = 1
})

t.todo('state: reading external component state from asynchronous tick', t => {
  $a.fx($a => {
    // NOTE: reading state is limited to the same scope as fx
    // reading from another scope doesn't register listener
    // FIXME: should we ever register external state listeners?
    // we can trigger direct element rerendering, and trigger external updates via fx desp
    // that will get us rid of that problem, that isn't going to be very smart
    setTimeout(() => {
      $b.state.x
    })

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

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


t.todo('aspects, assigned through parent wrapper', async t => {
  // some wrappers over same elements can be created in different ways
  // but effects must be bound to final elements
  let a = document.createElement('a')
  let frag = document.createDocumentFragment()
  frag.appendChild(a)

  let $a1 = $(a)
  let $a2 = $([a])
  let $a3 = $(frag)
  let $a4 = $(frag.childNodes)
  let $a5 = $(frag.querySelector('*'))

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

t.is($difNodes.length, 2)
  t.is($difNodes[0], el)
})

t.todo('$: create new', t => {
  let $new = $('<div>')
  t.equal($new[0].tagName, 'DIV')

  let $newList = $('<div><div>')
  t.equal($newList.length, 2)

  let $tpl = $`<div><div>`
  t.equal($tpl.length, 2)
})

t.todo('$: create components', t =&gt; {
  let $el = $`&lt;${C}/&gt;`

  function C($el) {
    console.log($el[0])
  }
  console.log($el)
})

t.todo('$: subselect nodes', t =&gt; {
  let $foo = $``

  console.log('bar')
  let $bar = $foo.$(`bar`)

  t.is($bar[0], $foo[0].firstChild)
})</div></div></div></div></div>

await off
  t.is(log, ['in', 'out'])
  fire(el, 'in')
  await off
  t.is(log, ['in', 'out', 'in'])
  fire(el, 'in')
  fire(el, 'out')
  await off
  t.is(log, ['in', 'out', 'in', 'out'], 'duplicate is ignored')
  fire(el, 'out')
  fire(el, 'in')
  await off
  t.is(log, ['in', 'out', 'in', 'out', 'in'])
})

t.todo('on: nodelist/htmlcollection as target')

t.skip('on: sequences unbind themselves', t => {
  let log = []

  let $el = $``

  $el.on('mousedown', e => {
    log.push(1)
    $(e.currentTarget).on('mouseup', e => (log.push(2), () => log.push(4)))
  })

  $el.emit(new MouseEvent('mouseup'))
  t.is(log, [])

  $el.emit(new MouseEvent('mousedown'))
  t.is(log, [1])

t.is(log, ['on', 'off'])

  $a.prop('on', true)
  await Promise.resolve().then()
  t.is(log, ['on', 'off', 'on'])

  $a.prop('on', true)
  await Promise.resolve().then()
  t.is(log, ['on', 'off', 'on'])

  $a.prop('on', false)
  await Promise.resolve().then()
  t.is(log, ['on', 'off', 'on', 'off'])
})

t.todo('fx: async fx chain', async t => {
  let log = []
  let a = spect().fx(() => log.push(1)).fx(() => log.push(2))
  t.is(log, [])
  await a.fx(() => log.push(3))
  t.is(log, [1, 2, 3])
})

t.todo('fx: async fx', async t => {
  let log = []

  let el = spect().use(async () => {
    await el.fx(async () => {
      await null
      log.push('foo')
      return () => {
        log.push('unfoo')

let $content = $($b[0].childNodes)

  $b.html`<i class="material-icons">${ $b.attr('icon') }</i> ${ $content }`

  t.equal(b.innerHTML, '<i class="material-icons">phone_in_talk</i> Click <span>-</span>')
  document.body.removeChild(b)
})

t.todo('legacy html: insert single Node', t =&gt; {
  let $el = $(document.createElement('div'))
  let a = document.createElement('a')
  $el.html`${ a }`
  t.equal($el[0].innerHTML, `<a></a>`)
})

t.todo('legacy html: insert node directly', t =&gt; {
  let $el = $(document.createElement('div'))
  let a = document.createElement('a')
  let frag = document.createDocumentFragment()
  frag.appendChild(a)
  $el.html(frag)
  t.equal($el[0].innerHTML, `<a></a>`)
})

t.todo('legacy html: insert self/array of nodes', t =&gt; {
  let $el = $(document.createElement('div'))
  let a1 = document.createElement('a')
  let a2 = document.createElement('a')
  a1.id = 'x'
  a2.id = 'y'
  let $a = $([a1, a2])
  $el.html($a)

}}/>`
  t.is(log, [el])
})

t.skip('html: use assigned via prop', t => {
  let log = []
  let el = html`<a> {
    log.push(el.tagName.toLowerCase())
    let e = document.createElement('b')
    return e
  }}/&gt;`
  t.is(log, ['a'])
  t.is(el.tagName.toLowerCase(), 'b')
})

t.todo('html: is=string works fine', t =&gt; {
  let a = html`</a><a is="">`
})

t('html: props passed to use are actual object', t =&gt; {
  let a = html``

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

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

  $(el, (el, props) =&gt; {</a>

t.deepEqual(log, ['a', 'b', 'c'])

  $(a).dispose()

  t.deepEqual(log, ['a', 'b', 'c', '-c', '-b', '-a'])

  document.body.removeChild(a)
})

t.todo('generators aspects')

t.todo('async aspects')


t.todo('promise (suspense)', t => {
  $('div', import('url'))
})

t.todo('hyperscript case', t => {
  $('div', () => {

  })
})

t.todo('new custom element', t => {
  $('custom-element', () => {

  })
})