From bff46f1b23873b03801cf1c75a16733698300a38 Mon Sep 17 00:00:00 2001 From: Lachlan Miller Date: Thu, 9 Jan 2020 23:19:57 +1000 Subject: [PATCH 1/8] fix: allow find to work with any casing --- packages/test-utils/src/matches.js | 6 +++++- test/specs/wrapper/find.spec.js | 14 ++++++++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/packages/test-utils/src/matches.js b/packages/test-utils/src/matches.js index 82991d888..7ea0d0bd2 100644 --- a/packages/test-utils/src/matches.js +++ b/packages/test-utils/src/matches.js @@ -6,8 +6,12 @@ import { import { isConstructor } from 'shared/validators' export function vmMatchesName(vm, name) { + const normalize = (name = '') => name.replace(/-/gi, '').toLowerCase() + const normalizedName = normalize(name) return ( - !!name && (vm.name === name || (vm.$options && vm.$options.name === name)) + !!name && + (normalize(vm.name) === normalizedName || + (vm.$options && normalize(vm.$options.name) === normalizedName)) ) } diff --git a/test/specs/wrapper/find.spec.js b/test/specs/wrapper/find.spec.js index 809eca23b..fbc434638 100644 --- a/test/specs/wrapper/find.spec.js +++ b/test/specs/wrapper/find.spec.js @@ -431,6 +431,20 @@ describeWithShallowAndMount('find', mountingMethod => { ) }) + it('returns a Wrapper matching a component pascal case name in options object', () => { + const wrapper = mountingMethod(ComponentWithChild) + expect(wrapper.find({ name: 'TestComponent' }).name()).to.equal( + 'test-component' + ) + }) + + it('returns a Wrapper matching a component camel case name in options object', () => { + const wrapper = mountingMethod(ComponentWithChild) + expect(wrapper.find({ name: 'testComponent' }).name()).to.equal( + 'test-component' + ) + }) + it('returns Wrapper of Vue Component matching the ref in options object', () => { const wrapper = mountingMethod(ComponentWithChild) expect(wrapper.find({ ref: 'child' }).isVueInstance()).to.equal(true) From 83ee6c1d4d298b1c2ae5d98fabe48c4fd2ac45cb Mon Sep 17 00:00:00 2001 From: Lachlan Miller Date: Thu, 9 Jan 2020 23:29:28 +1000 Subject: [PATCH 2/8] fix: do not export function --- packages/test-utils/src/matches.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/test-utils/src/matches.js b/packages/test-utils/src/matches.js index 7ea0d0bd2..aca9281e7 100644 --- a/packages/test-utils/src/matches.js +++ b/packages/test-utils/src/matches.js @@ -5,7 +5,7 @@ import { } from 'shared/consts' import { isConstructor } from 'shared/validators' -export function vmMatchesName(vm, name) { +function vmMatchesName(vm, name) { const normalize = (name = '') => name.replace(/-/gi, '').toLowerCase() const normalizedName = normalize(name) return ( From 82bd743359cdb63353bb43868e20599eff9f164b Mon Sep 17 00:00:00 2001 From: Lachlan Miller Date: Fri, 10 Jan 2020 18:28:34 +1000 Subject: [PATCH 3/8] fix: do not remove hyphen in component names --- packages/test-utils/src/matches.js | 8 ++++---- test/specs/wrapper/find.spec.js | 16 +++++++++------- 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/packages/test-utils/src/matches.js b/packages/test-utils/src/matches.js index aca9281e7..c12fe435b 100644 --- a/packages/test-utils/src/matches.js +++ b/packages/test-utils/src/matches.js @@ -6,12 +6,12 @@ import { import { isConstructor } from 'shared/validators' function vmMatchesName(vm, name) { - const normalize = (name = '') => name.replace(/-/gi, '').toLowerCase() - const normalizedName = normalize(name) + const lc = (name = '') => name.toLowerCase() + const lowerCaseName = lc(name) return ( !!name && - (normalize(vm.name) === normalizedName || - (vm.$options && normalize(vm.$options.name) === normalizedName)) + (lc(vm.name) === lowerCaseName || + (vm.$options && lc(vm.$options.name) === lowerCaseName)) ) } diff --git a/test/specs/wrapper/find.spec.js b/test/specs/wrapper/find.spec.js index fbc434638..e23a891ef 100644 --- a/test/specs/wrapper/find.spec.js +++ b/test/specs/wrapper/find.spec.js @@ -431,18 +431,20 @@ describeWithShallowAndMount('find', mountingMethod => { ) }) - it('returns a Wrapper matching a component pascal case name in options object', () => { + it('returns a Wrapper matching a component camel case name in options object', () => { const wrapper = mountingMethod(ComponentWithChild) - expect(wrapper.find({ name: 'TestComponent' }).name()).to.equal( + expect(wrapper.find({ name: 'test-Component' }).name()).to.equal( 'test-component' ) }) - it('returns a Wrapper matching a component camel case name in options object', () => { - const wrapper = mountingMethod(ComponentWithChild) - expect(wrapper.find({ name: 'testComponent' }).name()).to.equal( - 'test-component' - ) + it('returns a Wrapper matching a name disregarding case in options object', () => { + const component = { + name: 'CamelCase', + render: h => h('div') + } + const wrapper = mountingMethod(component) + expect(wrapper.find({ name: 'camelCase' }).name()).to.equal('CamelCase') }) it('returns Wrapper of Vue Component matching the ref in options object', () => { From 8607c28d741f0d3ec9a2250f8571553bd44cf9eb Mon Sep 17 00:00:00 2001 From: Lachlan Miller Date: Fri, 10 Jan 2020 19:51:01 +1000 Subject: [PATCH 4/8] fix: only match by capitalize --- packages/test-utils/src/matches.js | 12 +++++++----- test/specs/wrapper/find.spec.js | 9 +-------- 2 files changed, 8 insertions(+), 13 deletions(-) diff --git a/packages/test-utils/src/matches.js b/packages/test-utils/src/matches.js index c12fe435b..9ae2a1405 100644 --- a/packages/test-utils/src/matches.js +++ b/packages/test-utils/src/matches.js @@ -4,14 +4,16 @@ import { FUNCTIONAL_OPTIONS } from 'shared/consts' import { isConstructor } from 'shared/validators' +import { capitalize } from 'shared/util' function vmMatchesName(vm, name) { - const lc = (name = '') => name.toLowerCase() - const lowerCaseName = lc(name) return ( - !!name && - (lc(vm.name) === lowerCaseName || - (vm.$options && lc(vm.$options.name) === lowerCaseName)) + !!name && ( + vm.name === name || + (vm.$options && vm.$options.name === name) || + vm.name === capitalize(name) || + vm.$options && vm.$options.name === capitalize(name) + ) ) } diff --git a/test/specs/wrapper/find.spec.js b/test/specs/wrapper/find.spec.js index e23a891ef..4f6004538 100644 --- a/test/specs/wrapper/find.spec.js +++ b/test/specs/wrapper/find.spec.js @@ -431,14 +431,7 @@ describeWithShallowAndMount('find', mountingMethod => { ) }) - it('returns a Wrapper matching a component camel case name in options object', () => { - const wrapper = mountingMethod(ComponentWithChild) - expect(wrapper.find({ name: 'test-Component' }).name()).to.equal( - 'test-component' - ) - }) - - it('returns a Wrapper matching a name disregarding case in options object', () => { + it('returns a Wrapper matching a camelCase name option and a Pascal Case component name ', () => { const component = { name: 'CamelCase', render: h => h('div') From 17180050e16bf83331e1b4871342a440bed25565 Mon Sep 17 00:00:00 2001 From: Lachlan Miller Date: Fri, 10 Jan 2020 20:29:19 +1000 Subject: [PATCH 5/8] fix: cover both kebab and camel cases --- packages/test-utils/src/matches.js | 10 +++++++--- test/specs/wrapper/find.spec.js | 20 +++++++++++++++++++- 2 files changed, 26 insertions(+), 4 deletions(-) diff --git a/packages/test-utils/src/matches.js b/packages/test-utils/src/matches.js index 9ae2a1405..270eff17d 100644 --- a/packages/test-utils/src/matches.js +++ b/packages/test-utils/src/matches.js @@ -4,15 +4,19 @@ import { FUNCTIONAL_OPTIONS } from 'shared/consts' import { isConstructor } from 'shared/validators' -import { capitalize } from 'shared/util' +import { capitalize, camelize } from 'shared/util' function vmMatchesName(vm, name) { + console.log(name) + console.log(vm.$options.name) return ( !!name && ( - vm.name === name || + vm.name === name || (vm.$options && vm.$options.name === name) || vm.name === capitalize(name) || - vm.$options && vm.$options.name === capitalize(name) + vm.$options && vm.$options.name === capitalize(name) || + vm.$options && vm.$options.name && vm.$options.name === capitalize(camelize(name)) || + vm.$options && vm.$options.name && capitalize(camelize(vm.$options.name)) === name ) ) } diff --git a/test/specs/wrapper/find.spec.js b/test/specs/wrapper/find.spec.js index 4f6004538..16df7cfd1 100644 --- a/test/specs/wrapper/find.spec.js +++ b/test/specs/wrapper/find.spec.js @@ -440,6 +440,24 @@ describeWithShallowAndMount('find', mountingMethod => { expect(wrapper.find({ name: 'camelCase' }).name()).to.equal('CamelCase') }) + it('returns a Wrapper matching a kebab-case name option and a Pascal Case component name ', () => { + const component = { + name: 'CamelCase', + render: h => h('div') + } + const wrapper = mountingMethod(component) + expect(wrapper.find({ name: 'camel-case' }).name()).to.equal('CamelCase') + }) + + it('returns a Wrapper matching a Pascal Case name option and a kebab-casecomponent name ', () => { + const component = { + name: 'camel-case', + render: h => h('div') + } + const wrapper = mountingMethod(component) + expect(wrapper.find({ name: 'CamelCase' }).name()).to.equal('camel-case') + }) + it('returns Wrapper of Vue Component matching the ref in options object', () => { const wrapper = mountingMethod(ComponentWithChild) expect(wrapper.find({ ref: 'child' }).isVueInstance()).to.equal(true) @@ -450,7 +468,7 @@ describeWithShallowAndMount('find', mountingMethod => { const wrapper = mountingMethod(compiled) const a = wrapper.find('a') const message = - '[vue-test-utils]: $ref selectors can only be used on Vue component wrappers' + '[vue-test-utils]: $ref selectors can used on Vue component wrappers' const fn = () => a.find({ ref: 'foo' }) expect(fn) .to.throw() From b3e2b926bbff3ff65f72e4983db671a62703a574 Mon Sep 17 00:00:00 2001 From: Lachlan Miller Date: Sun, 12 Jan 2020 21:00:19 +1000 Subject: [PATCH 6/8] fix: simplify code --- packages/test-utils/src/matches.js | 13 +++++-------- test/specs/wrapper/find.spec.js | 2 +- 2 files changed, 6 insertions(+), 9 deletions(-) diff --git a/packages/test-utils/src/matches.js b/packages/test-utils/src/matches.js index 270eff17d..079aaa88d 100644 --- a/packages/test-utils/src/matches.js +++ b/packages/test-utils/src/matches.js @@ -7,16 +7,13 @@ import { isConstructor } from 'shared/validators' import { capitalize, camelize } from 'shared/util' function vmMatchesName(vm, name) { - console.log(name) - console.log(vm.$options.name) + const componentName = vm.$options && vm.$options.name || '' return ( !!name && ( - vm.name === name || - (vm.$options && vm.$options.name === name) || - vm.name === capitalize(name) || - vm.$options && vm.$options.name === capitalize(name) || - vm.$options && vm.$options.name && vm.$options.name === capitalize(camelize(name)) || - vm.$options && vm.$options.name && capitalize(camelize(vm.$options.name)) === name + componentName === name || + componentName === capitalize(name) || + componentName === capitalize(camelize(name)) || + capitalize(camelize(componentName)) === name ) ) } diff --git a/test/specs/wrapper/find.spec.js b/test/specs/wrapper/find.spec.js index 16df7cfd1..d457d0e32 100644 --- a/test/specs/wrapper/find.spec.js +++ b/test/specs/wrapper/find.spec.js @@ -468,7 +468,7 @@ describeWithShallowAndMount('find', mountingMethod => { const wrapper = mountingMethod(compiled) const a = wrapper.find('a') const message = - '[vue-test-utils]: $ref selectors can used on Vue component wrappers' + '[vue-test-utils]: $ref selectors can only be used on Vue component wrappers' const fn = () => a.find({ ref: 'foo' }) expect(fn) .to.throw() From 0472aa40168fcc58696444c6e6640d2d1a50d495 Mon Sep 17 00:00:00 2001 From: Lachlan Miller Date: Sun, 12 Jan 2020 21:11:18 +1000 Subject: [PATCH 7/8] fix: add comments explaining vmMatchesName functino --- packages/test-utils/src/matches.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/test-utils/src/matches.js b/packages/test-utils/src/matches.js index 079aaa88d..d31b3b63c 100644 --- a/packages/test-utils/src/matches.js +++ b/packages/test-utils/src/matches.js @@ -7,14 +7,19 @@ import { isConstructor } from 'shared/validators' import { capitalize, camelize } from 'shared/util' function vmMatchesName(vm, name) { - const componentName = vm.$options && vm.$options.name || '' + // We want to mirror how Vue resolves component names in SFCs: + // For example, , and ` + // all resolve to the same component + const componentName = (vm.$options && vm.$options.name) || '' return ( - !!name && ( - componentName === name || + !!name && + (componentName === name || + // testComponent -> TestComponent componentName === capitalize(name) || + // testcomponent -> TestComponent componentName === capitalize(camelize(name)) || - capitalize(camelize(componentName)) === name - ) + // same match as above, but the component name vs query + capitalize(camelize(componentName)) === name) ) } From e8f3266d6b151122546ca334211fbd1ab9b87938 Mon Sep 17 00:00:00 2001 From: Lachlan Miller Date: Sun, 12 Jan 2020 21:21:01 +1000 Subject: [PATCH 8/8] fix: update comment --- packages/test-utils/src/matches.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/test-utils/src/matches.js b/packages/test-utils/src/matches.js index d31b3b63c..8f11a2d33 100644 --- a/packages/test-utils/src/matches.js +++ b/packages/test-utils/src/matches.js @@ -16,7 +16,7 @@ function vmMatchesName(vm, name) { (componentName === name || // testComponent -> TestComponent componentName === capitalize(name) || - // testcomponent -> TestComponent + // test-component -> TestComponent componentName === capitalize(camelize(name)) || // same match as above, but the component name vs query capitalize(camelize(componentName)) === name)