Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 0 additions & 25 deletions docs/fr/guide/essentials/conditional-rendering.md
Original file line number Diff line number Diff line change
Expand Up @@ -68,31 +68,6 @@ test('n\'affiche pas le lien admin', () => {

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).

## Utilisation de `data`

Le dernier test consiste à vérifier que le lien admin est rendu lorsque `admin` est à `true`. Il est par défaut à `false`, mais nous pouvons le surcharger en utilisant le deuxième argument de `mount()`. Les options de cette fonction sont [`disponibles ici`](../../api/#mount-options).

Pour `data`, nous utilisons l'option éponyme :

```js
test('affiche le lien admin', () => {
const wrapper = mount(Nav, {
data() {
return {
admin: true,
};
},
});

// Encore une fois, en utilisant `get()` nous vérifions implicitement que l'élément existe
expect(wrapper.get('#admin').text()).toEqual('Administration');
});
```

Si vous avez d'autres propriétés dans `data`, ne vous inquiétez pas - Vue Test Utils fusionnera les deux ensemble. Le champ `data` dans les options de `mount()` aura la priorité sur toutes les valeurs par défaut.

Pour découvrir quelles sont les autres options de `mount()`, consultez [`Passer des données aux Composants`](../essentials/passing-data.md) ou consultez les [`options de mount()`](../../api/#mount-options).

## Vérifier la visibilité des Éléments

Parfois, vous ne voulez que masquer/afficher un élément tout en le conservant dans le DOM. Vue propose `v-show` pour des scénarios de ce genre. (Vous retrouverez les différences entre `v-if` et `v-show` [ici](https://v3.vuejs.org/guide/conditional.html#v-if-vs-v-show)).
Expand Down
4 changes: 2 additions & 2 deletions docs/fr/guide/essentials/passing-data.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ Nous voulons réutiliser ce composant dans tous nos projets, chacun ayant des ex

Nous allons afficher une erreur si `password` est inférieur à `minLength`. Nous pouvons le faire en créant une `computed` nommée `error` et en la rendant de manière conditionnelle à l'aide de `v-if` :

```js
```vue
<!-- Password.vue -->
<script setup>
import { ref, computed } from 'vue'
Expand All @@ -44,7 +44,7 @@ const error = computed(() => {
}
return
})
<script>
</script>

<template>
<div>
Expand Down
26 changes: 0 additions & 26 deletions docs/guide/essentials/conditional-rendering.md
Original file line number Diff line number Diff line change
Expand Up @@ -69,32 +69,6 @@ test('does not render an admin link', () => {

Notice we are calling `exists()` on the value returned from `.find()`. `find()`, like `mount()`, also returns a `wrapper`. `mount()` has a few extra methods, because it's wrapping a Vue component, and `find()` only returns a regular DOM node, but many of the methods are shared between both. Some other methods include `classes()`, which gets the classes a DOM node has, and `trigger()` for simulating user interaction. You can find a list of methods supported [here](../../api/#Wrapper-methods).

## Using `data`

The final test is to assert that the admin link is rendered when `admin` is `true`. It's `false` by default, but we can override that using the second argument to `mount()`, the [`mounting options`](../../api/#mount).

For `data`, we use the aptly named `data` option:

```js
test('renders an admin link', () => {
const wrapper = mount(Nav, {
data() {
return {
admin: true
}
}
})

// Again, by using `get()` we are implicitly asserting that
// the element exists.
expect(wrapper.get('#admin').text()).toEqual('Admin')
})
```

If you have other properties in `data`, don't worry - Vue Test Utils will merge the two together. The `data` in the mounting options will take priority over any default values.

To learn what other mounting options exist, see [`Passing Data`](../essentials/passing-data.md) or see [`mounting options`](../../api/#mount).

## Checking Elements visibility

Sometimes you only want to hide/show an element while keeping it in the DOM. Vue offers `v-show` for scenarios as such. (You can check the differences between `v-if` and `v-show` [here](https://v3.vuejs.org/guide/conditional.html#v-if-vs-v-show)).
Expand Down
2 changes: 1 addition & 1 deletion docs/guide/essentials/passing-data.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const error = computed(() => {
}
return
})
<script>
</script>

<template>
<div>
Expand Down
25 changes: 0 additions & 25 deletions docs/zh/guide/essentials/conditional-rendering.md
Original file line number Diff line number Diff line change
Expand Up @@ -68,31 +68,6 @@ test('does not render an admin link', () => {

请注意,我们在 `.find()` 返回的值上调用了 `exists()`。`find()` 和 `mount()` 一样,也会返回一个 `wrapper`。`mount()` 有一些额外的方法,因为它包装的是 Vue 组件,而 `find()` 只返回普通的 DOM 节点,但它们之间有许多共享的方法。其他方法还包括 `classes()`,用于获取 DOM 节点的 class 属性,以及用于模拟用户交互的 `trigger()`。你可以在[这里](../../api/#Wrapper-methods)找到支持的方法列表。

## 使用 `data`

最后一个测试是断言当 `admin` 为 `true` 时,会渲染 admin 链接。它的默认值是 `false`,但我们可以使用 `mount()` 的第二个参数,即[挂载选项](../../api/#mount)来覆盖它。

对于 `data`,我们使用恰如其名的 `data` 选项:

```js
test('renders an admin link', () => {
const wrapper = mount(Nav, {
data() {
return {
admin: true
}
}
})

// 同样,使用 `get()` 时我们隐式地断言了元素存在。
expect(wrapper.get('#admin').text()).toEqual('Admin')
})
```

如果你在 `data` 中还有其他属性,不用担心,Vue Test Utils 会将两者合并。挂载选项中的 `data` 会优先于任何默认值。

要了解其他挂载选项,请参见[传递数据](../essentials/passing-data.md)或[挂载选项](../../api/#mount)。

## 检查元素可见性

有时你可能只想隐藏/显示一个元素,同时将其保留在 DOM 中。Vue 为这种场景提供了 `v-show` 指令。(你可以在[这里](https://cn.vuejs.org/guide/essentials/conditional.html#v-if-vs-v-show)查阅 `v-if` 和 `v-show` 的区别。)
Expand Down
6 changes: 3 additions & 3 deletions docs/zh/guide/essentials/passing-data.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,11 @@ const password = ref('')

const error = computed(() => {
if (password.value.length < props.minLength) {
return `Password must be at least ${props.minLength} characters.`
return `密码必须至少包含 ${props.minLength} 个字符。`
}
return
})
<script>
</script>

<template>
<div>
Expand All @@ -69,7 +69,7 @@ test('renders an error if length is too short', () => {
}
})

expect(wrapper.html()).toContain('密码必须至少包含 10 个字符')
expect(wrapper.html()).toContain('密码必须至少包含 10 个字符')
})
```

Expand Down