Skip to content

[en] docs review, typos and formattings #190

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

Merged
merged 8 commits into from
Nov 20, 2017
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.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 13 additions & 2 deletions docs/en/api/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
* [emitted](./wrapper/emitted.md)
* [emittedByOrder](./wrapper/emittedByOrder.md)
* [find](./wrapper/find.md)
* [findAll](./wrapper/findAll.md)
* [hasAttribute](./wrapper/hasAttribute.md)
* [hasClass](./wrapper/hasClass.md)
* [hasProp](./wrapper/hasProp.md)
Expand All @@ -26,11 +27,14 @@
* [isEmpty](./wrapper/isEmpty.md)
* [isVueInstance](./wrapper/isVueInstance.md)
* [name](./wrapper/name.md)
* [update](./wrapper/update.md)
* [setComputed](./wrapper/setComputed.md)
* [setData](./wrapper/setData.md)
* [setMethods](./wrapper/setMethods.md)
* [setProps](./wrapper/setProps.md)
* [text](./wrapper/text.md)
* [trigger](./wrapper/trigger.md)
* [update](./wrapper/update.md)
* [destroy](./wrapper/destroy.md)
* [WrapperArray](./wrapper-array/README.md)
* [at](./wrapper-array/at.md)
* [contains](./wrapper-array/contains.md)
Expand All @@ -41,9 +45,16 @@
* [is](./wrapper-array/is.md)
* [isEmpty](./wrapper-array/isEmpty.md)
* [isVueInstance](./wrapper-array/isVueInstance.md)
* [update](./wrapper-array/update.md)
* [setComputed](./wrapper-array/setComputed.md)
* [setData](./wrapper-array/setData.md)
* [setMethods](./wrapper-array/setMethods.md)
* [setProps](./wrapper-array/setProps.md)
* [trigger](./wrapper-array/trigger.md)
* [update](./wrapper-array/update.md)
* [destroy](./wrapper-array/destroy.md)
* [components](./components/README.md)
* [TransitionStub](./components/TransitionStub.md)
* [TransitionGroupStub](./components/TransitionGroupStub.md)
* [createLocalVue](./createLocalVue.md)
* [Selectors](./selectors.md)
* [config](./config.md)
5 changes: 3 additions & 2 deletions docs/en/api/components/TransitionGroupStub.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,16 @@

A component to stub the `transition-group` wrapper component. Instead of performing transitions asynchronously, it returns the child components synchronously.

This is set to stub all `transition-group` components by default in the vue-test-utils config. To use the built-in `transition-group` wrapper component set `config.stubs[transition-group]` to false:
This is set to stub all `transition-group` components by default in the `vue-test-utils` config. To use the built-in `transition-group` wrapper component set `config.stubs['transition-group']` to false:

```js
import VueTestUtils from 'vue-test-utils'

VueTestUtils.config.stubs.transition = false
VueTestUtils.config.stubs['transition-group'] = false
```

To reset it to stub transition components:

```js
import VueTestUtils, { TransitionGroupStub } from 'vue-test-utils'

Expand Down
4 changes: 2 additions & 2 deletions docs/en/api/createLocalVue.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# createLocalVue()
# `createLocalVue()`

- **Returns:**
- `{Component}`
Expand All @@ -7,7 +7,7 @@

`createLocalVue` returns a Vue class for you to add components, mixins and install plugins without polluting the global Vue class.

Use it with `options.localVue`
Use it with `options.localVue`:

```js
import { createLocalVue, shallow } from 'vue-test-utils'
Expand Down
5 changes: 3 additions & 2 deletions docs/en/api/mount.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# mount(component {, options}])
# `mount(component {, options}])`

- **Arguments:**

Expand Down Expand Up @@ -31,6 +31,7 @@ describe('Foo', () => {
})
})
```

**With Vue options:**

```js
Expand Down Expand Up @@ -80,7 +81,7 @@ describe('Foo', () => {
const wrapper = mount(Foo, {
slots: {
default: [Bar, FooBar],
fooBar: FooBar, // Will match <slot name="FooBar" />,
fooBar: FooBar, // Will match `<slot name="FooBar" />`.
foo: '<div />'
}
})
Expand Down
24 changes: 12 additions & 12 deletions docs/en/api/options.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,15 @@ Vue options are passed to the component when a new instance is created. , e.g. `

## `vue-test-utils` Specific Mounting Options

- [context](#context)
- [slots](#slots)
- [stubs](#stubs)
- [mocks](#mocks)
- [localVue](#localvue)
- [attachToDocument](#attachtodocument)
- [attrs](#attrs)
- [listeners](#listeners)
- [clone](#clone)
- [`context`](#context)
- [`slots`](#slots)
- [`stubs`](#stubs)
- [`mocks`](#mocks)
- [`localVue`](#localvue)
- [`attachToDocument`](#attachtodocument)
- [`attrs`](#attrs)
- [`listeners`](#listeners)
- [`clone`](#clone)

### `context`

Expand Down Expand Up @@ -50,7 +50,7 @@ import Bar from './Bar.vue'
const wrapper = shallow(Component, {
slots: {
default: [Foo, Bar],
fooBar: Foo, // Will match <slot name="FooBar" />,
fooBar: Foo, // Will match `<slot name="FooBar" />`.
foo: '<div />'
}
})
Expand Down Expand Up @@ -106,7 +106,7 @@ expect(wrapper.vm.$route.path).toBe($route.path)

- type: `Vue`

A local copy of Vue created by [createLocalVue](./createLocalVue.md) to use when mounting the component. Installing plugins on this copy of Vue prevents polluting the original `Vue` copy.
A local copy of Vue created by [`createLocalVue`](./createLocalVue.md) to use when mounting the component. Installing plugins on this copy of `Vue` prevents polluting the original `Vue` copy.

Example:

Expand Down Expand Up @@ -162,4 +162,4 @@ Clones component before mounting if `true`, which avoids mutating the original c

`options.mocks` (`Object`): Add globals to Vue instance.

`options.localVue` (`Object`): vue class to use in `mount`. See [createLocalVue](createLocalVue.md)
`options.localVue` (`Object`): `Vue` class to use in `mount`. See [`createLocalVue`](createLocalVue.md).
26 changes: 13 additions & 13 deletions docs/en/api/selectors.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,31 +4,31 @@ A lot of methods take a selector as an argument. A selector can either be a CSS

## CSS Selectors

mount handles any valid CSS selector:
Mount handles any valid CSS selector:

- tag selectors (div, foo, bar)
- class selectors (.foo, .bar)
- attribute selectors ([foo], [foo="bar"])
- id selectors (#foo, #bar)
- pseudo selectors (div:first-of-type)
- tag selectors (`div`, `foo`, `bar`)
- class selectors (`.foo`, `.bar`)
- attribute selectors (`[foo]`, `[foo="bar"]`)
- id selectors (`#foo`, `#bar`)
- pseudo selectors (`div:first-of-type`)

You can also use combinators:

- direct descendant combinator (div > #bar > .foo)
- general descendant combinator (div #bar .foo)
- adjacent sibling selector (div + .foo)
- general sibling selector (div ~ .foo)
- direct descendant combinator (`div > #bar > .foo`)
- general descendant combinator (`div #bar .foo`)
- adjacent sibling selector (`div + .foo`)
- general sibling selector (`div ~ .foo`)

## Vue Components

Vue components are also valid selectors.

vue-test-utils uses the `name` property to search the instance tree for matching Vue components.
`vue-test-utils` uses the `name` property to search the instance tree for matching Vue components.

```js
// Foo.vue

export default{
export default {
name: 'FooComponent'
}
```
Expand All @@ -46,7 +46,7 @@ expect(wrapper.is(Foo)).toBe(true)

### Ref

Using a find option object, vue-test-utils allows for selecting elements by $ref on wrapper components.
Using a find option object, `vue-test-utils` allows for selecting elements by `$ref` on wrapper components.

```js
const buttonWrapper = wrapper.find({ ref: 'myButton' });
Expand Down
2 changes: 1 addition & 1 deletion docs/en/api/shallow.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# shallow(component {, options}])
# `shallow(component {, options}])`

- **Arguments:**

Expand Down
4 changes: 2 additions & 2 deletions docs/en/api/wrapper-array/README.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
# WrapperArray

A `WrapperArray` is an object that contains an array of [Wrappers](../wrapper/README.md), and methods to test the `Wrappers`.
A `WrapperArray` is an object that contains an array of [`Wrappers`](../wrapper/README.md), and methods to test the `Wrappers`.

- **Properties:**

`length` `number`: the number of `Wrappers` contained in the `WrapperArray`

- **Methods:**

There is a detailed list of methods in the WrapperArray section of the docs.
There is a detailed list of methods in the `WrapperArray` section of the docs.
1 change: 0 additions & 1 deletion docs/en/api/wrapper-array/destroy.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,4 @@ const divArray = wrapper.findAll('div')
expect(divArray.contains('p')).toBe(true)
divArray.destroy()
expect(divArray.contains('p')).toBe(false)

```
2 changes: 1 addition & 1 deletion docs/en/api/wrapper-array/setComputed.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
Sets `Wrapper` `vm` computed and forces update on each `Wrapper` in `WrapperArray`.

**Note every `Wrapper` must contain a Vue instance.**
**Note every Vue instance must already have the computed properties passed to setComputed.**
**Note every Vue instance must already have the computed properties passed to `setComputed`.**

- **Arguments:**
- `{Object} computed properties`
Expand Down
10 changes: 5 additions & 5 deletions docs/en/api/wrapper/README.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
# Wrapper
# `Wrapper`

vue-test-utils is a wrapper based API.
`vue-test-utils` is a wrapper based API.

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

- **Properties:**

`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
`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
`element` `HTMLElement`: the root DOM node of the wrapper
`options` `Object`: Object containing vue-test-utils options passed to `mount` or `shallow`
`options.attachedToDom` `Boolean`: True if attachToDom was passed to `mount` or `shallow`
`options` `Object`: Object containing `vue-test-utils` options passed to `mount` or `shallow`
`options.attachedToDom` `Boolean`: True if `attachToDom` was passed to `mount` or `shallow`

- **Methods:**

Expand Down
2 changes: 1 addition & 1 deletion docs/en/api/wrapper/contains.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# contains(selector)
# `contains(selector)`

Assert `Wrapper` contains an element or component matching [selector](../selectors.md).

Expand Down
2 changes: 1 addition & 1 deletion docs/en/api/wrapper/hasClass.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

Assert `Wrapper` DOM node has class contains `className`.

Returns `true` if `Wrapper` DOM node contains class.
Returns `true` if `Wrapper` DOM node contains the class.

- **Arguments:**
- `{string} className`
Expand Down
2 changes: 1 addition & 1 deletion docs/en/api/wrapper/hasStyle.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# hasStyle(style, value)

Assert `Wrapper` DOM node has style matching value
Assert `Wrapper` DOM node has style matching value.

Returns `true` if `Wrapper` DOM node has `style` matching `value`.

Expand Down
2 changes: 1 addition & 1 deletion docs/en/api/wrapper/setComputed.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
Sets `Wrapper` `vm` computed property and forces update.

**Note the Wrapper must contain a Vue instance.**
**Note every Vue instance must already have the computed properties passed to setComputed.**
**Note the Vue instance must already have the computed properties passed to `setComputed`.**


- **Arguments:**
Expand Down
4 changes: 2 additions & 2 deletions docs/en/api/wrapper/trigger.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@

Triggers an event on the `Wrapper` DOM node.

Trigger takes an optional `options` object. The properties in the `options` object are added to the Event.
`trigger` takes an optional `options` object. The properties in the `options` object are added to the Event.

You can run preventDefault on the event by passing `preventDefault: true` in `options`.
You can run `preventDefault` on the event by passing `preventDefault: true` in `options`.

- **Arguments:**
- `{string} eventName`
Expand Down
1 change: 1 addition & 0 deletions docs/en/guides/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

* [Getting Started](./getting-started.md)
* [Common Tips](./common-tips.md)
* [Mouse, Key and other DOM Events](./dom-events.md)
* [Choosing a test runner](./choosing-a-test-runner.md)
* [Using with Jest](./using-with-jest.md)
* [Testing SFCs with Jest](./testing-SFCs-with-jest.md)
Expand Down
2 changes: 1 addition & 1 deletion docs/en/guides/choosing-a-test-runner.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ There are a few things to consider when choosing a test runner though: feature s

## Browser Environment

`vue-test-utils` relies on a browser environment. Technically you can run it in a real browser, but it's not recommended due to the complexity of launching real browsers on different platforms. Instead, we recommend running the tests in Node.js with a virtual browser environment using [JSDOM](https://github.com/tmpvar/jsdom).
`vue-test-utils` relies on a browser environment. Technically you can run it in a real browser, but it's not recommended due to the complexity of launching real browsers on different platforms. Instead, we recommend running the tests in Node with a virtual browser environment using [JSDOM](https://github.com/tmpvar/jsdom).

The Jest test runner sets up JSDOM automatically. For other test runners, you can manually set up JSDOM for the tests using [jsdom-global](https://github.com/rstacruz/jsdom-global) in the entry for your tests:

Expand Down
16 changes: 8 additions & 8 deletions docs/en/guides/common-tips.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ For UI components, we don't recommend aiming for complete line-based coverage, b

Instead, we recommend writing tests that assert your component's public interface, and treat its internals as a black box. A single test case would assert that some input (user interaction or change of props) provided to the component results in the expected output (render result or emitted custom events).

For example, for the `Counter` component which increments a display counter by 1 each time a button is clicked, its test case would simulate the click and assert that the rendered output has increased by 1. The test doesn't care about how the Counter increments the value, it only cares about the input and the output.
For example, for the `Counter` component which increments a display counter by 1 each time a button is clicked, its test case would simulate the click and assert that the rendered output has increased by 1. The test doesn't care about how the `Counter` increments the value, it only cares about the input and the output.

The benefit of this approach is that as long as your component's public interface remains the same, your tests will pass no matter how the component's internal implementation changes over time.

Expand Down Expand Up @@ -36,7 +36,7 @@ wrapper.vm.$emit('foo')
wrapper.vm.$emit('foo', 123)

/*
wrapper.emitted() returns the following object:
`wrapper.emitted()` returns the following object:
{
foo: [[], [123]]
}
Expand All @@ -58,7 +58,7 @@ expect(wrapper.emitted().foo.length).toBe(2)
expect(wrapper.emitted().foo[1]).toEqual([123])
```

You can also get an Array of the events in their emit order by calling [wrapper.emittedByOrder()](../api/wrapper/emittedByOrder.md).
You can also get an Array of the events in their emit order by calling [`wrapper.emittedByOrder()`](../api/wrapper/emittedByOrder.md).

## Manipulating Component State

Expand Down Expand Up @@ -92,26 +92,26 @@ You can also update the props of an already-mounted component with the `wrapper.

Some of the components may rely on features injected by a global plugin or mixin, for example `vuex` and `vue-router`.

If you are writing tests for components in a specific app, you can setup the same global plugins and mixins once in the entry of your tests. But in some cases, for example testing a generic component suite that may get shared across different apps, it's better to test your components in a more isolated setup, without polluting the global `Vue` constructor. We can use the [createLocalVue](../api/createLocalVue.md) method to achieve that:
If you are writing tests for components in a specific app, you can setup the same global plugins and mixins once in the entry of your tests. But in some cases, for example testing a generic component suite that may get shared across different apps, it's better to test your components in a more isolated setup, without polluting the global `Vue` constructor. We can use the [`createLocalVue`](../api/createLocalVue.md) method to achieve that:

``` js
import createLocalVue from 'vue-test-utils'

// create an extended Vue constructor
// create an extended `Vue` constructor
const localVue = createLocalVue()

// install plugins as normal
localVue.use(MyPlugin)

// pass the localVue to the mount options
// pass the `localVue` to the mount options
mount(Component, {
localVue
})
```

## Mocking Injections

Another strategy for injected properties is simply mocking them. You can do that with the `mocks` option:
Another strategy for injected props is simply mocking them. You can do that with the `mocks` option:

```js
import { mount } from 'vue-test-utils'
Expand All @@ -125,7 +125,7 @@ const $route = {

mount(Component, {
mocks: {
$route // adds the mocked $route object to the Vue instance before mounting component
$route // adds the mocked `$route` object to the Vue instance before mounting component
}
})
```
Expand Down
Loading