Skip to content

Add missing await clauses #1739

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 3 commits into from
Nov 23, 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.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 30 additions & 26 deletions docs/guides/dom-events.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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')
})
```

Expand Down Expand Up @@ -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)
Expand Down
54 changes: 29 additions & 25 deletions docs/ja/guides/dom-events.md
Original file line number Diff line number Diff line change
Expand Up @@ -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')
})
```

### オプション
Expand All @@ -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 })
})
```

### マウスクリックの例
Expand Down Expand Up @@ -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')
})
```

Expand Down Expand Up @@ -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)
Expand Down
54 changes: 29 additions & 25 deletions docs/zh/guides/dom-events.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,21 @@
`Wrapper` 暴露了一个 `trigger` 方法。它可以用来触发 DOM 事件。

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

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

你应该注意到了,`find` 方法也会返回一个 `Wrapper`。假设 `MyComponent` 包含一个按钮,下面的代码会点击这个按钮。

```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')
})
```

### 选项
Expand All @@ -27,9 +31,11 @@ wrapper.find('button').trigger('click')
注意其目标不能被添加到 `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 })
})
```

### 鼠标点击示例
Expand Down Expand Up @@ -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')
})
```

Expand Down Expand Up @@ -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)
Expand Down