From 6c86b66ec60d7ebd043c35fe79f501cfce4005a1 Mon Sep 17 00:00:00 2001 From: lmiller1990 Date: Tue, 5 Jun 2018 20:24:43 +0900 Subject: [PATCH 1/5] WIP: Update isDomSelector --- packages/shared/validators.js | 23 +++++++++++++++---- packages/test-utils/package.json | 4 +++- .../test-utils/src/find-vue-components.js | 7 ++++-- packages/test-utils/src/find.js | 1 + packages/test-utils/src/wrapper.js | 1 + yarn.lock | 8 +++++++ 6 files changed, 37 insertions(+), 7 deletions(-) diff --git a/packages/shared/validators.js b/packages/shared/validators.js index bfecebca4..ea1b845ed 100644 --- a/packages/shared/validators.js +++ b/packages/shared/validators.js @@ -1,4 +1,7 @@ // @flow + +import htmlTags from 'html-tags' +import svgElements from 'svg-elements' import { throwError, capitalize, @@ -21,7 +24,15 @@ export function isDomSelector (selector: any) { try { document.querySelector(selector) - return true + + const pseudoSelectors = ['.', '#', '[', ':', '>', ' '] + if (htmlTags.includes(selector) + || svgElements.includes(selector) + || selector.split('').some(char => pseudoSelectors.includes(char))) { + return true + } else { + return false + } } catch (error) { return false } @@ -61,11 +72,15 @@ export function isRefSelector (refOptionsObject: any) { } export function isNameSelector (nameOptionsObject: any) { - if (typeof nameOptionsObject !== 'object' || nameOptionsObject === null) { + if (nameOptionsObject === null) { return false } - - return !!nameOptionsObject.name + if (typeof nameOptionsObject === 'object') { + return !!nameOptionsObject.name + } + if (typeof nameOptionsObject === 'string') { + return !!nameOptionsObject + } } export function templateContainsComponent (template: string, name: string) { diff --git a/packages/test-utils/package.json b/packages/test-utils/package.json index 4c164bc83..6c7289fb9 100644 --- a/packages/test-utils/package.json +++ b/packages/test-utils/package.json @@ -37,6 +37,8 @@ "vue-template-compiler": "^2.x" }, "dependencies": { - "lodash": "^4.17.4" + "html-tags": "^2.0.0", + "lodash": "^4.17.4", + "svg-elements": "^1.0.2" } } diff --git a/packages/test-utils/src/find-vue-components.js b/packages/test-utils/src/find-vue-components.js index 28e73e298..c27f4551f 100644 --- a/packages/test-utils/src/find-vue-components.js +++ b/packages/test-utils/src/find-vue-components.js @@ -1,4 +1,5 @@ // @flow +// // name import { FUNCTIONAL_OPTIONS, VUE_VERSION @@ -51,8 +52,10 @@ function findAllFunctionalComponentsFromVnode ( } export function vmCtorMatchesName (vm: Component, name: string): boolean { - return !!((vm.$vnode && vm.$vnode.componentOptions && - vm.$vnode.componentOptions.Ctor.options.name === name) || + if (!name) { + return false + } + return !!((vm.$vnode && vm.$vnode.componentOptions && vm.$vnode.componentOptions.Ctor.options.name === name) || (vm._vnode && vm._vnode.functionalOptions && vm._vnode.functionalOptions.name === name) || diff --git a/packages/test-utils/src/find.js b/packages/test-utils/src/find.js index 7b178b649..0fec337c8 100644 --- a/packages/test-utils/src/find.js +++ b/packages/test-utils/src/find.js @@ -19,6 +19,7 @@ export default function find ( selector: Selector ): Array { const selectorType = getSelectorTypeOrThrow(selector, 'find') + console.log('TYPE IS', selectorType) if (!vnode && !vm && selectorType !== DOM_SELECTOR) { throwError('cannot find a Vue instance on a DOM node. The node you are calling find on does not exist in the VDom. Are you adding the node as innerHTML?') diff --git a/packages/test-utils/src/wrapper.js b/packages/test-utils/src/wrapper.js index d95678e33..96bce6a7a 100644 --- a/packages/test-utils/src/wrapper.js +++ b/packages/test-utils/src/wrapper.js @@ -99,6 +99,7 @@ export default class Wrapper implements BaseWrapper { */ contains (selector: Selector) { const selectorType = getSelectorTypeOrThrow(selector, 'contains') + console.log("KOOK MADE") const nodes = findAll(this.vm, this.vnode, this.element, selector) const is = selectorType === REF_SELECTOR ? false : this.is(selector) return nodes.length > 0 || is diff --git a/yarn.lock b/yarn.lock index b78e59e32..517912935 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4983,6 +4983,10 @@ html-minifier@^3.2.3: relateurl "0.2.x" uglify-js "3.3.x" +html-tags@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-2.0.0.tgz#10b30a386085f43cede353cc8fa7cb0deeea668b" + htmlparser2@^3.8.2, htmlparser2@^3.9.1: version "3.9.2" resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.9.2.tgz#1bdf87acca0f3f9e53fa4fcceb0f4b4cbb00b338" @@ -9004,6 +9008,10 @@ supports-color@^5.3.0, supports-color@^5.4.0: dependencies: has-flag "^3.0.0" +svg-elements@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/svg-elements/-/svg-elements-1.0.2.tgz#0d976a499055e26429c136b4bca07c12fac8c8c3" + svgo@^0.7.0: version "0.7.2" resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5" From b4731236ad86581a72e0af5ce28fb8b075c6535d Mon Sep 17 00:00:00 2001 From: lmiller1990 Date: Tue, 5 Jun 2018 23:32:31 +0900 Subject: [PATCH 2/5] all tests green + simple test --- flow/modules.flow.js | 8 ++++++++ packages/shared/validators.js | 9 ++++----- packages/test-utils/src/find-vue-components.js | 11 ++++++++++- packages/test-utils/src/wrapper.js | 1 - test/specs/wrapper/find.spec.js | 5 +++++ 5 files changed, 27 insertions(+), 7 deletions(-) diff --git a/flow/modules.flow.js b/flow/modules.flow.js index fe37dfd20..4849dd3e0 100644 --- a/flow/modules.flow.js +++ b/flow/modules.flow.js @@ -27,3 +27,11 @@ declare module 'vue-server-renderer' { declare module 'cheerio' { declare module.exports: any; } + +declare module 'html-tags' { + declare module.exports: any; +} + +declare module 'svg-elements' { + declare module.exports: any; +} diff --git a/packages/shared/validators.js b/packages/shared/validators.js index ea1b845ed..f4b1565ca 100644 --- a/packages/shared/validators.js +++ b/packages/shared/validators.js @@ -21,14 +21,13 @@ export function isDomSelector (selector: any) { } catch (error) { throwError('mount must be run in a browser environment like PhantomJS, jsdom or chrome') } - try { document.querySelector(selector) const pseudoSelectors = ['.', '#', '[', ':', '>', ' '] - if (htmlTags.includes(selector) - || svgElements.includes(selector) - || selector.split('').some(char => pseudoSelectors.includes(char))) { + if (htmlTags.includes(selector) || + svgElements.includes(selector) || + selector.split('').some(char => pseudoSelectors.includes(char))) { return true } else { return false @@ -78,7 +77,7 @@ export function isNameSelector (nameOptionsObject: any) { if (typeof nameOptionsObject === 'object') { return !!nameOptionsObject.name } - if (typeof nameOptionsObject === 'string') { + if (typeof nameOptionsObject === 'string' && !/[^A-Za-z0-9\-_]/.exec(nameOptionsObject)) { return !!nameOptionsObject } } diff --git a/packages/test-utils/src/find-vue-components.js b/packages/test-utils/src/find-vue-components.js index c27f4551f..c947372c3 100644 --- a/packages/test-utils/src/find-vue-components.js +++ b/packages/test-utils/src/find-vue-components.js @@ -56,6 +56,7 @@ export function vmCtorMatchesName (vm: Component, name: string): boolean { return false } return !!((vm.$vnode && vm.$vnode.componentOptions && vm.$vnode.componentOptions.Ctor.options.name === name) || + vm.$vnode.componentOptions.tag === name || (vm._vnode && vm._vnode.functionalOptions && vm._vnode.functionalOptions.name === name) || @@ -105,7 +106,15 @@ export default function findVueComponents ( node[FUNCTIONAL_OPTIONS].name === selector.name ) } - const nameSelector = typeof selector === 'function' ? selector.options.name : selector.name + /* + * const nameSelector = typeof selector === 'function' ? selector.options.name : selector.name */ + const nameSelector = typeof selector === 'function' + ? selector.options.name + : typeof selector === 'object' ? selector.name : selector + + // const nameSelector = typeof selector === 'function' + // ? selector.options.name : selector.name + const components = root._isVue ? findAllVueComponentsFromVm(root) : findAllVueComponentsFromVnode(root) diff --git a/packages/test-utils/src/wrapper.js b/packages/test-utils/src/wrapper.js index 96bce6a7a..d95678e33 100644 --- a/packages/test-utils/src/wrapper.js +++ b/packages/test-utils/src/wrapper.js @@ -99,7 +99,6 @@ export default class Wrapper implements BaseWrapper { */ contains (selector: Selector) { const selectorType = getSelectorTypeOrThrow(selector, 'contains') - console.log("KOOK MADE") const nodes = findAll(this.vm, this.vnode, this.element, selector) const is = selectorType === REF_SELECTOR ? false : this.is(selector) return nodes.length > 0 || is diff --git a/test/specs/wrapper/find.spec.js b/test/specs/wrapper/find.spec.js index a4c7c281e..9a12bafad 100644 --- a/test/specs/wrapper/find.spec.js +++ b/test/specs/wrapper/find.spec.js @@ -115,6 +115,11 @@ describeWithShallowAndMount('find', (mountingMethod) => { expect(wrapper.find(Component).vnode).to.be.an('object') }) + it.only('returns Wrapper of Vue Components matching component', () => { + const wrapper = mountingMethod(ComponentWithChild) + expect(wrapper.find('child-component').vnode).to.be.an('object') + }) + itSkipIf( isRunningPhantomJS, 'returns Wrapper of class component', () => { From feb0e399e3225f9f120895fd5cac84e43289c636 Mon Sep 17 00:00:00 2001 From: lmiller1990 Date: Tue, 5 Jun 2018 23:34:31 +0900 Subject: [PATCH 3/5] remove console logs --- packages/test-utils/src/find-vue-components.js | 10 +++------- packages/test-utils/src/find.js | 1 - 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/test-utils/src/find-vue-components.js b/packages/test-utils/src/find-vue-components.js index c947372c3..adfd8b92c 100644 --- a/packages/test-utils/src/find-vue-components.js +++ b/packages/test-utils/src/find-vue-components.js @@ -106,14 +106,10 @@ export default function findVueComponents ( node[FUNCTIONAL_OPTIONS].name === selector.name ) } - /* - * const nameSelector = typeof selector === 'function' ? selector.options.name : selector.name */ - const nameSelector = typeof selector === 'function' - ? selector.options.name - : typeof selector === 'object' ? selector.name : selector - // const nameSelector = typeof selector === 'function' - // ? selector.options.name : selector.name + const nameSelector = typeof selector === 'function' + ? selector.options.name + : typeof selector === 'object' ? selector.name : selector const components = root._isVue ? findAllVueComponentsFromVm(root) diff --git a/packages/test-utils/src/find.js b/packages/test-utils/src/find.js index 0fec337c8..7b178b649 100644 --- a/packages/test-utils/src/find.js +++ b/packages/test-utils/src/find.js @@ -19,7 +19,6 @@ export default function find ( selector: Selector ): Array { const selectorType = getSelectorTypeOrThrow(selector, 'find') - console.log('TYPE IS', selectorType) if (!vnode && !vm && selectorType !== DOM_SELECTOR) { throwError('cannot find a Vue instance on a DOM node. The node you are calling find on does not exist in the VDom. Are you adding the node as innerHTML?') From 8bdafd00dd4e0a7fe072e30dda46aee6b4b0a34f Mon Sep 17 00:00:00 2001 From: lmiller1990 Date: Tue, 5 Jun 2018 23:39:46 +0900 Subject: [PATCH 4/5] remove comment --- packages/test-utils/src/find-vue-components.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/test-utils/src/find-vue-components.js b/packages/test-utils/src/find-vue-components.js index adfd8b92c..a4be89563 100644 --- a/packages/test-utils/src/find-vue-components.js +++ b/packages/test-utils/src/find-vue-components.js @@ -1,5 +1,5 @@ // @flow -// // name + import { FUNCTIONAL_OPTIONS, VUE_VERSION From 02a61a8038e8713a4b4d1140ebad9c210b5dfac8 Mon Sep 17 00:00:00 2001 From: lmiller1990 Date: Tue, 5 Jun 2018 23:42:20 +0900 Subject: [PATCH 5/5] remove only from test --- test/specs/wrapper/find.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/specs/wrapper/find.spec.js b/test/specs/wrapper/find.spec.js index 9a12bafad..94d358c3b 100644 --- a/test/specs/wrapper/find.spec.js +++ b/test/specs/wrapper/find.spec.js @@ -115,7 +115,7 @@ describeWithShallowAndMount('find', (mountingMethod) => { expect(wrapper.find(Component).vnode).to.be.an('object') }) - it.only('returns Wrapper of Vue Components matching component', () => { + it('returns Wrapper of Vue Components matching component', () => { const wrapper = mountingMethod(ComponentWithChild) expect(wrapper.find('child-component').vnode).to.be.an('object') })