From 845bc02e1b0d866ee59d3b499e0399b6dfcd235b Mon Sep 17 00:00:00 2001 From: briwa Date: Mon, 20 May 2019 23:29:41 +0800 Subject: [PATCH 1/4] fix(stubs): function in props should be rendered as a deterministic string --- .../create-instance/create-component-stubs.js | 31 ++++++++- test/specs/mounting-options/stubs.spec.js | 65 +++++++++++++++++++ 2 files changed, 94 insertions(+), 2 deletions(-) diff --git a/packages/create-instance/create-component-stubs.js b/packages/create-instance/create-component-stubs.js index 5b6660761..7f57856fe 100644 --- a/packages/create-instance/create-component-stubs.js +++ b/packages/create-instance/create-component-stubs.js @@ -11,6 +11,8 @@ import { } from '../shared/validators' import { compileTemplate, compileFromString } from '../shared/compile-template' +const FUNCTION_PLACEHOLDER = '[Function]' + function isVueComponentStub(comp): boolean { return (comp && comp.template) || isVueComponent(comp) } @@ -98,7 +100,7 @@ export function createStubFromComponent( { attrs: componentOptions.functional ? { - ...context.props, + ...shapeStubProps(context.props), ...context.data.attrs, class: createClassString( context.data.staticClass, @@ -106,7 +108,7 @@ export function createStubFromComponent( ) } : { - ...this.$props + ...shapeStubProps(this.$props) } }, context ? context.children : this.$options._renderChildren @@ -139,6 +141,31 @@ function validateStub(stub) { } } +function shapeStubProps(props) { + const shapedProps: Record = {} + for (const propName in props) { + if (!props.hasOwnProperty(propName)) { + continue + } + + if (typeof props[propName] === 'function') { + shapedProps[propName] = FUNCTION_PLACEHOLDER + continue + } + + if (Array.isArray(props[propName])) { + shapedProps[propName] = props[propName].map((value) => { + return typeof value === 'function' ? FUNCTION_PLACEHOLDER : value + }) + continue + } + + shapedProps[propName] = props[propName] + } + + return shapedProps +} + export function createStubsFromStubsObject( originalComponents: Object = {}, stubs: Object, diff --git a/test/specs/mounting-options/stubs.spec.js b/test/specs/mounting-options/stubs.spec.js index 7f398f2db..8b0543b91 100644 --- a/test/specs/mounting-options/stubs.spec.js +++ b/test/specs/mounting-options/stubs.spec.js @@ -546,4 +546,69 @@ describeWithShallowAndMount('options.stub', mountingMethod => { expect(wrapper.find(ToStub).exists()).to.be.false expect(wrapper.find(Stub).exists()).to.be.true }) + + it('should render functions in props as a deterministic string', () => { + const ChildComponent = { + name: 'child-component', + props: { + foo: { + type: Function, + required: true + }, + bar: { + type: Array, + required: true + }, + qux: { + type: String, + required: true + } + }, + template: '
' + } + + const FunctionalChildComponent = { + ...ChildComponent, + name: 'functional-child-component', + functional: true + } + + const ParentComponent = { + components: { + ChildComponent, + FunctionalChildComponent + }, + name: 'parent-component', + template: ` +
+ + +
+ `, + data () { + return { + foo: () => 42, + bar: [1, 'string', () => true], + qux: 'qux' + } + } + } + + const wrapper = mountingMethod(ParentComponent, { + stubs: ['child-component', 'functional-child-component'] + }) + + expect(wrapper.html()).to.equal( + `
\n` + + ` \n` + + ` \n` + + `
` + ) + }) }) From 4d3dbf8db55e67d86fdc4223ef507945a31b9e6b Mon Sep 17 00:00:00 2001 From: briwa Date: Mon, 20 May 2019 23:59:51 +0800 Subject: [PATCH 2/4] refactor: npm run format --- packages/create-instance/create-component-stubs.js | 2 +- test/specs/mounting-options/stubs.spec.js | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/create-instance/create-component-stubs.js b/packages/create-instance/create-component-stubs.js index 7f57856fe..63460a299 100644 --- a/packages/create-instance/create-component-stubs.js +++ b/packages/create-instance/create-component-stubs.js @@ -154,7 +154,7 @@ function shapeStubProps(props) { } if (Array.isArray(props[propName])) { - shapedProps[propName] = props[propName].map((value) => { + shapedProps[propName] = props[propName].map(value => { return typeof value === 'function' ? FUNCTION_PLACEHOLDER : value }) continue diff --git a/test/specs/mounting-options/stubs.spec.js b/test/specs/mounting-options/stubs.spec.js index 8b0543b91..81c93fd0e 100644 --- a/test/specs/mounting-options/stubs.spec.js +++ b/test/specs/mounting-options/stubs.spec.js @@ -591,7 +591,7 @@ describeWithShallowAndMount('options.stub', mountingMethod => { :qux="qux" />
`, - data () { + data() { return { foo: () => 42, bar: [1, 'string', () => true], @@ -606,9 +606,9 @@ describeWithShallowAndMount('options.stub', mountingMethod => { expect(wrapper.html()).to.equal( `
\n` + - ` \n` + - ` \n` + - `
` + ` \n` + + ` \n` + + `` ) }) }) From 92884ad463bd0db5ccb6b5a720dde10742ffc75f Mon Sep 17 00:00:00 2001 From: briwa Date: Tue, 21 May 2019 00:10:23 +0800 Subject: [PATCH 3/4] refactor: npm run test --- packages/create-instance/create-component-stubs.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/create-instance/create-component-stubs.js b/packages/create-instance/create-component-stubs.js index 63460a299..5f8fda95b 100644 --- a/packages/create-instance/create-component-stubs.js +++ b/packages/create-instance/create-component-stubs.js @@ -142,7 +142,7 @@ function validateStub(stub) { } function shapeStubProps(props) { - const shapedProps: Record = {} + const shapedProps: Object = {} for (const propName in props) { if (!props.hasOwnProperty(propName)) { continue From d41d7b7965c134d506c0cf94397bed9853d1fffa Mon Sep 17 00:00:00 2001 From: briwa Date: Tue, 21 May 2019 00:26:22 +0800 Subject: [PATCH 4/4] refactor: always assume that it's an object --- packages/create-instance/create-component-stubs.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/create-instance/create-component-stubs.js b/packages/create-instance/create-component-stubs.js index 5f8fda95b..1fd9f9df2 100644 --- a/packages/create-instance/create-component-stubs.js +++ b/packages/create-instance/create-component-stubs.js @@ -144,10 +144,6 @@ function validateStub(stub) { function shapeStubProps(props) { const shapedProps: Object = {} for (const propName in props) { - if (!props.hasOwnProperty(propName)) { - continue - } - if (typeof props[propName] === 'function') { shapedProps[propName] = FUNCTION_PLACEHOLDER continue