Skip to content

Commit 3e5ad44

Browse files
eddyerburgheddyerburgh
committed
docs: update wrapper to follow Vue docs format
1 parent ec70e27 commit 3e5ad44

19 files changed

+118
-183
lines changed

‎docs/en/SUMMARY.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
* [update](api/wrapper/update.md)
2121
* [setData](api/wrapper/setData.md)
2222
* [setProps](api/wrapper/setProps.md)
23-
* [text](api/wrapper/trigger.md)
23+
* [text](api/wrapper/text.md)
2424
* [trigger](api/wrapper/trigger.md)
2525
* [WrapperArray](api/wrapper-array/README.md)
2626
* [at](api/wrapper-array/at.md)

‎docs/en/api/wrapper/README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ vue-test-utils is a wrapper based API.
44

55
A `Wrapper` is an object that contains a mounted component or vnode and methods to test the component or vnode.
66

7-
## Properties
7+
- **Properties:**
88

99
`vm` `Component`: this is the vue instance. You can access all the [instance methods and properties of a vm](https://vuejs.org/v2/api/#Instance-Properties) with `wrapper.vm`. This only exists on Vue component wrappers
1010
`element` `DOM node`: the root DOM node of the wrapper
1111
`options` `Object`: Object containing vue-test-utils options passed to `mount` or `shallow`
1212
`options.attachedToDom` `Boolean`: True if attachToDom was passed to `mount` or `shallow`
1313

14-
## Methods
14+
- **Methods:**
1515

1616
There is a detailed list of methods in the wrapper section of the docs.

‎docs/en/api/wrapper/contains.md

+8-20
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,23 @@
11
# contains(selector)
22

3-
Returns true if wrapper contains selector. Use any valid [selector](/api/selectors.md).
3+
- **Arguments:**
4+
- `{string|Component} selector`
45

5-
### Arguments
6+
- **Returns:** `{boolean}`
67

7-
`selector` (`String`|`Component`): a CSS selector ('#id', '.class-name', 'tag') or a Vue component. See [selectors](/api/selectors.md).
8+
- **Usage:**
89

9-
### Returns
10-
11-
(`Boolean`): returns `true` if wrapper contains selector.
12-
13-
### Example
10+
Assert `Wrapper` contains an element or component matching [selector](/api/selectors.md).
1411

1512
```js
1613
import { mount } from 'vue-test-utils'
1714
import { expect } from 'chai'
1815
import Foo from './Foo.vue'
16+
import Bar from './Bar.vue'
1917

2018
const wrapper = mount(Foo)
2119
expect(wrapper.contains('p')).to.equal(true)
20+
expect(wrapper.contains(Bar)).to.equal(true)
2221
```
2322

24-
25-
`Bar.spec.js`
26-
27-
```js
28-
import { mount } from 'vue-test-utils'
29-
import { expect } from 'chai'
30-
import Foo from './Foo.vue'
31-
import Bar from './Bar.vue'
32-
33-
const wrapper = mount(Bar)
34-
expect(wrapper.contains(Foo)).to.equal(true)
35-
```
23+
- **See also:** [selectors](/api/selectors.md)

‎docs/en/api/wrapper/find.md

+10-19
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,27 @@
11
# find(selector)
22

3-
Returns [`Wrapper`](/api/wrapper/README.md) of first DOM node or Vue component matching selector. Use any valid [selector](/api/selectors.md).
3+
- **Arguments:**
4+
- `{string|Component} selector`
45

5-
### Arguments
6+
- **Returns:** `{Wrapper}`
67

7-
`selector` (`String`|`Component`): a CSS selector ('#id', '.class-name', 'tag') or a Vue component. See [selectors](/api/selectors.md).
8+
- **Usage:**
89

9-
### Returns
10+
Returns [`Wrapper`](/api/wrapper/README.md) of first DOM node or Vue component matching selector.
1011

11-
(`Wrapper`): returns a [`Wrapper`](/api/wrapper/README.md)
12-
13-
14-
### Example
12+
Use any valid [selector](/api/selectors.md).
1513

1614
```js
1715
import { mount } from 'vue-test-utils'
1816
import { expect } from 'chai'
1917
import Foo from './Foo.vue'
18+
import Bar from './Bar.vue'
2019

2120
const wrapper = mount(Foo)
2221
const div = wrapper.find('div')
2322
expect(div.is('div')).to.equal(true)
24-
```
25-
26-
With a Vue Component:
27-
```js
28-
import { mount } from 'vue-test-utils'
29-
import { expect } from 'chai'
30-
import Foo from './Foo.vue'
31-
import Bar from './Bar.vue'
32-
33-
const wrapper = mount(Foo)
3423
const bar = wrapper.find(Bar)
35-
expect(bar.isVueComponent).to.equal(true)
24+
expect(bar.is(Bar)).to.equal(true)
3625
```
26+
27+
- **See also:** [Wrapper](/api/wrapper/README.md)

‎docs/en/api/wrapper/findAll.md

+11-20
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,27 @@
11
# findAll(selector)
22

3-
Returns a [`WrapperArray`](/api/wrapper-array/README.md) of [Wrappers](/api/wrapper/README.md). Use any valid [selector](/api/selectors.md).
3+
- **Arguments:**
4+
- `{string|Component} selector`
45

5-
### Arguments
6+
- **Returns:** `{WrapperArray}`
67

7-
`selector` (`String`|`Component`): a CSS selector ('#id', '.class-name', 'tag') or a Vue component. See [selectors](/api/selectors.md).
8+
- **Usage:**
89

9-
### Returns
10+
Returns a [`WrapperArray`](/api/wrapper-array/README.md) of [Wrappers](/api/wrapper/README.md).
1011

11-
(`WrapperArray`): returns a [`WrapperArray`](/api/wrapper-array/README.md) with [Wrappers](/api/wrapper/README.md) matching selector. Access wrappers using the [`at`](/api/WrapperArray/at.md) method
12-
13-
14-
### Example
12+
Use any valid [selector](/api/selectors.md).
1513

16-
```js
17-
import { mount } from 'vue-test-utils'
18-
import { expect } from 'chai'
19-
import Foo from './Foo.vue'
20-
21-
const wrapper = mount(Foo)
22-
const div = wrapper.findAll('div')
23-
expect(div.is('div')).to.equal(true)
24-
```
25-
26-
With a Vue Component:
2714
```js
2815
import { mount } from 'vue-test-utils'
2916
import { expect } from 'chai'
3017
import Foo from './Foo.vue'
3118
import Bar from './Bar.vue'
3219

3320
const wrapper = mount(Foo)
21+
const div = wrapper.findAll('div').at(0)
22+
expect(div.is('div')).to.equal(true)
3423
const bar = wrapper.findAll(Bar).at(0)
35-
expect(bar.isVueComponent).to.equal(true)
24+
expect(bar.is(Bar)).to.equal(true)
3625
```
26+
27+
- **See also:** [Wrapper](/api/wrapper/README.md)

‎docs/en/api/wrapper/hasAttribute.md

+8-10
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
11
# hasAttribute(attribute, value)
22

3-
Check if wrapper DOM node has attribute matching value
3+
- **Arguments:**
4+
- `{string} attribute`
5+
- `{string} value`
46

5-
### Arguments
7+
- **Returns:** `{boolean}`
68

7-
`attribute` (`String`): attribute name to assert value of.
9+
- **Usage:**
810

9-
`value` (`String`): the value attribute should hold.
11+
Assert `Wrapper` DOM node has attribute matching value.
1012

11-
### Returns
12-
13-
(`Boolean`): `true` if element contains attribute with matching value, `false` otherwise.
14-
15-
## Example
13+
Returns `true` if `Wrapper` DOM node contains attribute with matching value.
1614

1715
```js
1816
import { mount } from 'vue-test-utils'
@@ -21,4 +19,4 @@ import Foo from './Foo.vue'
2119

2220
const wrapper = mount(Foo)
2321
expect(wrapper.hasAttribute('id', 'foo')).to.equal(true)
24-
```
22+
```

‎docs/en/api/wrapper/hasClass.md

+7-8
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
# hasClass(className)
22

3-
Check if wrapper DOM node has a class name. Returns a boolean.
3+
- **Arguments:**
4+
- `{string} className`
45

5-
### Arguments
6+
- **Returns:** `{boolean}`
67

7-
`className` (`String`): class name to assert element contains.
8+
- **Usage:**
89

9-
### Returns
10+
Assert `Wrapper` DOM node has class contains `className`.
1011

11-
(`Boolean`): `true` if element contains class. `false` otherwise.
12-
13-
## Example
12+
Returns `true` if `Wrapper` DOM node contains class.
1413

1514
```js
1615
import { mount } from 'vue-test-utils'
@@ -19,4 +18,4 @@ import Foo from './Foo.vue'
1918

2019
const wrapper = mount(Foo)
2120
expect(wrapper.hasClass('bar')).to.equal(true)
22-
```
21+
```

‎docs/en/api/wrapper/hasProp.md

+9-11
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
11
# hasProp(prop, value)
22

3-
Check if wrapper DOM node has a class name. Returns a boolean.
3+
- **Arguments:**
4+
- `{string} prop`
5+
- `{any} value`
46

5-
Can only be called on a Vue instance.
7+
- **Returns:** `{boolean}`
68

7-
### Arguments
9+
- **Usage:**
810

9-
`prop` (`String`): prop name to assert value of.
11+
Assert `Wrapper` `vm` has `prop` matching `value`.
1012

11-
`value` (`String`): the value prop should hold.
13+
Returns `true` if `Wrapper` `vm` has `prop` matching `value`.
1214

13-
### Returns
14-
15-
(`Boolean`): `true` if instance has prop. `false` if not.
16-
17-
## Example
15+
**Note the Wrapper must contain a Vue instance.**
1816

1917
```js
2018
import { mount } from 'vue-test-utils'
@@ -23,4 +21,4 @@ import Foo from './Foo.vue'
2321

2422
const wrapper = mount(Foo)
2523
expect(wrapper.hasProp('bar', 10)).to.equal(true)
26-
```
24+
```

‎docs/en/api/wrapper/hasStyle.md

+10-13
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,24 @@
11
# hasStyle(style, value)
22

3-
Check if wrapper DOM node has style matching value
3+
- **Arguments:**
4+
- `{string} style`
5+
- `{string} value`
46

5-
### Arguments
7+
- **Returns:** `{boolean}`
68

7-
`style` (`String`): style name to assert value of.
8-
`value` (`String`): the value style property should hold.
9+
- **Usage:**
910

10-
### Returns
11+
Assert `Wrapper` DOM node has style matching value
1112

12-
(`Boolean`): `true` if element contains style with matching value,
13-
`false` otherwise.
13+
Returns `true` if `Wrapper` DOM node has `style` matching `string`.
14+
15+
**Note will only detect inline styles when running in `jsdom`.**
1416

15-
## Example
1617
```js
1718
import { mount } from 'vue-test-utils'
1819
import { expect } from 'chai'
1920
import Foo from './Foo.vue'
2021

2122
const wrapper = mount(Foo)
2223
expect(wrapper.hasStyle('color', 'red')).to.equal(true)
23-
```
24-
25-
### Note
26-
27-
Will only work with inline styles when running in `jsdom`.
24+
```

‎docs/en/api/wrapper/html.md

+4-25
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,10 @@
11
# html()
22

3-
Returns HTML of wrapper DOM node as a string.
3+
- **Returns:** `{string}`
44

5-
### Returns
5+
- **Usage:**
66

7-
(`String`): HTML of wrapper node
8-
9-
## Example
10-
11-
`Foo.vue`
12-
13-
```vue
14-
<template lang="html">
15-
<div>
16-
<p>Foo</p>
17-
</div>
18-
</template>
19-
20-
<script>
21-
export default {
22-
name: 'foo'
23-
}
24-
</script>
25-
26-
```
27-
28-
`Foo.spec.js`
7+
Returns HTML of `Wrapper` DOM node as a string.
298

309
```js
3110
import { mount } from 'vue-test-utils'
@@ -34,4 +13,4 @@ import Foo from './Foo.vue'
3413

3514
const wrapper = mount(Foo)
3615
expect(wrapper.html()).to.equal('<div><p>Foo</p></div>')
37-
```
16+
```

‎docs/en/api/wrapper/is.md

+6-9
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
11
# is(selector)
22

3-
Returns true if wrapper node matches selector. Use any valid [selector](/api/selectors.md).
3+
- **Arguments:**
4+
- `{string|Component} selector`
45

5-
### Arguments
6+
- **Returns:** `{boolean}`
67

7-
`selector` (`String`|`Component`): a CSS selector ('#id', '.class-name', 'tag') or a Vue component. See [selectors](/api/selectors.md).
8+
- **Usage:**
89

9-
### Returns
10-
11-
(`Boolean`): returns true if wrapper node matches selector.
12-
13-
### Example
10+
Assert `Wrapper` DOM node or `vm` matches [selector](/api/selectors.md).
1411

1512
```js
1613
import { mount } from 'vue-test-utils'
@@ -19,4 +16,4 @@ import Foo from './Foo.vue'
1916

2017
const wrapper = mount(Foo)
2118
expect(wrapper.is('div')).to.equal(true)
22-
```
19+
```

‎docs/en/api/wrapper/isEmpty.md

+4-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
# isEmpty()
22

3-
Check if wrapper contains child nodes. Returns a boolean.
3+
- **Returns:** `{boolean}`
44

5-
### Returns
5+
- **Usage:**
66

7-
(`Boolean`): true if node does not contain any child nodes. False if it does.
8-
9-
## Example
7+
Assert `Wrapper`contains child node.
108

119
```js
1210
import { mount } from 'vue-test-utils'
@@ -15,4 +13,4 @@ import Foo from './Foo.vue'
1513

1614
const wrapper = mount(Foo)
1715
expect(wrapper.isEmpty()).to.equal(true)
18-
```
16+
```

0 commit comments

Comments
 (0)