vue3-yuanma/packages/core/__tests__/attrsFallthrough.spec.ts

231 lines
5.8 KiB
TypeScript
Raw Normal View History

2018-10-02 06:21:44 +08:00
// using DOM renderer because this case is mostly DOM-specific
import { h, render, Component, nextTick, cloneVNode } from '@vue/renderer-dom'
2018-09-25 09:13:06 +08:00
describe('attribute fallthrough', () => {
it('everything should be in props when component has no declared props', async () => {
const click = jest.fn()
2018-09-25 09:13:06 +08:00
const childUpdated = jest.fn()
2018-10-09 06:09:13 +08:00
class Hello extends Component<{}, { count: number }> {
2018-09-25 09:13:06 +08:00
data() {
return {
count: 0
}
}
inc() {
this.count++
click()
2018-09-25 09:13:06 +08:00
}
render() {
return h(Child, {
foo: 1,
id: 'test',
class: 'c' + this.count,
style: { color: this.count ? 'red' : 'green' },
onClick: this.inc
2018-09-25 09:13:06 +08:00
})
}
}
class Child extends Component {
2018-09-25 09:13:06 +08:00
updated() {
childUpdated()
}
render(props: any) {
return cloneVNode(
h(
'div',
{
class: 'c2',
style: { fontWeight: 'bold' }
},
props.foo
),
props
2018-09-25 09:13:06 +08:00
)
}
}
const root = document.createElement('div')
document.body.appendChild(root)
render(h(Hello), root)
const node = root.children[0] as HTMLElement
expect(node.getAttribute('id')).toBe('test')
expect(node.getAttribute('foo')).toBe('1')
2018-09-25 09:13:06 +08:00
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(click).toHaveBeenCalled()
2018-09-25 09:13:06 +08:00
await nextTick()
expect(childUpdated).toHaveBeenCalled()
expect(node.getAttribute('id')).toBe('test')
expect(node.getAttribute('foo')).toBe('1')
2018-09-25 09:13:06 +08:00
expect(node.getAttribute('class')).toBe('c2 c1')
expect(node.style.color).toBe('red')
expect(node.style.fontWeight).toBe('bold')
})
it('should separate in attrs when component has declared props', async () => {
const click = jest.fn()
2018-09-25 09:13:06 +08:00
const childUpdated = jest.fn()
2018-10-09 06:09:13 +08:00
class Hello extends Component<{}, { count: number }> {
2018-09-25 09:13:06 +08:00
data() {
return {
count: 0
}
}
inc() {
this.count++
click()
2018-09-25 09:13:06 +08:00
}
render() {
return h(Child, {
foo: 1,
id: 'test',
class: 'c' + this.count,
style: { color: this.count ? 'red' : 'green' },
onClick: this.inc
2018-09-25 09:13:06 +08:00
})
}
}
2018-10-09 06:09:13 +08:00
class Child extends Component<{ foo: number }> {
2018-10-10 08:22:29 +08:00
static props = {
foo: Number
2018-09-25 09:13:06 +08:00
}
updated() {
childUpdated()
}
2018-10-04 01:00:13 +08:00
render() {
return cloneVNode(
h(
'div',
{
class: 'c2',
style: { fontWeight: 'bold' }
},
this.$props.foo
),
this.$attrs
2018-09-25 09:13:06 +08:00
)
}
}
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')
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(click).toHaveBeenCalled()
// ...while declared ones remain props
expect(node.hasAttribute('foo')).toBe(false)
2018-09-25 09:13:06 +08:00
await nextTick()
expect(childUpdated).toHaveBeenCalled()
expect(node.getAttribute('id')).toBe('test')
expect(node.getAttribute('class')).toBe('c2 c1')
expect(node.style.color).toBe('red')
expect(node.style.fontWeight).toBe('bold')
expect(node.hasAttribute('foo')).toBe(false)
2018-09-25 09:13:06 +08:00
})
it('should fallthrough on multi-nested components', async () => {
const click = jest.fn()
const childUpdated = jest.fn()
const grandChildUpdated = jest.fn()
2018-10-09 06:09:13 +08:00
class Hello extends Component<{}, { count: number }> {
data() {
return {
count: 0
}
}
inc() {
this.count++
click()
}
render() {
return h(Child, {
foo: 1,
id: 'test',
class: 'c' + this.count,
style: { color: this.count ? 'red' : 'green' },
onClick: this.inc
})
}
}
class Child extends Component {
updated() {
childUpdated()
}
render() {
return h(GrandChild, this.$props)
}
}
2018-10-09 06:09:13 +08:00
class GrandChild extends Component<{ foo: number }> {
2018-10-10 08:22:29 +08:00
static props = {
foo: Number
}
updated() {
grandChildUpdated()
}
render(props: any) {
return cloneVNode(
h(
'div',
{
class: 'c2',
style: { fontWeight: 'bold' }
},
props.foo
),
this.$attrs
)
}
}
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')
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(click).toHaveBeenCalled()
// ...while declared ones remain props
expect(node.hasAttribute('foo')).toBe(false)
await nextTick()
expect(childUpdated).toHaveBeenCalled()
expect(grandChildUpdated).toHaveBeenCalled()
expect(node.getAttribute('id')).toBe('test')
expect(node.getAttribute('class')).toBe('c2 c1')
expect(node.style.color).toBe('red')
expect(node.style.fontWeight).toBe('bold')
expect(node.hasAttribute('foo')).toBe(false)
})
2018-09-25 09:13:06 +08:00
})