fix: nativeOn test case + test nested components
This commit is contained in:
parent
03fd4da21d
commit
05b70f790c
@ -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')
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user