Skip to content

Commit 4438967

Browse files
edison1105edison1105
committed
test: add more tests
1 parent ac22224 commit 4438967

File tree

2 files changed

+104
-141
lines changed

2 files changed

+104
-141
lines changed

‎packages/runtime-vapor/__tests__/componentAttrs.spec.ts‎

Lines changed: 103 additions & 141 deletions
Original file line numberDiff line numberDiff line change
@@ -482,162 +482,124 @@ describe('attribute fallthrough', () => {
482482
expect(html()).toBe(`<div></div><div class="parent"></div>`)
483483
})
484484

485-
// it('should warn when functional component has props and does not use attrs', () => {
486-
// const Parent = {
487-
// render() {
488-
// return h(Child, { foo: 1, class: 'parent', onBar: () => {} })
489-
// },
490-
// }
491-
492-
// const Child: FunctionalComponent = () => [h('div'), h('div')]
493-
494-
// Child.props = ['foo']
495-
496-
// const root = document.createElement('div')
497-
// document.body.appendChild(root)
498-
// render(h(Parent), root)
499-
500-
// expect(`Extraneous non-props attributes`).toHaveBeenWarned()
501-
// expect(`Extraneous non-emits event listeners`).toHaveBeenWarned()
502-
// expect(root.innerHTML).toBe(`<div></div><div></div>`)
503-
// })
504-
505-
// // #677
506-
// it('should update merged dynamic attrs on optimized child root', async () => {
507-
// const aria = ref('true')
508-
// const cls = ref('bar')
509-
// const Parent = {
510-
// render() {
511-
// return h(Child, { 'aria-hidden': aria.value, class: cls.value })
512-
// },
513-
// }
514-
515-
// const Child = {
516-
// props: [],
517-
// render() {
518-
// return (openBlock(), createBlock('div'))
519-
// },
520-
// }
521-
522-
// const root = document.createElement('div')
523-
// document.body.appendChild(root)
524-
// render(h(Parent), root)
525-
526-
// expect(root.innerHTML).toBe(`<div aria-hidden="true" class="bar"></div>`)
485+
it('should warn when functional component has props and does not use attrs', () => {
486+
const Parent = {
487+
render() {
488+
return createComponent(Child, {
489+
foo: () => 1,
490+
class: () => 'parent',
491+
onBar: () => () => {},
492+
})
493+
},
494+
}
527495

528-
// aria.value = 'false'
529-
// await nextTick()
530-
// expect(root.innerHTML).toBe(`<div aria-hidden="false" class="bar"></div>`)
496+
const { component: Child } = define(() => [
497+
template('<div></div>')(),
498+
template('<div></div>')(),
499+
])
531500

532-
// cls.value = 'barr'
533-
// await nextTick()
534-
// expect(root.innerHTML).toBe(`<div aria-hidden="false" class="barr"></div>`)
535-
// })
501+
Child.props = ['foo']
536502

537-
// it('should not let listener fallthrough when declared in emits (stateful)', () => {
538-
// const Child = defineVaporComponent({
539-
// emits: ['click'],
540-
// render() {
541-
// return h(
542-
// 'button',
543-
// {
544-
// onClick: () => {
545-
// this.$emit('click', 'custom')
546-
// },
547-
// },
548-
// 'hello',
549-
// )
550-
// },
551-
// })
503+
const { html } = define(Parent).render()
552504

553-
// const onClick = vi.fn()
554-
// const App = {
555-
// render() {
556-
// return h(Child, {
557-
// onClick,
558-
// })
559-
// },
560-
// }
505+
expect(`Extraneous non-props attributes`).toHaveBeenWarned()
506+
expect(`Extraneous non-emits event listeners`).toHaveBeenWarned()
507+
expect(html()).toBe(`<div></div><div></div>`)
508+
})
561509

562-
// const root = document.createElement('div')
563-
// document.body.appendChild(root)
564-
// render(h(App), root)
510+
it('should not let listener fallthrough when declared in emits (stateful)', () => {
511+
const Child = defineVaporComponent({
512+
emits: ['click'],
513+
render(_ctx, $props, $emit, $attrs, $slots) {
514+
const n0 = template('<button>hello</button>')() as any
515+
n0.$evtclick = () => {
516+
// @ts-expect-error
517+
$emit('click', 'custom')
518+
}
519+
return n0
520+
},
521+
})
565522

566-
// const node = root.children[0] as HTMLElement
567-
// node.dispatchEvent(new CustomEvent('click'))
568-
// expect(onClick).toHaveBeenCalledTimes(1)
569-
// expect(onClick).toHaveBeenCalledWith('custom')
570-
// })
523+
const onClick = vi.fn()
524+
const App = defineVaporComponent({
525+
render() {
526+
return createComponent(
527+
Child,
528+
{
529+
onClick: () => onClick,
530+
},
531+
null,
532+
true,
533+
)
534+
},
535+
})
571536

572-
// it('should not let listener fallthrough when declared in emits (functional)', () => {
573-
// const Child: FunctionalComponent<{}, { click: any }> = (_, { emit }) => {
574-
// // should not be in props
575-
// expect((_ as any).onClick).toBeUndefined()
576-
// return h('button', {
577-
// onClick: () => {
578-
// emit('click', 'custom')
579-
// },
580-
// })
581-
// }
582-
// Child.emits = ['click']
537+
const { host: root } = define(App).render()
538+
const node = root.children[0] as HTMLElement
539+
node.click()
540+
expect(onClick).toHaveBeenCalledTimes(1)
541+
expect(onClick).toHaveBeenCalledWith('custom')
542+
})
583543

584-
// const onClick = vi.fn()
585-
// const App = {
586-
// render() {
587-
// return h(Child, {
588-
// onClick,
589-
// })
590-
// },
591-
// }
544+
it('should not let listener fallthrough when declared in emits (functional)', () => {
545+
const { component: Child } = define((_: any, { emit }: any) => {
546+
// should not be in props
547+
expect((_ as any).onClick).toBeUndefined()
548+
const n0 = template('<button></button>')() as any
549+
n0.$evtclick = () => {
550+
emit('click', 'custom')
551+
}
552+
return n0
553+
})
554+
Child.emits = ['click']
592555

593-
// const root = document.createElement('div')
594-
// document.body.appendChild(root)
595-
// render(h(App), root)
556+
const onClick = vi.fn()
557+
const App = defineVaporComponent({
558+
render() {
559+
return createComponent(Child, {
560+
onClick: () => onClick,
561+
})
562+
},
563+
})
596564

597-
// const node = root.children[0] as HTMLElement
598-
// node.dispatchEvent(new CustomEvent('click'))
599-
// expect(onClick).toHaveBeenCalledTimes(1)
600-
// expect(onClick).toHaveBeenCalledWith('custom')
601-
// })
565+
const { host: root } = define(App).render()
566+
const node = root.children[0] as HTMLElement
567+
node.click()
568+
expect(onClick).toHaveBeenCalledTimes(1)
569+
expect(onClick).toHaveBeenCalledWith('custom')
570+
})
602571

603-
// it('should support fallthrough for fragments with single element + comments', () => {
604-
// const click = vi.fn()
572+
it('should support fallthrough for single element + comments', () => {
573+
const click = vi.fn()
605574

606-
// const Hello = {
607-
// setup() {
608-
// return () => h(Child, { class: 'foo', onClick: click })
609-
// },
610-
// }
575+
const Hello = defineVaporComponent({
576+
render() {
577+
return createComponent(Child, {
578+
class: () => 'foo',
579+
onClick: () => click,
580+
})
581+
},
582+
})
611583

612-
// const Child = {
613-
// setup() {
614-
// return () => (
615-
// openBlock(),
616-
// createBlock(
617-
// Fragment,
618-
// null,
619-
// [
620-
// createCommentVNode('hello'),
621-
// h('button'),
622-
// createCommentVNode('world'),
623-
// ],
624-
// PatchFlags.STABLE_FRAGMENT | PatchFlags.DEV_ROOT_FRAGMENT,
625-
// )
626-
// )
627-
// },
628-
// }
584+
const Child = defineVaporComponent({
585+
render() {
586+
return [
587+
template('<!--hello-->')(),
588+
template('<button></button>')(),
589+
template('<!--world-->')(),
590+
]
591+
},
592+
})
629593

630-
// const root = document.createElement('div')
631-
// document.body.appendChild(root)
632-
// render(h(Hello), root)
594+
const { host: root } = define(Hello).render()
633595

634-
// expect(root.innerHTML).toBe(
635-
// `<!--hello--><button class="foo"></button><!--world-->`,
636-
// )
637-
// const button = root.children[0] as HTMLElement
638-
// button.dispatchEvent(new CustomEvent('click'))
639-
// expect(click).toHaveBeenCalled()
640-
// })
596+
expect(root.innerHTML).toBe(
597+
`<!--hello--><button class="foo"></button><!--world-->`,
598+
)
599+
const button = root.children[0] as HTMLElement
600+
button.dispatchEvent(new CustomEvent('click'))
601+
expect(click).toHaveBeenCalled()
602+
})
641603

642604
// it('should support fallthrough for nested dev root fragments', async () => {
643605
// const toggle = ref(false)

‎packages/runtime-vapor/src/dom/event.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export function on(
2121
if (isArray(handler)) {
2222
handler.forEach(fn => on(el, event, fn, options))
2323
} else {
24+
if (!handler) return
2425
addEventListener(el, event, handler, options)
2526
if (options.effect) {
2627
onEffectCleanup(() => {

0 commit comments

Comments
 (0)