Skip to content

unit-testing.md updates #210

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.

Sign up for GitHub

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 4 commits into from
Feb 17, 2020
Merged

unit-testing.md updates #210

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bdf3512
fix: port changes from original documentation
sarahdayan Feb 6, 2020
655611a
fix: fix comment
sarahdayan Feb 6, 2020
b1a14dd
fix: fix it statement
sarahdayan Feb 6, 2020
03df656
Merge branch 'master' into patch-1
sarahdayan Feb 11, 2020
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
10 changes: 5 additions & 5 deletions src/v2/guide/unit-testing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,15 +83,15 @@ Une bonne partie du code en sortie du rendu d'un composant est principalement d
</script>
```

Vous pouvez faire des assertions sur le rendu en sortie avec différentes props en utilisant [Vue Test Utils](https://vue-test-utils.vuejs.org/) :
Vous pouvez faire des assertions sur le rendu en sortie avec différentes props avec [Vue Test Utils](https://vue-test-utils.vuejs.org/) :

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

// Fonction utilitaire qui monte et retourne le composant rendu
function getMountedComponent(Component, propsData) {
return shallowMount(Component, {
return shallowMount(MyComponent, {
propsData
})
}
Expand All @@ -115,15 +115,15 @@ describe('MyComponent', () => {

## Assertions sur des mises à jour asynchrones

Parce que Vue [fait les mises à jour du DOM de manière asynchrone](reactivity.html#File-d’attente-de-mise-a-jour-asynchrone), les assertions sur les mises à jour du DOM résultant d'un changement d'état doivent être faites après que `vm.$nextTick()` soit résolue :
Parce que Vue [fait les mises à jour du DOM de manière asynchrone](reactivity.html#File-d’attente-de-mise-a-jour-asynchrone), les assertions sur les mises à jour du DOM résultant d'un changement d'état doivent être faites une fois que la promesse retournée par `vm.$nextTick()` est résolue :

``` js
// Inspecter le HTML généré après une mise à jour d'état
it('met à jour le message rendu quand `vm.message` est mis à jour', async () => {
it('met à jour le message rendu quand `wrapper.message` est mis à jour', async () => {
const wrapper = shallowMount(MyComponent)
wrapper.setData({ message: 'foo' })

// attendre une boucle (« tick ») après le changement d'état avant de faire l'assertion des mises à jour du DOM
// Attendre une boucle (« tick ») après le changement d'état avant de faire l'assertion des mises à jour du DOM
await wrapper.vm.$nextTick()
expect(wrapper.text()).toBe('foo')
})
Expand Down