Guide: dom-events.md

docs/en/guides/README.md

@@ -2,7 +2,7 @@
 
 * [Commencer](./getting-started.md)
 * [Astuces](./common-tips.md)
-* [Mouse, Key and other DOM Events (EN)](guides/dom-events.md)
+* [Mouse, Key and other DOM Events (EN)](./dom-events.md)
 * [Choisir un lanceur de tests](./choosing-a-test-runner.md)
 * [Utiliser avec Jest](./using-with-jest.md)
 * [Tester des composants monofichiers avec Jest](./testing-SFCs-with-jest.md)

docs/en/guides/dom-events.md

@@ -1,16 +1,17 @@
-# Testing Key, Mouse and other DOM events
+# Tester le clavier, la souris et les autres événements DOM
 
-## Trigger events
+## Déclencheur d'événements
 
-The `Wrapper` expose a `trigger` method. It can be used to trigger DOM events.
+
+Le `Wrapper` expose une méthode `trigger` method. Elle peut être utilisée pour déclencher des événements du DOM.
 
 ```js
 const wrapper = mount(MyButton)
 
 wrapper.trigger('click')
 ```
 
-You should be aware, that find returns a wrapper as well. Assuming `MyComponent` contains a button, the following code clicks the button.
+Vous devez être au courant que la méthode find retourne un wrapper aussi. Partant du principe que `MyComponent` contient un bouton, le code suivant clique sur le bouton.
 
 ```js
 const wrapper = mount(MyComponent)
@@ -20,9 +21,9 @@ wrapper.find('button').trigger('click')
 
 ## Options
 
-The trigger method takes an optional `options` object. The properties in the `options` object are added to the Event.
+La méthode trigger prend en paramètre optionnel l'objet `options`. Les propriétés de l'objet `options` sont ajoutées à l'événement Event.
 
-You can run preventDefault on the event by passing `preventDefault: true` in `options`.
+Vous pouvez utiliser preventDefault sur l'événement en passant `preventDefault: true` dans le paramètre `options`.
 
 ```js
 const wrapper = mount(MyButton)
@@ -31,31 +32,31 @@ wrapper.trigger('click', {preventDefault: true})
 ```
 
 
-## Mouse Click Example
+## Exemple de clic de souris
 
-**Component under test**
+**Componsant à tester**
 
 ```js
 <template>
 <div>
-  <button class="yes" @click="callYes">Yes</button>
-  <button class="no" @click="callNo">No</button>
+  <button class="oui" @click="callOui">Oui</button>
+  <button class="non" @click="callNon">Non</button>
 </div>
 </template>
 <script>
 export default {
-  name: 'YesNoComponent',
+  name: 'OuiNonComponent',
   props: {
     callMe: {
       type: Function
     }
   },
   methods: {
-    callYes() {
-      this.callMe('yes')
+    callOui() {
+      this.callMe('oui')
     },
-    callNo() {
-      this.callMe('no')
+    callNon() {
+      this.callMe('non')
     }
   }
 }
@@ -66,34 +67,34 @@ export default {
 **Test**
 
 ```js
-import YesNoComponent from '@/components/YesNoComponent'
+import OuiNonComponent from '@/components/OuiNonComponent'
 import { mount } from 'vue-test-utils'
 import sinon from 'sinon'
 
-describe('Click event', () => {
-  it('Click on yes button calls our method with argument "yes"', () => {
+describe('Evenement click', () => {
+  it('Cliquer sur le bouton oui appelle notre méthode avec l argument "oui"', () => {
     const spy = sinon.spy()
-    const wrapper = mount(YesNoComponent, {
+    const wrapper = mount(OuiNonComponent, {
       propsData: {
         callMe: spy
       }
     })
-    wrapper.find('button.yes').trigger('click')
+    wrapper.find('button.oui').trigger('click')
 
-    spy.should.have.been.calledWith('yes')
+    spy.should.have.been.calledWith('oui')
   })
 })
 ```
 
-## Keyboard Example
+## Example de test clavier
 
-**Component under test**
+**Composant à tester**
 
-This component allows to increment/decrement the quantity using various keys.
+Ce composant permet d'incrémenter/décrémenter la quantité en utilisant différentes touches.
 
 ```js
 <template>
-<input type="text" @keydown.prevent="onKeydown" v-model="quantity" />
+<input type="text" @keydown.prevent="onKeydown" v-model="quantite" />
 </template>
 <script>
 const KEY_DOWN = 40
@@ -104,36 +105,36 @@ const CHAR_A = 65
 export default {
   data() {
     return {
-      quantity: 0
+      quantite: 0
     }
   },
   methods: {
-    increment() {
-      this.quantity += 1
+    incrementer() {
+      this.quantite += 1
     },
-    decrement() {
-      this.quantity -= 1
+    decrementer() {
+      this.quantite -= 1
     },
-    clear() {
-      this.quantity = 0
+    nettoyer() {
+      this.quantite = 0
     },
     onKeydown(e) {
       if (e.keyCode === ESCAPE) {
-        this.clear()
+        this.nettoyer()
       }
       if (e.keyCode === KEY_DOWN) {
-        this.decrement()
+        this.decrementer()
       }
       if (e.keyCode === KEY_UP) {
-        this.increment()
+        this.incrementer()
       }
       if (e.which === CHAR_A) {
-        this.quantity = 13
+        this.quantite = 13
       }
     }
   },
   watch: {
-    quantity: function (newValue) {
+    quantite: function (newValue) {
       this.$emit('input', newValue)
     }
   }
@@ -145,52 +146,52 @@ export default {
 **Test**
 
 ```js
-import QuantityComponent from '@/components/QuantityComponent'
+import QuantiteComponent from '@/components/QuantiteComponent'
 import { mount } from 'vue-test-utils'
 
-describe('Key event tests', () => {
-  it('Quantity is zero by default', () => {
-    const wrapper = mount(QuantityComponent)
-    expect(wrapper.vm.quantity).to.equal(0)
+describe('Tests événement clavier', () => {
+  it('La quantité est zéro par défaut', () => {
+    const wrapper = mount(QuantiteComponent)
+    expect(wrapper.vm.quantite).to.equal(0)
   })
 
-  it('Cursor up sets quantity to 1', () => {
-    const wrapper = mount(QuantityComponent)
+  it('La flèche du haut positionne la quantité à 1', () => {
+    const wrapper = mount(QuantiteComponent)
     wrapper.trigger('keydown.up')
-    expect(wrapper.vm.quantity).to.equal(1)
+    expect(wrapper.vm.quantite).to.equal(1)
   })
 
-  it('Cursor down reduce quantity by 1', () => {
-    const wrapper = mount(QuantityComponent)
-    wrapper.vm.quantity = 5
+  it('La flèche du bas réduit la quantité de 1', () => {
+    const wrapper = mount(QuantiteComponent)
+    wrapper.vm.quantite = 5
     wrapper.trigger('keydown.down')
-    expect(wrapper.vm.quantity).to.equal(4)
+    expect(wrapper.vm.quantite).to.equal(4)
   })
 
-  it('Escape sets quantity to 0', () => {
-    const wrapper = mount(QuantityComponent)
-    wrapper.vm.quantity = 5
+  it('La touche Echap positionne la quantité à 0', () => {
+    const wrapper = mount(QuantiteComponent)
+    wrapper.vm.quantite = 5
     wrapper.trigger('keydown.esc')
-    expect(wrapper.vm.quantity).to.equal(0)
+    expect(wrapper.vm.quantite).to.equal(0)
   })
 
-  it('Magic character "a" sets quantity to 13', () => {
-    const wrapper = mount(QuantityComponent)
+  it('Le caractère magique "a" positionne la quantité à 13', () => {
+    const wrapper = mount(QuantiteComponent)
     wrapper.trigger('keydown', {
       which: 65
     })
-    expect(wrapper.vm.quantity).to.equal(13)
+    expect(wrapper.vm.quantite).to.equal(13)
   })
 })
 
 ```
 
 **Limitations**
 
-A key name after the dot `keydown.up` is translated to a `keyCode`. This is supported for the following names:
+Un nom de touche après le point `keydown.up` est traduit vers un `keyCode`. Cela est supporté pour les noms suivant:
 
 * enter, tab, delete, esc, space, up, down, left, right
 
 ## Important
 
-vue-test-utils triggers event synchronously. Consequently, `vue.nextTick` is not required.
+vue-test-utils déclenche les événements de façon synchrone. Par conséquent, `vue.nextTick` n'est pas requis.