add french version

src/.vuepress/config.js

@@ -66,6 +66,14 @@ module.exports = {
       lang: 'ko',
       title: 'Vue 테스팅 핸드북',
     },
+    '/fr/': {
+      lang: 'fr-FR',
+      title: 'Manuel de test de Vue',
+    },
+    '/v3/fr/': {
+      lang: 'fr-BE',
+      title: 'Manuel de test de Vue3'
+    }
   },
   themeConfig: {
     repo: 'lmiller1990/vue-testing-handbook',
@@ -139,6 +147,74 @@ module.exports = {
           ['/v3/jest-mocking-modules', 'Jest - mocking modules'],
         ],
       },
+      '/fr/': {
+        label: 'Français',
+        selectText: 'Langues',
+        lastUpdated: 'Dernière mise à jour',
+        editLinkText: 'Modifier cette page sur GitHub',
+        sidebar: [
+          ['/fr/', 'Bienvenue'],
+          ['/fr/setting-up-for-tdd', 'Mise en place de la TDD'],
+          ['/fr/rendering-a-component', 'Composants de Rendu'],
+          ['/fr/components-with-props', 'Tester les Props'],
+          ['/fr/computed-properties', 'Propriétés Calculées'],
+          ['/fr/simulating-user-input', 'Simulation de l\'entrée utilisateur'],
+          ['/fr/testing-emitted-events', 'Test des événements émis'],
+          ['/fr/mocking-global-objects', 'Objets globaux de simulation'],
+          ['/fr/stubbing-components', 'Stubbing components'],
+          [
+            '/fr/finding-elements-and-components',
+            'Recherche l\'éléments et de composants',
+          ],
+          ['/fr/testing-vuex', 'Tester Vuex'],
+          ['/fr/vuex-mutations', 'Vuex - Mutations'],
+          ['/fr/vuex-actions', 'Vuex - Actions'],
+          ['/fr/vuex-getters', 'Vuex - Getters'],
+          ['/fr/vuex-in-components', 'Vuex dans les composants - $state et getters'],
+          [
+            '/fr/vuex-in-components-mutations-and-actions',
+            'Vuex dans les composants - mutations and actions',
+          ],
+          ['/fr/vue-router', 'Vue Router'],
+          ['/fr/composition-api', 'Composition API'],
+          ['/fr/reducing-boilerplate-in-tests', 'Réduire le " Boilerplate "'],
+          ['/fr/jest-mocking-modules', 'Jest - modules de simulation'],
+        ],
+      },
+      '/v3/fr/': {
+        label: 'v3',
+        selectText: 'Langues',
+        lastUpdated: 'Dernière mise à jour',
+        editLinkText: 'Modifier cette page sur GitHub',
+        sidebar: [
+          ['/v3/fr/', 'Bienvenue'],
+          ['/v3/fr/setting-up-for-tdd', 'Mise en place de la TDD'],
+          ['/v3/fr/rendering-a-component', 'Composants de rendu'],
+          ['/v3/fr/components-with-props', 'Tester les Props'],
+          ['/v3/fr/computed-properties', 'Propriétés calculées'],
+          ['/v3/fr/simulating-user-input', 'Simulation de l\'entrée utilisateur'],
+          ['/v3/fr/testing-emitted-events', 'Test des événements émis'],
+          ['/v3/fr/mocking-global-objects', 'Objets globaux de simulation'],
+          ['/v3/fr/stubbing-components', 'Stubbing components'],
+          [
+            '/v3/fr/finding-elements-and-components',
+            'Recherche d\'éléments et de composants',
+          ],
+          ['/v3/fr/testing-vuex', 'Tester Vuex'],
+          ['/v3/fr/vuex-mutations', 'Vuex - Mutations'],
+          ['/v3/fr/vuex-actions', 'Vuex - Actions'],
+          ['/v3/fr/vuex-getters', 'Vuex - Getters'],
+          ['/v3/fr/vuex-in-components', 'Vuex dans les composants - $state and getters'],
+          [
+            '/v3/fr/vuex-in-components-mutations-and-actions',
+            'Vuex dans les composants - mutations and actions',
+          ],
+          ['/v3/fr/vue-router', 'Vue Router'],
+          ['/v3/fr/composition-api', 'Composition API'],
+          ['/v3/fr/reducing-boilerplate-in-tests', 'Réduire le " Boilerplate "'],
+          ['/v3/fr/jest-mocking-modules', 'Jest - modules de simulation'],
+        ],
+      },
       '/ja/': {
         label: '日本語',
         selectText: '言語',

src/fr/README.md

@@ -0,0 +1,40 @@
+:::tip Ce livre est écrit pour Vue.js 2 et Vue Test Utils v1.
+Vous trouverez la version Vue.js 3 [ici](/v3/fr).
+:::
+
+## Qu'est-ce que ce guide ?
+
+Bienvenue dans le manuel de test Vue.js !
+
+
+Il s'agit d'un collection court ciblé sur la façon de tester les composants de Vue Il utilise `vue-test-utils`, la bibliothèque officielle pour tester les composant de Vue et Jest un framework de test moderne. Il couvre l'API `vue-test-utils` ainsi que les meilleures pratiques pour tester les composants.  
+
+Chaque section est indépendante des autres. Nous commençons par créer un environnement avec `vue-cli` et écrire un simple test. Ensuite, nous discuterons des deux possibilités de rendre un composant par `mount` et `shallowMount`. Les différences seront démontrées et expliquées.
+
+Ensuite, nous verrons comment tester différents scénarios qui se présentent quand nous testerons les composants, comme par exemple :
+
+- recevoir les "props"
+- utiliser les propriétés "computed"
+- renvoyer d'autres "composant"
+- émettre des événements
+
+Et ainsi de suite. Nous passerons ensuite à des cas plus intéressants, tels que :
+
+-  les meilleurs pratiques pour tester Vuex (dans les composants et de manière indépendante)
+- tester Vue router
+- testing involving third party components
+
+Nous étudierons également comment utiliser les API de Jest pour rendre nos tests plus robustes, par exemple :
+
+- les réponses mocking API
+- les modules mocking et spying
+- utiliser snapshots
+
+## Lectures complémentaires
+
+Parmi les autres ressources utiles, citons :
+
+- [La doc officiel](https://vue-test-utils.vuejs.org/)
+- [Livre](https://www.manning.com/books/testing-vue-js-applications) écrit par l'un des auteurs de `vue-test-utils` (en anglais)
+- Mon [Vue.js 3 + Unit Testing Course](https://vuejs-course.com) (début 2002, les premiers modules en avant-première/révision disponibles)
+- [This awesome course on VueSchool](https://vueschool.io/courses/learn-how-to-test-vuejs-components?friend=vth) par plusieurs contributeurs de l'équipe de Vue (en anglais)

src/fr/components-with-props.md

@@ -0,0 +1,207 @@
+:::tip Ce livre est écrit pour Vue.js 2 et Vue Test Utils v1.
+Vous trouverez la version Vue.js 3 [ici](/v3/fr).
+:::
+
+## Paramétrez les props avec propsData
+
+`propsData` peut être utilisé aussi bien avec `mount` que `shallowMount`. Il est souvent utilisé pour tester les composants qui reçoivent les props de leur composant parent.
+
+`propsData` est passé en deuxième argument de `shallowMount` or `mount`, sous la forme suivante :
+
+```js
+const wrapper = shallowMount(Foo, {
+  propsData: {
+    foo: 'bar'
+  }
+})
+```
+
+## Création d'un composant
+
+Créez un simple composant `<SubmitButton>` qui a deux `props`: `msg` et `isAdmin`. En fonction de la valeur du prop `isAdmin` le `<span>` aura l'un des deux états :
+
+* `Not Authorized` si `isAdmin` est faux (ou non passé comme prop).
+* `Admin Privileges` si `isAdmin` est vrai.
+
+```html
+<template>
+  <div>
+    <span v-if="isAdmin">Admin Privileges</span>
+    <span v-else>Not Authorized</span>
+    <button>
+      {{ msg }}
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SubmitButton",
+
+  props: {
+    msg: {
+      type: String,
+      required: true
+    },
+    isAdmin: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+```
+
+## Le premier test
+
+Nous ferons une affirmation sur le message dans le cas où l'utilisateur n'a pas les privilèges administrateur.
+
+```js
+import { mount } from '@vue/test-utils'
+import SubmitButton from '@/components/SubmitButton.vue'
+
+describe('SubmitButton.vue', () => {
+  it("displays a non authorized message", () => {
+    const msg = "submit"
+    const wrapper = mount(SubmitButton,{
+      propsData: {
+        msg: msg
+      }
+    })
+
+    console.log(wrapper.html())
+
+    expect(wrapper.find("span").text()).toBe("Not Authorized")
+    expect(wrapper.find("button").text()).toBe("submit")
+  })
+})
+```
+
+Lancez le test avec `yarn test:unit`. Le résultat est :
+
+```
+PASS  tests/unit/SubmitButton.spec.js
+  SubmitButton.vue
+    ✓ displays a non authorized message (15ms)
+```
+
+Le résultat de `console.log(wrapper.html())` va aussi afficher :
+
+```html
+<div>
+  <span>Not Authorized</span>
+  <button>
+    submit
+  </button>
+</div>
+```
+
+Nous pouvons voir que le prop `msg` est traité et que le résultat est correctement rendu
+
+## Le deuxième test
+
+Faisons une autre affirmation dans l'autre état possible, quand `isAdmin` est `true` :
+
+```js
+import { mount } from '@vue/test-utils'
+import SubmitButton from '@/components/SubmitButton.vue'
+
+describe('SubmitButton.vue', () => {
+  it('displays a admin privileges message', () => {
+    const msg = "submit"
+    const isAdmin = true
+    const wrapper = mount(SubmitButton,{
+      propsData: {
+        msg,
+        isAdmin
+      }
+    })
+
+    console.log(wrapper.html())
+
+    expect(wrapper.find("span").text()).toBe("Admin Privileges")
+    expect(wrapper.find("button").text()).toBe("submit")
+  })
+})
+```
+
+Lancé le test avec `yarn test:unit` et vérifier  les résultats :
+
+```shell
+PASS  tests/unit/SubmitButton.spec.js
+  SubmitButton.vue
+    ✓ displays a admin privileges message (4ms)
+```
+
+Le résultat de `console.log(wrapper.html())` va aussi s'afficher
+
+```html
+<div>
+  <span>Admin Privileges</span>
+  <button>
+    submit
+  </button>
+</div>
+```
+Nous pouvons voir que le prop `isAdmin` a été utilisé pour renvoyer le correct `<span>` élément.
+
+## Refactoriser les tests
+
+Refactorisons le test en adhérant au principe de "Ne Pas Répétez" (Don't Repeat Yourself (DRY)). Comme tous les tests sont réussis, nous pouvons refactoriser en toute confiance. Tant que tous les tests sont réussis après la refactorisation, nous pouvons être sûrs de n'avoir rien cassé.
+
+## Refactoriser avec une fonction usine
+
+Dans les deux tests, nous appelons `mount` puis nous lui passons l’objet `propsData` similaire. Nous pouvons refactoriser en utilisant une fonction usine. Une fonction usine est simplement une fonction qui nous renvoie un objet (elle fait des objets d’où le nom fonction usine).
+
+```js
+const msg = "submit"
+const factory = (propsData) => {
+  return mount(SubmitButton, {
+    propsData: {
+      msg,
+      ...propsData
+    }
+  })
+}
+```
+Ce qui précède est une fonction qui va " monter " un composant `SubmitButton`. Nous pouvons faire passer n’importe quel props pour changer comme premier argument à `factory`. DRY (Ne Pas Répétez) le test avec la fonction usine.
+
+```js
+describe("SubmitButton", () => {
+  describe("does not have admin privileges", ()=> {
+    it("renders a message", () => {
+      const wrapper = factory()
+
+      expect(wrapper.find("span").text()).toBe("Not Authorized")
+      expect(wrapper.find("button").text()).toBe("submit")
+    })
+  })
+
+  describe("has admin privileges", ()=> {
+    it("renders a message", () => {
+      const wrapper = factory({ isAdmin: true })
+
+      expect(wrapper.find("span").text()).toBe("Admin Privileges")
+      expect(wrapper.find("button").text()).toBe("submit")
+    })
+  })
+})
+```
+Recommençons les tests. Tout passe encore
+
+```sh
+PASS  tests/unit/SubmitButton.spec.js
+ SubmitButton
+   has admin privileges
+     ✓ renders a message (26ms)
+   does not have admin privileges
+     ✓ renders a message (3ms)
+```
+
+Puisque nous avons une suite de test réussi, nous pouvons maintenant facilement et en tout confiance refactoriser
+
+## Conclusion
+
+- En passant `propsData` lors d'un montage d'un composant, nous pouvons définir les `props` à utiliser dans le test.
+- Les fonctions usines peuvent être utilisées pour DRY (Ne pas Répétez) les tests
+- Au lieu de `propsData`, vous pouvez aussi utiliser [`setProps`](https://vue-test-utils.vuejs.org/api/wrapper-array/#setprops-props) pour définir les valeurs des props pendant les tests.