2018-10-02 06:21:44 +08:00
|
|
|
// using DOM renderer because this case is mostly DOM-specific
|
2019-08-23 05:12:39 +08:00
|
|
|
import {
|
2019-08-24 03:27:17 +08:00
|
|
|
h,
|
2019-08-23 05:12:39 +08:00
|
|
|
render,
|
|
|
|
nextTick,
|
|
|
|
mergeProps,
|
|
|
|
ref,
|
2019-08-23 10:07:51 +08:00
|
|
|
onUpdated,
|
2020-02-28 10:51:57 +08:00
|
|
|
defineComponent,
|
|
|
|
openBlock,
|
|
|
|
createBlock
|
2019-08-23 05:12:39 +08:00
|
|
|
} from '@vue/runtime-dom'
|
2020-01-22 22:29:35 +08:00
|
|
|
import { mockWarn } from '@vue/shared'
|
2018-09-25 09:13:06 +08:00
|
|
|
|
|
|
|
describe('attribute fallthrough', () => {
|
2019-10-26 00:12:17 +08:00
|
|
|
mockWarn()
|
|
|
|
|
2018-10-10 09:10:30 +08:00
|
|
|
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()
|
|
|
|
|
2019-08-23 05:12:39 +08:00
|
|
|
const Hello = {
|
|
|
|
setup() {
|
|
|
|
const count = ref(0)
|
|
|
|
|
|
|
|
function inc() {
|
|
|
|
count.value++
|
|
|
|
click()
|
|
|
|
}
|
|
|
|
|
|
|
|
return () =>
|
|
|
|
h(Child, {
|
|
|
|
foo: 1,
|
|
|
|
id: 'test',
|
|
|
|
class: 'c' + count.value,
|
|
|
|
style: { color: count.value ? 'red' : 'green' },
|
2020-01-07 04:05:57 +08:00
|
|
|
onClick: inc,
|
|
|
|
'data-id': 1
|
2019-08-23 05:12:39 +08:00
|
|
|
})
|
2018-09-25 09:13:06 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-08-23 05:12:39 +08:00
|
|
|
const Child = {
|
|
|
|
setup(props: any) {
|
|
|
|
onUpdated(childUpdated)
|
|
|
|
return () =>
|
2018-10-10 09:10:30 +08:00
|
|
|
h(
|
|
|
|
'div',
|
2019-08-23 05:12:39 +08:00
|
|
|
mergeProps(
|
|
|
|
{
|
|
|
|
class: 'c2',
|
|
|
|
style: { fontWeight: 'bold' }
|
|
|
|
},
|
|
|
|
props
|
|
|
|
),
|
2018-10-10 09:10:30 +08:00
|
|
|
props.foo
|
2019-08-23 05:12:39 +08:00
|
|
|
)
|
2018-09-25 09:13:06 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const root = document.createElement('div')
|
|
|
|
document.body.appendChild(root)
|
2019-08-23 05:12:39 +08:00
|
|
|
render(h(Hello), root)
|
2018-09-25 09:13:06 +08:00
|
|
|
|
|
|
|
const node = root.children[0] as HTMLElement
|
|
|
|
|
2018-10-10 09:10:30 +08:00
|
|
|
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')
|
2020-01-07 04:05:57 +08:00
|
|
|
expect(node.dataset.id).toBe('1')
|
2018-09-25 09:13:06 +08:00
|
|
|
node.dispatchEvent(new CustomEvent('click'))
|
2018-10-10 09:10:30 +08:00
|
|
|
expect(click).toHaveBeenCalled()
|
2018-09-25 09:13:06 +08:00
|
|
|
|
|
|
|
await nextTick()
|
|
|
|
expect(childUpdated).toHaveBeenCalled()
|
2018-10-10 09:10:30 +08:00
|
|
|
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')
|
|
|
|
})
|
|
|
|
|
2019-10-26 00:12:17 +08:00
|
|
|
it('should implicitly fallthrough on single root nodes', async () => {
|
2019-08-23 10:07:51 +08:00
|
|
|
const click = jest.fn()
|
|
|
|
const childUpdated = jest.fn()
|
|
|
|
|
|
|
|
const Hello = {
|
|
|
|
setup() {
|
|
|
|
const count = ref(0)
|
|
|
|
|
|
|
|
function inc() {
|
|
|
|
count.value++
|
|
|
|
click()
|
|
|
|
}
|
|
|
|
|
|
|
|
return () =>
|
|
|
|
h(Child, {
|
|
|
|
foo: 1,
|
|
|
|
id: 'test',
|
|
|
|
class: 'c' + count.value,
|
|
|
|
style: { color: count.value ? 'red' : 'green' },
|
|
|
|
onClick: inc
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-12-22 23:58:12 +08:00
|
|
|
const Child = defineComponent({
|
2019-08-23 10:07:51 +08:00
|
|
|
props: {
|
|
|
|
foo: Number
|
|
|
|
},
|
2019-10-26 00:12:17 +08:00
|
|
|
setup(props) {
|
2019-08-23 10:07:51 +08:00
|
|
|
onUpdated(childUpdated)
|
|
|
|
return () =>
|
|
|
|
h(
|
|
|
|
'div',
|
2019-10-26 00:12:17 +08:00
|
|
|
{
|
|
|
|
class: 'c2',
|
|
|
|
style: { fontWeight: 'bold' }
|
|
|
|
},
|
2019-08-23 10:07:51 +08:00
|
|
|
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')
|
|
|
|
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(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)
|
|
|
|
})
|
|
|
|
|
2019-10-26 00:12:17 +08:00
|
|
|
it('should fallthrough for nested components', async () => {
|
2019-08-23 10:07:51 +08:00
|
|
|
const click = jest.fn()
|
|
|
|
const childUpdated = jest.fn()
|
|
|
|
const grandChildUpdated = jest.fn()
|
|
|
|
|
|
|
|
const Hello = {
|
|
|
|
setup() {
|
|
|
|
const count = ref(0)
|
|
|
|
|
|
|
|
function inc() {
|
|
|
|
count.value++
|
|
|
|
click()
|
|
|
|
}
|
|
|
|
|
|
|
|
return () =>
|
|
|
|
h(Child, {
|
|
|
|
foo: 1,
|
|
|
|
id: 'test',
|
|
|
|
class: 'c' + count.value,
|
|
|
|
style: { color: count.value ? 'red' : 'green' },
|
|
|
|
onClick: inc
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const Child = {
|
|
|
|
setup(props: any) {
|
|
|
|
onUpdated(childUpdated)
|
|
|
|
return () => h(GrandChild, props)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-12-22 23:58:12 +08:00
|
|
|
const GrandChild = defineComponent({
|
2019-08-23 10:07:51 +08:00
|
|
|
props: {
|
|
|
|
foo: Number
|
|
|
|
},
|
2019-10-26 00:12:17 +08:00
|
|
|
setup(props) {
|
2019-08-23 10:07:51 +08:00
|
|
|
onUpdated(grandChildUpdated)
|
|
|
|
return () =>
|
|
|
|
h(
|
|
|
|
'div',
|
2019-10-26 00:12:17 +08:00
|
|
|
{
|
|
|
|
class: 'c2',
|
|
|
|
style: { fontWeight: 'bold' }
|
|
|
|
},
|
2019-08-23 10:07:51 +08:00
|
|
|
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')
|
|
|
|
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)
|
|
|
|
})
|
2019-10-26 00:12:17 +08:00
|
|
|
|
|
|
|
it('should not fallthrough with inheritAttrs: false', () => {
|
|
|
|
const Parent = {
|
|
|
|
render() {
|
|
|
|
return h(Child, { foo: 1, class: 'parent' })
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-12-22 23:58:12 +08:00
|
|
|
const Child = defineComponent({
|
2019-10-26 00:12:17 +08:00
|
|
|
props: ['foo'],
|
|
|
|
inheritAttrs: false,
|
|
|
|
render() {
|
|
|
|
return h('div', this.foo)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
const root = document.createElement('div')
|
|
|
|
document.body.appendChild(root)
|
|
|
|
render(h(Parent), root)
|
|
|
|
|
|
|
|
// should not contain class
|
|
|
|
expect(root.innerHTML).toMatch(`<div>1</div>`)
|
|
|
|
})
|
|
|
|
|
|
|
|
it('explicit spreading with inheritAttrs: false', () => {
|
|
|
|
const Parent = {
|
|
|
|
render() {
|
|
|
|
return h(Child, { foo: 1, class: 'parent' })
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-12-22 23:58:12 +08:00
|
|
|
const Child = defineComponent({
|
2019-10-26 00:12:17 +08:00
|
|
|
props: ['foo'],
|
|
|
|
inheritAttrs: false,
|
|
|
|
render() {
|
|
|
|
return h(
|
|
|
|
'div',
|
|
|
|
mergeProps(
|
|
|
|
{
|
|
|
|
class: 'child'
|
|
|
|
},
|
|
|
|
this.$attrs
|
|
|
|
),
|
|
|
|
this.foo
|
|
|
|
)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
const root = document.createElement('div')
|
|
|
|
document.body.appendChild(root)
|
|
|
|
render(h(Parent), root)
|
|
|
|
|
|
|
|
// should merge parent/child classes
|
|
|
|
expect(root.innerHTML).toMatch(`<div class="child parent">1</div>`)
|
|
|
|
})
|
|
|
|
|
|
|
|
it('should warn when fallthrough fails on non-single-root', () => {
|
|
|
|
const Parent = {
|
|
|
|
render() {
|
|
|
|
return h(Child, { foo: 1, class: 'parent' })
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-12-22 23:58:12 +08:00
|
|
|
const Child = defineComponent({
|
2019-10-26 00:12:17 +08:00
|
|
|
props: ['foo'],
|
|
|
|
render() {
|
|
|
|
return [h('div'), h('div')]
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
const root = document.createElement('div')
|
|
|
|
document.body.appendChild(root)
|
|
|
|
render(h(Parent), root)
|
|
|
|
|
|
|
|
expect(`Extraneous non-props attributes (class)`).toHaveBeenWarned()
|
|
|
|
})
|
|
|
|
|
|
|
|
it('should not warn when $attrs is used during render', () => {
|
|
|
|
const Parent = {
|
|
|
|
render() {
|
|
|
|
return h(Child, { foo: 1, class: 'parent' })
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-12-22 23:58:12 +08:00
|
|
|
const Child = defineComponent({
|
2019-10-26 00:12:17 +08:00
|
|
|
props: ['foo'],
|
|
|
|
render() {
|
|
|
|
return [h('div'), h('div', this.$attrs)]
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
const root = document.createElement('div')
|
|
|
|
document.body.appendChild(root)
|
|
|
|
render(h(Parent), root)
|
|
|
|
|
|
|
|
expect(`Extraneous non-props attributes`).not.toHaveBeenWarned()
|
2020-02-27 05:32:06 +08:00
|
|
|
expect(root.innerHTML).toBe(`<div></div><div class="parent"></div>`)
|
2019-10-26 00:12:17 +08:00
|
|
|
})
|
2020-01-17 06:45:08 +08:00
|
|
|
|
|
|
|
it('should not warn when context.attrs is used during render', () => {
|
|
|
|
const Parent = {
|
|
|
|
render() {
|
|
|
|
return h(Child, { foo: 1, class: 'parent' })
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const Child = defineComponent({
|
|
|
|
props: ['foo'],
|
|
|
|
setup(_props, { attrs }) {
|
|
|
|
return () => [h('div'), h('div', attrs)]
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
const root = document.createElement('div')
|
|
|
|
document.body.appendChild(root)
|
|
|
|
render(h(Parent), root)
|
|
|
|
|
|
|
|
expect(`Extraneous non-props attributes`).not.toHaveBeenWarned()
|
2020-02-27 05:32:06 +08:00
|
|
|
expect(root.innerHTML).toBe(`<div></div><div class="parent"></div>`)
|
2020-01-17 06:45:08 +08:00
|
|
|
})
|
2020-02-28 10:51:57 +08:00
|
|
|
|
|
|
|
// #677
|
|
|
|
it('should update merged dynamic attrs on optimized child root', async () => {
|
|
|
|
const id = ref('foo')
|
|
|
|
const cls = ref('bar')
|
|
|
|
const Parent = {
|
|
|
|
render() {
|
|
|
|
return h(Child, { id: id.value, class: cls.value })
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const Child = {
|
|
|
|
props: [],
|
|
|
|
render() {
|
|
|
|
return openBlock(), createBlock('div')
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const root = document.createElement('div')
|
|
|
|
document.body.appendChild(root)
|
|
|
|
render(h(Parent), root)
|
|
|
|
|
|
|
|
expect(root.innerHTML).toBe(`<div id="foo" class="bar"></div>`)
|
|
|
|
|
|
|
|
id.value = 'fooo'
|
|
|
|
await nextTick()
|
|
|
|
expect(root.innerHTML).toBe(`<div id="fooo" class="bar"></div>`)
|
|
|
|
|
|
|
|
cls.value = 'barr'
|
|
|
|
await nextTick()
|
|
|
|
expect(root.innerHTML).toBe(`<div id="fooo" class="barr"></div>`)
|
|
|
|
})
|
2018-09-25 09:13:06 +08:00
|
|
|
})
|