fix: nativeOn test case + test nested components

This commit is contained in:
Evan You 2018-10-04 16:52:52 -04:00
parent 03fd4da21d
commit 05b70f790c
2 changed files with 90 additions and 1 deletions

View File

@ -141,4 +141,93 @@ describe('attribute fallthrough', () => {
expect(node.style.color).toBe('red') expect(node.style.color).toBe('red')
expect(node.style.fontWeight).toBe('bold') expect(node.style.fontWeight).toBe('bold')
}) })
it('should fallthrough on multi-nested components', async () => {
const nativeClick = jest.fn()
const childUpdated = jest.fn()
const grandChildUpdated = jest.fn()
class Hello extends Component {
data() {
return {
count: 0
}
}
inc() {
this.count++
nativeClick()
}
render() {
return h(Child, {
foo: 1,
id: 'test',
class: 'c' + this.count,
style: { color: this.count ? 'red' : 'green' },
nativeOnClick: this.inc
})
}
}
class Child extends Component {
static options = {
props: {
foo: Number
}
}
updated() {
childUpdated()
}
render(props: any) {
return h(GrandChild, props)
}
}
class GrandChild extends Component {
static options = {
props: {
foo: Number
}
}
updated() {
grandChildUpdated()
}
render(props: any) {
return h(
'div',
{
class: 'c2',
style: { fontWeight: 'bold' }
},
props.foo
)
}
}
const root = document.createElement('div')
document.body.appendChild(root)
render(h(Hello), root)
const node = root.children[0] as HTMLElement
// with declared props, any parent attr that isn't a prop falls through
expect(node.getAttribute('id')).toBe('test')
// ...while declared ones remain props
expect(node.hasAttribute('foo')).toBe(false)
// class, style and nativeOn* always fallthrough
expect(node.getAttribute('class')).toBe('c2 c0')
expect(node.style.color).toBe('green')
expect(node.style.fontWeight).toBe('bold')
node.dispatchEvent(new CustomEvent('click'))
expect(nativeClick).toHaveBeenCalled()
await nextTick()
expect(childUpdated).toHaveBeenCalled()
expect(grandChildUpdated).toHaveBeenCalled()
expect(node.getAttribute('id')).toBe('test')
expect(node.hasAttribute('foo')).toBe(false)
expect(node.getAttribute('class')).toBe('c2 c1')
expect(node.style.color).toBe('red')
expect(node.style.fontWeight).toBe('bold')
})
}) })

View File

@ -6,7 +6,7 @@ export const onRE = /^on/
export const nativeOnRE = /^nativeOn/ export const nativeOnRE = /^nativeOn/
export const vnodeHookRE = /^vnode/ export const vnodeHookRE = /^vnode/
export const handlersRE = /^on|^nativeOn|^vnode/ export const handlersRE = /^on|^nativeOn|^vnode/
export const reservedPropRE = /^(?:key|ref|slots)$|^nativeOn|^vnode/ export const reservedPropRE = /^(?:key|ref|slots)$|^vnode/
export function normalizeStyle( export function normalizeStyle(
value: any value: any