From 1d8e1ee4d501e4f58c62a62b5c51ca1736728b25 Mon Sep 17 00:00:00 2001
From: Daniel Moya <danielmoyaleiva@gmail.com>
Date: Tue, 13 Feb 2024 17:12:46 +0100
Subject: [PATCH] docs: update highlights when mocking real router

---
 docs/fr/guide/advanced/vue-router.md | 10 +++++-----
 docs/guide/advanced/vue-router.md    | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/docs/fr/guide/advanced/vue-router.md b/docs/fr/guide/advanced/vue-router.md
index 13f67bcbd..479632b87 100644
--- a/docs/fr/guide/advanced/vue-router.md
+++ b/docs/fr/guide/advanced/vue-router.md
@@ -187,7 +187,7 @@ console.warn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:39
 
 Les composants `<router-link>` et `<router-view>` ne sont pas trouvés. Nous devons installer Vue Router&nbsp;! Comme Vue Router est un plugin, nous l'installons en utilisant l'option de `mount`&nbsp;: `global.plugins`&nbsp;:
 
-```js {10,11,12}
+```js {12,13,14}
 import { mount } from '@vue/test-utils';
 import { createRouter, createWebHistory } from 'vue-router';
 import { routes } from "@/router"; // Cet import devrait pointer vers votre fichier de configuration des routes.
@@ -218,7 +218,7 @@ Le `warning` n'est pas très explicite. En fait, cela est lié au fait que **Vue
 
 Vue Router fournit une fonction `isReady` qui nous informe lorsque le routeur est prêt. Nous pouvons alors l'`await` pour nous assurer que la navigation initiale a eu lieu.
 
-```js {11,12}
+```js {13,14}
 import { mount } from '@vue/test-utils';
 import { createRouter, createWebHistory } from 'vue-router';
 import { routes } from "@/router";
@@ -247,7 +247,7 @@ Le test passe enfin&nbsp;! Cela a été assez laborieux, mais désormais nous no
 
 Maintenant, allons sur `/posts` et assurons-nous que le routage fonctionne comme prévu&nbsp;:
 
-```js {19,20}
+```js {21,22}
 import { mount } from '@vue/test-utils';
 import { createRouter, createWebHistory } from 'vue-router';
 import { routes } from "@/router";
@@ -288,7 +288,7 @@ Une fois de plus, en raison de la nature asynchrone de Vue Router 4, nous devons
 
 Cependant, il n'y a pas de `hook` `hasNavigated` sur lequel nous pouvons `await`. Une alternative est d'utiliser la fonction `flushPromises` exportée de Vue Test Utils&nbsp;:
 
-```js {1,20}
+```js {1,22}
 import { mount, flushPromises } from '@vue/test-utils';
 import { createRouter, createWebHistory } from 'vue-router';
 import { routes } from "@/router";
@@ -317,7 +317,7 @@ test('routing', async () => {
 
 Cela passe. Super&nbsp;! Cependant, c'est très laborieux - et cela concerne une petite application triviale. C'est pour cette raison que l'utilisation d'un routeur simulé est une approche courante lors des tests de composants Vue avec Vue Test Utils. Si vous préférez continuer à utiliser un routeur réel, gardez à l'esprit que chaque test doit utiliser son propre instance du routeur de cette manière&nbsp;:
 
-```js {1,20}
+```js {1,22}
 import { mount, flushPromises } from '@vue/test-utils';
 import { createRouter, createWebHistory } from 'vue-router';
 import { routes } from "@/router";
diff --git a/docs/guide/advanced/vue-router.md b/docs/guide/advanced/vue-router.md
index 23a27d6ae..4cbbaa42c 100644
--- a/docs/guide/advanced/vue-router.md
+++ b/docs/guide/advanced/vue-router.md
@@ -187,7 +187,7 @@ console.warn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:39
 
 The `<router-link>` and `<router-view>` component are not found. We need to install Vue Router! Since Vue Router is a plugin, we install it using the `global.plugins` mounting option:
 
-```js {10,11,12}
+```js {12,13,14}
 import { mount } from '@vue/test-utils'
 import { createRouter, createWebHistory } from 'vue-router'
 import { routes } from "@/router" // This import should point to your routes file declared above
@@ -218,7 +218,7 @@ Although it's not entirely clear from the warning, it's related to the fact that
 
 Vue Router provides an `isReady` function that tell us when router is ready. We can then `await` it to ensure the initial navigation has happened.
 
-```js {11,12}
+```js {13,14}
 import { mount } from '@vue/test-utils'
 import { createRouter, createWebHistory } from 'vue-router'
 import { routes } from "@/router"
@@ -247,7 +247,7 @@ The test is now passing! It was quite a bit of work, but now we make sure the ap
 
 Now let's navigate to `/posts` and make sure the routing is working as expected:
 
-```js {19,20}
+```js {21,22}
 import { mount } from '@vue/test-utils'
 import { createRouter, createWebHistory } from 'vue-router'
 import { routes } from "@/router"
@@ -288,7 +288,7 @@ Again, due to Vue Router 4's new asynchronous nature, we need to `await` the rou
 
 In this case, however, there is no _hasNavigated_ hook we can await on. One alternative is to use the `flushPromises` function exported from Vue Test Utils:
 
-```js {1,20}
+```js {1,22}
 import { mount, flushPromises } from '@vue/test-utils'
 import { createRouter, createWebHistory } from 'vue-router'
 import { routes } from "@/router"
@@ -317,7 +317,7 @@ test('routing', async () => {
 
 It _finally_ passes. Great! This is all very manual, however - and this is for a tiny, trivial app. This is the reason using a mocked router is a common approach when testing Vue components using Vue Test Utils. In case you prefer to keep using a real router, keep in mind that each test should use it's own instance of the router like so:
 
-```js {1,20}
+```js {1,19}
 import { mount, flushPromises } from '@vue/test-utils'
 import { createRouter, createWebHistory } from 'vue-router'
 import { routes } from "@/router"