Skip to content

Commit

Permalink
fix(stubs): Do not render function body in stub
Browse files Browse the repository at this point in the history
  • Loading branch information
xanf authored and cexbrayat committed Oct 16, 2022
1 parent 348d651 commit 22c7698
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 7 deletions.
15 changes: 8 additions & 7 deletions src/vnodeTransformers/stubComponentsTransformer.ts
Expand Up @@ -63,13 +63,16 @@ const shouldNotStub = (type: ConcreteComponent) => doNotStubComponents.has(type)
export const addToDoNotStubComponents = (type: ConcreteComponent) =>
doNotStubComponents.add(type)

const stringifySymbols = (props: ComponentPropsOptions) => {
const normalizeStubProps = (props: ComponentPropsOptions) => {
// props are always normalized to object syntax
const $props = props as unknown as ComponentObjectPropsOptions
return Object.keys($props).reduce((acc, key) => {
if (typeof $props[key] === 'symbol') {
return { ...acc, [key]: $props[key]?.toString() }
}
if (typeof $props[key] === 'function') {
return { ...acc, [key]: '[Function]' }
}
return { ...acc, [key]: $props[key] }
}, {})
}
Expand Down Expand Up @@ -100,13 +103,11 @@ export const createStub = ({
// causes an error.
// Only a problem when shallow mounting. For this reason we iterate of the
// props that will be passed and stringify any that are symbols.
const propsWithoutSymbols = stringifySymbols(props)
// Also having function text as attribute is useless and annoying so
// we replace it with "[Function]""
const stubProps = normalizeStubProps(props)

return h(
tag,
propsWithoutSymbols,
renderStubDefaultSlot ? slots : undefined
)
return h(tag, stubProps, renderStubDefaultSlot ? slots : undefined)
}
}
})
Expand Down
16 changes: 16 additions & 0 deletions tests/props.spec.ts
Expand Up @@ -274,6 +274,22 @@ describe('props', () => {
expect(wrapper.text()).toEqual('hello')
})

it('stub function props when shallow mounting', () => {
const Comp = defineComponent({
name: 'Comp',
template: `<div>Test</div>`,
props: ['fn']
})

const wrapper = shallowMount({
render() {
return h(Comp, { fn: () => {} })
}
})

expect(wrapper.html()).toBe('<comp-stub fn="[Function]"></comp-stub>')
})

describe('edge case with symbol props and stubs', () => {
it('works with Symbol as default', () => {
const Comp = defineComponent({
Expand Down

0 comments on commit 22c7698

Please sign in to comment.