diff --git a/packages/test-utils/src/find.js b/packages/test-utils/src/find.js index 47b3c920d..c4e654be0 100644 --- a/packages/test-utils/src/find.js +++ b/packages/test-utils/src/find.js @@ -69,7 +69,11 @@ export default function find ( if ( selector.type === COMPONENT_SELECTOR && - selector.value.functional && + ( + selector.value.functional || + (selector.value.options && + selector.value.options.functional) + ) && vueVersion < 2.3 ) { throwError( diff --git a/packages/test-utils/src/matches.js b/packages/test-utils/src/matches.js index cefe400d6..87f95bb33 100644 --- a/packages/test-utils/src/matches.js +++ b/packages/test-utils/src/matches.js @@ -12,10 +12,6 @@ export function vmMatchesName (vm, name) { } function vmCtorMatches (vm, component) { - const Ctor = typeof component === 'function' - ? component.options._Ctor - : component._Ctor - if ( vm.$options && vm.$options.$_vueTestUtils_original === component || vm.$_vueTestUtils_original === component @@ -23,16 +19,23 @@ function vmCtorMatches (vm, component) { return true } + const Ctor = typeof component === 'function' + ? component.options._Ctor + : component._Ctor + if (!Ctor) { return false } - const constructor = vm.constructor - return Object.keys(Ctor).some(c => { - return component.functional - ? Ctor[c] === vm._Ctor[c] - : Ctor[c] === constructor - }) + if (vm.constructor.extendOptions === component) { + return true + } + + if (component.functional) { + return Object.keys(vm._Ctor || {}).some(c => { + return component === vm._Ctor[c].extendOptions + }) + } } export function matches (node, selector) { diff --git a/packages/test-utils/src/mount.js b/packages/test-utils/src/mount.js index 6b83346cb..a9c752e86 100644 --- a/packages/test-utils/src/mount.js +++ b/packages/test-utils/src/mount.js @@ -54,5 +54,8 @@ export default function mount ( const root = vm.$options._isFunctionalContainer ? vm._vnode : vm + + component._Ctor = [] + return createWrapper(root, wrapperOptions) } diff --git a/test/specs/wrapper/find.spec.js b/test/specs/wrapper/find.spec.js index f7a1a3907..52f727777 100644 --- a/test/specs/wrapper/find.spec.js +++ b/test/specs/wrapper/find.spec.js @@ -178,7 +178,7 @@ describeWithShallowAndMount('find', mountingMethod => { wrappers.forEach((w, i) => expect(w.classes()).to.contain(expectedClasses[i])) }) - it('returns Wrapper of Vue Component matching functional component', () => { + it('returns functional component', () => { if (!functionalSFCsSupported) { return } @@ -199,7 +199,7 @@ describeWithShallowAndMount('find', mountingMethod => { expect(wrapper.find(FunctionalComponent).vm).to.equal(undefined) }) - it('returns Wrapper of Vue Component matching functional component with name', () => { + it('returns functional component with name', () => { const TestFunctionalComponent = { render: h => h('div'), functional: true, @@ -224,6 +224,30 @@ describeWithShallowAndMount('find', mountingMethod => { } }) + it('returns extended functional component', () => { + const TestFunctionalComponent = Vue.extend({ + render: h => h('div'), + functional: true + }) + const TestComponent = { + template: '
', + components: { + TestFunctionalComponent + } + } + const wrapper = mountingMethod(TestComponent) + if (vueVersion < 2.3) { + const message = + '[vue-test-utils]: find for functional components is not supported in Vue < 2.3' + const fn = () => wrapper.find(TestFunctionalComponent) + expect(fn) + .to.throw() + .with.property('message', message) + } else { + expect(wrapper.find(TestFunctionalComponent).exists()).to.equal(true) + } + }) + it('works correctly with innerHTML', () => { const TestComponent = { render (createElement) {