From 5c9198b02fe31f672e13ff20f35a1a74a209d26b Mon Sep 17 00:00:00 2001 From: yinquan Date: Wed, 14 Oct 2020 00:20:46 +0800 Subject: [PATCH 1/6] feat: add the wrapper.getComponent method docs: create the /docs/api/wrapper/getComponent.md, and add the deprecation message to the /docs/api/wrapper/get.md docs(zh): create the /docs/zh/api/wrapper/getComponent.md, and add the deprecation message to the /docs/zh/api/wrapper/get.md --- docs/api/wrapper/get.md | 4 ++++ docs/api/wrapper/getComponent.md | 27 +++++++++++++++++++++++++++ docs/zh/api/wrapper/get.md | 4 ++++ docs/zh/api/wrapper/getComponent.md | 24 ++++++++++++++++++++++++ packages/test-utils/src/wrapper.js | 16 +++++++++++++++- 5 files changed, 74 insertions(+), 1 deletion(-) create mode 100644 docs/api/wrapper/getComponent.md create mode 100644 docs/zh/api/wrapper/getComponent.md diff --git a/docs/api/wrapper/get.md b/docs/api/wrapper/get.md index 5462c668d..fa3c679d4 100644 --- a/docs/api/wrapper/get.md +++ b/docs/api/wrapper/get.md @@ -1,5 +1,9 @@ ## get +::: warning Deprecation warning +Using `get` to search for a Component is deprecated and will be removed. Use [`getComponent`](./getComponent.md) instead. +::: + Works just like [find](./find.md) but will throw an error if nothing matching the given selector is found. You should use `find` when searching for an element that may not exist. You should use this method when getting an element that should diff --git a/docs/api/wrapper/getComponent.md b/docs/api/wrapper/getComponent.md new file mode 100644 index 000000000..540609efc --- /dev/null +++ b/docs/api/wrapper/getComponent.md @@ -0,0 +1,27 @@ +## getComponent + +Works just like [findComponent](./findComponent.md) but will throw an error if nothing matching +the given selector is found. You should use `findComponent` when searching for an element +that may not exist. You should use this method when getting an element that should +exist and it will provide a nice error message if that is not the case. + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = mount(Foo) + +// similar to `wrapper.findComponent`. +// `getComponent` will throw an error if an element is not found. `findComponent` will do nothing. +expect(wrapper.getComponent(Bar)) // => finds Bar by component instance +expect(wrapper.getComponent({ name: 'bar' })) // => finds Bar by `name` +expect(wrapper.getComponent({ ref: 'bar' })) // => finds Bar by `ref` + +expect(() => wrapper.getComponent({ name: 'does-not-exist' })) + .to.throw() + .with.property( + 'message', + "Unable to find a component named 'does-not-exist' within:
the actual DOM here...
" + ) +``` diff --git a/docs/zh/api/wrapper/get.md b/docs/zh/api/wrapper/get.md index fca5c1316..317fa2aa7 100644 --- a/docs/zh/api/wrapper/get.md +++ b/docs/zh/api/wrapper/get.md @@ -1,5 +1,9 @@ ## get +::: warning 废弃警告 +使用 `get` 搜索组件的方式已经被废弃并会被移除。请换用 [`getComponent`](./getComponent.md)。 +::: + 和 [find](./find.md) 工作起来一样,但是如果未匹配到给定的选择器时会抛出错误。当搜索一个可能不存在的元素时你应该使用 `find`。当获取一个应该存在的元素时你应该使用这个方法,并且如果没有找到的话它会提供一则友好的错误信息。 ```js diff --git a/docs/zh/api/wrapper/getComponent.md b/docs/zh/api/wrapper/getComponent.md new file mode 100644 index 000000000..41a0917f8 --- /dev/null +++ b/docs/zh/api/wrapper/getComponent.md @@ -0,0 +1,24 @@ +## getComponent + +和 [findComponent](./findComponent.md) 工作起来一样,但是如果未匹配到给定的选择器时会抛出错误。当搜索一个可能不存在的元素时你应该使用 `findComponent`。当获取一个应该存在的元素时你应该使用这个方法,并且如果没有找到的话它会提供一则友好的错误信息。 + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = mount(Foo) + +// 和 `wrapper.findComponent` 相似。 +// 如果 `getComponent` 没有找到任何元素将会抛出一个而错误。`findComponent` 则不会做任何事。 +expect(wrapper.getComponent(Bar)) // => finds Bar by component instance +expect(wrapper.getComponent({ name: 'bar' })) // => finds Bar by `name` +expect(wrapper.getComponent({ ref: 'bar' })) // => finds Bar by `ref` + +expect(() => wrapper.getComponent({ name: 'does-not-exist' })) + .to.throw() + .with.property( + 'message', + "Unable to find a component named 'does-not-exist' within:
the actual DOM here...
" + ) +``` diff --git a/packages/test-utils/src/wrapper.js b/packages/test-utils/src/wrapper.js index c56a899c5..90c91760c 100644 --- a/packages/test-utils/src/wrapper.js +++ b/packages/test-utils/src/wrapper.js @@ -237,6 +237,20 @@ export default class Wrapper implements BaseWrapper { return found } + /** + * Gets first node in tree of the current wrapper that + * matches the provided selector. + */ + getComponent(rawSelector: Selector): Wrapper { + this.__warnIfDestroyed() + + const found = this.findComponent(rawSelector) + if (found instanceof ErrorWrapper) { + throw new Error(`Unable to find ${rawSelector} within: ${this.html()}`) + } + return found + } + /** * Finds first DOM node in tree of the current wrapper that * matches the provided selector. @@ -248,7 +262,7 @@ export default class Wrapper implements BaseWrapper { if (selector.type !== DOM_SELECTOR) { warnDeprecated( 'finding components with `find` or `get`', - 'Use `findComponent` instead' + 'Use `findComponent` and `getComponent` instead' ) } From e751aebfdb0cb8412fc141520add92a6918f0de8 Mon Sep 17 00:00:00 2001 From: TinyWisp <616244978@qq.com> Date: Wed, 14 Oct 2020 08:36:54 +0800 Subject: [PATCH 2/6] Update packages/test-utils/src/wrapper.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Adrià Fontcuberta --- packages/test-utils/src/wrapper.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/test-utils/src/wrapper.js b/packages/test-utils/src/wrapper.js index 90c91760c..3b3160949 100644 --- a/packages/test-utils/src/wrapper.js +++ b/packages/test-utils/src/wrapper.js @@ -246,7 +246,7 @@ export default class Wrapper implements BaseWrapper { const found = this.findComponent(rawSelector) if (found instanceof ErrorWrapper) { - throw new Error(`Unable to find ${rawSelector} within: ${this.html()}`) + throw new Error(`Unable to get ${rawSelector} within: ${this.html()}`) } return found } From 5ea609941dc7ebb2ef3615deb716289710ce9f62 Mon Sep 17 00:00:00 2001 From: TinyWisp <616244978@qq.com> Date: Wed, 14 Oct 2020 08:37:19 +0800 Subject: [PATCH 3/6] Update docs/api/wrapper/getComponent.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Adrià Fontcuberta --- docs/api/wrapper/getComponent.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/api/wrapper/getComponent.md b/docs/api/wrapper/getComponent.md index 540609efc..e00177fe6 100644 --- a/docs/api/wrapper/getComponent.md +++ b/docs/api/wrapper/getComponent.md @@ -14,9 +14,9 @@ const wrapper = mount(Foo) // similar to `wrapper.findComponent`. // `getComponent` will throw an error if an element is not found. `findComponent` will do nothing. -expect(wrapper.getComponent(Bar)) // => finds Bar by component instance -expect(wrapper.getComponent({ name: 'bar' })) // => finds Bar by `name` -expect(wrapper.getComponent({ ref: 'bar' })) // => finds Bar by `ref` +expect(wrapper.getComponent(Bar)) // => gets Bar by component instance +expect(wrapper.getComponent({ name: 'bar' })) // => gets Bar by `name` +expect(wrapper.getComponent({ ref: 'bar' })) // => gets Bar by `ref` expect(() => wrapper.getComponent({ name: 'does-not-exist' })) .to.throw() From 3abbeab539decaf75ad03deca965ca45eb837583 Mon Sep 17 00:00:00 2001 From: TinyWisp <616244978@qq.com> Date: Wed, 14 Oct 2020 08:37:41 +0800 Subject: [PATCH 4/6] Update docs/zh/api/wrapper/getComponent.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Adrià Fontcuberta --- docs/zh/api/wrapper/getComponent.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/zh/api/wrapper/getComponent.md b/docs/zh/api/wrapper/getComponent.md index 41a0917f8..fae3022ff 100644 --- a/docs/zh/api/wrapper/getComponent.md +++ b/docs/zh/api/wrapper/getComponent.md @@ -19,6 +19,6 @@ expect(() => wrapper.getComponent({ name: 'does-not-exist' })) .to.throw() .with.property( 'message', - "Unable to find a component named 'does-not-exist' within:
the actual DOM here...
" + "Unable to get a component named 'does-not-exist' within:
the actual DOM here...
" ) ``` From e3b5e65f976f204eb72805a5dcc4bbb3c7430811 Mon Sep 17 00:00:00 2001 From: TinyWisp <616244978@qq.com> Date: Wed, 14 Oct 2020 08:39:22 +0800 Subject: [PATCH 5/6] Update docs/zh/api/wrapper/getComponent.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Adrià Fontcuberta --- docs/zh/api/wrapper/getComponent.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/zh/api/wrapper/getComponent.md b/docs/zh/api/wrapper/getComponent.md index fae3022ff..be3507f31 100644 --- a/docs/zh/api/wrapper/getComponent.md +++ b/docs/zh/api/wrapper/getComponent.md @@ -11,9 +11,9 @@ const wrapper = mount(Foo) // 和 `wrapper.findComponent` 相似。 // 如果 `getComponent` 没有找到任何元素将会抛出一个而错误。`findComponent` 则不会做任何事。 -expect(wrapper.getComponent(Bar)) // => finds Bar by component instance -expect(wrapper.getComponent({ name: 'bar' })) // => finds Bar by `name` -expect(wrapper.getComponent({ ref: 'bar' })) // => finds Bar by `ref` +expect(wrapper.getComponent(Bar)) // => gets Bar by component instance +expect(wrapper.getComponent({ name: 'bar' })) // => gets Bar by `name` +expect(wrapper.getComponent({ ref: 'bar' })) // => gets Bar by `ref` expect(() => wrapper.getComponent({ name: 'does-not-exist' })) .to.throw() From dedaba7f892f0b1f6b4c133d1a673e1ca24a3872 Mon Sep 17 00:00:00 2001 From: TinyWisp <616244978@qq.com> Date: Wed, 14 Oct 2020 08:39:34 +0800 Subject: [PATCH 6/6] Update docs/api/wrapper/getComponent.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Adrià Fontcuberta --- docs/api/wrapper/getComponent.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api/wrapper/getComponent.md b/docs/api/wrapper/getComponent.md index e00177fe6..b354e9d2b 100644 --- a/docs/api/wrapper/getComponent.md +++ b/docs/api/wrapper/getComponent.md @@ -22,6 +22,6 @@ expect(() => wrapper.getComponent({ name: 'does-not-exist' })) .to.throw() .with.property( 'message', - "Unable to find a component named 'does-not-exist' within:
the actual DOM here...
" + "Unable to get a component named 'does-not-exist' within:
the actual DOM here...
" ) ```