snabbdom/test/unit/style.ts

import { assert } from 'chai'

import { init, styleModule, h, toVNode } from '../../src/index';

const patch = init([
  styleModule
])

const featureDiscoveryElm = document.createElement('div')
featureDiscoveryElm.style.setProperty('--foo', 'foo')
const hasCssVariables = featureDiscoveryElm.style.getPropertyValue('--foo') === 'foo'

describe('style', function () {
  let elm: any, vnode0: any
  beforeEach(function () {
    elm = document.createElement('div')
    vnode0 = elm
  })
  it('is being styled', function () {
    elm = patch(vnode0, h('div', { style: { fontSize: '12px' } })).elm
    assert.strictEqual(elm.style.fontSize, '12px')
  })
  it('can be memoized', function () {
    const cachedStyles = { fontSize: '14px', display: 'inline' }
    const vnode1 = h('i', { style: cachedStyles })
    const vnode2 = h('i', { style: cachedStyles })
    elm = patch(vnode0, vnode1).elm
    assert.strictEqual(elm.style.fontSize, '14px')
    assert.strictEqual(elm.style.display, 'inline')
    elm = patch(vnode1, vnode2).elm
    assert.strictEqual(elm.style.fontSize, '14px')
    assert.strictEqual(elm.style.display, 'inline')
  })
  it('updates styles', function () {
    const vnode1 = h('i', { style: { fontSize: '14px', display: 'inline' } })
    const vnode2 = h('i', { style: { fontSize: '12px', display: 'block' } })
    const vnode3 = h('i', { style: { fontSize: '10px', display: 'block' } })
    elm = patch(vnode0, vnode1).elm
    assert.strictEqual(elm.style.fontSize, '14px')
    assert.strictEqual(elm.style.display, 'inline')
    elm = patch(vnode1, vnode2).elm
    assert.strictEqual(elm.style.fontSize, '12px')
    assert.strictEqual(elm.style.display, 'block')
    elm = patch(vnode2, vnode3).elm
    assert.strictEqual(elm.style.fontSize, '10px')
    assert.strictEqual(elm.style.display, 'block')
  })
  it('explicialy removes styles', function () {
    const vnode1 = h('i', { style: { fontSize: '14px' } })
    const vnode2 = h('i', { style: { fontSize: '' } })
    const vnode3 = h('i', { style: { fontSize: '10px' } })
    elm = patch(vnode0, vnode1).elm
    assert.strictEqual(elm.style.fontSize, '14px')
    patch(vnode1, vnode2)
    assert.strictEqual(elm.style.fontSize, '')
    patch(vnode2, vnode3)
    assert.strictEqual(elm.style.fontSize, '10px')
  })
  it('implicially removes styles from element', function () {
    const vnode1 = h('div', [h('i', { style: { fontSize: '14px' } })])
    const vnode2 = h('div', [h('i')])
    const vnode3 = h('div', [h('i', { style: { fontSize: '10px' } })])
    patch(vnode0, vnode1)
    assert.strictEqual(elm.firstChild.style.fontSize, '14px')
    patch(vnode1, vnode2)
    assert.strictEqual(elm.firstChild.style.fontSize, '')
    patch(vnode2, vnode3)
    assert.strictEqual(elm.firstChild.style.fontSize, '10px')
  })
  it('updates css variables', function () {
    if (!hasCssVariables) {
      this.skip()
    } else {
      const vnode1 = h('div', { style: { '--myVar': 1 as any } })
      const vnode2 = h('div', { style: { '--myVar': 2 as any } })
      const vnode3 = h('div', { style: { '--myVar': 3 as any } })
      elm = patch(vnode0, vnode1).elm
      assert.strictEqual(elm.style.getPropertyValue('--myVar'), '1')
      elm = patch(vnode1, vnode2).elm
      assert.strictEqual(elm.style.getPropertyValue('--myVar'), '2')
      elm = patch(vnode2, vnode3).elm
      assert.strictEqual(elm.style.getPropertyValue('--myVar'), '3')
    }
  })
  it('explicialy removes css variables', function () {
    if (!hasCssVariables) {
      this.skip()
    } else {
      const vnode1 = h('i', { style: { '--myVar': 1 as any } })
      const vnode2 = h('i', { style: { '--myVar': '' } })
      const vnode3 = h('i', { style: { '--myVar': 2 as any } })
      elm = patch(vnode0, vnode1).elm
      assert.strictEqual(elm.style.getPropertyValue('--myVar'), '1')
      patch(vnode1, vnode2)
      assert.strictEqual(elm.style.getPropertyValue('--myVar'), '')
      patch(vnode2, vnode3)
      assert.strictEqual(elm.style.getPropertyValue('--myVar'), '2')
    }
  })
  it('implicially removes css variables from element', function () {
    if (!hasCssVariables) {
      this.skip()
    } else {
      const vnode1 = h('div', [h('i', { style: { '--myVar': 1 as any } })])
      const vnode2 = h('div', [h('i')])
      const vnode3 = h('div', [h('i', { style: { '--myVar': 2 as any } })])
      patch(vnode0, vnode1)
      assert.strictEqual(elm.firstChild.style.getPropertyValue('--myVar'), '1')
      patch(vnode1, vnode2)
      assert.strictEqual(elm.firstChild.style.getPropertyValue('--myVar'), '')
      patch(vnode2, vnode3)
      assert.strictEqual(elm.firstChild.style.getPropertyValue('--myVar'), '2')
    }
  })
  it('updates delayed styles in next frame', function (done) {
    const vnode1 = h('i', { style: { fontSize: '14px', delayed: { fontSize: '16px' } as any } })
    const vnode2 = h('i', { style: { fontSize: '18px', delayed: { fontSize: '20px' } as any } })
    elm = patch(vnode0, vnode1).elm
    assert.strictEqual(elm.style.fontSize, '14px')
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        assert.strictEqual(elm.style.fontSize, '16px')
        elm = patch(vnode1, vnode2).elm
        assert.strictEqual(elm.style.fontSize, '18px')
        requestAnimationFrame(() => {
          requestAnimationFrame(() => {
            assert.strictEqual(elm.style.fontSize, '20px')
            done()
          })
        })
      })
    })
  })
  it('applies tranform as transition on remove', function (done) {
    const btn = h('button', {
      style: {
        transition: 'transform 0.1s',
        remove: { transform: 'translateY(100%)' } as any
      }
    }, ['A button'])
    const vnode1 = h('div.parent', {}, [btn])
    const vnode2 = h('div.parent', {}, [null])
    document.body.appendChild(vnode0)
    patch(vnode0, vnode1)
    patch(vnode1, vnode2)
    const button = document.querySelector('button') as HTMLButtonElement
    assert.notStrictEqual(button, null)
    button.addEventListener('transitionend', function () {
      assert.strictEqual(document.querySelector('button'), null)
      done()
    })
  })
  describe('using toVNode()', function () {
    it('handles (ignoring) comment nodes', function () {
      const comment = document.createComment('yolo')
      const prevElm = document.createElement('div')
      prevElm.appendChild(comment)
      const nextVNode = h('div', [h('span', 'Hi')])
      elm = patch(toVNode(prevElm), nextVNode).elm
      assert.strictEqual(elm, prevElm)
      assert.strictEqual(elm.tagName, 'DIV')
      assert.strictEqual(elm.childNodes.length, 1)
      assert.strictEqual(elm.childNodes[0].tagName, 'SPAN')
      assert.strictEqual(elm.childNodes[0].textContent, 'Hi')
    })
  })
})