From afe6cb6c9e4f5a55ecc373125a8f8f31b1f2b93a Mon Sep 17 00:00:00 2001 From: linsolas Date: Thu, 14 Feb 2019 01:12:47 +0100 Subject: [PATCH 1/8] Translation of the "Test Utilities" page --- content/docs/addons-test-utils.md | 94 +++++++++++++++---------------- 1 file changed, 47 insertions(+), 47 deletions(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index bbbf5755c..1b369cc76 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -1,27 +1,27 @@ --- id: test-utils -title: Test Utilities +title: Utilitaires de test permalink: docs/test-utils.html layout: docs category: Reference --- -**Importing** +**À importer** ```javascript import ReactTestUtils from 'react-dom/test-utils'; // ES6 -var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm +var ReactTestUtils = require('react-dom/test-utils'); // ES5 avec npm ``` -## Overview {#overview} +## Vue d'ensemble {#overview} -`ReactTestUtils` makes it easy to test React components in the testing framework of your choice. At Facebook we use [Jest](https://facebook.github.io/jest/) for painless JavaScript testing. Learn how to get started with Jest through the Jest website's [React Tutorial](http://facebook.github.io/jest/docs/en/tutorial-react.html#content). +`ReactTestUtils` rend facile le test de composants React dans le framework de test de votre choix. Chez Facebook, nous utilisons [Jest](https://facebook.github.io/jest/) pour réaliser des tests JavaScript facilement. Apprenez à démarrer avec Jest grâce au [Tutoriel React](http://facebook.github.io/jest/docs/en/tutorial-react.html#content) sur site web de Jest. > Note: > -> We recommend using [`react-testing-library`](https://git.io/react-testing-library) which is designed to enable and encourage writing tests that use your components as the end users do. +> Nous recommandons d'utiliser [`react-testing-library`](https://git.io/react-testing-library) qui est conçue pour permettre et encourager l'écriture de tests qui utilisent vos composants comme le font les utilisateurs finaux. > -> Alternatively, Airbnb has released a testing utility called [Enzyme](http://airbnb.io/enzyme/), which makes it easy to assert, manipulate, and traverse your React Components' output. +> Autrement, Airbnb a publié un utilitaire de test appelé [Enzyme](http://airbnb.io/enzyme/), qui rend facile les assertions, la manipulation et la traversée du rendu de vos composants React. - [`act()`](#act) - [`mockComponent()`](#mockcomponent) @@ -40,17 +40,17 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm - [`renderIntoDocument()`](#renderintodocument) - [`Simulate`](#simulate) -## Reference {#reference} +## Référence {#reference} ### `act()` {#act} -To prepare a component for assertions, wrap the code rendering it and performing updates inside an `act()` call. This makes your test run closer to how React works in the browser. +Afin de préparer un composant aux assertions, il convient d'encapsuler le code qui se charge de son rendu et de réaliser les mises à jour au sein d'un appel à `act()`. Cela rend votre test plus proche du fonctionnement de React dans le navigateur. >Note > ->If you use `react-test-renderer`, it also provides an `act` export that behaves the same way. +>Si vous utilisez `react-test-renderer`, ce dernier propose un export de `act` qui se comporte de la même façon. -For example, let's say we have this `Counter` component: +Considérons l'exemple d'un composant `Counter` : ```js class App extends React.Component { @@ -60,10 +60,10 @@ class App extends React.Component { this.handleClick = this.handleClick.bind(this); } componentDidMount() { - document.title = `You clicked ${this.state.count} times`; + document.title = `Vous avez cliqué ${this.state.count} fois`; } componentDidUpdate() { - document.title = `You clicked ${this.state.count} times`; + document.title = `Vous avez cliqué ${this.state.count} fois`; } handleClick() { this.setState(state => ({ @@ -73,9 +73,9 @@ class App extends React.Component { render() { return (
-

You clicked {this.state.count} times

+

Vous avez cliqué {this.state.count} fois

); @@ -83,7 +83,7 @@ class App extends React.Component { } ``` -Here is how we can test it: +Voici comment nous pouvons le tester : ```js{3,20-22,29-31} import React from 'react'; @@ -103,26 +103,26 @@ afterEach(() => { container = null; }); -it('can render and update a counter', () => { - // Test first render and componentDidMount +it('peut faire le rendu et mettre à jour un compteur', () => { + // Tester le premier rendu et appel à componentDidMount act(() => { ReactDOM.render(, container); }); const button = container.querySelector('button'); const label = container.querySelector('p'); - expect(label.textContent).toBe('You clicked 0 times'); - expect(document.title).toBe('You clicked 0 times'); + expect(label.textContent).toBe('Vous avez cliqué 0 fois'); + expect(document.title).toBe('Vous avez cliqué 0 fois'); - // Test second render and componentDidUpdate + // Tester un second rendu et appel à componentDidUpdate act(() => { button.dispatchEvent(new MouseEvent('click', {bubbles: true})); }); - expect(label.textContent).toBe('You clicked 1 times'); - expect(document.title).toBe('You clicked 1 times'); + expect(label.textContent).toBe('Vous avez cliqué 1 fois'); + expect(document.title).toBe('Vous avez cliqué 1 fois'); }); ``` -Don't forget that dispatching DOM events only works when the DOM container is added to the `document`. You can use a helper like [`react-testing-library`](https://github.com/kentcdodds/react-testing-library) to reduce the boilerplate code. +N'oubliez pas que l'émission d'événements DOM ne fonctionne que lorsque le conteneur DOM a été ajouté au`document`. Vous pouvez utiliser un assistant [`react-testing-library`](https://github.com/kentcdodds/react-testing-library) afin de réduire le modèle de code. * * * @@ -135,11 +135,11 @@ mockComponent( ) ``` -Pass a mocked component module to this method to augment it with useful methods that allow it to be used as a dummy React component. Instead of rendering as usual, the component will become a simple `
` (or other tag if `mockTagName` is provided) containing any provided children. +Passe un module de composant bouchonné à cette méhode afin de l'enrichir avec des méthodes utiles qui lui permettront d'être utilisé comme un composant React factice. Plutôt que de réaliser un rendu classique, le composant va simplement devenir un `
` (ou tout autre balise si `mockTagName` est renseigné) contenant les enfants qui lui sont fournis. > Note: > -> `mockComponent()` is a legacy API. We recommend using [shallow rendering](/docs/test-utils.html#shallow-rendering) or [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock) instead. +> `mockComponent()` est une API obsolète. Nous recommandons plutôt l'usage du [rendu superficiel](/docs/test-utils.html#shallow-rendering) ou [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock). * * * @@ -149,7 +149,7 @@ Pass a mocked component module to this method to augment it with useful methods isElement(element) ``` -Returns `true` if `element` is any React element. +Retourne `true` si `element` est un élément React. * * * @@ -162,7 +162,7 @@ isElementOfType( ) ``` -Returns `true` if `element` is a React element whose type is of a React `componentClass`. +Retourne `true` si `element` est un élément React dont le type est un `componentClass` React. * * * @@ -172,7 +172,7 @@ Returns `true` if `element` is a React element whose type is of a React `compone isDOMComponent(instance) ``` -Returns `true` if `instance` is a DOM component (such as a `
` or ``). +Retourne `true` si `instance` est un composant DOM (tel que `
` ou ``). * * * @@ -182,7 +182,7 @@ Returns `true` if `instance` is a DOM component (such as a `
` or ``). isCompositeComponent(instance) ``` -Returns `true` if `instance` is a user-defined component, such as a class or a function. +Retourne `true` si `instance` est un composant défini par l'utilisateur, telle qu'une classe ou une fonction. * * * @@ -195,7 +195,7 @@ isCompositeComponentWithType( ) ``` -Returns `true` if `instance` is a component whose type is of a React `componentClass`. +Retourne `true` si `instance` est un composant dont le type est un `componentClass` React. * * * @@ -208,7 +208,7 @@ findAllInRenderedTree( ) ``` -Traverse all components in `tree` and accumulate all components where `test(component)` is `true`. This is not that useful on its own, but it's used as a primitive for other test utils. +Traverse tous les componsants présents dans `tree` et conserve les composants pour lesquels `test(component)` retourne `true`. Ce n'est guère utile en soi, mais cela sert de base à d'autres utilitaires de test. * * * @@ -221,7 +221,7 @@ scryRenderedDOMComponentsWithClass( ) ``` -Finds all DOM elements of components in the rendered tree that are DOM components with the class name matching `className`. +Trouve tous les éléments DOM des composants de l'arbre de rendu qui sont des composants DOM dont la classe correspond à `className`. * * * @@ -234,7 +234,7 @@ findRenderedDOMComponentWithClass( ) ``` -Like [`scryRenderedDOMComponentsWithClass()`](#scryrendereddomcomponentswithclass) but expects there to be one result, and returns that one result, or throws exception if there is any other number of matches besides one. +Comme pour [`scryRenderedDOMComponentsWithClass()`](#scryrendereddomcomponentswithclass), mais ne s'attend ici qu'à un seul résultat, retourne celui-ci ou lance une exception si le nombre d'éléments correspondants est différent de un. * * * @@ -247,7 +247,7 @@ scryRenderedDOMComponentsWithTag( ) ``` -Finds all DOM elements of components in the rendered tree that are DOM components with the tag name matching `tagName`. +Trouve tous les éléments DOM des composants de l'arbre de rendu qui sont des composants DOM dont le nom de balise correspond à`tagName`. * * * @@ -260,7 +260,7 @@ findRenderedDOMComponentWithTag( ) ``` -Like [`scryRenderedDOMComponentsWithTag()`](#scryrendereddomcomponentswithtag) but expects there to be one result, and returns that one result, or throws exception if there is any other number of matches besides one. +Comme pour [`scryRenderedDOMComponentsWithTag()`](#scryrendereddomcomponentswithtag), mais ne s'attend ici qu'à un seul résultat, retourne celui-ci ou lance une exception si le nombre d'éléments correspondants est différent de un. * * * @@ -273,7 +273,7 @@ scryRenderedComponentsWithType( ) ``` -Finds all instances of components with type equal to `componentClass`. +Trouve toutes les instances des composants dont le type correspond à `componentClass`. * * * @@ -286,7 +286,7 @@ findRenderedComponentWithType( ) ``` -Same as [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype) but expects there to be one result and returns that one result, or throws exception if there is any other number of matches besides one. +Comme pour [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype), mais ne s'attend ici qu'à un seul résultat, retourne celui-ci ou lance une exception si le nombre d'éléments correspondants est différent de un. *** @@ -296,7 +296,7 @@ Same as [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype) bu renderIntoDocument(element) ``` -Render a React element into a detached DOM node in the document. **This function requires a DOM.** It is effectively equivalent to: +Réalise le rendu d'un élément React au sein d'un nœud du DOM détaché dans le document. **Cette fonction nécessite un DOM**. C'est effectivement équivalent à : ```js const domContainer = document.createElement('div'); @@ -305,11 +305,11 @@ ReactDOM.render(element, domContainer); > Note: > -> You will need to have `window`, `window.document` and `window.document.createElement` globally available **before** you import `React`. Otherwise React will think it can't access the DOM and methods like `setState` won't work. +> Vous aurez besoin d'avoir `window`, `window.document` et `window.document.createElement` disponibles globalement **préalablement** à votre import de `React`. Autrement, React pensera qu'il ne peut accéder au DOM, et des méthodes telles que `setState` ne fonctionneront pas. * * * -## Other Utilities {#other-utilities} +## Autre utilitaires {#other-utilities} ### `Simulate` {#simulate} @@ -320,11 +320,11 @@ Simulate.{eventName}( ) ``` -Simulate an event dispatch on a DOM node with optional `eventData` event data. +Simule l'envoi d'un événement sur un nœud du DOM avec les données optionnelles `eventData`. -`Simulate` has a method for [every event that React understands](/docs/events.html#supported-events). +`Simulate` dispose d'une méthode pour [chaque événement que React comprend](/docs/events.html#supported-events). -**Clicking an element** +**Cliquer sur un élément** ```javascript // @@ -332,18 +332,18 @@ const node = this.button; ReactTestUtils.Simulate.click(node); ``` -**Changing the value of an input field and then pressing ENTER.** +**Changer la value d'un champ de saisie puis presser ENTRÉE.** ```javascript // this.textInput = node} /> const node = this.textInput; -node.value = 'giraffe'; +node.value = 'girafe'; ReactTestUtils.Simulate.change(node); ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13}); ``` > Note > -> You will have to provide any event property that you're using in your component (e.g. keyCode, which, etc...) as React is not creating any of these for you. +> Vous devrez fournir toute propriété d'événement que vous utilisez dans votre composant (par exemple keyCode, which, etc...) puisque React ne les créera pas pour vous. * * * From 99b2d40debe5610ba9c844a51330ea72bcb31ea3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABtan=20Kueny?= Date: Thu, 14 Feb 2019 10:07:40 +0100 Subject: [PATCH 2/8] Fix typo Co-Authored-By: linsolas --- content/docs/addons-test-utils.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index 1b369cc76..a9419f53b 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -15,7 +15,7 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 avec npm ## Vue d'ensemble {#overview} -`ReactTestUtils` rend facile le test de composants React dans le framework de test de votre choix. Chez Facebook, nous utilisons [Jest](https://facebook.github.io/jest/) pour réaliser des tests JavaScript facilement. Apprenez à démarrer avec Jest grâce au [Tutoriel React](http://facebook.github.io/jest/docs/en/tutorial-react.html#content) sur site web de Jest. +`ReactTestUtils` rend facile le test de composants React dans le framework de test de votre choix. Chez Facebook, nous utilisons [Jest](https://facebook.github.io/jest/) pour réaliser des tests JavaScript facilement. Apprenez à démarrer avec Jest grâce au [Tutoriel React](http://facebook.github.io/jest/docs/en/tutorial-react.html#content) sur le site web de Jest. > Note: > From 9d279844ac92c9764d4c69906a397bfc6c6233cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABtan=20Kueny?= Date: Thu, 14 Feb 2019 10:08:00 +0100 Subject: [PATCH 3/8] Adding missing space Co-Authored-By: linsolas --- content/docs/addons-test-utils.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index a9419f53b..1fdb3008d 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -122,7 +122,7 @@ it('peut faire le rendu et mettre à jour un compteur', () => { }); ``` -N'oubliez pas que l'émission d'événements DOM ne fonctionne que lorsque le conteneur DOM a été ajouté au`document`. Vous pouvez utiliser un assistant [`react-testing-library`](https://github.com/kentcdodds/react-testing-library) afin de réduire le modèle de code. +N'oubliez pas que l'émission d'événements DOM ne fonctionne que lorsque le conteneur DOM a été ajouté au `document`. Vous pouvez utiliser un assistant [`react-testing-library`](https://github.com/kentcdodds/react-testing-library) afin de réduire le modèle de code. * * * From 3db3e9656d83ca5127e7e4223eeca8854d541f3a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABtan=20Kueny?= Date: Thu, 14 Feb 2019 10:08:37 +0100 Subject: [PATCH 4/8] Rephrasing Co-Authored-By: linsolas --- content/docs/addons-test-utils.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index 1fdb3008d..c572a9928 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -135,7 +135,7 @@ mockComponent( ) ``` -Passe un module de composant bouchonné à cette méhode afin de l'enrichir avec des méthodes utiles qui lui permettront d'être utilisé comme un composant React factice. Plutôt que de réaliser un rendu classique, le composant va simplement devenir un `
` (ou tout autre balise si `mockTagName` est renseigné) contenant les enfants qui lui sont fournis. +Passe un module de composant bouchonné à cette méthode afin de l'enrichir avec des méthodes utiles qui lui permettront d'être utilisé comme un composant React factice. Plutôt que de réaliser un rendu classique, le composant va simplement devenir une balise `
` (ou tout autre balise si `mockTagName` est renseigné) contenant les enfants qui lui sont fournis. > Note: > From 2b83b355ae699b296b2100e9269de2dbfb56741b Mon Sep 17 00:00:00 2001 From: linsolas Date: Sun, 24 Feb 2019 22:07:40 +0100 Subject: [PATCH 5/8] Corrections after @JeremiePat review --- content/docs/addons-test-utils.md | 58 +++++++++++++++---------------- 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index 1b369cc76..768e4b0bf 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -6,22 +6,22 @@ layout: docs category: Reference --- -**À importer** +**Importer les utilitaires** ```javascript import ReactTestUtils from 'react-dom/test-utils'; // ES6 var ReactTestUtils = require('react-dom/test-utils'); // ES5 avec npm ``` -## Vue d'ensemble {#overview} +## Aperçu de l'API {#overview} -`ReactTestUtils` rend facile le test de composants React dans le framework de test de votre choix. Chez Facebook, nous utilisons [Jest](https://facebook.github.io/jest/) pour réaliser des tests JavaScript facilement. Apprenez à démarrer avec Jest grâce au [Tutoriel React](http://facebook.github.io/jest/docs/en/tutorial-react.html#content) sur site web de Jest. +`ReactTestUtils` facilite le test de composants React quelque soit le framework de test que vous ayez choisi. Chez Facebook, nous utilisons [Jest](https://facebook.github.io/jest/) pour réaliser facilement nos tests JavaScript. Pour bien démarrer avec Jest vous pouvez lire le [Tutoriel React](http://facebook.github.io/jest/docs/en/tutorial-react.html#content) du site web de Jest. > Note: > -> Nous recommandons d'utiliser [`react-testing-library`](https://git.io/react-testing-library) qui est conçue pour permettre et encourager l'écriture de tests qui utilisent vos composants comme le font les utilisateurs finaux. +> Nous recommandons l'usage de [`react-testing-library`](https://git.io/react-testing-library). Cette bibliothèque est conçue pour permettre et encourager l'écriture de tests qui utilisent vos composants à la manière des utilisateurs finaux. > -> Autrement, Airbnb a publié un utilitaire de test appelé [Enzyme](http://airbnb.io/enzyme/), qui rend facile les assertions, la manipulation et la traversée du rendu de vos composants React. +> A titre d'alternative, Airbnb a publié un utilitaire de test appelé [Enzyme](http://airbnb.io/enzyme/), qui permet facilement de tester des assertions, de manipuler vos composants React et d'en explorer le rendu. - [`act()`](#act) - [`mockComponent()`](#mockcomponent) @@ -44,11 +44,11 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 avec npm ### `act()` {#act} -Afin de préparer un composant aux assertions, il convient d'encapsuler le code qui se charge de son rendu et de réaliser les mises à jour au sein d'un appel à `act()`. Cela rend votre test plus proche du fonctionnement de React dans le navigateur. +Afin de préparer un composant aux assertions, il suffit d'encapsuler le code qui se charge de son rendu et de ses mises à jour au sein d'une fonction qui sera passée à `act()`. De cette manière votre test s’exécutera dans un environnement au fonctionnement plus proche de React dans le navigateur. ->Note +> Remarque : > ->Si vous utilisez `react-test-renderer`, ce dernier propose un export de `act` qui se comporte de la même façon. +> Si vous utilisez `react-test-renderer`, ce dernier propose un export de `act` qui se comporte de la même façon. Considérons l'exemple d'un composant `Counter` : @@ -104,7 +104,7 @@ afterEach(() => { }); it('peut faire le rendu et mettre à jour un compteur', () => { - // Tester le premier rendu et appel à componentDidMount + // Tester le premier rendu et l'appel à componentDidMount act(() => { ReactDOM.render(, container); }); @@ -113,7 +113,7 @@ it('peut faire le rendu et mettre à jour un compteur', () => { expect(label.textContent).toBe('Vous avez cliqué 0 fois'); expect(document.title).toBe('Vous avez cliqué 0 fois'); - // Tester un second rendu et appel à componentDidUpdate + // Tester un second rendu et l'appel à componentDidUpdate act(() => { button.dispatchEvent(new MouseEvent('click', {bubbles: true})); }); @@ -122,7 +122,7 @@ it('peut faire le rendu et mettre à jour un compteur', () => { }); ``` -N'oubliez pas que l'émission d'événements DOM ne fonctionne que lorsque le conteneur DOM a été ajouté au`document`. Vous pouvez utiliser un assistant [`react-testing-library`](https://github.com/kentcdodds/react-testing-library) afin de réduire le modèle de code. +N'oubliez pas que l'émission d'événements DOM ne fonctionne que lorsque le conteneur DOM a été ajouté au`document`. Vous pouvez utiliser un utilitaire comme [`react-testing-library`](https://github.com/kentcdodds/react-testing-library) afin de réduire le volume de code récurent. * * * @@ -135,11 +135,11 @@ mockComponent( ) ``` -Passe un module de composant bouchonné à cette méhode afin de l'enrichir avec des méthodes utiles qui lui permettront d'être utilisé comme un composant React factice. Plutôt que de réaliser un rendu classique, le composant va simplement devenir un `
` (ou tout autre balise si `mockTagName` est renseigné) contenant les enfants qui lui sont fournis. +Cette méthode prend un module de composant bouchonné et lui ajoute des méthodes utiles pour lui permettre d'être utilisé comme un composant React factice. Plutôt que de réaliser un rendu classique, le composant va simplement devenir une balise `
` (ou tout autre balise si `mockTagName` est renseigné) contenant les enfants qui lui sont fournis. -> Note: +> Remarque : > -> `mockComponent()` est une API obsolète. Nous recommandons plutôt l'usage du [rendu superficiel](/docs/test-utils.html#shallow-rendering) ou [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock). +> `mockComponent()` est une API obsolète. Nous recommandons plutôt l'usage du [rendu superficiel](/docs/test-utils.html#shallow-rendering) ou de [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock). * * * @@ -149,7 +149,7 @@ Passe un module de composant bouchonné à cette méhode afin de l'enrichir avec isElement(element) ``` -Retourne `true` si `element` est un élément React. +Renvoie `true` si `element` est un élément React. * * * @@ -162,7 +162,7 @@ isElementOfType( ) ``` -Retourne `true` si `element` est un élément React dont le type est un `componentClass` React. +Renvoie `true` si `element` est un élément React dont le type est un `componentClass` React. * * * @@ -172,7 +172,7 @@ Retourne `true` si `element` est un élément React dont le type est un `compone isDOMComponent(instance) ``` -Retourne `true` si `instance` est un composant DOM (tel que `
` ou ``). +Renvoie `true` si `instance` est un composant DOM (tel que `
` ou ``). * * * @@ -182,7 +182,7 @@ Retourne `true` si `instance` est un composant DOM (tel que `
` ou ``) isCompositeComponent(instance) ``` -Retourne `true` si `instance` est un composant défini par l'utilisateur, telle qu'une classe ou une fonction. +Renvoie `true` si `instance` est un composant défini par l'utilisateur, telle qu'une classe ou une fonction. * * * @@ -195,7 +195,7 @@ isCompositeComponentWithType( ) ``` -Retourne `true` si `instance` est un composant dont le type est un `componentClass` React. +Renvoie `true` si `instance` est un composant dont le type est un `componentClass` React. * * * @@ -208,7 +208,7 @@ findAllInRenderedTree( ) ``` -Traverse tous les componsants présents dans `tree` et conserve les composants pour lesquels `test(component)` retourne `true`. Ce n'est guère utile en soi, mais cela sert de base à d'autres utilitaires de test. +Traverse tous les componsants présents dans `tree` et conserve les composants pour lesquels `test(component)` renvoie `true`. Ce n'est guère utile en soi, mais cela sert de base à d'autres utilitaires de test. * * * @@ -234,7 +234,7 @@ findRenderedDOMComponentWithClass( ) ``` -Comme pour [`scryRenderedDOMComponentsWithClass()`](#scryrendereddomcomponentswithclass), mais ne s'attend ici qu'à un seul résultat, retourne celui-ci ou lance une exception si le nombre d'éléments correspondants est différent de un. +Fonctionne comme [`scryRenderedDOMComponentsWithClass()`](#scryrendereddomcomponentswithclass), mais cette méthode s'attend à ne trouver qu'un seul résultat qu'elle renverra. Si elle trouve un nombre d'éléments différent de un, elle lancera une exception . * * * @@ -247,7 +247,7 @@ scryRenderedDOMComponentsWithTag( ) ``` -Trouve tous les éléments DOM des composants de l'arbre de rendu qui sont des composants DOM dont le nom de balise correspond à`tagName`. +Trouve tous les éléments DOM parmi les composants de l'arbre de rendu qui sont des composants DOM dont le nom de balise correspond à`tagName`. * * * @@ -260,7 +260,7 @@ findRenderedDOMComponentWithTag( ) ``` -Comme pour [`scryRenderedDOMComponentsWithTag()`](#scryrendereddomcomponentswithtag), mais ne s'attend ici qu'à un seul résultat, retourne celui-ci ou lance une exception si le nombre d'éléments correspondants est différent de un. +Fonctionne comme [`scryRenderedDOMComponentsWithTag()`](#scryrendereddomcomponentswithtag), mais cette méthode s'attend à ne trouver qu'un seul résultat qu'elle renverra. Si elle trouve un nombre d'éléments différent de un, elle lancera une exception. * * * @@ -286,7 +286,7 @@ findRenderedComponentWithType( ) ``` -Comme pour [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype), mais ne s'attend ici qu'à un seul résultat, retourne celui-ci ou lance une exception si le nombre d'éléments correspondants est différent de un. +Fonctionne comme [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype), mais cette méthode s'attend à ne trouver qu'un seul résultat qu'elle renverra. Si elle trouve un nombre d'éléments différent de un, elle lancera une exception. *** @@ -296,14 +296,14 @@ Comme pour [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype) renderIntoDocument(element) ``` -Réalise le rendu d'un élément React au sein d'un nœud du DOM détaché dans le document. **Cette fonction nécessite un DOM**. C'est effectivement équivalent à : +Réalise le rendu d'un élément React au sein d'un nœud du DOM détaché du document. **Cette fonction nécessite un DOM**. C'est en fait équivalent à : ```js const domContainer = document.createElement('div'); ReactDOM.render(element, domContainer); ``` -> Note: +> Remarque : > > Vous aurez besoin d'avoir `window`, `window.document` et `window.document.createElement` disponibles globalement **préalablement** à votre import de `React`. Autrement, React pensera qu'il ne peut accéder au DOM, et des méthodes telles que `setState` ne fonctionneront pas. @@ -332,7 +332,7 @@ const node = this.button; ReactTestUtils.Simulate.click(node); ``` -**Changer la value d'un champ de saisie puis presser ENTRÉE.** +**Changer la valeur d'un champ de saisie puis presser ENTRÉE.** ```javascript // this.textInput = node} /> @@ -342,8 +342,8 @@ ReactTestUtils.Simulate.change(node); ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13}); ``` -> Note +> Remarque : > -> Vous devrez fournir toute propriété d'événement que vous utilisez dans votre composant (par exemple keyCode, which, etc...) puisque React ne les créera pas pour vous. +> Vous devrez fournir toute les propriétés dédiées aux événements que vous utilisez dans votre composant (par exemple keyCode, which, etc...) puisque React ne les créera pas pour vous. * * * From b5737048ce7073d830bd7061378a1c3db237ad01 Mon Sep 17 00:00:00 2001 From: Romain Linsolas Date: Sun, 24 Feb 2019 22:20:50 +0100 Subject: [PATCH 6/8] Update note --- content/docs/addons-test-utils.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index 9a4409f87..195d2213b 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -17,7 +17,7 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 avec npm `ReactTestUtils` facilite le test de composants React quelque soit le framework de test choisi. Chez Facebook, nous utilisons [Jest](https://facebook.github.io/jest/) pour réaliser facilement nos tests JavaScript. Pour bien démarrer avec Jest vous pouvez lire le [Tutoriel React](http://facebook.github.io/jest/docs/en/tutorial-react.html#content) du site web de Jest. -> Note: +> Remarque : > > Nous recommandons l'usage de [`react-testing-library`](https://git.io/react-testing-library). Cette bibliothèque est conçue pour permettre et encourager l'écriture de tests qui utilisent vos composants à la manière des utilisateurs finaux. > From a07be71c2e261c8e0454fa42a79b661d6d5c5b10 Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Thu, 28 Feb 2019 12:33:53 +0100 Subject: [PATCH 7/8] Modifications after @tdd review Co-Authored-By: linsolas --- content/docs/addons-test-utils.md | 50 +++++++++++++++---------------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index 195d2213b..6144b9511 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -6,22 +6,22 @@ layout: docs category: Reference --- -**Importer les utilitaires** +**Importation** ```javascript import ReactTestUtils from 'react-dom/test-utils'; // ES6 var ReactTestUtils = require('react-dom/test-utils'); // ES5 avec npm ``` -## Aperçu de l'API {#overview} +## Aperçu {#overview} -`ReactTestUtils` facilite le test de composants React quelque soit le framework de test choisi. Chez Facebook, nous utilisons [Jest](https://facebook.github.io/jest/) pour réaliser facilement nos tests JavaScript. Pour bien démarrer avec Jest vous pouvez lire le [Tutoriel React](http://facebook.github.io/jest/docs/en/tutorial-react.html#content) du site web de Jest. +`ReactTestUtils` facilite le test de composants React quel que soit votre framework de test. Chez Facebook, nous utilisons [Jest](https://facebook.github.io/jest/) pour réaliser facilement nos tests JavaScript. Pour bien démarrer avec Jest, vous pouvez lire le [Tutoriel React](http://facebook.github.io/jest/docs/en/tutorial-react.html#content) du site web de Jest. > Remarque : > -> Nous recommandons l'usage de [`react-testing-library`](https://git.io/react-testing-library). Cette bibliothèque est conçue pour permettre et encourager l'écriture de tests qui utilisent vos composants à la manière des utilisateurs finaux. +> Nous vous conseillons d’utiliser [`react-testing-library`](https://git.io/react-testing-library). Cette bibliothèque est conçue pour permettre et encourager l'écriture de tests qui utilisent vos composants à la manière des utilisateurs finaux. > -> A titre d'alternative, Airbnb a publié un utilitaire de test appelé [Enzyme](http://airbnb.io/enzyme/), qui permet facilement de tester des assertions, de manipuler vos composants React et d'en explorer le rendu. +> Par ailleurs, Airbnb propose un utilitaire de test appelé [Enzyme](http://airbnb.io/enzyme/), qui permet de facilement exprimer des assertions, manipuler vos composants React et en explorer le résultat. - [`act()`](#act) - [`mockComponent()`](#mockcomponent) @@ -40,17 +40,17 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 avec npm - [`renderIntoDocument()`](#renderintodocument) - [`Simulate`](#simulate) -## Référence {#reference} +## Référence de l'API {#reference} ### `act()` {#act} -Afin de préparer un composant aux assertions, il suffit d'encapsuler le code qui se charge de son rendu et de ses mises à jour au sein d'une fonction qui sera passée à `act()`. De cette manière votre test s’exécutera dans un environnement au fonctionnement plus proche de React dans le navigateur. +Afin de préparer un composant aux assertions, il suffit d’enrober le code qui se charge de son rendu et de ses mises à jour au sein d'une fonction de rappel qui sera passée à `act()`. De cette manière, votre test s’exécutera dans un environnement proche de celui de React dans le navigateur. > Remarque : > > Si vous utilisez `react-test-renderer`, ce dernier propose un export de `act` qui se comporte de la même façon. -Considérons l'exemple d'un composant `Counter` : +Prenons l'exemple d'un composant `Counter` : ```js class App extends React.Component { @@ -75,7 +75,7 @@ class App extends React.Component {

Vous avez cliqué {this.state.count} fois

); @@ -103,8 +103,8 @@ afterEach(() => { container = null; }); -it('peut faire le rendu et mettre à jour un compteur', () => { - // Tester le premier rendu et l'appel à componentDidMount +it('peut afficher et mettre à jour un compteur', () => { + // Teste le premier affichage et l'appel à componentDidMount act(() => { ReactDOM.render(, container); }); @@ -113,7 +113,7 @@ it('peut faire le rendu et mettre à jour un compteur', () => { expect(label.textContent).toBe('Vous avez cliqué 0 fois'); expect(document.title).toBe('Vous avez cliqué 0 fois'); - // Tester un second rendu et l'appel à componentDidUpdate + // Teste un second affichage et l'appel à componentDidUpdate act(() => { button.dispatchEvent(new MouseEvent('click', {bubbles: true})); }); @@ -122,7 +122,7 @@ it('peut faire le rendu et mettre à jour un compteur', () => { }); ``` -N'oubliez pas que l'émission d'événements DOM ne fonctionne que lorsque le conteneur DOM a été ajouté au `document`. Vous pouvez utiliser un utilitaire comme [`react-testing-library`](https://github.com/kentcdodds/react-testing-library) afin de réduire le volume de code récurent. +N'oubliez pas que l'émission d'événements DOM ne fonctionne que lorsque le conteneur DOM a été ajouté au `document`. Vous pouvez utiliser un utilitaire comme [`react-testing-library`](https://github.com/kentcdodds/react-testing-library) afin de réduire le volume de code générique. * * * @@ -135,11 +135,11 @@ mockComponent( ) ``` -Cette méthode prend un module de composant bouchonné et lui ajoute des méthodes utiles pour lui permettre d'être utilisé comme un composant React factice. Plutôt que de réaliser un rendu classique, le composant va simplement devenir une balise `
` (ou tout autre balise si `mockTagName` est renseigné) contenant les enfants qui lui sont fournis. +Cette méthode prend un module de composant simulé et lui ajoute des méthodes utiles pour lui permettre d'être utilisé comme un composant React factice. Plutôt que de réaliser un rendu classique, le composant va simplement devenir une balise `
` (ou tout autre balise si `mockTagName` est renseigné) contenant les enfants qui lui sont fournis. > Remarque : > -> `mockComponent()` est une API obsolète. Nous recommandons plutôt l'usage du [rendu superficiel](/docs/test-utils.html#shallow-rendering) ou de [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock). +> `mockComponent()` est une API obsolète. Nous recommandons plutôt l'usage du [rendu superficiel](docs/shallow-renderer.html) ou de [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock). * * * @@ -182,7 +182,7 @@ Renvoie `true` si `instance` est un composant DOM (tel que `
` ou ``). isCompositeComponent(instance) ``` -Renvoie `true` si `instance` est un composant défini par l'utilisateur, telle qu'une classe ou une fonction. +Renvoie `true` si `instance` est un composant défini par l'utilisateur, via une classe ou une fonction. * * * @@ -208,7 +208,7 @@ findAllInRenderedTree( ) ``` -Traverse tous les componsants présents dans `tree` et conserve les composants pour lesquels `test(component)` renvoie `true`. Ce n'est guère utile en soi, mais cela sert de base à d'autres utilitaires de test. +Parcourt tous les composants présents dans `tree` en ne retenant que les composants pour lesquels `test(component)` renvoie `true`. Ce n'est guère utile en soi, mais cela sert de base à d'autres utilitaires de test. * * * @@ -221,7 +221,7 @@ scryRenderedDOMComponentsWithClass( ) ``` -Trouve tous les éléments DOM des composants de l'arbre de rendu qui sont des composants DOM dont la classe correspond à `className`. +Trouve tous les éléments DOM des composants de l'arbre de rendu qui sont des composants DOM dont la classe CSS correspond à `className`. * * * @@ -234,7 +234,7 @@ findRenderedDOMComponentWithClass( ) ``` -Fonctionne comme [`scryRenderedDOMComponentsWithClass()`](#scryrendereddomcomponentswithclass), mais cette méthode s'attend à ne trouver qu'un seul résultat qu'elle renverra. Si elle trouve un nombre d'éléments différent de un, elle lancera une exception . +Fonctionne comme [`scryRenderedDOMComponentsWithClass()`](#scryrendereddomcomponentswithclass), mais cette méthode s'attend à ne trouver qu'un seul résultat qu'elle renverra. Si elle trouve un nombre d'éléments différent de un, elle lèvera une exception . * * * @@ -260,7 +260,7 @@ findRenderedDOMComponentWithTag( ) ``` -Fonctionne comme [`scryRenderedDOMComponentsWithTag()`](#scryrendereddomcomponentswithtag), mais cette méthode s'attend à ne trouver qu'un seul résultat qu'elle renverra. Si elle trouve un nombre d'éléments différent de un, elle lancera une exception. +Fonctionne comme [`scryRenderedDOMComponentsWithTag()`](#scryrendereddomcomponentswithtag), mais cette méthode s'attend à ne trouver qu'un seul résultat qu'elle renverra. Si elle trouve un nombre d'éléments différent de un, elle lèvera une exception. * * * @@ -273,7 +273,7 @@ scryRenderedComponentsWithType( ) ``` -Trouve toutes les instances des composants dont le type correspond à `componentClass`. +Trouve toutes les instances des composants dont le type est `componentClass`. * * * @@ -286,7 +286,7 @@ findRenderedComponentWithType( ) ``` -Fonctionne comme [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype), mais cette méthode s'attend à ne trouver qu'un seul résultat qu'elle renverra. Si elle trouve un nombre d'éléments différent de un, elle lancera une exception. +Fonctionne comme [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype), mais cette méthode s'attend à ne trouver qu'un seul résultat qu'elle renverra. Si elle trouve un nombre d'éléments différent de un, elle lèvera une exception. *** @@ -305,7 +305,7 @@ ReactDOM.render(element, domContainer); > Remarque : > -> Vous aurez besoin d'avoir `window`, `window.document` et `window.document.createElement` disponibles globalement **préalablement** à votre import de `React`. Autrement, React pensera qu'il ne peut accéder au DOM, et des méthodes telles que `setState` ne fonctionneront pas. +> Vous aurez besoin d'avoir `window`, `window.document` et `window.document.createElement` disponibles globalement **avant** votre import de `React`. Dans le cas contraire, React pensera qu'il ne peut accéder au DOM, et des méthodes telles que `setState` ne fonctionneront pas. * * * @@ -320,7 +320,7 @@ Simulate.{eventName}( ) ``` -Simule l'envoi d'un événement sur un nœud du DOM avec les données optionnelles `eventData`. +Simule l'envoi d'un événement sur un nœud du DOM avec des données optionnelles dans `eventData`. `Simulate` dispose d'une méthode pour [chaque événement que React comprend](/docs/events.html#supported-events). @@ -344,6 +344,6 @@ ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13}); > Remarque : > -> Vous devrez fournir toute les propriétés dédiées aux événements que vous utilisez dans votre composant (par exemple keyCode, which, etc...) puisque React ne les créera pas pour vous. +> Vous devrez fournir toute les propriétés dédiées aux événements que vous utilisez dans votre composant (par exemple keyCode, which, etc.) car React ne les créera pas pour vous. * * * From b0ec053f4f9ff18b7af705bcf29bed0a5a94b5c0 Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Thu, 28 Feb 2019 14:21:30 +0100 Subject: [PATCH 8/8] Final tweaks --- content/docs/addons-test-utils.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index 6144b9511..9638bc1fc 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -19,7 +19,7 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 avec npm > Remarque : > -> Nous vous conseillons d’utiliser [`react-testing-library`](https://git.io/react-testing-library). Cette bibliothèque est conçue pour permettre et encourager l'écriture de tests qui utilisent vos composants à la manière des utilisateurs finaux. +> Nous vous conseillons d’utiliser [`react-testing-library`](https://git.io/react-testing-library). Cette bibliothèque est conçue pour encourager l'écriture de tests utilisant vos composants de façon similaire aux utilisateurs finaux. > > Par ailleurs, Airbnb propose un utilitaire de test appelé [Enzyme](http://airbnb.io/enzyme/), qui permet de facilement exprimer des assertions, manipuler vos composants React et en explorer le résultat. @@ -135,11 +135,11 @@ mockComponent( ) ``` -Cette méthode prend un module de composant simulé et lui ajoute des méthodes utiles pour lui permettre d'être utilisé comme un composant React factice. Plutôt que de réaliser un rendu classique, le composant va simplement devenir une balise `
` (ou tout autre balise si `mockTagName` est renseigné) contenant les enfants qui lui sont fournis. +Cette méthode prend un module de composant simulé et lui ajoute des méthodes utiles pour lui permettre d'être utilisé comme un composant React factice. Plutôt que de réaliser un rendu classique, le composant va simplement devenir une balise `
` (ou toute autre balise si `mockTagName` est renseigné) contenant les enfants qui lui sont fournis. > Remarque : > -> `mockComponent()` est une API obsolète. Nous recommandons plutôt l'usage du [rendu superficiel](docs/shallow-renderer.html) ou de [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock). +> `mockComponent()` est une API obsolète. Nous recommandons plutôt l'usage du [rendu superficiel](/docs/shallow-renderer.html) ou de [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock). * * * @@ -208,7 +208,7 @@ findAllInRenderedTree( ) ``` -Parcourt tous les composants présents dans `tree` en ne retenant que les composants pour lesquels `test(component)` renvoie `true`. Ce n'est guère utile en soi, mais cela sert de base à d'autres utilitaires de test. +Parcourt tous les composants présents dans `tree` en ne retenant que les composants pour lesquels `test(component)` renvoie `true`. Ce n'est guère utile en soi, mais ça sert de base à d'autres utilitaires de test. * * * @@ -234,7 +234,7 @@ findRenderedDOMComponentWithClass( ) ``` -Fonctionne comme [`scryRenderedDOMComponentsWithClass()`](#scryrendereddomcomponentswithclass), mais cette méthode s'attend à ne trouver qu'un seul résultat qu'elle renverra. Si elle trouve un nombre d'éléments différent de un, elle lèvera une exception . +Fonctionne comme [`scryRenderedDOMComponentsWithClass()`](#scryrendereddomcomponentswithclass), mais cette méthode s'attend à ne trouver qu'un seul résultat, qu'elle renverra. Si elle trouve un nombre d'éléments différent de un, elle lèvera une exception . * * * @@ -260,7 +260,7 @@ findRenderedDOMComponentWithTag( ) ``` -Fonctionne comme [`scryRenderedDOMComponentsWithTag()`](#scryrendereddomcomponentswithtag), mais cette méthode s'attend à ne trouver qu'un seul résultat qu'elle renverra. Si elle trouve un nombre d'éléments différent de un, elle lèvera une exception. +Fonctionne comme [`scryRenderedDOMComponentsWithTag()`](#scryrendereddomcomponentswithtag), mais cette méthode s'attend à ne trouver qu'un seul résultat, qu'elle renverra. Si elle trouve un nombre d'éléments différent de un, elle lèvera une exception. * * * @@ -286,7 +286,7 @@ findRenderedComponentWithType( ) ``` -Fonctionne comme [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype), mais cette méthode s'attend à ne trouver qu'un seul résultat qu'elle renverra. Si elle trouve un nombre d'éléments différent de un, elle lèvera une exception. +Fonctionne comme [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype), mais cette méthode s'attend à ne trouver qu'un seul résultat, qu'elle renverra. Si elle trouve un nombre d'éléments différent de un, elle lèvera une exception. ***