Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(docs): correct anchor hash links and fix typo #2551

Merged
merged 1 commit into from
Nov 22, 2024
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
6 changes: 3 additions & 3 deletions docs/fr/guide/essentials/conditional-rendering.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,9 @@ test('affiche le lien du 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/#wrapper-methods) - 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`.
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`.

Il existe un autre type d'enveloppe - un `VueWrapper` - qui est retourné par [`getComponent`](/fr/api/#getcomponent) qui fonctionne de la même manière.
Il existe un autre type d'enveloppe - un `VueWrapper` - qui est retourné par [`getComponent`](/fr/api/#getComponent) qui fonctionne de la même manière.

## Utilisation de `find()` et `exists()`

Expand All @@ -66,7 +66,7 @@ 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/#wrapper-methods).
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`

Expand Down
2 changes: 1 addition & 1 deletion docs/fr/guide/essentials/forms.md
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,7 @@ Ensuite, nous faisons une simple vérification : est-ce que le formulaire a

#### Soumission de formulaire native

Le déclenchement d'un événement `submit` sur un élément `<form>` imite le comportement du navigateur lors de la soumission d'un formulaire. Si nous voulions déclencher la soumission de formulaire de manière plus naturelle, nous pourrions déclencher un événement `click` sur le bouton de soumission à la place. Comme les éléments de formulaire non connectés à un `document` ne peuvent pas être soumis, selon la spécification HTML, nous devons utiliser [`attachTo`](../../api/#attachto) pour connecter l'élément du `wrapper`.
Le déclenchement d'un événement `submit` sur un élément `<form>` imite le comportement du navigateur lors de la soumission d'un formulaire. Si nous voulions déclencher la soumission de formulaire de manière plus naturelle, nous pourrions déclencher un événement `click` sur le bouton de soumission à la place. Comme les éléments de formulaire non connectés à un `document` ne peuvent pas être soumis, selon la spécification HTML, nous devons utiliser [`attachTo`](../../api/#attachTo) pour connecter l'élément du `wrapper`.

#### Plusieurs modificateurs sur un même évènement

Expand Down
2 changes: 1 addition & 1 deletion docs/guide/advanced/reusability-composition.md
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ test('provides correct data', () => {
})
```

If your component does not contain a slot you can use a [`stub`](./stubs-shallow-mount.md#stubbing-a-single-child-component)
If your component does not contain a slot you can use a [`stub`](./stubs-shallow-mount.md#Stubbing-a-single-child-component)
and replace a child component with your test helper:

```vue
Expand Down
10 changes: 5 additions & 5 deletions docs/guide/essentials/conditional-rendering.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,9 @@ test('renders a profile link', () => {
})
```

If `get()` does not return an element matching the selector, it will raise an error, and your test will fail. `get()` returns a `DOMWrapper` if an element is found. A `DOMWrapper` is a thin wrapper around the DOM element that implements the [Wrapper API](/api/#wrapper-methods) - that's why we are able to do `profileLink.text()` and access the text. You can access the raw element using the `element` property.
If `get()` does not return an element matching the selector, it will raise an error, and your test will fail. `get()` returns a `DOMWrapper` if an element is found. A `DOMWrapper` is a thin wrapper around the DOM element that implements the [Wrapper API](/api/#Wrapper-methods) - that's why we are able to do `profileLink.text()` and access the text. You can access the raw element using the `element` property.

There is another type of wrapper - a `VueWrapper` - that is returned from [`getComponent`](/api/#getcomponent) that works in the same manner.
There is another type of wrapper - a `VueWrapper` - that is returned from [`getComponent`](/api/#getComponent) that works in the same manner.

## Using `find()` and `exists()`

Expand All @@ -67,11 +67,11 @@ 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).
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-options).
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:

Expand All @@ -93,7 +93,7 @@ test('renders an admin link', () => {

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-options).
To learn what other mounting options exist, see [`Passing Data`](../essentials/passing-data.md) or see [`mounting options`](../../api/#mount).

## Checking Elements visibility

Expand Down
2 changes: 1 addition & 1 deletion docs/guide/essentials/forms.md
Original file line number Diff line number Diff line change
Expand Up @@ -227,7 +227,7 @@ We then make a simple assertion, whether the form emitted the correct event and

#### Native form submission

Triggering a `submit` event on a `<form>` element mimics browser behavior during form submission. If we wanted to trigger form submission more naturally, we could trigger a `click` event on the submit button instead. Since form elements not connected to the `document` cannot be submitted, as per the [HTML specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#form-submission-algorithm), we need to use [`attachTo`](../../api/#attachto) to connect the wrapper's element.
Triggering a `submit` event on a `<form>` element mimics browser behavior during form submission. If we wanted to trigger form submission more naturally, we could trigger a `click` event on the submit button instead. Since form elements not connected to the `document` cannot be submitted, as per the [HTML specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#form-submission-algorithm), we need to use [`attachTo`](../../api/#attachTo) to connect the wrapper's element.

#### Multiple modifiers on the same event

Expand Down
2 changes: 1 addition & 1 deletion docs/installation/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,6 @@ To load `.vue` files with Jest, you will need `vue-jest`. `vue-jest` v5 is the o

You can install it with `vue-jest@next`. Then you need to configure it with Jest's [transform](https://jestjs.io/docs/en/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object) option.

If you dont want to configure it yourself, you can get a minimal repository with everything set up [here](https://github.com/lmiller1990/vtu-next-demo).
If you don't want to configure it yourself, you can get a minimal repository with everything set up [here](https://github.com/lmiller1990/vtu-next-demo).

Continue reading to learn more about Vue Test Utils.
2 changes: 1 addition & 1 deletion src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ export interface MountingOptions<Props, Data = {}>
/**
* Specify where to mount the component.
* Can be a valid CSS selector, or an Element connected to the document.
* @see https://test-utils.vuejs.org/api/#attachto
* @see https://test-utils.vuejs.org/api/#attachTo
*/
attachTo?: Element | string
}
Expand Down