How to use tst - 10 common examples

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

t.todo('subselect nodes', t => {
  let $foo = $``

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

  t.is($bar[0], $foo[0].firstChild)
})

t.skip('live nodes list as reference under the hood', t => {
  // FIXME: that's insustainable for now: we have to extend Spect class from Proxy-ed prototype,
  // providing numeric access to underneath store, like NodeList etc.
  // The proxy prototype looks
  let el = document.createElement('div')

  el.appendChild(document.createElement`div`)

  let $children = $(el.childNodes)
  t.is($children.length, 1)

  el.appendChild(document.createElement`div`)
  t.is($children.length, 2)
})

t.todo('rebinding to other document', async t => {
  let { document } = await import('dom-lite')

t.skip('is: simple element with no content should  (?) be upgraded', t => {
  let $el = $`<div is=""> {
    console.log($el)
  }}/&gt;`
})

t.skip('is: existing elements with `is` attr should be hydrated', t =&gt; {
  let $el = $`<div is=""></div>`
  $el.is(FooBar)

  // TODO: and simple tags
  // `<div is=""></div>`

})

t.skip('is: existing element with `is` attr not matching the fn name should throw error', t =&gt; {
  $`<div is="">`.is(FooBar)
})
</div></div>

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>

$(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')

let log = []

  let $a = spect({})
  await $a.use(fn)
  t.is(log, ['x'])
  await $a.use(fn)
  t.is(log, ['x'])
  await $a.use([fn, fn])
  t.is(log, ['x'])
  await $a.update()
  t.is(log, ['x', 'x'])

  function fn(el) { log.push('x') }
})

t.skip('use: same aspect different targets', t => {
  let log = []
  function fx([el]) {
    log.push(el.tagName)
    // return () => log.push('destroy ' + el.tagName)
  }

  let $el = spect({ tagName: 'A' }).use(fx)

  t.is($el.target.tagName, log[0])
  t.is(log, ['A'])

  $el.target.innerHTML = '<span></span>'
  $($el.target.firstChild).use(fx)

  t.deepEqual(log, ['A', 'SPAN'])
})

// this
  // args
  $('', () => {

  })
})

t.skip('core: props', t => {
  $('', {})
})

t.skip('core: children', t => {
  $('', a, b, c)
})

t.skip('core: props + children', t => {
  $('', { a, b, c }, a, fn, c)
})

// component tree https://github.com/scrapjs/permanent/issues/2)
t.skip('core: text', t => {
  $(target, 'abc')
})
t.skip('core: Element', t => {
  $(target, Element)
})
t.skip('core: vdom', t => {
  // DO via plugins
  $(target, react | vdom)
})
t.skip('core: class', t => {
  class Component {