You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
snabbdom/test/unit/style.ts

168 lines
6.6 KiB
TypeScript

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')
})
})
})