Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add the wrapper.getComponent method and corresponding documents. #1714

Merged
merged 6 commits into from
Oct 14, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 4 additions & 0 deletions docs/api/wrapper/get.md
Original file line number Diff line number Diff line change
@@ -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
Expand Down
27 changes: 27 additions & 0 deletions docs/api/wrapper/getComponent.md
Original file line number Diff line number Diff line change
@@ -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)) // => 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()
.with.property(
'message',
"Unable to get a component named 'does-not-exist' within: <div>the actual DOM here...</div>"
)
```
4 changes: 4 additions & 0 deletions docs/zh/api/wrapper/get.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
## get

::: warning 废弃警告
使用 `get` 搜索组件的方式已经被废弃并会被移除。请换用 [`getComponent`](./getComponent.md)。
:::

和 [find](./find.md) 工作起来一样,但是如果未匹配到给定的选择器时会抛出错误。当搜索一个可能不存在的元素时你应该使用 `find`。当获取一个应该存在的元素时你应该使用这个方法,并且如果没有找到的话它会提供一则友好的错误信息。

```js
Expand Down
24 changes: 24 additions & 0 deletions docs/zh/api/wrapper/getComponent.md
Original file line number Diff line number Diff line change
@@ -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)) // => 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()
.with.property(
'message',
"Unable to get a component named 'does-not-exist' within: <div>the actual DOM here...</div>"
)
```
16 changes: 15 additions & 1 deletion packages/test-utils/src/wrapper.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 get ${rawSelector} within: ${this.html()}`)
}
return found
}

/**
* Finds first DOM node in tree of the current wrapper that
* matches the provided selector.
Expand All @@ -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'
)
}

Expand Down