Skip to content

Commit

Permalink
docs: update README.md (#588)
Browse files Browse the repository at this point in the history
  • Loading branch information
38elements authored and eddyerburgh committed May 6, 2018
1 parent 33a6731 commit 290be49
Show file tree
Hide file tree
Showing 34 changed files with 129 additions and 129 deletions.
2 changes: 1 addition & 1 deletion docs/en/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ Vue Test Utils is the official unit testing utility library for Vue.js.
* [Using with Vuex](guides/using-with-vuex.md)
* [API](api/README.md)
* [mount](api/mount.md)
* [shallow](api/shallow.md)
* [shallowMount](api/shallowMount.md)
* [render](api/render.md)
* [renderToString](api/renderToString.md)
* [Mounting Options](api/options.md)
Expand Down
2 changes: 1 addition & 1 deletion docs/en/SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
* [Using with Vuex](guides/using-with-vuex.md)
* [API](api/README.md)
* [mount](api/mount.md)
* [shallow](api/shallow.md)
* [shallowMount](api/shallowMount.md)
* [render](api/render.md)
* [renderToString](api/renderToString.md)
* [Mounting Options](api/options.md)
Expand Down
2 changes: 1 addition & 1 deletion docs/en/api/README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# API

* [mount](./mount.md)
* [shallow](./shallow.md)
* [shallowMount](./shallowMount.md)
* [render](./render.md)
* [renderToString](./renderToString.md)
* [Mounting Options](./options.md)
Expand Down
6 changes: 3 additions & 3 deletions docs/en/api/createLocalVue.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,17 @@
Use it with `options.localVue`:

```js
import { createLocalVue, shallow } from '@vue/test-utils'
import { createLocalVue, shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'

const localVue = createLocalVue()
const wrapper = shallow(Foo, {
const wrapper = shallowMount(Foo, {
localVue,
mocks: { foo: true }
})
expect(wrapper.vm.foo).toBe(true)

const freshWrapper = shallow(Foo)
const freshWrapper = shallowMount(Foo)
expect(freshWrapper.vm.foo).toBe(false)
```

Expand Down
12 changes: 6 additions & 6 deletions docs/en/api/options.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Mounting Options

Options for `mount` and `shallow`. The options object can contain both Vue Test Utils mounting options and other options.
Options for `mount` and `shallowMount`. The options object can contain both Vue Test Utils mounting options and other options.

## Vue Test Utils Specific Mounting Options

Expand Down Expand Up @@ -50,7 +50,7 @@ Example:
import Foo from './Foo.vue'
import Bar from './Bar.vue'

const wrapper = shallow(Component, {
const wrapper = shallowMount(Component, {
slots: {
default: [Foo, Bar],
fooBar: Foo, // Will match `<slot name="FooBar" />`.
Expand Down Expand Up @@ -87,7 +87,7 @@ You can use [Puppeteer](https://github.com/karma-runner/karma-chrome-launcher#he
Example:

```js
const wrapper = shallow(Component, {
const wrapper = shallowMount(Component, {
scopedSlots: {
foo: '<p slot-scope="props">{{props.index}},{{props.text}}</p>'
}
Expand All @@ -110,7 +110,7 @@ mount(Component, {
stubs: ['registered-component']
})

shallow(Component, {
shallowMount(Component, {
stubs: {
// stub with a specific implementation
'registered-component': Foo,
Expand All @@ -130,7 +130,7 @@ Example:

```js
const $route = { path: 'http://www.example-path.com' }
const wrapper = shallow(Component, {
const wrapper = shallowMount(Component, {
mocks: {
$route
}
Expand Down Expand Up @@ -206,7 +206,7 @@ When `sync` is `false`, the Vue component is rendered asynchronously.

## Other options

When the options for `mount` and `shallow` contain the options other than the mounting options, the component options are overwritten with those using [extends](https://vuejs.org/v2/api/#extends).
When the options for `mount` and `shallowMount` contain the options other than the mounting options, the component options are overwritten with those using [extends](https://vuejs.org/v2/api/#extends).

```js
const Component = {
Expand Down
4 changes: 2 additions & 2 deletions docs/en/api/selectors.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,10 @@ export default {
```

```js
import { shallow } from '@vue/test-utils'
import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'

const wrapper = shallow(Foo)
const wrapper = shallowMount(Foo)
expect(wrapper.is(Foo)).toBe(true)
```

Expand Down
22 changes: 11 additions & 11 deletions docs/en/api/shallow.md → docs/en/api/shallowMount.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# `shallow(component [, options])`
# `shallowMount(component [, options])`

- **Arguments:**

Expand Down Expand Up @@ -27,12 +27,12 @@ Like [`mount`](mount.md), it creates a [`Wrapper`](wrapper/README.md) that conta
**Without options:**

```js
import { shallow } from '@vue/test-utils'
import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'

describe('Foo', () => {
it('renders a div', () => {
const wrapper = shallow(Foo)
const wrapper = shallowMount(Foo)
expect(wrapper.contains('div')).toBe(true)
})
})
Expand All @@ -41,12 +41,12 @@ describe('Foo', () => {
**With Vue options:**

```js
import { shallow } from '@vue/test-utils'
import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'

describe('Foo', () => {
it('renders a div', () => {
const wrapper = shallow(Foo, {
const wrapper = shallowMount(Foo, {
propsData: {
color: 'red'
}
Expand All @@ -59,12 +59,12 @@ describe('Foo', () => {
**Attach to DOM:**

```js
import { shallow } from '@vue/test-utils'
import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'

describe('Foo', () => {
it('renders a div', () => {
const wrapper = shallow(Foo, {
const wrapper = shallowMount(Foo, {
attachToDocument: true
})
expect(wrapper.contains('div')).toBe(true)
Expand All @@ -75,14 +75,14 @@ describe('Foo', () => {
**Default and named slots:**

```js
import { shallow } from '@vue/test-utils'
import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'
import Bar from './Bar.vue'
import FooBar from './FooBar.vue'

describe('Foo', () => {
it('renders a div', () => {
const wrapper = shallow(Foo, {
const wrapper = shallowMount(Foo, {
slots: {
default: [Bar, FooBar],
fooBar: FooBar, // Will match <slot name="FooBar" />,
Expand All @@ -97,13 +97,13 @@ describe('Foo', () => {
**Stubbing global properties:**

```js
import { shallow } from '@vue/test-utils'
import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'

describe('Foo', () => {
it('renders a div', () => {
const $route = { path: 'http://www.example-path.com' }
const wrapper = shallow(Foo, {
const wrapper = shallowMount(Foo, {
mocks: {
$route
}
Expand Down
4 changes: 2 additions & 2 deletions docs/en/api/wrapper-array/at.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ Returns `Wrapper` at `index` passed. Uses zero based numbering (i.e. first item
- **Example:**

```js
import { shallow } from '@vue/test-utils'
import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'

const wrapper = shallow(Foo)
const wrapper = shallowMount(Foo)
const divArray = wrapper.findAll('div')
const secondDiv = divArray.at(1)
expect(secondDiv.is('p')).toBe(true)
Expand Down
4 changes: 2 additions & 2 deletions docs/en/api/wrapper-array/contains.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ Use any valid [selector](../selectors.md).
- **Example:**

```js
import { shallow } from '@vue/test-utils'
import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'
import Bar from './Bar.vue'

const wrapper = shallow(Foo)
const wrapper = shallowMount(Foo)
const divArray = wrapper.findAll('div')
expect(divArray.contains('p')).toBe(true)
expect(divArray.contains(Bar)).toBe(true)
Expand Down
4 changes: 2 additions & 2 deletions docs/en/api/wrapper-array/filter.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@ A new `WrapperArray` instance containing `Wrapper` instances that returns true f
- **Example:**

```js
import { shallow } from '@vue/test-utils'
import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'

const wrapper = shallow(Foo)
const wrapper = shallowMount(Foo)
const filteredDivArray = wrapper.findAll('div').filter(w => !w.hasClass('filtered'))
```
4 changes: 2 additions & 2 deletions docs/en/api/wrapper/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ A `Wrapper` is an object that contains a mounted component or vnode and methods

`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 `shallowMount`
`options.attachedToDom` `Boolean`: True if `attachToDom` was passed to `mount` or `shallowMount`

- **Methods:**

Expand Down
6 changes: 3 additions & 3 deletions docs/en/guides/common-tips.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,12 @@ In unit tests, we typically want to focus on the component being tested as an is

In addition, for components that contain many child components, the entire rendered tree can get really big. Repeatedly rendering all child components could slow down our tests.

Vue Test Utils allows you to mount a component without rendering its child components (by stubbing them) with the `shallow` method:
Vue Test Utils allows you to mount a component without rendering its child components (by stubbing them) with the `shallowMount` method:

```js
import { shallow } from '@vue/test-utils'
import { shallowMount } from '@vue/test-utils'

const wrapper = shallow(Component) // returns a Wrapper containing a mounted Component instance
const wrapper = shallowMount(Component) // returns a Wrapper containing a mounted Component instance
wrapper.vm // the mounted Vue instance
```

Expand Down
4 changes: 2 additions & 2 deletions docs/en/guides/testing-SFCs-with-karma.md
Original file line number Diff line number Diff line change
Expand Up @@ -106,12 +106,12 @@ And create a test file named `test/Counter.spec.js` with the following code:

```js
import { expect } from 'chai'
import { shallow } from '@vue/test-utils'
import { shallowMount } from '@vue/test-utils'
import Counter from '../src/Counter.vue'

describe('Counter.vue', () => {
it('increments count when button is clicked', () => {
const wrapper = shallow(Counter)
const wrapper = shallowMount(Counter)
wrapper.find('button').trigger('click')
expect(wrapper.find('div').text()).contains('1')
})
Expand Down
4 changes: 2 additions & 2 deletions docs/en/guides/testing-SFCs-with-mocha-webpack.md
Original file line number Diff line number Diff line change
Expand Up @@ -150,12 +150,12 @@ export default {
And create a test file named `test/Counter.spec.js` with the following code:

```js
import { shallow } from '@vue/test-utils'
import { shallowMount } from '@vue/test-utils'
import Counter from '../src/Counter.vue'

describe('Counter.vue', () => {
it('increments count when button is clicked', () => {
const wrapper = shallow(Counter)
const wrapper = shallowMount(Counter)
wrapper.find('button').trigger('click')
expect(wrapper.find('div').text()).toMatch('1')
})
Expand Down
10 changes: 5 additions & 5 deletions docs/en/guides/testing-async-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,13 @@ The below component makes an API call when a button is clicked, then assigns the
A test can be written like this:

``` js
import { shallow } from '@vue/test-utils'
import { shallowMount } from '@vue/test-utils'
import Foo from './Foo'
jest.mock('axios')

test('Foo', () => {
it('fetches async when a button is clicked', () => {
const wrapper = shallow(Foo)
const wrapper = shallowMount(Foo)
wrapper.find('button').trigger('click')
expect(wrapper.vm.value).toBe('value')
})
Expand All @@ -62,7 +62,7 @@ This test currently fails because the assertion is called before the promise in
``` js
test('Foo', () => {
it('fetches async when a button is clicked', (done) => {
const wrapper = shallow(Foo)
const wrapper = shallowMount(Foo)
wrapper.find('button').trigger('click')
wrapper.vm.$nextTick(() => {
expect(wrapper.vm.value).toBe('value')
Expand All @@ -79,14 +79,14 @@ Another solution is to use an `async` function and the npm package `flush-promis
The updated test looks like this:

``` js
import { shallow } from '@vue/test-utils'
import { shallowMount } from '@vue/test-utils'
import flushPromises from 'flush-promises'
import Foo from './Foo'
jest.mock('axios')

test('Foo', () => {
it('fetches async when a button is clicked', async () => {
const wrapper = shallow(Foo)
const wrapper = shallowMount(Foo)
wrapper.find('button').trigger('click')
await flushPromises()
expect(wrapper.vm.value).toBe('value')
Expand Down
16 changes: 8 additions & 8 deletions docs/en/guides/using-with-vue-router.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@ You should never install Vue Router on the Vue base constructor in tests. Instal
To avoid this, we can create a localVue, and install Vue Router on that.

```js
import { shallow, createLocalVue } from '@vue/test-utils'
import { shallowMount, createLocalVue } from '@vue/test-utils'
import VueRouter from 'vue-router'

const localVue = createLocalVue()
localVue.use(VueRouter)
const router = new VueRouter()

shallow(Component, {
shallowMount(Component, {
localVue,
router
})
Expand All @@ -31,23 +31,23 @@ When we run tests, we need to make these Vue Router components available to the
### Using stubs

```js
import { shallow } from '@vue/test-utils'
import { shallowMount } from '@vue/test-utils'

shallow(Component, {
shallowMount(Component, {
stubs: ['router-link', 'router-view']
})
```

### Installing Vue Router with localVue

```js
import { shallow, createLocalVue } from '@vue/test-utils'
import { shallowMount, createLocalVue } from '@vue/test-utils'
import VueRouter from 'vue-router'

const localVue = createLocalVue()
localVue.use(VueRouter)

shallow(Component, {
shallowMount(Component, {
localVue
})
```
Expand All @@ -57,13 +57,13 @@ shallow(Component, {
Sometimes you want to test that a component does something with parameters from the `$route` and `$router` objects. To do that, you can pass custom mocks to the Vue instance.

```js
import { shallow } from '@vue/test-utils'
import { shallowMount } from '@vue/test-utils'

const $route = {
path: '/some/path'
}

const wrapper = shallow(Component, {
const wrapper = shallowMount(Component, {
mocks: {
$route
}
Expand Down

0 comments on commit 290be49

Please sign in to comment.