Skip to content

Traduction de unit-testing.md #74

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
Jul 11, 2017
Merged

Traduction de unit-testing.md #74

merged 3 commits into from
Jul 11, 2017

Conversation

MachinisteWeb
Copy link
Member

Une nouvelle traduction. Ça devient bon !

Signed-off-by: Bruno Lesieur <[email protected]>
Copy link
Member

@sylvainpolletvillard sylvainpolletvillard left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1ere relecture


<p class="tip">**Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vuejs.org).**</p><p>Anything compatible with a module-based build system will work, but if you're looking for a specific recommendation, try the [Karma](http://karma-runner.github.io) test runner. It has a lot of community plugins, including support for [webpack](https://github.com/webpack/karma-webpack) and [Browserify](https://github.com/Nikku/karma-browserify). For detailed setup, please refer to each project's respective documentation, though these example Karma configurations for [webpack](https://github.com/vuejs-templates/webpack/blob/master/template/test/unit/karma.conf.js) and [Browserify](https://github.com/vuejs-templates/browserify/blob/master/template/karma.conf.js) may help you get started.</p>
N'importe quoi de compatible avec un module basé sur un système de build va fonctionner. Mais si vous hésitez sur le choix d'un outil en particulier, essayez le lanceur de tests [Karma](http://karma-runner.github.io). Il y a beaucoup de plugins communautaires, incluant le support de [webpack](https://github.com/webpack/karma-webpack) et [Browserify](https://github.com/Nikku/karma-browserify). Pour une mise en place détaillée, référez-vous à la documentation respective de chaque projet. Ces exemples de configuration de Karma pour [webpack](https://github.com/vuejs-templates/webpack/blob/master/template/test/unit/karma.conf.js) et [Browserify](https://github.com/vuejs-templates/browserify/blob/master/template/karma.conf.js) pourront vous aider à démarrer.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

un système de build basé sur les modules

Mais si vous cherchez une recommandation particulière

peuvent vous aider


## Simple Assertions
## De simples assertions

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Des assertions simples


In terms of code structure for testing, you don't have to do anything special in your components to make them testable. Just export the raw options:
En terme de structure de test de code, vous n'avez rien de spécial à faire dans vos composants pour les rendre testables. Exportez simplement son objet d'options :

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

En termes de structure de code pour les tests

Exportez juste les options en l'état

}
}
</script>
```

When you test that component, all you have to do is import the object along with Vue to make many common assertions:
Quand vous testez ce composant, tout ce que vous avez à faire est d'importer l'objet d'options avec un objet Vue pour faire des assertions communes :

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

est importer l'objet d'options aux côtés de Vue pour faire une série d'assertions communes


A lot of component's render output are primarily determined by the props they receive. In fact, if a component's render output solely depends on its props, it becomes quite straightforward to test, similar to asserting the return value of a pure function with different arguments. Take a contrived example:
Beaucoup de sortie de rendu de composants sont principalement déterminées selon les props que les composants reçoivent. En fait, si une sortie de rendu de composant dépend uniquement de ses props, il devient très rapide de le tester. Exactement de la même manière qu'on ferrait des assertions sur la valeur de retour d'une fonction standard avec différents arguments. Voici un exemple :

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Une bonne partie du code en sortie du rendu d'un composant est principalement déterminé par les props qu'ils reçoivent.

si le rendu d'un composant dépend uniquement de ses props, il devient assez facile à tester, de la même manière que l'on ferait une assertion sur la valeur de retour d'une fonction pure avec différents arguments.
(éviter de faire des phrases nominales, surtout en milieu de paragraphe)

function getRenderedText (Component, propsData) {
const Ctor = Vue.extend(Component)
const vm = new Ctor({ propsData: propsData }).$mount()
return vm.$el.textContent
}

describe('MyComponent', () => {
it('renders correctly with different props', () => {
it('rendre correctement le message avec différentes props', () => {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

donne un rendu correct avec différentes props

})
})
```

## Asserting Asynchronous Updates
## Assertions de mise à jour asynchrones

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Assertions sur des mises à jour asynchrones


Since Vue [performs DOM updates asynchronously](reactivity.html#Async-Update-Queue), assertions on DOM updates resulting from state change will have to be made in a `Vue.nextTick` callback:
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 dû à un changement d'état doivent être faites dans une fonction de rappel `Vue.nextTick` :

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

résultant d'un changement d'état

// Inspect the generated HTML after a state update
it('updates the rendered message when vm.message updates', done => {
// Inspecter le HTML généré après une mise à jour d'état
it('mettre à jour le message rendu quand `vm.message` est mis à jour', done => {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

met à jour le message

Vue.nextTick(() => {
expect(vm.$el.textContent).toBe('foo')
done()
})
})
```

We are planning to work on a collection of common test helpers that makes it even simpler to render components with different constraints (e.g. shallow rendering that ignores child components) and assert their output.
Nous avons planifié de travailler sur une collection de fonctions utilitaires de tests communs pour rendre encore plus simple les tests de composant de rendu avec différentes contraintes (par ex. des rendus peu profonds ignorant les composants enfants) et faire des assertions de leur sortie.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nous prévoyons de travailler

pour rendre encore plus simple le rendu de composants avec différentes contraintes

faire des assertions sur le code en sortie

Signed-off-by: Bruno Lesieur <[email protected]>
@MachinisteWeb
Copy link
Member Author

Merci @sylvainpolletvillard. Au top, comme toujours. Rien à redire.

@MachinisteWeb
Copy link
Member Author

Seconde relecture bienvenue et bon pour un merge !

Copy link

@forresst forresst left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Quelques erreurs, j'ai un doute sur ma remarque pour "détermimée" à voir ...


<p class="tip">**Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vuejs.org).**</p><p>Anything compatible with a module-based build system will work, but if you're looking for a specific recommendation, try the [Karma](http://karma-runner.github.io) test runner. It has a lot of community plugins, including support for [webpack](https://github.com/webpack/karma-webpack) and [Browserify](https://github.com/Nikku/karma-browserify). For detailed setup, please refer to each project's respective documentation, though these example Karma configurations for [webpack](https://github.com/vuejs-templates/webpack/blob/master/template/test/unit/karma.conf.js) and [Browserify](https://github.com/vuejs-templates/browserify/blob/master/template/karma.conf.js) may help you get started.</p>
N'importe quoi de compatible avec un module basé sur un système de build basé sur les modules va fonctionner. Mais si vous cherchez une recommandation particulière, essayez le lanceur de tests [Karma](http://karma-runner.github.io). Il y a beaucoup de plugins communautaires, incluant le support de [webpack](https://github.com/webpack/karma-webpack) et [Browserify](https://github.com/Nikku/karma-browserify). Pour une mise en place détaillée, référez-vous à la documentation respective de chaque projet. Ces exemples de configuration de Karma pour [webpack](https://github.com/vuejs-templates/webpack/blob/master/template/test/unit/karma.conf.js) et [Browserify](https://github.com/vuejs-templates/browserify/blob/master/template/karma.conf.js) pourront vous aider à démarrer.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

N'importe quoi de compatible avec un module basé sur un système de build basé sur les modules va fonctionner.

Je propose une phrase plus simple (en plus "basé" et "module" sont répétés) : Tout ce qui est compatible avec un système de build basé sur des modules fonctionnera.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oui c'est une erreur de @haeresis dans les retours de ma code review. Attention à bien relire toutes la phrase et ne pas changer mot à mot, je ne précise pas toujours les parties à supprimer

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ma faute

// Mount an instance and inspect the render output
it('renders the correct message', () => {
// Monter une instance et inspecter le résultat en sortie
it('rend le message correcte', () => {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

correct (sans le e message est masculin)


A lot of component's render output are primarily determined by the props they receive. In fact, if a component's render output solely depends on its props, it becomes quite straightforward to test, similar to asserting the return value of a pure function with different arguments. Take a contrived example:
Une bonne partie du code en sortie du rendu d'un composant est principalement déterminé par les props qu'ils reçoivent. En fait, si le rendu d'un composant dépend uniquement de ses props, il devient assez facile à tester, de la même manière que l'on ferait une assertion sur la valeur de retour d'une fonction pure avec différents arguments. Voici un exemple :
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

déterminée

accordée au féminin pour moi car le sujet est "une bonne partie"

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

bien vu. et "qu'il reçoit" plutôt que "qu'ils reçoivent"

Signed-off-by: Bruno Lesieur <[email protected]>
@MachinisteWeb
Copy link
Member Author

Merci à vous. Je merge. Si vous voyez d'autres erreurs, n'hésitez pas à ouvrir des PR dédidées.

@MachinisteWeb MachinisteWeb merged commit 5ffb678 into vuejs-fr:master Jul 11, 2017
@MachinisteWeb MachinisteWeb deleted the unit-testing branch July 11, 2017 11:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants