From 05b70f790ccbd3bd630839a4254d299a1e87d76c Mon Sep 17 00:00:00 2001 From: Evan You Date: Thu, 4 Oct 2018 16:52:52 -0400 Subject: [PATCH] fix: nativeOn test case + test nested components --- .../core/__tests__/attrsFallthrough.spec.ts | 89 +++++++++++++++++++ packages/core/src/utils.ts | 2 +- 2 files changed, 90 insertions(+), 1 deletion(-) diff --git a/packages/core/__tests__/attrsFallthrough.spec.ts b/packages/core/__tests__/attrsFallthrough.spec.ts index 73ef657e..8f2c21fd 100644 --- a/packages/core/__tests__/attrsFallthrough.spec.ts +++ b/packages/core/__tests__/attrsFallthrough.spec.ts @@ -141,4 +141,93 @@ describe('attribute fallthrough', () => { expect(node.style.color).toBe('red') 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') + }) }) diff --git a/packages/core/src/utils.ts b/packages/core/src/utils.ts index 834a7cce..25cd87f0 100644 --- a/packages/core/src/utils.ts +++ b/packages/core/src/utils.ts @@ -6,7 +6,7 @@ export const onRE = /^on/ export const nativeOnRE = /^nativeOn/ export const vnodeHookRE = /^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( value: any