Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: vuejs/vue-test-utils
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v1.1.1
Choose a base ref
...
head repository: vuejs/vue-test-utils
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: v1.1.2
Choose a head ref
  • 9 commits
  • 22 files changed
  • 9 contributors

Commits on Nov 23, 2020

  1. Add missing await clauses (#1739) 

    * Add missing await clauses

* Add ja and zh

* Wrap await statements (CI was failing)
    @afontcu
    afontcu authored Nov 23, 2020

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    GPG key ID: B5690EEEBB952194
    Verified
    Learn about vigilant mode
    Copy the full SHA
    de65223 View commit details

Commits on Nov 26, 2020

  1. Type getComponent() (#1741) 

    Added the getComponent() function typing
    @DevAnouar-FT
    DevAnouar-FT authored Nov 26, 2020
    Copy the full SHA
    62dec1c View commit details

Commits on Dec 7, 2020

  1. feat: support array class binding in stubbed functional components (#… 

    …1744)

Co-authored-by: palpich <landauvp@gmail.com>
    @palpich
    palpich and palpich authored Dec 7, 2020
    Copy the full SHA
    e74e2bf View commit details

Commits on Dec 11, 2020

  1. build(deps): bump ini from 1.3.5 to 1.3.7 (#1747) 

    Bumps [ini](https://github.com/isaacs/ini) from 1.3.5 to 1.3.7.
- [Release notes](https://github.com/isaacs/ini/releases)
- [Commits](npm/ini@v1.3.5...v1.3.7)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
    @dependabot
    dependabot[bot] authored Dec 11, 2020
    Copy the full SHA
    d2add54 View commit details

Commits on Dec 14, 2020

  1. fix: does not pass data provided to mount to wrapper component (#1750)

    @xanf
    xanf authored Dec 14, 2020
    Copy the full SHA
    d03f7d3 View commit details

  2. feat: update doc with next version doc (#1751) 

    Co-authored-by: wanghongye <wanghongye@kuaishou.com>
    @HomyeeKing
    HomyeeKing and wanghongye authored Dec 14, 2020
    Copy the full SHA
    890b153 View commit details

  3. chore: publish 1.1.2

    @lmiller1990
    lmiller1990 committed Dec 14, 2020
    Copy the full SHA
    dc7a1b1 View commit details

  4. chore: revert lerna

    @lmiller1990
    lmiller1990 committed Dec 14, 2020
    Copy the full SHA
    72ffaa7 View commit details

  5. v1.1.2

    @lmiller1990
    lmiller1990 committed Dec 14, 2020
    Copy the full SHA
    e8b57a8 View commit details
36 changes: 32 additions & 4 deletions docs/.vuepress/config.js
View file
Original file line number Diff line number Diff line change
@@ -48,7 +48,14 @@ module.exports = {
},
{
text: 'Guides',
link: '/guides/'
link: '/guides/',
items: [
{
text: '2.x-beta',
link:
'https://vuejs.github.io/vue-test-utils-next-docs/guide/introduction.html'
}
]
},
{
text: 'Upgrading to V1',
@@ -77,7 +84,14 @@ module.exports = {
},
{
text: '教程',
link: '/zh/guides/'
link: '/zh/guides/',
items: [
{
text: '2.x-beta',
link:
'https://vuejs.github.io/vue-test-utils-next-docs/guide/introduction.html'
}
]
}
],
sidebar: [
@@ -102,7 +116,14 @@ module.exports = {
},
{
text: 'ガイド',
link: '/ja/guides/'
link: '/ja/guides/',
items: [
{
text: '2.x-beta',
link:
'https://vuejs.github.io/vue-test-utils-next-docs/guide/introduction.html'
}
]
}
],
sidebar: [
@@ -127,7 +148,14 @@ module.exports = {
},
{
text: 'Руководства',
link: '/ru/guides/'
link: '/ru/guides/',
items: [
{
text: '2.x-beta',
link:
'https://vuejs.github.io/vue-test-utils-next-docs/guide/introduction.html'
}
]
}
],
sidebar: [
4 changes: 4 additions & 0 deletions docs/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
# Introduction

::: warning
This doc is for Vue2.x only. If you want to see docs related to 3.x, please move to [here](https://vue-test-utils.vuejs.org/v2/guide/introduction.html)
:::

Vue Test Utils is the official unit testing utility library for Vue.js.

<div class="vueschool"><a href="https://vueschool.io/courses/learn-how-to-test-vuejs-components?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to use Vue Test Utils to test Vue.js Components with Vue School">Learn how to test Vue.js components with Vue School</a></div>
56 changes: 30 additions & 26 deletions docs/guides/dom-events.md
View file
Original file line number Diff line number Diff line change
@@ -4,20 +4,24 @@

### Trigger events

The `Wrapper` exposes a `trigger` method. It can be used to trigger DOM events.
The `Wrapper` exposes an async `trigger` method. It can be used to trigger DOM events.

```js
const wrapper = mount(MyButton)
test('triggers a click', async () => {
const wrapper = mount(MyComponent)

wrapper.trigger('click')
await wrapper.trigger('click')
})
```

You should be aware that the `find` method returns a `Wrapper` as well. Assuming `MyComponent` contains a button, the following code clicks the button.

```js
const wrapper = mount(MyComponent)
test('triggers a click', async () => {
const wrapper = mount(MyComponent)

wrapper.find('button').trigger('click')
await wrapper.find('button').trigger('click')
})
```

### Options
@@ -27,9 +31,11 @@ The `trigger` method takes an optional `options` object. The properties in the `
Note that target cannot be added in the `options` object.

```js
const wrapper = mount(MyButton)
test('triggers a click', async () => {
const wrapper = mount(MyComponent)

wrapper.trigger('click', { button: 0 })
await wrapper.trigger('click', { button: 0 })
})
```

### Mouse Click Example
@@ -73,18 +79,16 @@ import YesNoComponent from '@/components/YesNoComponent'
import { mount } from '@vue/test-utils'
import sinon from 'sinon'

describe('Click event', () => {
it('Click on yes button calls our method with argument "yes"', () => {
const spy = sinon.spy()
const wrapper = mount(YesNoComponent, {
propsData: {
callMe: spy
}
})
wrapper.find('button.yes').trigger('click')

spy.should.have.been.calledWith('yes')
it('Click on yes button calls our method with argument "yes"', async () => {
const spy = sinon.spy()
const wrapper = mount(YesNoComponent, {
propsData: {
callMe: spy
}
})
await wrapper.find('button.yes').trigger('click')

spy.should.have.been.calledWith('yes')
})
```

@@ -158,29 +162,29 @@ describe('Key event tests', () => {
expect(wrapper.vm.quantity).toBe(0)
})

it('Up arrow key increments quantity by 1', () => {
it('Up arrow key increments quantity by 1', async () => {
const wrapper = mount(QuantityComponent)
wrapper.trigger('keydown.up')
await wrapper.trigger('keydown.up')
expect(wrapper.vm.quantity).toBe(1)
})

it('Down arrow key decrements quantity by 1', () => {
it('Down arrow key decrements quantity by 1', async () => {
const wrapper = mount(QuantityComponent)
wrapper.vm.quantity = 5
wrapper.trigger('keydown.down')
await wrapper.trigger('keydown.down')
expect(wrapper.vm.quantity).toBe(4)
})

it('Escape sets quantity to 0', () => {
it('Escape sets quantity to 0', async () => {
const wrapper = mount(QuantityComponent)
wrapper.vm.quantity = 5
wrapper.trigger('keydown.esc')
await wrapper.trigger('keydown.esc')
expect(wrapper.vm.quantity).toBe(0)
})

it('Magic character "a" sets quantity to 13', () => {
it('Magic character "a" sets quantity to 13', async () => {
const wrapper = mount(QuantityComponent)
wrapper.trigger('keydown', {
await wrapper.trigger('keydown', {
key: 'a'
})
expect(wrapper.vm.quantity).toBe(13)
54 changes: 29 additions & 25 deletions docs/ja/guides/dom-events.md
View file
Original file line number Diff line number Diff line change
@@ -5,17 +5,21 @@
`Wrapper` の `trigger` メソッドで DOM イベントをトリガすることができます。

```js
const wrapper = mount(MyButton)
test('triggers a click', async () => {
const wrapper = mount(MyComponent)

wrapper.trigger('click')
await wrapper.trigger('click')
})
```

`find` メソッドは `mount` メソッドと同じように `Wrapper` を返します。 `MyComponent` 内に `button` があると仮定すると、以下のコードは、 `button` をクリックします。

```js
const wrapper = mount(MyComponent)
test('triggers a click', async () => {
const wrapper = mount(MyComponent)

wrapper.find('button').trigger('click')
await wrapper.find('button').trigger('click')
})
```

### オプション
@@ -25,9 +29,11 @@ wrapper.find('button').trigger('click')
target を `options` オブジェクトに追加することができないことに注意してください。

```js
const wrapper = mount(MyButton)
test('triggers a click', async () => {
const wrapper = mount(MyComponent)

wrapper.trigger('click', { button: 0 })
await wrapper.trigger('click', { button: 0 })
})
```

### マウスクリックの例
@@ -68,18 +74,16 @@ import YesNoComponent from '@/components/YesNoComponent'
import { mount } from '@vue/test-utils'
import sinon from 'sinon'

describe('Click event', () => {
it('Click on yes button calls our method with argument "yes"', () => {
const spy = sinon.spy()
const wrapper = mount(YesNoComponent, {
propsData: {
callMe: spy
}
})
wrapper.find('button.yes').trigger('click')

spy.should.have.been.calledWith('yes')
it('Click on yes button calls our method with argument "yes"', async () => {
const spy = sinon.spy()
const wrapper = mount(YesNoComponent, {
propsData: {
callMe: spy
}
})
await wrapper.find('button.yes').trigger('click')

spy.should.have.been.calledWith('yes')
})
```

@@ -150,29 +154,29 @@ describe('Key event tests', () => {
expect(wrapper.vm.quantity).toBe(0)
})

it('Cursor up sets quantity to 1', () => {
it('Cursor up sets quantity to 1', async () => {
const wrapper = mount(QuantityComponent)
wrapper.trigger('keydown.up')
await wrapper.trigger('keydown.up')
expect(wrapper.vm.quantity).toBe(1)
})

it('Cursor down reduce quantity by 1', () => {
it('Cursor down reduce quantity by 1', async () => {
const wrapper = mount(QuantityComponent)
wrapper.vm.quantity = 5
wrapper.trigger('keydown.down')
await wrapper.trigger('keydown.down')
expect(wrapper.vm.quantity).toBe(4)
})

it('Escape sets quantity to 0', () => {
it('Escape sets quantity to 0', async () => {
const wrapper = mount(QuantityComponent)
wrapper.vm.quantity = 5
wrapper.trigger('keydown.esc')
await wrapper.trigger('keydown.esc')
expect(wrapper.vm.quantity).toBe(0)
})

it('Magic character "a" sets quantity to 13', () => {
it('Magic character "a" sets quantity to 13', async () => {
const wrapper = mount(QuantityComponent)
wrapper.trigger('keydown', {
await wrapper.trigger('keydown', {
key: 'a'
})
expect(wrapper.vm.quantity).toBe(13)
4 changes: 4 additions & 0 deletions docs/zh/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
# 介绍

::: warning
本文档基于 Vue2.x，新版本文档请移步至[这里](https://vue-test-utils.vuejs.org/v2/guide/introduction.html)
:::

Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。

<div class="vueschool"><a href="https://vueschool.io/courses/learn-how-to-test-vuejs-components?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to use Vue Test Utils to test Vue.js Components with Vue School">在 Vue School 学习如何测试 Vue.js 组件</a></div>
Loading