Skip to content

Commit 987c2b9

Browse files
eddyerburgheddyerburgh
authored
docs: remove invalid example (#1040)
1 parent 6a4e19d commit 987c2b9

File tree

4 files changed

+60
-84
lines changed

4 files changed

+60
-84
lines changed

Diff for: ‎docs/guides/testing-async-components.md

+15-21
Original file line numberDiff line numberDiff line change
@@ -46,26 +46,22 @@ import { shallowMount } from '@vue/test-utils'
4646
import Foo from './Foo'
4747
jest.mock('axios')
4848

49-
test('Foo', () => {
50-
it('fetches async when a button is clicked', () => {
51-
const wrapper = shallowMount(Foo)
52-
wrapper.find('button').trigger('click')
53-
expect(wrapper.vm.value).toBe('value')
54-
})
49+
it('fetches async when a button is clicked', () => {
50+
const wrapper = shallowMount(Foo)
51+
wrapper.find('button').trigger('click')
52+
expect(wrapper.vm.value).toBe('value')
5553
})
5654
```
5755

5856
This test currently fails because the assertion is called before the promise in `fetchResults` resolves. Most unit test libraries provide a callback to let the runner know when the test is complete. Jest and Mocha both use `done`. We can use `done` in combination with `$nextTick` or `setTimeout` to ensure any promises resolve before the assertion is made.
5957

6058
``` js
61-
test('Foo', () => {
62-
it('fetches async when a button is clicked', (done) => {
63-
const wrapper = shallowMount(Foo)
64-
wrapper.find('button').trigger('click')
65-
wrapper.vm.$nextTick(() => {
66-
expect(wrapper.vm.value).toBe('value')
67-
done()
68-
})
59+
it('fetches async when a button is clicked', (done) => {
60+
const wrapper = shallowMount(Foo)
61+
wrapper.find('button').trigger('click')
62+
wrapper.vm.$nextTick(() => {
63+
expect(wrapper.vm.value).toBe('value')
64+
done()
6965
})
7066
})
7167
```
@@ -82,13 +78,11 @@ import flushPromises from 'flush-promises'
8278
import Foo from './Foo'
8379
jest.mock('axios')
8480

85-
test('Foo', () => {
86-
it('fetches async when a button is clicked', async () => {
87-
const wrapper = shallowMount(Foo)
88-
wrapper.find('button').trigger('click')
89-
await flushPromises()
90-
expect(wrapper.vm.value).toBe('value')
91-
})
81+
it('fetches async when a button is clicked', async () => {
82+
const wrapper = shallowMount(Foo)
83+
wrapper.find('button').trigger('click')
84+
await flushPromises()
85+
expect(wrapper.vm.value).toBe('value')
9286
})
9387
```
9488

Diff for: ‎docs/ja/guides/testing-async-components.md

+15-21
Original file line numberDiff line numberDiff line change
@@ -46,26 +46,22 @@ import { shallowMount } from '@vue/test-utils'
4646
import Foo from './Foo'
4747
jest.mock('axios')
4848

49-
test('Foo', () => {
50-
it('fetches async when a button is clicked', () => {
51-
const wrapper = shallowMount(Foo)
52-
wrapper.find('button').trigger('click')
53-
expect(wrapper.vm.value).toBe('value')
54-
})
49+
it('fetches async when a button is clicked', () => {
50+
const wrapper = shallowMount(Foo)
51+
wrapper.find('button').trigger('click')
52+
expect(wrapper.vm.value).toBe('value')
5553
})
5654
```
5755

5856
`fetchResults` 内の Promise が resolve する前にアサーションが呼ばれるので、このテストは現時点では失敗します。ほとんどのユニットテストライブラリはテストが完了したことをテストランナーに知らせるためのコールバック関数を提供します。Jest と Mocha は両方とも `done` を使います。アサーションが行われる前に確実に各 Promise が resolve するために `done` を `$nextTick` や `setTimeout` と組み合わせて使うことができます。
5957

6058
``` js
61-
test('Foo', () => {
62-
it('fetches async when a button is clicked', (done) => {
63-
const wrapper = shallowMount(Foo)
64-
wrapper.find('button').trigger('click')
65-
wrapper.vm.$nextTick(() => {
66-
expect(wrapper.vm.value).toBe('value')
67-
done()
68-
})
59+
it('fetches async when a button is clicked', (done) => {
60+
const wrapper = shallowMount(Foo)
61+
wrapper.find('button').trigger('click')
62+
wrapper.vm.$nextTick(() => {
63+
expect(wrapper.vm.value).toBe('value')
64+
done()
6965
})
7066
})
7167
```
@@ -82,13 +78,11 @@ import flushPromises from 'flush-promises'
8278
import Foo from './Foo'
8379
jest.mock('axios')
8480

85-
test('Foo', () => {
86-
it('fetches async when a button is clicked', async () => {
87-
const wrapper = shallowMount(Foo)
88-
wrapper.find('button').trigger('click')
89-
await flushPromises()
90-
expect(wrapper.vm.value).toBe('value')
91-
})
81+
it('fetches async when a button is clicked', async () => {
82+
const wrapper = shallowMount(Foo)
83+
wrapper.find('button').trigger('click')
84+
await flushPromises()
85+
expect(wrapper.vm.value).toBe('value')
9286
})
9387
```
9488

Diff for: ‎docs/ru/guides/testing-async-components.md

+15-21
Original file line numberDiff line numberDiff line change
@@ -46,26 +46,22 @@ import { shallowMount } from '@vue/test-utils'
4646
import Foo from './Foo'
4747
jest.mock('axios')
4848

49-
test('Foo', () => {
50-
it('делает асинхронный запрос при нажатии кнопки', () => {
51-
const wrapper = shallowMount(Foo)
52-
wrapper.find('button').trigger('click')
53-
expect(wrapper.vm.value).toBe('value')
54-
})
49+
it('делает асинхронный запрос при нажатии кнопки', () => {
50+
const wrapper = shallowMount(Foo)
51+
wrapper.find('button').trigger('click')
52+
expect(wrapper.vm.value).toBe('value')
5553
})
5654
```
5755

5856
В настоящее время этот тест не будет успешно проходить, потому что проверка значения вызывается до разрешения промиса `fetchResults`. Большинство библиотек для модульного тестирования предоставляют коллбэк, чтобы предоставить возможность определять когда тест должен будет завершаться. Jest и Mocha используют `done`. Мы можем использовать `done` в комбинации с `$nextTick` или `setTimeout`, чтобы гарантировать, что любые промисы будут разрешены перед проверками.
5957

6058
``` js
61-
test('Foo', () => {
62-
it('делает асинхронный запрос при нажатии кнопки', (done) => {
63-
const wrapper = shallowMount(Foo)
64-
wrapper.find('button').trigger('click')
65-
wrapper.vm.$nextTick(() => {
66-
expect(wrapper.vm.value).toBe('value')
67-
done()
68-
})
59+
it('делает асинхронный запрос при нажатии кнопки', (done) => {
60+
const wrapper = shallowMount(Foo)
61+
wrapper.find('button').trigger('click')
62+
wrapper.vm.$nextTick(() => {
63+
expect(wrapper.vm.value).toBe('value')
64+
done()
6965
})
7066
})
7167
```
@@ -82,13 +78,11 @@ import flushPromises from 'flush-promises'
8278
import Foo from './Foo'
8379
jest.mock('axios')
8480

85-
test('Foo', () => {
86-
it('делает асинхронный запрос при нажатии кнопки', async () => {
87-
const wrapper = shallowMount(Foo)
88-
wrapper.find('button').trigger('click')
89-
await flushPromises()
90-
expect(wrapper.vm.value).toBe('value')
91-
})
81+
it('делает асинхронный запрос при нажатии кнопки', async () => {
82+
const wrapper = shallowMount(Foo)
83+
wrapper.find('button').trigger('click')
84+
await flushPromises()
85+
expect(wrapper.vm.value).toBe('value')
9286
})
9387
```
9488

Diff for: ‎docs/zh/guides/testing-async-components.md

+15-21
Original file line numberDiff line numberDiff line change
@@ -46,26 +46,22 @@ import { shallowMount } from '@vue/test-utils'
4646
import Foo from './Foo'
4747
jest.mock('axios')
4848

49-
test('Foo', () => {
50-
it('fetches async when a button is clicked', () => {
51-
const wrapper = shallowMount(Foo)
52-
wrapper.find('button').trigger('click')
53-
expect(wrapper.vm.value).toBe('value')
54-
})
49+
it('fetches async when a button is clicked', () => {
50+
const wrapper = shallowMount(Foo)
51+
wrapper.find('button').trigger('click')
52+
expect(wrapper.vm.value).toBe('value')
5553
})
5654
```
5755

5856
现在这则测试用例会失败，因为断言在 `fetchResults` 中的 Promise 完成之前就被调用了。大多数单元测试库都提供一个回调来使得运行期知道测试用例的完成时机。Jest 和 Mocha 都是用了 `done`。我们可以和 `$nextTick` 或 `setTimeout` 结合使用 `done` 来确保任何 Promise 都会在断言之前完成。
5957

6058
``` js
61-
test('Foo', () => {
62-
it('fetches async when a button is clicked', (done) => {
63-
const wrapper = shallowMount(Foo)
64-
wrapper.find('button').trigger('click')
65-
wrapper.vm.$nextTick(() => {
66-
expect(wrapper.vm.value).toBe('value')
67-
done()
68-
})
59+
it('fetches async when a button is clicked', (done) => {
60+
const wrapper = shallowMount(Foo)
61+
wrapper.find('button').trigger('click')
62+
wrapper.vm.$nextTick(() => {
63+
expect(wrapper.vm.value).toBe('value')
64+
done()
6965
})
7066
})
7167
```
@@ -82,13 +78,11 @@ import flushPromises from 'flush-promises'
8278
import Foo from './Foo'
8379
jest.mock('axios')
8480

85-
test('Foo', () => {
86-
it('fetches async when a button is clicked', async () => {
87-
const wrapper = shallowMount(Foo)
88-
wrapper.find('button').trigger('click')
89-
await flushPromises()
90-
expect(wrapper.vm.value).toBe('value')
91-
})
81+
it('fetches async when a button is clicked', async () => {
82+
const wrapper = shallowMount(Foo)
83+
wrapper.find('button').trigger('click')
84+
await flushPromises()
85+
expect(wrapper.vm.value).toBe('value')
9286
})
9387
```
9488

0 commit comments

Comments
 (0)