From ff9a1471d884c57a8bdcf6284e0d3a19db108c5a Mon Sep 17 00:00:00 2001 From: phrobinet Date: Sat, 1 May 2021 17:48:04 +0200 Subject: [PATCH 1/6] add french version --- docs/.vuepress/config.js | 37 ++ docs/fr/README.md | 90 ++++ docs/fr/api/README.md | 11 + docs/fr/api/components/README--.md | 4 + docs/fr/api/components/RouterLinkStub.md | 20 + docs/fr/api/config.md | 114 +++++ docs/fr/api/createLocalVue.md | 59 +++ docs/fr/api/createWrapper.md | 25 + docs/fr/api/enableAutoDestroy.md | 25 + docs/fr/api/mount.md | 137 +++++ docs/fr/api/options.md | 475 ++++++++++++++++++ docs/fr/api/render.md | 103 ++++ docs/fr/api/renderToString.md | 101 ++++ docs/fr/api/selectors.md | 60 +++ docs/fr/api/shallowMount.md | 118 +++++ docs/fr/api/wrapper-array/README.md | 29 ++ docs/fr/api/wrapper-array/at.md | 26 + docs/fr/api/wrapper-array/contains.md | 24 + docs/fr/api/wrapper-array/destroy.md | 16 + docs/fr/api/wrapper-array/exists.md | 18 + docs/fr/api/wrapper-array/filter.md | 25 + docs/fr/api/wrapper-array/is.md | 20 + docs/fr/api/wrapper-array/isEmpty.md | 24 + docs/fr/api/wrapper-array/isVisible.md | 21 + docs/fr/api/wrapper-array/isVueInstance.md | 25 + docs/fr/api/wrapper-array/setChecked.md | 39 ++ docs/fr/api/wrapper-array/setData.md | 22 + docs/fr/api/wrapper-array/setMethods.md | 36 ++ docs/fr/api/wrapper-array/setProps.md | 22 + docs/fr/api/wrapper-array/setValue.md | 38 ++ docs/fr/api/wrapper-array/trigger.md | 27 + docs/fr/api/wrapper/README.md | 57 +++ docs/fr/api/wrapper/attributes.md | 20 + docs/fr/api/wrapper/classes.md | 22 + docs/fr/api/wrapper/contains.md | 27 + docs/fr/api/wrapper/destroy.md | 23 + docs/fr/api/wrapper/emitted.md | 61 +++ docs/fr/api/wrapper/emittedByOrder.md | 33 ++ docs/fr/api/wrapper/exists.md | 20 + docs/fr/api/wrapper/find.md | 43 ++ docs/fr/api/wrapper/findAll.md | 32 ++ docs/fr/api/wrapper/findAllComponents.md | 23 + docs/fr/api/wrapper/findComponent.md | 26 + docs/fr/api/wrapper/get.md | 23 + docs/fr/api/wrapper/getComponent.md | 25 + docs/fr/api/wrapper/html.md | 15 + docs/fr/api/wrapper/is.md | 36 ++ docs/fr/api/wrapper/isEmpty.md | 23 + docs/fr/api/wrapper/isVisible.md | 20 + docs/fr/api/wrapper/isVueInstance.md | 23 + docs/fr/api/wrapper/name.md | 21 + docs/fr/api/wrapper/overview.md | 47 ++ docs/fr/api/wrapper/props.md | 26 + docs/fr/api/wrapper/setChecked.md | 30 ++ docs/fr/api/wrapper/setData.md | 22 + docs/fr/api/wrapper/setMethods.md | 34 ++ docs/fr/api/wrapper/setProps.md | 55 ++ docs/fr/api/wrapper/setSelected.md | 26 + docs/fr/api/wrapper/setValue.md | 42 ++ docs/fr/api/wrapper/text.md | 15 + docs/fr/api/wrapper/trigger.md | 53 ++ docs/fr/guides/README.md | 9 + docs/fr/guides/common-tips.md | 343 +++++++++++++ docs/fr/guides/dom-events.md | 216 ++++++++ docs/fr/guides/getting-started.md | 76 +++ docs/fr/guides/testing-async-components.md | 144 ++++++ .../fr/guides/useful-libraries-for-testing.md | 22 + docs/fr/guides/using-with-typescript.md | 157 ++++++ docs/fr/guides/using-with-vue-router.md | 83 +++ docs/fr/guides/using-with-vuex.md | 392 +++++++++++++++ docs/fr/installation/README.md | 5 + docs/fr/installation/semantic-versioning.md | 3 + .../installation/using-other-test-runners.md | 60 +++ docs/fr/installation/using-with-jest.md | 119 +++++ 74 files changed, 4343 insertions(+) create mode 100644 docs/fr/README.md create mode 100644 docs/fr/api/README.md create mode 100644 docs/fr/api/components/README--.md create mode 100644 docs/fr/api/components/RouterLinkStub.md create mode 100644 docs/fr/api/config.md create mode 100644 docs/fr/api/createLocalVue.md create mode 100644 docs/fr/api/createWrapper.md create mode 100644 docs/fr/api/enableAutoDestroy.md create mode 100644 docs/fr/api/mount.md create mode 100644 docs/fr/api/options.md create mode 100644 docs/fr/api/render.md create mode 100644 docs/fr/api/renderToString.md create mode 100644 docs/fr/api/selectors.md create mode 100644 docs/fr/api/shallowMount.md create mode 100644 docs/fr/api/wrapper-array/README.md create mode 100644 docs/fr/api/wrapper-array/at.md create mode 100644 docs/fr/api/wrapper-array/contains.md create mode 100644 docs/fr/api/wrapper-array/destroy.md create mode 100644 docs/fr/api/wrapper-array/exists.md create mode 100644 docs/fr/api/wrapper-array/filter.md create mode 100644 docs/fr/api/wrapper-array/is.md create mode 100644 docs/fr/api/wrapper-array/isEmpty.md create mode 100644 docs/fr/api/wrapper-array/isVisible.md create mode 100644 docs/fr/api/wrapper-array/isVueInstance.md create mode 100644 docs/fr/api/wrapper-array/setChecked.md create mode 100644 docs/fr/api/wrapper-array/setData.md create mode 100644 docs/fr/api/wrapper-array/setMethods.md create mode 100644 docs/fr/api/wrapper-array/setProps.md create mode 100644 docs/fr/api/wrapper-array/setValue.md create mode 100644 docs/fr/api/wrapper-array/trigger.md create mode 100644 docs/fr/api/wrapper/README.md create mode 100644 docs/fr/api/wrapper/attributes.md create mode 100644 docs/fr/api/wrapper/classes.md create mode 100644 docs/fr/api/wrapper/contains.md create mode 100644 docs/fr/api/wrapper/destroy.md create mode 100644 docs/fr/api/wrapper/emitted.md create mode 100644 docs/fr/api/wrapper/emittedByOrder.md create mode 100644 docs/fr/api/wrapper/exists.md create mode 100644 docs/fr/api/wrapper/find.md create mode 100644 docs/fr/api/wrapper/findAll.md create mode 100644 docs/fr/api/wrapper/findAllComponents.md create mode 100644 docs/fr/api/wrapper/findComponent.md create mode 100644 docs/fr/api/wrapper/get.md create mode 100644 docs/fr/api/wrapper/getComponent.md create mode 100644 docs/fr/api/wrapper/html.md create mode 100644 docs/fr/api/wrapper/is.md create mode 100644 docs/fr/api/wrapper/isEmpty.md create mode 100644 docs/fr/api/wrapper/isVisible.md create mode 100644 docs/fr/api/wrapper/isVueInstance.md create mode 100644 docs/fr/api/wrapper/name.md create mode 100644 docs/fr/api/wrapper/overview.md create mode 100644 docs/fr/api/wrapper/props.md create mode 100644 docs/fr/api/wrapper/setChecked.md create mode 100644 docs/fr/api/wrapper/setData.md create mode 100644 docs/fr/api/wrapper/setMethods.md create mode 100644 docs/fr/api/wrapper/setProps.md create mode 100644 docs/fr/api/wrapper/setSelected.md create mode 100644 docs/fr/api/wrapper/setValue.md create mode 100644 docs/fr/api/wrapper/text.md create mode 100644 docs/fr/api/wrapper/trigger.md create mode 100644 docs/fr/guides/README.md create mode 100644 docs/fr/guides/common-tips.md create mode 100644 docs/fr/guides/dom-events.md create mode 100644 docs/fr/guides/getting-started.md create mode 100644 docs/fr/guides/testing-async-components.md create mode 100644 docs/fr/guides/useful-libraries-for-testing.md create mode 100644 docs/fr/guides/using-with-typescript.md create mode 100644 docs/fr/guides/using-with-vue-router.md create mode 100644 docs/fr/guides/using-with-vuex.md create mode 100644 docs/fr/installation/README.md create mode 100644 docs/fr/installation/semantic-versioning.md create mode 100644 docs/fr/installation/using-other-test-runners.md create mode 100644 docs/fr/installation/using-with-jest.md diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 18b085a30..dfce48446 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -19,6 +19,11 @@ module.exports = { lang: 'ru', title: 'Vue Test Utils', description: 'Библиотека для тестирования Vue-компонентов' + }, + '/fr/': { + title: 'Vue Test Utils', + lang: 'fr', + description: 'Utilitaires pour tester les composants Vue' } }, plugins: ['@vuepress/pwa'], @@ -171,6 +176,38 @@ module.exports = { '/ru/api/options', '/ru/api/components/' ] + }, + '/fr/': { + label: 'Français', + selectText: 'langue', + editLinkText: 'Modifier cette page sur GitHub', + nav: [ + { + text: 'API', + link: '/fr/api/' + }, + { + text: 'Guides', + link: '/fr/guides/', + items: [ + { + text: '2.x-beta', + link: + 'https://vuejs.github.io/vue-test-utils-next-docs/guide/introduction.html' + } + ] + } + ], + sidebar: [ + '/fr/', + '/fr/installation/', + '/fr/guides/', + '/fr/api/', + '/fr/api/wrapper/', + '/fr/api/wrapper-array/', + '/fr/api/options', + '/fr/api/components/' + ] } } }, diff --git a/docs/fr/README.md b/docs/fr/README.md new file mode 100644 index 000000000..6bd66f12f --- /dev/null +++ b/docs/fr/README.md @@ -0,0 +1,90 @@ +# Introduction + +Vue Test Utils est la bibliothèque officielle de tests unitaires pour Vue.js. + +Voici la documentation de Vue Test Utils v1, qui vise Vue 2 et les versions antérieures. + +En bref : + +- [Vue Test Utils 1](https://github.com/vuejs/vue-test-utils/) objectifs [Vue 2](https://github.com/vuejs/vue/). +- [Vue Test Utils 2](https://github.com/vuejs/vue-test-utils-next/) objectifs [Vue 3](https://github.com/vuejs/vue-next/). + +
Apprenez comment tester les composants de Vue.js avec Vue School
+ +- [Installation](./installation/) +- [Guides](./guides/) + - [Pour commencer](./guides/getting-started.md) + - [Les Conseils pratiques](guides/common-tips.md) + - [Test des touches, de la souris et d'autres événements DOM](guides/dom-events.md) + - [Tester le comportement asynchrone](guides/testing-async-components.md) + - [Utilisation avec TypeScript](guides/using-with-typescript.md) + - [Utilisation avec Vue Router](guides/using-with-vue-router.md) + - [Utilisation avec Vuex](guides/using-with-vuex.md) + - [Bibliothèques utiles pour les tests](guides/useful-libraries-for-testing.md) +- [API](api/) + - [mount](api/mount.md) + - [shallowMount](api/shallowMount.md) + - [render](api/render.md) + - [renderToString](api/renderToString.md) + - [Mounting Options](api/options.md) + - [context](api/options.md#context) + - [slots](api/options.md#slots) + - [scopedSlots](api/options.md#scopedslots) + - [stubs](api/options.md#stubs) + - [mocks](api/options.md#mocks) + - [localVue](api/options.md#localvue) + - [attachToDocument](api/options.md#attachtodocument) + - [attrs](api/options.md#attrs) + - [propsData](api/options.md#propsdata) + - [listeners](api/options.md#listeners) + - [parentComponent](api/options.md#parentComponent) + - [provide](api/options.md#provide) + - [other options](api/options.md#other-options) + - [Wrapper](api/wrapper/) + - [attributes](api/wrapper/attributes.md) + - [classes](api/wrapper/classes.md) + - [contains](api/wrapper/contains.md) + - [emitted](api/wrapper/emitted.md) + - [emittedByOrder](api/wrapper/emittedByOrder.md) + - [exists](api/wrapper/exists.md) + - [destroy](api/wrapper/destroy.md) + - [find](api/wrapper/find.md) + - [findAll](api/wrapper/findAll.md) + - [get](api/wrapper/get.md) + - [html](api/wrapper/html.md) + - [is](api/wrapper/is.md) + - [isEmpty](api/wrapper/isEmpty.md) + - [isVueInstance](api/wrapper/isVueInstance.md) + - [name](api/wrapper/name.md) + - [props](api/wrapper/props.md) + - [setChecked](api/wrapper/setChecked.md) + - [setData](api/wrapper/setData.md) + - [setMethods](api/wrapper/setMethods.md) + - [setProps](api/wrapper/setProps.md) + - [setSelected](api/wrapper/setSelected.md) + - [setValue](api/wrapper/setValue.md) + - [text](api/wrapper/text.md) + - [trigger](api/wrapper/trigger.md) + - [isVisible](api/wrapper/isVisible.md) + - [WrapperArray](api/wrapper-array/) + - [at](api/wrapper-array/at.md) + - [contains](api/wrapper-array/contains.md) + - [exists](api/wrapper/exists.md) + - [destroy](api/wrapper-array/destroy.md) + - [filter](api/wrapper-array/filter.md) + - [is](api/wrapper-array/is.md) + - [isEmpty](api/wrapper-array/isEmpty.md) + - [isVueInstance](api/wrapper-array/isVueInstance.md) + - [setChecked](api/wrapper-array/setChecked.md) + - [setData](api/wrapper-array/setData.md) + - [setMethods](api/wrapper-array/setMethods.md) + - [setProps](api/wrapper-array/setProps.md) + - [setValue](api/wrapper-array/setValue.md) + - [trigger](api/wrapper-array/trigger.md) + - [isVisible](api/wrapper-array/isVisible.md) + - [components](api/components/) + - [RouterLinkStub](api/components/RouterLinkStub.md) + - [Selectors](api/selectors.md) + - [createWrapper](api/createWrapper.md) + - [createLocalVue](api/createLocalVue.md) + - [config](api/config.md) diff --git a/docs/fr/api/README.md b/docs/fr/api/README.md new file mode 100644 index 000000000..a5ce70cf9 --- /dev/null +++ b/docs/fr/api/README.md @@ -0,0 +1,11 @@ +# API + +!!!include(docs/fr/api/mount.md)!!! +!!!include(docs/fr/api/shallowMount.md)!!! +!!!include(docs/fr/api/render.md)!!! +!!!include(docs/fr/api/renderToString.md)!!! +!!!include(docs/fr/api/selectors.md)!!! +!!!include(docs/fr/api/createLocalVue.md)!!! +!!!include(docs/fr/api/createWrapper.md)!!! +!!!include(docs/fr/api/config.md)!!! +!!!include(docs/fr/api/enableAutoDestroy.md)!!! diff --git a/docs/fr/api/components/README--.md b/docs/fr/api/components/README--.md new file mode 100644 index 000000000..2b39234d1 --- /dev/null +++ b/docs/fr/api/components/README--.md @@ -0,0 +1,4 @@ +# Components + +Vue Test Utils comprend des composants utilitaires que vous pouvez utiliser pour avoir des composants stubs +!!!include(docs/fr/api/components/RouterLinkStub.md)!!! diff --git a/docs/fr/api/components/RouterLinkStub.md b/docs/fr/api/components/RouterLinkStub.md new file mode 100644 index 000000000..7fd0ba7eb --- /dev/null +++ b/docs/fr/api/components/RouterLinkStub.md @@ -0,0 +1,20 @@ +## RouterLinkStub + +Un composant pour mettre en place le composant Vue Router `router-link`. + +Vous pouvez utiliser ce composant pour trouver un composant router-link dans l'arbre de rendu. + +- **Usage:** + +Pour le définir comme un stub dans les options de montage : + +```js +import { mount, RouterLinkStub } from '@vue/test-utils' + +const wrapper = mount(Component, { + stubs: { + RouterLink: RouterLinkStub + } +}) +expect(wrapper.find(RouterLinkStub).props().to).toBe('/some/path') +``` diff --git a/docs/fr/api/config.md b/docs/fr/api/config.md new file mode 100644 index 000000000..27298dc61 --- /dev/null +++ b/docs/fr/api/config.md @@ -0,0 +1,114 @@ +## Config + +Vue Test Utils comprend un objet de configuration des options définies utilisées par Vue Test Utils. + +### Vue Test Utils Config Options + +### `showDeprecationWarnings` + +- type: `Boolean` +- default: `true` + +Contrôler s'il faut ou non afficher des avertissements de dépréciation . Lorsqu'il est sur `true`, tous les avertissements de déprédation sont visibles dans la console. + +Exemple: + +```js +import { config } from '@vue/test-utils' + +config.showDeprecationWarnings = false +``` + +### `deprecationWarningHandler` + +- type: `Function` + +Permet un contrôle fin des avertissements de dépréciation. Lorsque `showDeprecationWarnings` est défini à `true`, tous les avertissements de dépréciation seront passés à ce gestionnaire avec le nom de la méthode comme premier argument et le message original comme second. + +::: tip +Cela peut être utile pour enregistrer les messages de dépréciation à un endroit séparé ou pour aider à la mise à jour progressive de la base de code vers la dernière version de test utils en ignorant certains avertissements de fonctions dépréciées. +::: + +Example: + +```js +import { config } from '@vue/test-utils' + +config.showDeprecationWarnings = true +config.deprecationWarningHandler = (method, message) => { + if (method === 'emittedByOrder') return + + console.error(msg) +} +``` + +### `stubs` + +- type: `{ [name: string]: Component | boolean | string }` +- default: `{}` + +Le stub stocké dans `config.stubs` est utilisé par défaut. +Les stubs sont à utiliser dans les composants. Ils sont écrasés par les `stubs` passés dans les options de montage. + +Lorsque l'on passe des `stubs` sous forme de tableau dans les options de montage, les `config.stubs` sont convertis en un tableau, et vont stuber les composants avec un composant de base qui retourne `<${component name}-stub>`. + +Exemple: + +```js +import { config } from '@vue/test-utils' + +config.stubs['my-component'] = '
' +``` + +### `mocks` + +- type: `Object` +- default: `{}` + +Comme pour les `stubs`, les valeurs passées à `config.mocks` sont utilisées par défaut. Toute valeur passées à l'objet d'options de montage `mocks` aura la priorité sur celles déclarées dans `config.mocks`. + +Exemple: + +```js +import { config } from '@vue/test-utils' + +config.mocks['$store'] = { + state: { + id: 1 + } +} +``` + +### `methods` + +- type: `{ [name: string]: Function }` +- default: `{}` + +Vous pouvez configurer les méthodes par défaut en utilisant l'objet `config`. Cela peut être utile pour les plugins qui injectent des méthodes aux composants, comme [VeeValidate](https://logaretm.github.io/vee-validate/). Vous pouvez surcharger les méthodes définies dans `config` en passant des `méthodes` dans les options de montage. + +Exemple: + +```js +import { config } from '@vue/test-utils' + +config.methods['getData'] = () => {} +``` + +### `provide` + +- type: `Object` +- default: `{}` + +Comme les `stubs` ou `mocks`, les valeurs passées à "config.provide" sont utilisées par défaut. Toutes les valeurs passées à l'objet d'options de montage `provide` auront la priorité sur celles déclarées dans `config.provide`. **Veuillez noter qu'il n'est pas possible de passer une fonction comme `config.provide`.** + +Exemple: + +```js +import { config } from '@vue/test-utils' + +config.provide['$logger'] = { + log: (...args) => { + console.log(...args) + } +} +``` diff --git a/docs/fr/api/createLocalVue.md b/docs/fr/api/createLocalVue.md new file mode 100644 index 000000000..652f3fb31 --- /dev/null +++ b/docs/fr/api/createLocalVue.md @@ -0,0 +1,59 @@ +## createLocalVue() + +- **Arguments:** + + - `{Object} options` + - `{Function} errorHandler` + +- **Retours:** + + - `{Component}` + +- **Usage:** + +`createLocalVue` renvoie une classe Vue pour que vous puissiez ajouter des composants, des mixins et installer des plugins dans polluer la classe Vue globale. + +L'option `errorHandler` peut être utilisée pour gérer les erreurs non attrapées pendant la fonction de rendu du composant et les observateurs. + +Utilisez-la avec `options.localVue`: + +**Sans les options:** + +```js +import { createLocalVue, shallowMount } from '@vue/test-utils' +import MyPlugin from 'my-plugin' +import Foo from './Foo.vue' + +const localVue = createLocalVue() +localVue.use(MyPlugin) +const wrapper = shallowMount(Foo, { + localVue, + mocks: { foo: true } +}) +expect(wrapper.vm.foo).toBe(true) + +const freshWrapper = shallowMount(Foo) +expect(freshWrapper.vm.foo).toBe(false) +``` + +**Avec l'option [`errorHandler`](https://vuejs.org/v2/api/#errorHandler):** + +```js +import { createLocalVue, shallowMount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const errorHandler = (err, vm, info) => { + expect(err).toBeInstanceOf(Error) +} + +const localVue = createLocalVue({ + errorHandler +}) + +// Foo lance une erreur à l'intérieur d'un crochet de cycle de vie +const wrapper = shallowMount(Foo, { + localVue +}) +``` + +- **Voir aussi:** [Common Tips](../guides/common-tips.md#applying-global-plugins-and-mixins) diff --git a/docs/fr/api/createWrapper.md b/docs/fr/api/createWrapper.md new file mode 100644 index 000000000..d750d1893 --- /dev/null +++ b/docs/fr/api/createWrapper.md @@ -0,0 +1,25 @@ +## createWrapper(node [, options]) + +- **Arguments:** + + - `{vm|HTMLElement} node` + - `{Object} options` + - `{Boolean} attachedToDocument` + +- **Retours:** + + - `{Wrapper}` + +- **Usage:** + +`createWrapper` crée un `Wrapper` pour une instance Vue montée, ou un élément HTML. + +```js +import { createWrapper } from '@vue/test-utils' +import Foo from './Foo.vue' + +const Constructor = Vue.extend(Foo) +const vm = new Constructor().$mount() +const wrapper = createWrapper(vm) +expect(wrapper.vm.foo).toBe(true) +``` diff --git a/docs/fr/api/enableAutoDestroy.md b/docs/fr/api/enableAutoDestroy.md new file mode 100644 index 000000000..3f14e31f2 --- /dev/null +++ b/docs/fr/api/enableAutoDestroy.md @@ -0,0 +1,25 @@ +## enableAutoDestroy(hook) + +- **Arguments:** + + - `{Function} hook` + +- **Usage:** + +`enableAutoDestroy` détruira toutes les instances de `Wrapper` en utilisant la fonction de hook passée (par exemple [`afterEach`](https://jestjs.io/docs/en/api#aftereachfn-timeout)). Après avoir appelé la méthode, vous pouvez revenir au comportement par défaut en appelant la méthode `resetAutoDestroyState`. + +```js +import { enableAutoDestroy, mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +// appelle wrapper.destroy() après chaque test +enableAutoDestroy(afterEach) + +describe('Foo', () => { + it('renders a div', () => { + const wrapper = mount(Foo) + expect(wrapper.contains('div')).toBe(true) + // pas besoin d'appeler wrapper.destroy() ici + }) +}) +``` diff --git a/docs/fr/api/mount.md b/docs/fr/api/mount.md new file mode 100644 index 000000000..924d51448 --- /dev/null +++ b/docs/fr/api/mount.md @@ -0,0 +1,137 @@ +## mount() + +- **Arguments:** + + - `{Component} component` + - `{Object} options` + +- **Retours:** `{Wrapper}` + +- **Options:** + +Voir [options](options.md) + +- **Usage:** + +Crée un [`Wrapper`](wrapper/) qui contient le composant Vue monté et rendu. + +**Sans les options:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', () => { + const wrapper = mount(Foo) + expect(wrapper.contains('div')).toBe(true) + }) +}) +``` + +**Avec les options Vue:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', () => { + const wrapper = mount(Foo, { + propsData: { + color: 'red' + } + }) + expect(wrapper.props().color).toBe('red') + }) +}) +``` + +**Attacher au DOM:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', () => { + const div = document.createElement('div') + document.body.appendChild(div) + const wrapper = mount(Foo, { + attachTo: div + }) + expect(wrapper.contains('div')).toBe(true) + wrapper.destroy() + }) +}) +``` + +**Les slots par défauts et nommés :** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' +import Bar from './Bar.vue' +import FooBar from './FooBar.vue' + +describe('Foo', () => { + it('renders a div', () => { + const wrapper = mount(Foo, { + slots: { + default: [Bar, FooBar], + fooBar: FooBar, // Correspondra ``. + foo: '
' + } + }) + expect(wrapper.contains('div')).toBe(true) + }) +}) +``` + +**Les propriétés globales des Stubbing :** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', () => { + const $route = { path: 'http://www.example-path.com' } + const wrapper = mount(Foo, { + mocks: { + $route + } + }) + expect(wrapper.vm.$route.path).toBe($route.path) + }) +}) +``` + +**Les composants Stubbing** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' +import Bar from './Bar.vue' +import Faz from './Faz.vue' + +describe('Foo', () => { + it('renders a div', () => { + const wrapper = mount(Foo, { + stubs: { + BarFoo: true, + FooBar: Faz, + Bar: { template: '
' } + } + }) + expect(wrapper.contains('.stubbed')).toBe(true) + expect(wrapper.contains(Bar)).toBe(true) + }) +}) +``` + +**Avis de déprédation:** + +Lors du stubbing de composants, la fourniture d'une chaîne de caractères (`ComponentToStub : '
`) n'est plus supportée. + +- **Voir aussi :** [Wrapper](wrapper/) diff --git a/docs/fr/api/options.md b/docs/fr/api/options.md new file mode 100644 index 000000000..bb745d88f --- /dev/null +++ b/docs/fr/api/options.md @@ -0,0 +1,475 @@ +# L'option Mount + +Options pour `mount` et `shallowMount`. + +:::tip +Outre les options documentées ci-dessous, l'objet `options` peut contenir toute option qui serait valide dans un appel à `new Vue ({ /*les options ici*/ }). Ces options seront fusionnées avec les options existantes du composant lorsqu'il sera monté avec`mount`/`shallowMount` + +[Voir les autres options pour des exemples](#other-options) +::: + +- [Mounting Options](#mounting-options) + - [context](#context) + - [data](#data) + - [slots](#slots) + - [scopedSlots](#scopedslots) + - [stubs](#stubs) + - [mocks](#mocks) + - [localVue](#localvue) + - [attachTo](#attachto) + - [attachToDocument](#attachtodocument) + - [attrs](#attrs) + - [propsData](#propsdata) + - [listeners](#listeners) + - [parentComponent](#parentcomponent) + - [provide](#provide) + - [Other options](#other-options) + +## context + +- type: `Object` + +Transmet du contexte à la composante fonctionnelle. Ne peut être utilisé qu'avec des [composants fonctionnels](https://vuejs.org/v2/guide/render-function.html#Functional-Components). + +Exemple: + +```js +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = mount(Component, { + context: { + props: { show: true }, + children: [Foo, Bar] + } +}) + +expect(wrapper.is(Component)).toBe(true) +``` + +## data + +- type: `Function` + +Transmet les données à un composant. Il fusionnera avec la fonction `data` existante. + +Exemple: + +```js +const Component = { + template: ` +
+ {{ foo }} + {{ bar }} +
+ `, + + data() { + return { + foo: 'foo', + bar: 'bar' + } + } +} + +const wrapper = mount(Component, { + data() { + return { + bar: 'my-override' + } + } +}) + +wrapper.find('#foo').text() // 'foo' +wrapper.find('#bar').text() // 'my-override' +``` + +## slots + +- type: `{ [name: string]: Array|Component|string }` + +Fournis un objet de contenu slot au composant . La clé correspond au nom du slot. La valeur peut être soit un composant , soit un tableau de composants, soit une chaîne de modèle, soit du texte. + +Exemple: + +```js +import Foo from './Foo.vue' +import MyComponent from './MyComponent.vue' + +const bazComponent = { + name: 'baz-component', + template: '

baz

' +} + +const yourComponent = { + props: { + foo: { + type: String, + required: true + } + }, + render(h) { + return h('p', this.foo) + } +} + +const wrapper = shallowMount(Component, { + slots: { + default: [Foo, '', 'text'], + fooBar: Foo, //Correspondra à ``. + foo: '
', + bar: 'bar', + baz: bazComponent, + qux: '', + quux: '' + }, + stubs: { + // utilisé pour enregistrer les composants personnalisés + 'my-component': MyComponent, + 'your-component': yourComponent + }, + mocks: { + // utilisé pour ajouter des propriétés au contexte de rendu + yourProperty: 'ipsum' + } +}) + +expect(wrapper.find('div')).toBe(true) +``` + +## scopedSlots + +- type: `{ [name: string]: string|Function }` + +Fournis un objet de portée slot au composant. La clé correspond au nom du slot. + +Vous pouvez définir le nom des props à l'aide de l'attribut slot-scope : + +```js +shallowMount(Component, { + scopedSlots: { + foo: '

{{foo.index}},{{foo.text}}

' + } +}) +``` + +Sinon, les props sont disponibles en tant qu'objet `props` lorsque le slot est évalué : + +```js +shallowMount(Component, { + scopedSlots: { + default: '

{{props.index}},{{props.text}}

' + } +}) +``` + +Vous pouvez également passer une fonction qui prend les props comme argument : + +```js +shallowMount(Component, { + scopedSlots: { + foo: function(props) { + return this.$createElement('div', props.index) + } + } +}) +``` + +Ou vous pouvez utiliser JSX. Si vous écrivez JSX dans une méthode, `this.$createElement` est auto-injectée par babel-plugin-transform-vue-jsx : + +```js +shallowMount(Component, { + scopedSlots: { + foo(props) { + return
{props.text}
+ } + } +}) +``` + +::: warning Élément Racine requis +En raison de la mise en œuvre interne de cette fonctionnalité, le contenu du slot doit renvoyer un élément racine, même si un slot porté est autorisé à renvoyer un ensemble d'éléments. + +Si vous avez besoin de cette fonctionnalité dans un test, la solution recommandée est d'envelopper le composant testé dans un autre composant et de monter celui-ci : +::: + +```javascript +const WrapperComp = { + template: ` + +

Using the {{props.a}}

+

Using the {{props.a}}

+ + `, + components: { + ComponentUnderTest + } +} +const wrapper = mount(WrapperComp).find(ComponentUnderTest) +``` + +## stubs + +- type: `{ [name: string]: Component | string | boolean } | Array` + +Les composants enfants Stubs peuvent être un tableau de noms de composants à un stub, ou un objet. Si le `stubs` est un tableau, chaque stub est `<${component name}-stub>`. + +**Avis de déprédation :** + +Lors de l'ajout de composants, la fourniture d'une chaîne de caractères (`ComponentToStub: '
`) n'est plus supportée. + +Exemple: + +```js +import Foo from './Foo.vue' + +mount(Component, { + stubs: ['registered-component'] +}) + +shallowMount(Component, { + stubs: { + // stub avec une implémentation spécifique + 'registered-component': Foo, + // créer un stub par défaut. + // le nom du composant du stub par défaut est un autre composant dans ce cas. + // le stub par défaut est <${the component name of default stub}-stub>. + 'another-component': true + } +}) +``` + +## mocks + +- type: `Object` + +Ajouter des propriétés supplémentaires à l'instance. Utile pour simuler des injections globales. + +Exemple: + +```js +const $route = { path: 'http://www.example-path.com' } +const wrapper = shallowMount(Component, { + mocks: { + $route + } +}) +expect(wrapper.vm.$route.path).toBe($route.path) +``` + +::: tip +Pour simuler `$root` veuillez utiliser l'option `parentComponent` comme décrit [ici](https://github.com/vuejs/vue-test-utils/issues/481#issuecomment-423716430) +::: + +## localVue + +- type: `Vue` + +Une copie locale de Vue créée par [`createLocalVue`](./createLocalVue.md) à utiliser lors du montage du composant. L'installation de plugins sur cette copie de `Vue` évite de polluer la copie originale de `Vue`. + +Exemple: + +```js +import { createLocalVue, mount } from '@vue/test-utils' +import VueRouter from 'vue-router' +import Foo from './Foo.vue' + +const localVue = createLocalVue() +localVue.use(VueRouter) + +const routes = [{ path: '/foo', component: Foo }] + +const router = new VueRouter({ + routes +}) + +const wrapper = mount(Component, { + localVue, + router +}) +expect(wrapper.vm.$route).toBeInstanceOf(Object) +``` + +## attachTo + +- type: `HTMLElement | string` +- default: `null` + +Il spécifie soit un HTMLElement spécifique, soit une chaîne de sélection CSS ciblant un HTMLElement, sur lequel votre composant sera entièrement monté dans le document. + +Lorsque vous le fixez au DOM, vous devez appeler `wrapper.destroy()` à la fin de votre test pour +supprimer les éléments rendus du document et détruire l'instance constitutive. + +::: tip +Lorsque vous utilisez `attachTo : document.body`, une nouvelle `div` sera ajoutée au lieu de remplacer le corps entier. Ceci est conçu pour imiter le comportement de Vue3 et simplifier une future migration. Voir [ce commentaire](https://github.com/vuejs/vue-test-utils/issues/1578#issuecomment-674652747) pour plus de détails +::: + +```js +const div = document.createElement('div') +div.id = 'root' +document.body.appendChild(div) + +const Component = { + template: '
ABC
' +} +let wrapper = mount(Component, { + attachTo: '#root' +}) +expect(wrapper.vm.$el.parentNode).to.not.be.null +wrapper.destroy() + +wrapper = mount(Component, { + attachTo: document.getElementById('root') +}) +expect(wrapper.vm.$el.parentNode).to.not.be.null +wrapper.destroy() +``` + +## attachToDocument + +- type: `boolean` +- default: `false` + +::: warning Avertissement de déprédation +L'option `attachToDocument` est dépréciée et sera supprimée dans les prochaines versions. Utilisez plutôt [`attachTo`](#attachto). Par exemple, si vous devez attacher le composant au document.body : + +```js +const elem = document.createElement('div') +if (document.body) { + document.body.appendChild(elem) +} +wrapper = mount(Component, { + attachTo: elem +}) +``` + +::: + +Comme [`attachTo`](#attachto), mais crée automatiquement un nouvel élément `div` pour vous et l'insère dans le corps. + +Lorsque vous l'attachez au DOM, vous devez appeler `wrapper.destroy()` à la fin de votre test pour +supprimer les éléments rendus du document et détruire l'instance constitutive. + +## attrs + +- type: `Object` + +Défini l'objet `$attrs` de l'instance du composant. + +## propsData + +- type: `Object` + +Défini les props de l'instance du composant lorsque le composant est monté. + +Exemple: + +```js +const Component = { + template: '
{{ msg }}
', + props: ['msg'] +} +const wrapper = mount(Component, { + propsData: { + msg: 'aBC' + } +}) +expect(wrapper.text()).toBe('aBC') +``` + +::: tip +Il convient de noter que "propsData" est en fait une [API Vue](https://vuejs.org/v2/api/#propsData), et non une +option de montage de Vue Test Utils. Il est traité par [`extends`](https://vuejs.org/v2/api/#extends). +Veuillez consulter [les autres options](#other-options). +::: + +## listeners + +- type: `Object` + +Défini l'objet `$listeners`de l'instance du composant. + +Exemple: + +```js +const Component = { + template: '' +} +const onClick = jest.fn() +const wrapper = mount(Component, { + listeners: { + click: onClick + } +}) + +wrapper.trigger('click') +expect(onClick).toHaveBeenCalled() +``` + +## parentComponent + +- type: `Object` + +Composant à utiliser comme parent pour un composant monté. + +Exemple: + +```js +import Foo from './Foo.vue' + +const wrapper = shallowMount(Component, { + parentComponent: Foo +}) +expect(wrapper.vm.$parent.$options.name).toBe('foo') +``` + +## provide + +- type: `Object` + +Passe les propriétés des composants à utiliser dans l'injection. Voir [provide/inject](https://vuejs.org/v2/api/#provide-inject). + +Exemple: + +```js +const Component = { + inject: ['foo'], + template: '
{{this.foo()}}
' +} + +const wrapper = shallowMount(Component, { + provide: { + foo() { + return 'fooValue' + } + } +}) + +expect(wrapper.text()).toBe('fooValue') +``` + +## Les autres options + +Lorsque les options pour `mount` et `shallowMount` contiennent des options autres que les options de montage, les options des composants sont écrasées par celles qui utilisent [extends](https://vuejs.org/v2/api/#extends). + +```js +const Component = { + template: '
{{ foo }}
', + data() { + return { + foo: 'fromComponent' + } + } +} +const options = { + data() { + return { + foo: 'fromOptions' + } + } +} + +const wrapper = mount(Component, options) + +expect(wrapper.text()).toBe('fromOptions') +``` diff --git a/docs/fr/api/render.md b/docs/fr/api/render.md new file mode 100644 index 000000000..66c66074d --- /dev/null +++ b/docs/fr/api/render.md @@ -0,0 +1,103 @@ +## render() + +- **Arguments:** + + - `{Component} component` + - `{Object} options` + - `{Object} context` + - `{Array|Component} children` + - `{Object} slots` + - `{Array|Component|String} default` + - `{Array|Component|String} named` + - `{Object} mocks` + - `{Object|Array} stubs` + - `{Vue} localVue` + +- **Retours:** `{Promise}` + +- **Options:** + +Voir [les options](./options.md) + +- **Usage:** + +Rend un objet en chaîne de caractères et retourne un [cheerio wrapper](https://github.com/cheeriojs/cheerio). + +Cheerio est une bibliothèque de type jQuery pour parcourir le DOM dans Node.js. Elle possède une API similaire à celles de [`Wrapper`](wrapper/) Vue Test Utils . + +`render` utilise [`vue-server-renderer`](https://ssr.vuejs.org/en/basic.html) sous le capot, pour rendre un composant en HTML statique. + +`render` est inclus dans le paquet `@vue/server-test-utils`. + +**Sans les options:** + +```js +import { render } from '@vue/server-test-utils' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', async () => { + const wrapper = await render(Foo) + expect(wrapper.text()).toContain('
') + }) +}) +``` + +**Avec les options de Vue:** + +```js +import { render } from '@vue/server-test-utils' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', async () => { + const wrapper = await render(Foo, { + propsData: { + color: 'red' + } + }) + expect(wrapper.text()).toContain('red') + }) +}) +``` + +**Les slots par défaut et nommés:** + +```js +import { render } from '@vue/server-test-utils' +import Foo from './Foo.vue' +import Bar from './Bar.vue' +import FooBar from './FooBar.vue' + +describe('Foo', () => { + it('renders a div', async () => { + const wrapper = await render(Foo, { + slots: { + default: [Bar, FooBar], + fooBar: FooBar, // Correspondra à , + foo: '
' + } + }) + expect(wrapper.text()).toContain('
') + }) +}) +``` + +**Les propriétés globales des Stubbing:** + +```js +import { render } from '@vue/server-test-utils' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', async () => { + const $route = { path: 'http://www.example-path.com' } + const wrapper = await render(Foo, { + mocks: { + $route + } + }) + expect(wrapper.text()).toContain($route.path) + }) +}) +``` diff --git a/docs/fr/api/renderToString.md b/docs/fr/api/renderToString.md new file mode 100644 index 000000000..608116502 --- /dev/null +++ b/docs/fr/api/renderToString.md @@ -0,0 +1,101 @@ +## renderToString() + +- **Arguments:** + + - `{Component} component` + - `{Object} options` + - `{Object} context` + - `{Array|Component} children` + - `{Object} slots` + - `{Array|Component|String} default` + - `{Array|Component|String} named` + - `{Object} mocks` + - `{Object|Array} stubs` + - `{Vue} localVue` + +- **Retours:** `{Promise}` + +- **Options:** + +See [options](./options.md) + +- **Usage:** + +Rends un composant en HTML. + +`renderToString` utilise [`vue-server-renderer`](https://ssr.vuejs.org/en/basic.html) sous le capot, pour rendre un composant en HTML statique. + +`renderToString` est inclus dans le paquet `@vue/server-test-utils`. + +**Sans les options:** + +```js +import { renderToString } from '@vue/server-test-utils' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', async () => { + const str = await renderToString(Foo) + expect(str).toContain('
') + }) +}) +``` + +**Avec les options de Vue:** + +```js +import { renderToString } from '@vue/server-test-utils' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', async () => { + const str = await renderToString(Foo, { + propsData: { + color: 'red' + } + }) + expect(str).toContain('red') + }) +}) +``` + +**Les slots par défaut et nommés:** + +```js +import { renderToString } from '@vue/server-test-utils' +import Foo from './Foo.vue' +import Bar from './Bar.vue' +import FooBar from './FooBar.vue' + +describe('Foo', () => { + it('renders a div', async () => { + const str = await renderToString(Foo, { + slots: { + default: [Bar, FooBar], + fooBar: FooBar, // Correspondra à , + foo: '
' + } + }) + expect(str).toContain('
') + }) +}) +``` + +**Les propriétés globales des Stubbing :** + +```js +import { renderToString } from '@vue/server-test-utils' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', async () => { + const $route = { path: 'http://www.example-path.com' } + const str = await renderToString(Foo, { + mocks: { + $route + } + }) + expect(str).toContain($route.path) + }) +}) +``` diff --git a/docs/fr/api/selectors.md b/docs/fr/api/selectors.md new file mode 100644 index 000000000..745278ae9 --- /dev/null +++ b/docs/fr/api/selectors.md @@ -0,0 +1,60 @@ +## Les Sélecteurs + +Beaucoup de méthodes prennent un sélecteur comme argument. Un sélecteur peut être soit un sélecteur CSS, un composant Vue ou un objet d'option de recherche. + +### Les sélecteurs CSS + +Mount gère tous les sélecteurs CSS valide : + +- sélecteur de balise (`div`, `foo`, `bar`) +- sélecteur de classe(`.foo`, `.bar`) +- sélecteur d'attribut(`[foo]`, `[foo="bar"]`) +- sélecteur d'ID (`#foo`, `#bar`) +- sélecteur de pseudo-classe (`div:first-of-type`) + +Vous pouvez également utiliser des combinateurs: + +- combinateurs de descendance direct (`div > #bar > .foo`) +- combinateurs de descendance général (`div #bar .foo`) +- sélecteur de frére adjacent (`div + .foo`) +- sélecteur de frère général (`div ~ .foo`) + +### Les composants Vue + +Les composants de Vue sont également des sélecteurs valables. + +```js +// Foo.vue + +export default { + name: 'FooComponent' +} +``` + +```js +import { shallowMount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = shallowMount(Foo) +expect(wrapper.is(Foo)).toBe(true) +``` + +### L'option objet `find` + +#### Name + +En utilisant un objet d'option de recherche, Vue Test Utils permet de sélectionner des éléments par un `name` de composant sur les composants wrapper. + +```js +const buttonWrapper = wrapper.find({ name: 'my-button' }) +buttonWrapper.trigger('click') +``` + +#### Ref + +En utilisant un objet d'option de recherche, Vue Test Utils permet de sélectionner des éléments par `$ref` sur les composants wrapper + +```js +const buttonWrapper = wrapper.find({ ref: 'myButton' }) +buttonWrapper.trigger('click') +``` diff --git a/docs/fr/api/shallowMount.md b/docs/fr/api/shallowMount.md new file mode 100644 index 000000000..6fce13b30 --- /dev/null +++ b/docs/fr/api/shallowMount.md @@ -0,0 +1,118 @@ +## shallowMount() + +- **Arguments:** + + - `{Component} component` + - `{Object} options` + - `{HTMLElement|string} string` + - `{boolean} attachToDocument` + - `{Object} context` + - `{Array|Component} children` + - `{Object} slots` + - `{Array|Component|String} default` + - `{Array|Component|String} named` + - `{Object} mocks` + - `{Object|Array} stubs` + - `{Vue} localVue` + +- **Retours:** `{Wrapper}` + +- **Options:** + +See [options](./options.md) + +- **Usage:** + +Comme [`mount`](mount.md), il crée un [`Wrapper`](wrapper/) qui contient le composant Vue monté et rendu, mais avec des composants enfants écrasés. + +**Sans les options:** + +```js +import { shallowMount } from '@vue/test-utils' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', () => { + const wrapper = shallowMount(Foo) + expect(wrapper.contains('div')).toBe(true) + }) +}) +``` + +**Avec les options de Vue:** + +```js +import { shallowMount } from '@vue/test-utils' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', () => { + const wrapper = shallowMount(Foo, { + propsData: { + color: 'red' + } + }) + expect(wrapper.props().color).toBe('red') + }) +}) +``` + +**Rattacher au DOM:** + +```js +import { shallowMount } from '@vue/test-utils' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', () => { + const div = document.createElement('div') + document.body.appendChild(div) + const wrapper = shallowMount(Foo, { + attachTo: div + }) + expect(wrapper.contains('div')).toBe(true) + wrapper.destroy() + }) +}) +``` + +**Slots par défaut et nommés:** + +```js +import { shallowMount } from '@vue/test-utils' +import Foo from './Foo.vue' +import Bar from './Bar.vue' +import FooBar from './FooBar.vue' + +describe('Foo', () => { + it('renders a div', () => { + const wrapper = shallowMount(Foo, { + slots: { + default: [Bar, FooBar], + fooBar: FooBar, // Correspondra à , + foo: '
' + } + }) + expect(wrapper.contains('div')).toBe(true) + }) +}) +``` + +**Les propriétés globales des Stubbing :** + +```js +import { shallowMount } from '@vue/test-utils' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', () => { + const $route = { path: 'http://www.example-path.com' } + const wrapper = shallowMount(Foo, { + mocks: { + $route + } + }) + expect(wrapper.vm.$route.path).toBe($route.path) + }) +}) +``` diff --git a/docs/fr/api/wrapper-array/README.md b/docs/fr/api/wrapper-array/README.md new file mode 100644 index 000000000..47a8dab50 --- /dev/null +++ b/docs/fr/api/wrapper-array/README.md @@ -0,0 +1,29 @@ +# WrapperArray + +Un `WrapperArray` est un objet qui contient un tableau de [`Wrappers`](../wrapper/), et des méthodes pour tester les `Wrappers`. + +## Propriétés + +### `wrappers` + +`array` (lecture seulement): les `Wrappers` contenus dans le `WrapperArray` + +### `length` + +`number` (lecture seulement): le nombre de `Wrappers`constenus dans le `WrapperArry` + +## Les Méthodes + +!!!include(docs/fr/api/wrapper-array/at.md)!!! +!!!include(docs/fr/api/wrapper-array/contains.md)!!! +!!!include(docs/fr/api/wrapper-array/destroy.md)!!! +!!!include(docs/fr/api/wrapper-array/filter.md)!!! +!!!include(docs/fr/api/wrapper-array/is.md)!!! +!!!include(docs/fr/api/wrapper-array/isEmpty.md)!!! +!!!include(docs/fr/api/wrapper-array/isVueInstance.md)!!! +!!!include(docs/fr/api/wrapper-array/setChecked.md)!!! +!!!include(docs/fr/api/wrapper-array/setData.md)!!! +!!!include(docs/fr/api/wrapper-array/setMethods.md)!!! +!!!include(docs/fr/api/wrapper-array/setProps.md)!!! +!!!include(docs/fr/api/wrapper-array/setValue.md)!!! +!!!include(docs/fr/api/wrapper-array/trigger.md)!!! diff --git a/docs/fr/api/wrapper-array/at.md b/docs/fr/api/wrapper-array/at.md new file mode 100644 index 000000000..48c2c8ec6 --- /dev/null +++ b/docs/fr/api/wrapper-array/at.md @@ -0,0 +1,26 @@ +## at + +Retourne `Wrapper` à `index` passé. Utilise une numérotation basée sur les zéros (c'est-à-dire que le premier élément est à l'index 0). +Si `index` est négatif, l'indexation commence à partir du dernier élément (c'est-à-dire que le premier élément est à l'index -1). + +- **Arguments:** + + - `{number} index` + +- **Retours:** `{Wrapper}` + +- **Exemple:** + +```js +import { shallowMount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = shallowMount(Foo) +const divArray = wrapper.findAll('div') + +const secondDiv = divArray.at(1) +expect(secondDiv.is('div')).toBe(true) + +const lastDiv = divArray.at(-1) +expect(lastDiv.is('div')).toBe(true) +``` diff --git a/docs/fr/api/wrapper-array/contains.md b/docs/fr/api/wrapper-array/contains.md new file mode 100644 index 000000000..476d5be2f --- /dev/null +++ b/docs/fr/api/wrapper-array/contains.md @@ -0,0 +1,24 @@ +### contains + +Affirmer que chaque emballage dans `WrapperArray` contient un sélecteur. + +Utilisez tout [selector](../selectors.md) valide. + +- **Arguments:** + + - `{string|Component} selector` + +- **Retours:** `{boolean}` + +- **Exemple:** + +```js +import { shallowMount } from '@vue/test-utils' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = shallowMount(Foo) +const divArray = wrapper.findAll('div') +expect(divArray.contains('p')).toBe(true) +expect(divArray.contains(Bar)).toBe(true) +``` diff --git a/docs/fr/api/wrapper-array/destroy.md b/docs/fr/api/wrapper-array/destroy.md new file mode 100644 index 000000000..5449d6f90 --- /dev/null +++ b/docs/fr/api/wrapper-array/destroy.md @@ -0,0 +1,16 @@ +## destroy + +Détruit chaque Vue `Wrapper` dans `WrapperArray`. + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +const divArray = wrapper.findAll('div') +expect(divArray.contains('p')).toBe(true) +divArray.destroy() +expect(divArray.contains('p')).toBe(false) +``` diff --git a/docs/fr/api/wrapper-array/exists.md b/docs/fr/api/wrapper-array/exists.md new file mode 100644 index 000000000..ef3e8721d --- /dev/null +++ b/docs/fr/api/wrapper-array/exists.md @@ -0,0 +1,18 @@ +## exists + +Vérifie que `WrapperArray` existe. + +Renvoie false si elle est appelée sur un `WrapperArray` sans objets Wrapper`, ou si l'un d'entre eux n'existe pas. + +- **Returns:** `{boolean}` + +- **Example:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.findAll('div').exists()).toBe(true) +expect(wrapper.findAll('does-not-exist').exists()).toBe(false) +``` diff --git a/docs/fr/api/wrapper-array/filter.md b/docs/fr/api/wrapper-array/filter.md new file mode 100644 index 000000000..da74cafb4 --- /dev/null +++ b/docs/fr/api/wrapper-array/filter.md @@ -0,0 +1,25 @@ +## filter + +Filtrez `WrapperArray` avec une fonction de prédicat sur les objets `Wrapper`. + +Le comportement de cette méthode est similaire à celui de [Array.prototype.filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter). + +- **Arguments:** + + - `{function} predicate` + +- **Retours:** `{WrapperArray}` + +Une nouvelle instance `WrapperArray` contenant des instances de `Wrapper` qui retourne vrai pour la fonction prédicat. + +- **Exemple:** + +```js +import { shallowMount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = shallowMount(Foo) +const filteredDivArray = wrapper + .findAll('div') + .filter(w => !w.classes('filtered')) +``` diff --git a/docs/fr/api/wrapper-array/is.md b/docs/fr/api/wrapper-array/is.md new file mode 100644 index 000000000..465aecb37 --- /dev/null +++ b/docs/fr/api/wrapper-array/is.md @@ -0,0 +1,20 @@ +## is + +Affirmer que chaque `Wrapper` dans le noeud DOM `WrapperArray` ou `vm` correspond à [selector](../selectors.md). + +- **Arguments:** + + - `{string|Component} selector` + +- **Retours:** `{boolean}` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +const divArray = wrapper.findAll('div') +expect(divArray.is('div')).toBe(true) +``` diff --git a/docs/fr/api/wrapper-array/isEmpty.md b/docs/fr/api/wrapper-array/isEmpty.md new file mode 100644 index 000000000..aac66f3ee --- /dev/null +++ b/docs/fr/api/wrapper-array/isEmpty.md @@ -0,0 +1,24 @@ +## isEmpty + +::: Avertissement de déprédation +`isEmpty` est dépréciée et sera supprimée dans les prochaines versions. + +Pensez à un matcheur personnalisé comme ceux fournis dans [jest-dom](https://github.com/testing-library/jest-dom#tobeempty). + +En cas d'utilisation avec findComponent, accédez à l'élément DOM avec findComponent(Comp).element +::: + +Affirmer que chaque `Wrapper` dans `WrapperArray` ne contient pas de nœud enfant. + +- **Retours:** `{boolean}` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +const divArray = wrapper.findAll('div') +expect(divArray.isEmpty()).toBe(true) +``` diff --git a/docs/fr/api/wrapper-array/isVisible.md b/docs/fr/api/wrapper-array/isVisible.md new file mode 100644 index 000000000..383ca85c0 --- /dev/null +++ b/docs/fr/api/wrapper-array/isVisible.md @@ -0,0 +1,21 @@ +## isVisible + +Affirme que chaque `Wrapper` de `WrapperArray` est visible. + +Retourne `false` si au moins un élément parent a le style `display: none`, `visibility hidden`, `opacity :0`, est situé à l'intérieur de la balise `
` fermée ou possède l'attribut `hidden`. + +Ceci peut être utilisé pour affirmer qu'un élément est caché par `v-show`. + +- **Retours:** `{boolean}` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.isVisible()).toBe(true) +expect(wrapper.findAll('.is-not-visible').isVisible()).toBe(false) +expect(wrapper.findAll('.is-visible').isVisible()).toBe(true) +``` diff --git a/docs/fr/api/wrapper-array/isVueInstance.md b/docs/fr/api/wrapper-array/isVueInstance.md new file mode 100644 index 000000000..0c86b8e0d --- /dev/null +++ b/docs/fr/api/wrapper-array/isVueInstance.md @@ -0,0 +1,25 @@ +## isVueInstance + +::: warning Avertissement de déprédation +`isVueInstance` est dépréciée et sera supprimée dans les prochaines versions. + +Les tests reposant sur l'affirmation "isVueInstance" n'ont que peu ou pas de valeur. Nous suggérons de les remplacer par des assertions intentionnelles. + +Pour conserver ces tests, un remplacement valable de `isVueInstance()` est une assertion véridique de `wrapper.find(...).vm`. +::: + +Affirmer que chaque `Wrapper` dans `WrapperArray` est une instance de Vue. + +- **Retours:** `{boolean}` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = mount(Foo) +const barArray = wrapper.findAll(Bar) +expect(barArray.isVueInstance()).toBe(true) +``` diff --git a/docs/fr/api/wrapper-array/setChecked.md b/docs/fr/api/wrapper-array/setChecked.md new file mode 100644 index 000000000..151ce91d2 --- /dev/null +++ b/docs/fr/api/wrapper-array/setChecked.md @@ -0,0 +1,39 @@ +## setChecked + +Cette méthode est un alias du code suivant + +```js +wrapperArray.wrappers.forEach(wrapper => wrapper.setChecked(checked)) +``` + +- **Arguments:** + + - `{Boolean} checked (default: true)` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' + +const wrapper = mount({ + data() { + return { + t1: false, + t2: '' + } + }, + template: ` +
+ + + +
` +}) + +const wrapperArray = wrapper.findAll('.foo') +expect(wrapper.vm.t1).toEqual(false) +expect(wrapper.vm.t2).toEqual('') +wrapperArray.setChecked() +expect(wrapper.vm.t1).toEqual(true) +expect(wrapper.vm.t2).toEqual('foo') +``` diff --git a/docs/fr/api/wrapper-array/setData.md b/docs/fr/api/wrapper-array/setData.md new file mode 100644 index 000000000..6e75829ec --- /dev/null +++ b/docs/fr/api/wrapper-array/setData.md @@ -0,0 +1,22 @@ +## setData + +Défini les données `Wrapper` `vm` sur chaque `Wrapper` dans `WrapperArray`. + +**Note chaque `Wrapper` doit contenir une instance de Vue.** + +- **Arguments:** + + - `{Object} data` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = mount(Foo) +const barArray = wrapper.findAll(Bar) +barArray.setData({ foo: 'bar' }) +expect(barArray.at(0).vm.foo).toBe('bar') +``` diff --git a/docs/fr/api/wrapper-array/setMethods.md b/docs/fr/api/wrapper-array/setMethods.md new file mode 100644 index 000000000..7c3ffa052 --- /dev/null +++ b/docs/fr/api/wrapper-array/setMethods.md @@ -0,0 +1,36 @@ +## setMethods + +::: warning Avertissement de déprédation +`setMethods` est dépréciée et sera supprimée dans les prochaines versions. + +Il n'y a pas de voie clair pour remplacer les "setMethods", car cela dépend vraiment de votre utilisation précédente. Cela conduit facilement à des tests bancals qui s'appuient sur des détails de mise en œuvre, ce qui [est déconseillé](https://github.com/vuejs/rfcs/blob/668866fa71d70322f6a7689e88554ab27d349f9c/active-rfcs/0000-vtu-api.md#setmethods). + +Nous suggérons de repenser ces tests. + +Pour mettre au point une méthode complexe, il faut l'extraire du composant et le tester de manière isolée. Pour affirmer qu'une méthode est appelée, utilisez votre testeur pour l'espionner. +::: + +Défini les `Wrapper` `vm` et force la mise à jour de chaque `Wrapper` dans `WrapperArray`. + +**Note chaque `Wrapper` doit contenir une instance de Vue.** + +- **Arguments:** + + - `{Object} methods` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import sinon from 'sinon' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = mount(Foo) +const barArray = wrapper.findAll(Bar) +const clickMethodStub = sinon.stub() + +barArray.setMethods({ clickMethod: clickMethodStub }) +barArray.at(0).trigger('click') +expect(clickMethodStub.called).toBe(true) +``` diff --git a/docs/fr/api/wrapper-array/setProps.md b/docs/fr/api/wrapper-array/setProps.md new file mode 100644 index 000000000..3d6a2ddde --- /dev/null +++ b/docs/fr/api/wrapper-array/setProps.md @@ -0,0 +1,22 @@ +## setProps + +Défini les props de `Wrapper` `vm` et force la mise à jour de chaque `Wrapper` dans `WrapperArray`. + +**Note chaque `Wrapper` doit contenir une instance de Vue.** + +- **Arguments:** + + - `{Object} props` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = mount(Foo) +const barArray = wrapper.findAll(Bar) +barArray.setProps({ foo: 'bar' }) +expect(barArray.at(0).vm.foo).toBe('bar') +``` diff --git a/docs/fr/api/wrapper-array/setValue.md b/docs/fr/api/wrapper-array/setValue.md new file mode 100644 index 000000000..75ce0e857 --- /dev/null +++ b/docs/fr/api/wrapper-array/setValue.md @@ -0,0 +1,38 @@ +## setValue + +Cette méthode est un alias du code qui suivant. + +```js +wrapperArray.wrappers.forEach(wrapper => wrapper.setValue(value)) +``` + +- **Arguments:** + + - `{any} value` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' + +const wrapper = mount({ + data() { + return { + t1: '', + t2: '' + } + }, + template: ` +
+ + +
` +}) + +const wrapperArray = wrapper.findAll('.foo') +expect(wrapper.vm.t1).toEqual('') +expect(wrapper.vm.t2).toEqual('') +wrapperArray.setValue('foo') +expect(wrapper.vm.t1).toEqual('foo') +expect(wrapper.vm.t2).toEqual('foo') +``` diff --git a/docs/fr/api/wrapper-array/trigger.md b/docs/fr/api/wrapper-array/trigger.md new file mode 100644 index 000000000..c859254de --- /dev/null +++ b/docs/fr/api/wrapper-array/trigger.md @@ -0,0 +1,27 @@ +## trigger + +Déclenche un [event](../../guides/dom-events.md#trigger-events) sur chaque `Wrapper` dans le nœud DOM `WrapperArray`. + +**Note chaque `Wrapper` doit contenir une instance de Vue.** + +- **Arguments:** + + - `{string} eventType` **required** + - `{Object} options` **optional** + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import sinon from 'sinon' +import Foo from './Foo.vue' + +const clickHandler = sinon.stub() +const wrapper = mount(Foo, { + propsData: { clickHandler } +}) + +const divArray = wrapper.findAll('div') +divArray.trigger('click') +expect(clickHandler.called).toBe(true) +``` diff --git a/docs/fr/api/wrapper/README.md b/docs/fr/api/wrapper/README.md new file mode 100644 index 000000000..6ecc91e4c --- /dev/null +++ b/docs/fr/api/wrapper/README.md @@ -0,0 +1,57 @@ +# Wrapper + +Vue Test Utils est une API basée sur un wrapper + +Un `wrapper`est un objet qui contient un composant ou vnode monté et des méthodes pour tester le composant or vnode + +
Découvrez l'objet Wrapper dans une leçon vidéo GRATUITE de Vue School
+ +## Propriétés + +### `vm` + +`Component`(lecture seule): c'est l'instance `Vue`. Vous pouvez accéder à toutes les [méthodes et propriétés de l'instance d'un vm](https://vuejs.org/v2/api/#Instance-Properties) avec un `wrapper.vm`. Ceci n'existe que pour le wrapper du composant Vue ou le wrapper du composant Vue liant les éléments HTMLE. + +### `element` + +`HTMLElement` (lecture seule): le nœud DOM racine du wrapper + +### `options` + +#### `options.attachedToDocument` + +`Boolean` (lecture seule): `true` si le composant est [joint au document](../options.md) lorsqu'il est rendu + +### `selector` + +`Selector`: le sélecteur qui a été utilisé par [`find()`](./find.md) ou [`findAll()`](./findAll.md) pour créer cette enveloppe. + +## Méthodes + +!!!inclus(docs/fr/api/wrapper/attributes.md)!!! +!!!inclus(docs/fr/api/wrapper/classes.md)!!! +!!!inclus(docs/fr/api/wrapper/contains.md)!!! +!!!inclus(docs/fr/api/wrapper/destroy.md)!!! +!!!inclus(docs/fr/api/wrapper/emitted.md)!!! +!!!inclus(docs/fr/api/wrapper/emittedByOrder.md)!!! +!!!inclus(docs/fr/api/wrapper/exists.md)!!! +!!!inclus(docs/fr/api/wrapper/find.md)!!! +!!!inclus(docs/fr/api/wrapper/findAll.md)!!! +!!!inclus(docs/fr/api/wrapper/findComponent.md)!!! +!!!inclus(docs/fr/api/wrapper/findAllComponents.md)!!! +!!!inclus(docs/fr/api/wrapper/html.md)!!! +!!!inclus(docs/fr/api/wrapper/get.md)!!! +!!!inclus(docs/fr/api/wrapper/is.md)!!! +!!!inclus(docs/fr/api/wrapper/isEmpty.md)!!! +!!!inclus(docs/fr/api/wrapper/isVisible.md)!!! +!!!inclus(docs/fr/api/wrapper/isVueInstance.md)!!! +!!!inclus(docs/fr/api/wrapper/name.md)!!! +!!!inclus(docs/fr/api/wrapper/props.md)!!! +!!!inclus(docs/fr/api/wrapper/setChecked.md)!!! +!!!inclus(docs/fr/api/wrapper/setData.md)!!! +!!!inclus(docs/fr/api/wrapper/setMethods.md)!!! +!!!inclus(docs/fr/api/wrapper/setProps.md)!!! +!!!inclus(docs/fr/api/wrapper/setSelected.md)!!! +!!!inclus(docs/fr/api/wrapper/setValue.md)!!! +!!!inclus(docs/fr/api/wrapper/text.md)!!! +!!!inclus(docs/fr/api/wrapper/trigger.md)!!! diff --git a/docs/fr/api/wrapper/attributes.md b/docs/fr/api/wrapper/attributes.md new file mode 100644 index 000000000..2aea32639 --- /dev/null +++ b/docs/fr/api/wrapper/attributes.md @@ -0,0 +1,20 @@ +## attributes + +Renvoie l'objet attribut de nœud DOM `Wrapper`. Si la `key` est fournie, la valeur de la `key` sera renvoyée. + +- **Arguments:** + + - `{string} key` **facultatif** + +- **Retours:** `{[attribute: string]: any} | string` + +- **Example:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.attributes().id).toBe('foo') +expect(wrapper.attributes('id')).toBe('foo') +``` diff --git a/docs/fr/api/wrapper/classes.md b/docs/fr/api/wrapper/classes.md new file mode 100644 index 000000000..026da61d0 --- /dev/null +++ b/docs/fr/api/wrapper/classes.md @@ -0,0 +1,22 @@ +## classes + +Retourne les classes de nœuds DOM `Wrapper`. + +Retourne un tableau de noms de classes ou un booléen si un nom de classe est fourni. + +- **Arguments:** + + - `{string} className` **facultatif** + +- **Retours:** `Array<{string}> | boolean` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.classes()).toContain('bar') +expect(wrapper.classes('bar')).toBe(true) +``` diff --git a/docs/fr/api/wrapper/contains.md b/docs/fr/api/wrapper/contains.md new file mode 100644 index 000000000..21f94c36f --- /dev/null +++ b/docs/fr/api/wrapper/contains.md @@ -0,0 +1,27 @@ +## contains + +::: warning Avertissement de déprédation +L'utilisation de `contains` est déconseillée et sera supprimée dans les prochaines versions. Utilisez [`find`](./find.md) pour les nœuds DOM (en utilisant la syntaxe `querySelector`), [`findComponent`](./findComponent.md) pour les composants, ou [`wrapper.get`](./get.md) à la place. +::: + +Affirmer que le `Wrapper` contient un élément ou un composant correspondant [selector](../selectors.md). + +- **Arguments:** + + - `{string|Component} selector` + +- **Retours:** `{boolean}` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = mount(Foo) +expect(wrapper.contains('p')).toBe(true) +expect(wrapper.contains(Bar)).toBe(true) +``` + +- **Voir aussi :** [selectors](../selectors.md) diff --git a/docs/fr/api/wrapper/destroy.md b/docs/fr/api/wrapper/destroy.md new file mode 100644 index 000000000..16f16a06f --- /dev/null +++ b/docs/fr/api/wrapper/destroy.md @@ -0,0 +1,23 @@ +## destroy + +Détruit une instance du composant Vue. + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import sinon from 'sinon' + +const spy = sinon.stub() +mount({ + render: null, + destroyed() { + spy() + } +}).destroy() +expect(spy.calledOnce).toBe(true) +``` + +si l'option `attachTo` ou `attachToDocument` a provoqué le montage du composant sur le document, les éléments du DOM du composant seront également supprimés du document. + +Pour les composants fonctionnels, `destroy` ne supprime du document que les éléments DOM rendus. diff --git a/docs/fr/api/wrapper/emitted.md b/docs/fr/api/wrapper/emitted.md new file mode 100644 index 000000000..b79a8dc8a --- /dev/null +++ b/docs/fr/api/wrapper/emitted.md @@ -0,0 +1,61 @@ +## emitted + +Renvoie un objet contenant des événements personnalisés émis par le `Wrapper` `vm`. + +- **Retours:** `{ [name: string]: Array> }` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' + +test('emit demo', async () => { + const wrapper = mount(Component) + + wrapper.vm.$emit('foo') + wrapper.vm.$emit('foo', 123) + + await wrapper.vm.$nextTick() // Attendre que les $emits aient été traités + + /* + wrapper.emitted() renvoie l'objet suivant : + { + foo: [[], [123]] + } + */ + + // Affirmation de l'élément émis + expect(wrapper.emitted().foo).toBeTruthy() + + // Affirmation du nombre d'élément + expect(wrapper.emitted().foo.length).toBe(2) + + // Affirmation du paramètre additionnel + expect(wrapper.emitted().foo[1]).toEqual([123]) +}) +``` + +Vous pouvez également écrire ce qui précède comme suit : + +```js +// Affirmation de l'élément émis +expect(wrapper.emitted('foo')).toBeTruthy() + +// Affirmation du nombre d'élément +expect(wrapper.emitted('foo').length).toBe(2) + +// Affirmation du paramètre additionnel +expect(wrapper.emitted('foo')[1]).toEqual([123]) +``` + +La méthode `.emitted()` renvoie le même objet chaque fois qu'il est appelé, et non un nouveau, et donc l'objet se met à jour lorsque de nouveaux événements sont déclenchés : + +```js +const emitted = wrapper.emitted() + +expect(emitted.foo.length).toBe(1) + +// Faire quelque chose pour que le "wrapper" émette l'événement "foo" + +expect(emitted.foo.length).toBe(2) +``` diff --git a/docs/fr/api/wrapper/emittedByOrder.md b/docs/fr/api/wrapper/emittedByOrder.md new file mode 100644 index 000000000..e58c21bcf --- /dev/null +++ b/docs/fr/api/wrapper/emittedByOrder.md @@ -0,0 +1,33 @@ +## emittedByOrder + +::: warning Avertissement de déprédation +Le terme `emittedByOrder` est obsolète et sera supprimé dans les prochaines versions. + +Utilisez plutôt `wrapper.emitted`. +::: + +Retourne un tableau contenant des événements personnalisés émis par le `Wrapper` `vm` . + +- **Retours:** `Array<{ name: string, args: Array }>` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' + +const wrapper = mount(Component) + +wrapper.vm.$emit('foo') +wrapper.vm.$emit('bar', 123) + +/* +wrapper.emittedByOrder() renvoie le tableau suivant : +[ + { name: 'foo', args: [] }, + { name: 'bar', args: [123] } +] +*/ + +// Faire valoir l'ordre d'émission d'événement +expect(wrapper.emittedByOrder().map(e => e.name)).toEqual(['foo', 'bar']) +``` diff --git a/docs/fr/api/wrapper/exists.md b/docs/fr/api/wrapper/exists.md new file mode 100644 index 000000000..70f0cdf19 --- /dev/null +++ b/docs/fr/api/wrapper/exists.md @@ -0,0 +1,20 @@ +## exists + +Affirmation de l'existence de `wrapper`. + +Renvoie faux si on l'appelle sur un `Wrapper` vide. + +- **Retours:** `{boolean}` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.exists()).toBe(true) +expect(wrapper.find('does-not-exist').exists()).toBe(false) +expect(wrapper.findAll('div').exists()).toBe(true) +expect(wrapper.findAll('does-not-exist').exists()).toBe(false) +``` diff --git a/docs/fr/api/wrapper/find.md b/docs/fr/api/wrapper/find.md new file mode 100644 index 000000000..7f0fc0046 --- /dev/null +++ b/docs/fr/api/wrapper/find.md @@ -0,0 +1,43 @@ +## find + +::: warning Avertissement de déprédation +L'utilisation de `find` pour rechercher un composant est déconseillée et sera supprimée. Utilisez plutôt [findComponent](https://vue-test-utils.vuejs.org/api/wrapper/findComponent.html). +La méthode `find` continuera à fonctionner pour trouver des éléments en utilisant n'importe quel [selector] valide (../selectors.md). +::: + +Retourne le "wrapper" du premier nœud DOM ou le sélecteur de composants Vue correspondant. + +Utilisez n'importe quel sélecteur DOM valide (utilise la syntaxe querySelector). + +- **Arguments:** + + - `{string} selector` + +- **Retours:** `{Wrapper}` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = mount(Foo) + +const div = wrapper.find('div') +expect(div.exists()).toBe(true) + +const byId = wrapper.find('#bar') +expect(byId.element.id).toBe('bar') +``` + +- **Note:** + + - Vous pouvez enchaîner les appels find ensemble : + +```js +const button = wrapper.find({ ref: 'testButton' }) +expect(button.find('.icon').exists()).toBe(true) +``` + +Voir aussi : [get](./get.md). diff --git a/docs/fr/api/wrapper/findAll.md b/docs/fr/api/wrapper/findAll.md new file mode 100644 index 000000000..982ca9c99 --- /dev/null +++ b/docs/fr/api/wrapper/findAll.md @@ -0,0 +1,32 @@ +## findAll + +::: warning Avertissement de déprédation +L'utilisation de `findAll` pour rechercher des composants est obsolète et sera supprimée. Utilisez plutôt findAllComponents. +La méthode `findAll` continuera à fonctionner pour trouver des éléments en utilisant n'importe quel [sélecteur] valide (../selectors.md). +::: + +Retourne un [`WrapperArray`](../wrapper-array/). + +Utilisez n'importe quel [selector](../selectors.md) valide. + +- **Arguments:** + + - `{string|Component} selector` + +- **Retours:** `{WrapperArray}` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = mount(Foo) + +const div = wrapper.findAll('div').at(0) +expect(div.is('div')).toBe(true) + +const bar = wrapper.findAll(Bar).at(0) //Utilisation dépréciée +expect(bar.is(Bar)).toBe(true) +``` diff --git a/docs/fr/api/wrapper/findAllComponents.md b/docs/fr/api/wrapper/findAllComponents.md new file mode 100644 index 000000000..59fad5553 --- /dev/null +++ b/docs/fr/api/wrapper/findAllComponents.md @@ -0,0 +1,23 @@ +## findAllComponents + +Retourne un [`WrapperArray`](../wrapper-array/) de tous les composants Vue correspondants. + +- **Arguments:** + + - `{Component|ref|name} selector` + +- **Retours:** `{WrapperArray}` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = mount(Foo) +const bar = wrapper.findAllComponents(Bar).at(0) +expect(bar.exists()).toBeTruthy() +const bars = wrapper.findAllComponents(Bar) +expect(bar).toHaveLength(1) +``` diff --git a/docs/fr/api/wrapper/findComponent.md b/docs/fr/api/wrapper/findComponent.md new file mode 100644 index 000000000..4ec8363e0 --- /dev/null +++ b/docs/fr/api/wrapper/findComponent.md @@ -0,0 +1,26 @@ +## findComponent + +Retourne le `wrapper` du premier composant Vue correspondant. + +- **Arguments:** + + - `{Component|ref|name} selector` + +- **Retours:** `{Wrapper}` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = mount(Foo) + +const bar = wrapper.findComponent(Bar) // => trouve Bar par instance de composant +expect(bar.exists()).toBe(true) +const barByName = wrapper.findComponent({ name: 'bar' }) // => trouve Bar par `name` +expect(barByName.exists()).toBe(true) +const barRef = wrapper.findComponent({ ref: 'bar' }) // => trouve Bar par `ref` +expect(barRef.exists()).toBe(true) +``` diff --git a/docs/fr/api/wrapper/get.md b/docs/fr/api/wrapper/get.md new file mode 100644 index 000000000..d2379833b --- /dev/null +++ b/docs/fr/api/wrapper/get.md @@ -0,0 +1,23 @@ +## get + +::: warning Avertissement de déprédation +L'utilisation de `get`pour rechercher un Composant est dépréciée et sera supprimée. Utilisé plutôt [`getCompoenent`](./getComponent.md) +::: +Fonctionne exactement comme [find](./find.md), mais lance une erreur si aucun élément correspondant au sélecteur donné n'est trouvé. Vous devez utiliser `find` lorsque vous recherchez un élément qui peut ne pas exister. Vous devez utiliser cette méthode lorsque vous obtenez un élément qui devrait exister et elle fournira un beau message d'erreur si ce n'est pas le cas. + +```js +import { mount } from '@vue/test-utils' + +const wrapper = mount(Foo) + +// Similaire à `wrapper.find`. +// `get` lancera une erreur si un élément n'est pas trouvé. `find` ne fera rien. +expect(wrapper.get('.does-exist')) + +expect(() => wrapper.get('.does-not-exist')) + .to.throw() + .with.property( + 'message', + 'Unable to find .does-not-exist within:
the actual DOM here...
' + ) +``` diff --git a/docs/fr/api/wrapper/getComponent.md b/docs/fr/api/wrapper/getComponent.md new file mode 100644 index 000000000..fe6f3c328 --- /dev/null +++ b/docs/fr/api/wrapper/getComponent.md @@ -0,0 +1,25 @@ +## getComponent + +Fonctionne comme [findComponent](./findComponent.md) mais génère une erreur si rien ne correspond au sélecteur donné. +le sélecteur donné n'est trouvé. Vous devriez utiliser `findComponent` lorsque vous recherchez un élément qui peut ne pas exister. Vous devriez utiliser cette méthode lorsque vous obtenez un élément qui devrait exister et il fournira un message d'erreur sympa si ce n'est pas le cas. + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = mount(Foo) + +// Similaire à `wrapper.findComponent`. +// `getComponent` lancera une erreur si un élément n'est pas trouvé. `findComponent` ne fera rien. +expect(wrapper.getComponent(Bar)) // => gets Bar by component instance +expect(wrapper.getComponent({ name: 'bar' })) // => gets Bar by `name` +expect(wrapper.getComponent({ ref: 'bar' })) // => gets Bar by `ref` + +expect(() => wrapper.getComponent({ name: 'does-not-exist' })) + .to.throw() + .with.property( + 'message', + "Unable to get a component named 'does-not-exist' within:
the actual DOM here...
" + ) +``` diff --git a/docs/fr/api/wrapper/html.md b/docs/fr/api/wrapper/html.md new file mode 100644 index 000000000..608943088 --- /dev/null +++ b/docs/fr/api/wrapper/html.md @@ -0,0 +1,15 @@ +## html + +Renvoie le HTML du nœud DOM `Wrapper` sous forme de chaîne. + +- **Retours:** `{string}` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.html()).toBe('

Foo

') +``` diff --git a/docs/fr/api/wrapper/is.md b/docs/fr/api/wrapper/is.md new file mode 100644 index 000000000..d312fbb53 --- /dev/null +++ b/docs/fr/api/wrapper/is.md @@ -0,0 +1,36 @@ +## is + +::: warning Avertissement de déprédation +L'utilisation de `is` pour affirmer que le nœud DOM est déprécié et sera supprimé. + +Considérez un appariement personnalisé tel que ceux fournis dans [jest-dom](https://github.com/testing-library/jest-dom#custom-matchers). +ou pour l'assertion de type d'élément DOM, utilisez native [`Element.tagName`](https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName) à la place. + +Pour conserver ces tests, un remplacement valable pour : + +- `is('DOM_SELECTOR')` est une affirmation de `wrapper.element.tagName`. +- `is('ATTR_NAME')` est une affirmation véridique d `wrapper.attributes('ATTR_NAME')`. +- `is('CLASS_NAME')` est une affirmation véridique d `wrapper.classes('CLASS_NAME')`. + +L'affirmation contre la définition du composant n'est pas dépréciée + +En cas d'utilisation avec findComponent, accédez à l'élément DOM avec `findComponent(Comp).element` +::: + +Affirmer `Wrapper` le noeud DOM ou `vm` correspond. [selector](../selectors.md). + +- **Arguments:** + + - `{string|Component} selector` + +- **Retours:** `{boolean}` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.is('div')).toBe(true) +``` diff --git a/docs/fr/api/wrapper/isEmpty.md b/docs/fr/api/wrapper/isEmpty.md new file mode 100644 index 000000000..fd9440425 --- /dev/null +++ b/docs/fr/api/wrapper/isEmpty.md @@ -0,0 +1,23 @@ +## isEmpty + +::: warning Avertissement de déprédation +`isEmpty` est déprécié et sera supprimé dans les prochaines versions. + +Considérez un appariement personnalisé tel que ceux fournis dans [jest-dom](https://github.com/testing-library/jest-dom#tobeempty). + +En cas d'utilisation avec findComponent, accédez à l'élément DOM avec `findComponent(Comp).element` +::: + +Affirmer que `Wrapper` ne contient pas de nœud enfant. + +- **Retours:** `{boolean}` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.isEmpty()).toBe(true) +``` diff --git a/docs/fr/api/wrapper/isVisible.md b/docs/fr/api/wrapper/isVisible.md new file mode 100644 index 000000000..14ead85d1 --- /dev/null +++ b/docs/fr/api/wrapper/isVisible.md @@ -0,0 +1,20 @@ +## isVisible + +Affirmer que `Wrapper` est visible. + +Retourne `false` si un vieil élément a le style `display: none` ou `visibility: hidden`, est situé à l'intérieur de la balise
fermée ou possède un attribut caché. + +Ceci peut être utilisé pour affirmer qu'un élément est caché par `v-show`. + +- **Retours:** `{boolean}` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.isVisible()).toBe(true) +expect(wrapper.find('.is-not-visible').isVisible()).toBe(false) +``` diff --git a/docs/fr/api/wrapper/isVueInstance.md b/docs/fr/api/wrapper/isVueInstance.md new file mode 100644 index 000000000..db7e71721 --- /dev/null +++ b/docs/fr/api/wrapper/isVueInstance.md @@ -0,0 +1,23 @@ +## isVueInstance + +::: warning Avertissement de déprédation +`isVueInstance` est dépréciée et sera supprimée dans les prochaines versions. + +Les tests reposant sur l'affirmation `isVueInstance` n'ont que peu ou pas de valeur. Nous suggérons de les remplacer par des assertions ciblées. + +Pour conserver ces tests, un remplacement valable de `isVueInstance()` est une assertion véridique de `wrapper.find(...).vm`. + +L'assertion Wrapper est l'instance de Vue. +::: + +- **Retours:** `{boolean}` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.isVueInstance()).toBe(true) +``` diff --git a/docs/fr/api/wrapper/name.md b/docs/fr/api/wrapper/name.md new file mode 100644 index 000000000..e87541dd2 --- /dev/null +++ b/docs/fr/api/wrapper/name.md @@ -0,0 +1,21 @@ +## name + +::: warning Avertissement de déprédation +`name` est dépréciée et sera supprimée dans les prochaines versions. +::: + +Retourne le nom du composant si `Wrapper` contient une instance de Vue, ou le nom du tag du nœud DOM `Wrapper` si `Wrapper` ne contient pas d'instance de Vue. + +- **Retours:** `{string}` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.name()).toBe('Foo') +const p = wrapper.find('p') +expect(p.name()).toBe('p') +``` diff --git a/docs/fr/api/wrapper/overview.md b/docs/fr/api/wrapper/overview.md new file mode 100644 index 000000000..5ff613a05 --- /dev/null +++ b/docs/fr/api/wrapper/overview.md @@ -0,0 +1,47 @@ +## overview + +::: warning Avertissement de déprédation +`overview` est dépréciée et sera supprimée dans les prochaines versions. +::: + +Affiche un simple aperçu du `Wrapper`. + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Component from './Component.vue' + +const wrapper = mount(Component) +wrapper.overview() + +// Console output +/* +Wrapper (Visible): + +Html: +
+

My name is Tess Ting

+
+ +Data: { + firstName: Tess, + lastName: Ting +} + +Computed: { + fullName: Tess Ting' +} + +Emitted: {', + foo: [', + 0: [ hello, world ], + 1: [ bye, world ]' + ], + bar: [ + 0: [ hey ]' + ] +} + +*/ +``` diff --git a/docs/fr/api/wrapper/props.md b/docs/fr/api/wrapper/props.md new file mode 100644 index 000000000..785be95d0 --- /dev/null +++ b/docs/fr/api/wrapper/props.md @@ -0,0 +1,26 @@ +## props + +Retourne l'objet props `Wrapper` `vm`. Si `key` est fourni, la valeur pour `key` sera retournée. + +**Note : le Wrapper doit contenir une instance de Vue.** + +- **Arguments:** + + - `{string} key` **facultatif** + +- **Retours:** `{[prop: string]: any} | any` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = mount(Foo, { + propsData: { + bar: 'baz' + } +}) +expect(wrapper.props().bar).toBe('baz') +expect(wrapper.props('bar')).toBe('baz') +``` diff --git a/docs/fr/api/wrapper/setChecked.md b/docs/fr/api/wrapper/setChecked.md new file mode 100644 index 000000000..aa016c337 --- /dev/null +++ b/docs/fr/api/wrapper/setChecked.md @@ -0,0 +1,30 @@ +## setChecked + +Définis la valeur cochée pour l'élément d'entrée de type case à cocher ou radio et met à jour les données liées au `v-model`. + +- **Arguments:** + + - `{Boolean} checked (default: true)` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +const radioInput = wrapper.find('input[type="radio"]') +radioInput.setChecked() +``` + +- **Note:** + +Lorsque vous essayez de mettre la valeur à state via `v-model` par `radioInput.element.checked = true ; radioInput.trigger('input')`, `v-model` n'est pas déclenché. Le `v-model` est déclenché par l'événement `change`. + +`checkboxInput.setChecked(checked)` est un alias du code suivant. + +```js +checkboxInput.element.checked = checked +checkboxInput.trigger('click') +checkboxInput.trigger('change') +``` diff --git a/docs/fr/api/wrapper/setData.md b/docs/fr/api/wrapper/setData.md new file mode 100644 index 000000000..af6f9985e --- /dev/null +++ b/docs/fr/api/wrapper/setData.md @@ -0,0 +1,22 @@ +## setData + +Définis les données `Wrapper` `vm`. + +setData fonctionne en appelant récursivement Vue.set. + +**Note - le Wrapper doit contenir une instance de Vue.** + +- **Arguments:** + + - `{Object} data` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +wrapper.setData({ foo: 'bar' }) +expect(wrapper.vm.foo).toBe('bar') +``` diff --git a/docs/fr/api/wrapper/setMethods.md b/docs/fr/api/wrapper/setMethods.md new file mode 100644 index 000000000..3eed2fa82 --- /dev/null +++ b/docs/fr/api/wrapper/setMethods.md @@ -0,0 +1,34 @@ +## setMethods + +::: warning Avertissement de déprédation +`setMethods` est dépréciée et sera supprimée dans les prochaines versions. + +Il n'y a pas de voie claire pour remplacer les `setMethods`, car cela dépend vraiment de votre utilisation précédente. Cela conduit facilement à des tests bancals qui s'appuient sur des détails d'implémentation, ce qui [est déconseillé](https://github.com/vuejs/rfcs/blob/668866fa71d70322f6a7689e88554ab27d349f9c/active-rfcs/0000-vtu-api.md#setmethods) + +Nous suggérons de repenser ces tests. + +Pour mettre au point une méthode complexe, il faut l'extraire du composant et le tester de manière isolée. Pour affirmer qu'une méthode est appelée, utilisez votre testeur pour l'espionner. +::: + +Définis les méthodes `Wrapper` `vm` et les met à jour. + +**Note le Wrapper doit contenir une instance de Vue.** + +- **Arguments:** + + - `{Object} methods` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import sinon from 'sinon' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +const clickMethodStub = sinon.stub() + +wrapper.setMethods({ clickMethod: clickMethodStub }) +wrapper.find('button').trigger('click') +expect(clickMethodStub.called).toBe(true) +``` diff --git a/docs/fr/api/wrapper/setProps.md b/docs/fr/api/wrapper/setProps.md new file mode 100644 index 000000000..8cb11fc46 --- /dev/null +++ b/docs/fr/api/wrapper/setProps.md @@ -0,0 +1,55 @@ +## setProps + +- **Arguments:** + + - `{Object} props` + +- **Usage:** + +Définir les props de `Wrapper` `vm` et forcer à mettre à jour + +Définit les props `Wrapper` `vm` et force la mise à jour. + +:: : avertissement +`setProps` ne peut être appelé que pour un composant de haut niveau, monté par `mount` ou `shallowMount`. +:: : + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +test('setProps demo', async () => { + const wrapper = mount(Foo) + + await wrapper.setProps({ foo: 'bar' }) + + expect(wrapper.vm.foo).toBe('bar') +}) +``` + +Vous pouvez également passer un objet `propsData`, qui initialisera l'instance de Vue avec les valeurs passées. + +```js +// Foo.vue +export default { + props: { + foo: { + type: String, + required: true + } + } +} +``` + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = mount(Foo, { + propsData: { + foo: 'bar' + } +}) + +expect(wrapper.vm.foo).toBe('bar') +``` diff --git a/docs/fr/api/wrapper/setSelected.md b/docs/fr/api/wrapper/setSelected.md new file mode 100644 index 000000000..592272482 --- /dev/null +++ b/docs/fr/api/wrapper/setSelected.md @@ -0,0 +1,26 @@ +## setSelected + +Sélectionne un élément d'option et met à jour les données liées au `v-model`. + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +const options = wrapper.find('select').findAll('option') + +options.at(1).setSelected() +``` + +- **Note:** + +Lorsque vous essayez de mettre la valeur à state via `v-model` par `option.element.selected = true ; parentSelect.trigger('input')`, `v-model` n'est pas déclenché. Le `v-model` est déclenché par l'événement `change`. + +`option.setSelected()` est un alias du code suivant. + +```js +option.element.selected = true +parentSelect.trigger('change') +``` diff --git a/docs/fr/api/wrapper/setValue.md b/docs/fr/api/wrapper/setValue.md new file mode 100644 index 000000000..7d005d803 --- /dev/null +++ b/docs/fr/api/wrapper/setValue.md @@ -0,0 +1,42 @@ +## setValue + +Définis la valeur d'une entrée de contrôle de texte ou d'un élément de sélection et met à jour les données liées au `v-model`. + +- **Arguments:** + + - `{any} value` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) + +const textInput = wrapper.find('input[type="text"]') +textInput.setValue('some value') + +const select = wrapper.find('select') +select.setValue('option value') + +// nécessite