From 920baff508c9c7d95daf4cbe2c175386bb565ceb Mon Sep 17 00:00:00 2001 From: wuzhiqing Date: Fri, 22 Nov 2024 02:57:17 +0000 Subject: [PATCH] fix(docs): correct anchor hash links and fix typo --- docs/fr/guide/essentials/conditional-rendering.md | 6 +++--- docs/fr/guide/essentials/forms.md | 2 +- docs/guide/advanced/reusability-composition.md | 2 +- docs/guide/essentials/conditional-rendering.md | 10 +++++----- docs/guide/essentials/forms.md | 2 +- docs/installation/index.md | 2 +- src/types.ts | 2 +- 7 files changed, 13 insertions(+), 13 deletions(-) diff --git a/docs/fr/guide/essentials/conditional-rendering.md b/docs/fr/guide/essentials/conditional-rendering.md index 761764820..f901f011c 100644 --- a/docs/fr/guide/essentials/conditional-rendering.md +++ b/docs/fr/guide/essentials/conditional-rendering.md @@ -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()` @@ -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` diff --git a/docs/fr/guide/essentials/forms.md b/docs/fr/guide/essentials/forms.md index 6e7931dbd..2cc2f81c2 100644 --- a/docs/fr/guide/essentials/forms.md +++ b/docs/fr/guide/essentials/forms.md @@ -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 `
` 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 `` 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 diff --git a/docs/guide/advanced/reusability-composition.md b/docs/guide/advanced/reusability-composition.md index adca144df..f1efd9fda 100644 --- a/docs/guide/advanced/reusability-composition.md +++ b/docs/guide/advanced/reusability-composition.md @@ -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 diff --git a/docs/guide/essentials/conditional-rendering.md b/docs/guide/essentials/conditional-rendering.md index 312bcc5c5..5e63a2131 100644 --- a/docs/guide/essentials/conditional-rendering.md +++ b/docs/guide/essentials/conditional-rendering.md @@ -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()` @@ -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: @@ -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 diff --git a/docs/guide/essentials/forms.md b/docs/guide/essentials/forms.md index d7eecc199..b745692dd 100644 --- a/docs/guide/essentials/forms.md +++ b/docs/guide/essentials/forms.md @@ -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 `` 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 `` 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 diff --git a/docs/installation/index.md b/docs/installation/index.md index e81e7f585..584105915 100644 --- a/docs/installation/index.md +++ b/docs/installation/index.md @@ -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. diff --git a/src/types.ts b/src/types.ts index 370d183f5..0db88d316 100644 --- a/src/types.ts +++ b/src/types.ts @@ -91,7 +91,7 @@ export interface MountingOptions /** * 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 }