diff --git a/docs/fr/guide/essentials/conditional-rendering.md b/docs/fr/guide/essentials/conditional-rendering.md index cc8d58e69..c488db4e0 100644 --- a/docs/fr/guide/essentials/conditional-rendering.md +++ b/docs/fr/guide/essentials/conditional-rendering.md @@ -38,13 +38,13 @@ Nous pouvons vérifier le contenu du lien de profil en utilisant `get()` : ```js test('affiche le lien du profil', () => { - const wrapper = mount(Nav); + const wrapper = mount(Nav) // Ici, nous vérifions implicitement que l'élément #profile existe. - const profileLink = wrapper.get('#profile'); + const profileLink = wrapper.get('#profile') - expect(profileLink.text()).toEqual('Mon Profil'); -}); + expect(profileLink.text()).toEqual('Mon Profil') +}) ``` Si `get()` ne retourne pas un élément correspondant au sélecteur, il enverra une erreur et votre test échouera. `get()` retourne un `DOMWrapper` si un élément est trouvé. Un `DOMWrapper` est une fine enveloppe autour de l'élément DOM qui implémente l'[API Wrapper](/fr/api/#Methodes-de-Wrapper) - c'est pourquoi nous pouvons exécuter `profileLink.text()` et accéder au texte. Vous pouvez accéder à l'élément brut en utilisant la propriété `element`. @@ -58,12 +58,12 @@ Il existe un autre type d'enveloppe - un `VueWrapper` - qui est retourné par [` Pour ce faire, nous utilisons plutôt `find()` et `exists()`. Le prochain test vérifie que si `admin` est `false` (ce qui est par défaut), le lien administrateur ne sera pas présent : ```js -test('n\'affiche pas le lien admin', () => { - const wrapper = mount(Nav); +test("n'affiche pas le lien admin", () => { + const wrapper = mount(Nav) // Utiliser `wrapper.get` renverrait une erreur et ferait échouer le test. - expect(wrapper.find('#admin').exists()).toBe(false); -}); + expect(wrapper.find('#admin').exists()).toBe(false) +}) ``` Remarquez que nous appelons `exists()` sur la valeur retournée par `.find()`. `find()`, comme `mount()`, retourne également un `wrapper`. `mount()` a quelques méthodes supplémentaires, car il enveloppe un composant Vue, et `find()` ne retourne qu'un nœud DOM standard, mais de nombreuses méthodes sont partagées entre les deux. D'autres méthodes incluent `classes()` qui retournera les classes qu'un nœud DOM a, ou encore `trigger()`, qui simulera une interaction utilisateur. Vous pouvez trouver une liste des méthodes prises en charge [ici](../../api/#Methodes-de-Wrapper). @@ -108,15 +108,14 @@ Les tests pour les scénarios utilisant `v-show` ressembleront à ceci : ```js test("n'affiche pas le menu déroulant de l'utilisateur", () => { - const wrapper = mount(Nav); + const wrapper = mount(Nav) - expect(wrapper.get('#user-dropdown').isVisible()).toBe(false); -}); + expect(wrapper.get('#user-dropdown').isVisible()).toBe(false) +}) ``` ## Conclusion - Utilisez `find()` avec `exists()` pour vérifier si un élément est dans le DOM. - Utilisez `get()` si vous vous attendez à ce que l'élément soit dans le DOM. -- L'option de `mount()` `data` peut être utilisée pour définir des valeurs par défaut sur un composant. - Utilisez `get()` avec `isVisible()` pour vérifier la visibilité d'un élément qui est dans le DOM. diff --git a/docs/guide/essentials/conditional-rendering.md b/docs/guide/essentials/conditional-rendering.md index 9512fd21f..47c0e8285 100644 --- a/docs/guide/essentials/conditional-rendering.md +++ b/docs/guide/essentials/conditional-rendering.md @@ -119,5 +119,4 @@ test('does not show the user dropdown', () => { - Use `find()` along with `exists()` to verify whether an element is in the DOM. - Use `get()` if you expect the element to be in the DOM. -- The `data` mounting option can be used to set default values on a component. - Use `get()` with `isVisible()` to verify the visibility of an element that is in the DOM diff --git a/docs/zh/guide/essentials/conditional-rendering.md b/docs/zh/guide/essentials/conditional-rendering.md index 0162fd9c4..70bd5c8e7 100644 --- a/docs/zh/guide/essentials/conditional-rendering.md +++ b/docs/zh/guide/essentials/conditional-rendering.md @@ -118,5 +118,4 @@ test('does not show the user dropdown', () => { - 使用 `find()` 结合 `exists()` 验证元素是否在于 DOM 中。 - 如果你确认元素存在于 DOM 中,就使用 `get()`。 -- 可以使用 `data` 挂载选项设置组件的默认值。 - 使用 `get()` 和 `isVisible()` 验证在 DOM 中元素的可见性。