diff --git a/.circleci/config.yml b/.circleci/config.yml index b85fddcd9..0f0bee0c4 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -60,13 +60,6 @@ jobs: - run: name: yarn test command: yarn test - test_compat: - <<: *defaults - steps: - - attach_workspace: - at: ~/repo - - *restore_node_modules - - run: yarn test:compat workflows: version: 2 install-tests: @@ -81,8 +74,3 @@ workflows: - test: requires: - install - - test_compat: - requires: - - install - - build_test - - test diff --git a/.eslintignore b/.eslintignore index 1521c8b76..884a2323e 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1 +1 @@ -dist +**/dist/** diff --git a/.gitignore b/.gitignore index 63161737b..8161b78c2 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ .DS_Store node_modules/ +.eslintcache # Editor files /.idea diff --git a/.nvmrc b/.nvmrc index e338b8659..6f7f377bf 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v10 +v16 diff --git a/.prettierrc.json b/.prettierrc.json index b2095be81..f79acadcb 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -1,4 +1,6 @@ { "semi": false, - "singleQuote": true + "singleQuote": true, + "trailingComma": "none", + "arrowParens": "avoid" } diff --git a/README.md b/README.md index 3337fb328..0739930d9 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Vue Test Utils [![Build Status](https://circleci.com/gh/vuejs/vue-test-utils/tree/dev.png?style=shield)](https://circleci.com/gh/vuejs/vue-test-utils) -Vue Test Utils is the official testing library for Vue.js. +Component testing utils for Vue 2. ## Packages @@ -12,8 +12,8 @@ This repository provides the following two packages: You can install these packages by the following command. ``` -npm install --save-dev @vue/test-utils -npm install --save-dev @vue/server-test-utils +npm install --save-dev @vue/test-utils@1 +npm install --save-dev @vue/server-test-utils@1 ``` ## Peer Dependencies @@ -26,7 +26,7 @@ npm install --save-dev vue-template-compiler ## Documentation -Refer to the [documentation](https://vue-test-utils.vuejs.org/) +Refer to the [documentation](https://v1.test-utils.vuejs.org/) ## Questions @@ -34,7 +34,7 @@ For questions and support please use the [Discord chat room](https://vue-land.js ## Issues -Please make sure to read the [Issue Reporting Checklist](https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md#issue-reporting-guidelines) before opening an issue. Issues not conforming to the guidelines may be closed immediately. +Please make sure to read the issue reporting requirements before opening an issue. Issues not conforming to the guidelines may be closed immediately. ## Contribution diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 96abb7d92..b129d7858 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -19,6 +19,16 @@ module.exports = { lang: 'ru', title: 'Vue Test Utils', description: 'Библиотека для тестирования Vue-компонентов' + }, + '/fr/': { + title: 'Vue Test Utils', + lang: 'fr', + description: 'Utilitaires pour tester les composants Vue' + }, + '/pt/': { + title: 'Vue Test Utils', + lang: 'pt', + description: 'Utilitários para testes de componentes de Vue' } }, plugins: ['@vuepress/pwa'], @@ -54,8 +64,8 @@ module.exports = { link: '/guides/', items: [ { - text: '2.x-beta', - link: 'https://next.vue-test-utils.vuejs.org/guide/' + text: 'v2 (Vue.js 3)', + link: 'https://test-utils.vuejs.org/' } ] }, @@ -89,8 +99,8 @@ module.exports = { link: '/zh/guides/', items: [ { - text: '2.x-beta', - link: 'https://next.vue-test-utils.vuejs.org/guide/' + text: 'v2 (Vue.js 3)', + link: 'https://test-utils.vuejs.org/' } ] } @@ -120,8 +130,8 @@ module.exports = { link: '/ja/guides/', items: [ { - text: '2.x-beta', - link: 'https://next.vue-test-utils.vuejs.org/guide/' + text: 'v2 (Vue.js 3)', + link: 'https://test-utils.vuejs.org/' } ] } @@ -151,8 +161,8 @@ module.exports = { link: '/ru/guides/', items: [ { - text: '2.x-beta', - link: 'https://next.vue-test-utils.vuejs.org/guide/' + text: 'v2 (Vue.js 3)', + link: 'https://test-utils.vuejs.org/' } ] } @@ -167,6 +177,72 @@ 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: 'v2 (Vue.js 3)', + link: 'https://test-utils.vuejs.org/' + } + ] + } + ], + sidebar: [ + '/fr/', + '/fr/installation/', + '/fr/guides/', + '/fr/api/', + '/fr/api/wrapper/', + '/fr/api/wrapper-array/', + '/fr/api/options', + '/fr/api/components/' + ] + }, + '/pt/': { + label: 'Português', + selectText: 'Idiomas', + editLinkText: 'Edite esta página no GitHub', + nav: [ + { + text: 'API', + link: '/pt/api/' + }, + { + text: 'Guias', + link: '/pt/guides/', + items: [ + { + text: '2.x-beta', + link: 'https://next.vue-test-utils.vuejs.org/guide/' + } + ] + }, + { + text: 'Atualizando para V1', + link: '/pt/upgrading-to-v1/' + } + ], + sidebar: [ + '/pt/', + '/pt/installation/', + '/pt/guides/', + '/pt/api/', + '/pt/api/wrapper/', + '/pt/api/wrapper-array/', + '/pt/api/options', + '/pt/api/components/' + ] } } }, diff --git a/docs/.vuepress/theme/Layout.vue b/docs/.vuepress/theme/Layout.vue index b61309914..dc1a028a7 100644 --- a/docs/.vuepress/theme/Layout.vue +++ b/docs/.vuepress/theme/Layout.vue @@ -9,10 +9,7 @@

To read docs for Vue Test Utils for Vue 3, - . + .

diff --git a/docs/README.md b/docs/README.md index 699d140c6..38f144a64 100644 --- a/docs/README.md +++ b/docs/README.md @@ -7,7 +7,7 @@ This is the documentation for Vue Test Utils v1, which targets Vue 2 and earlier In short: - [Vue Test Utils 1](https://github.com/vuejs/vue-test-utils/) targets [Vue 2](https://github.com/vuejs/vue/). -- [Vue Test Utils 2](https://github.com/vuejs/vue-test-utils-next/) targets [Vue 3](https://github.com/vuejs/vue-next/). +- [Vue Test Utils 2](https://github.com/vuejs/test-utils) targets [Vue 3](https://github.com/vuejs/core).
Learn how to test Vue.js components with Vue School
diff --git a/docs/api/config.md b/docs/api/config.md index 5a84aa259..9bbb0fd60 100644 --- a/docs/api/config.md +++ b/docs/api/config.md @@ -38,7 +38,7 @@ config.showDeprecationWarnings = true config.deprecationWarningHandler = (method, message) => { if (method === 'emittedByOrder') return - console.error(msg) + console.error(message) } ``` diff --git a/docs/api/options.md b/docs/api/options.md index c2f31793b..68efd2eeb 100644 --- a/docs/api/options.md +++ b/docs/api/options.md @@ -169,7 +169,7 @@ You can also pass a function that takes the props as an argument: ```js shallowMount(Component, { scopedSlots: { - foo: function(props) { + foo: function (props) { return this.$createElement('div', props.index) } } @@ -317,13 +317,13 @@ const Component = { let wrapper = mount(Component, { attachTo: '#root' }) -expect(wrapper.vm.$el.parentNode).to.not.be.null +expect(wrapper.vm.$el.parentNode).not.toBeNull() wrapper.destroy() wrapper = mount(Component, { attachTo: document.getElementById('root') }) -expect(wrapper.vm.$el.parentNode).to.not.be.null +expect(wrapper.vm.$el.parentNode).not.toBeNull() wrapper.destroy() ``` diff --git a/docs/api/wrapper/findAllComponents.md b/docs/api/wrapper/findAllComponents.md index 6b3256e16..55eb6785e 100644 --- a/docs/api/wrapper/findAllComponents.md +++ b/docs/api/wrapper/findAllComponents.md @@ -4,7 +4,7 @@ Returns a [`WrapperArray`](../wrapper-array/) of all matching Vue components. - **Arguments:** - - `{Component|ref|name} selector` + - `selector` Use any valid [selector](../selectors.md) - **Returns:** `{WrapperArray}` @@ -21,3 +21,7 @@ expect(bar.exists()).toBeTruthy() const bars = wrapper.findAllComponents(Bar) expect(bars).toHaveLength(1) ``` + +::: warning Usage with CSS selectors +Using `findAllComponents` with CSS selector is subject to same limitations as [findComponent](./findComponent.md) +::: diff --git a/docs/api/wrapper/findComponent.md b/docs/api/wrapper/findComponent.md index cfe4a4fe8..99172e98f 100644 --- a/docs/api/wrapper/findComponent.md +++ b/docs/api/wrapper/findComponent.md @@ -4,7 +4,7 @@ Returns `Wrapper` of first matching Vue component. - **Arguments:** - - `{Component|ref|name} selector` + - `{Component|ref|string} selector` - **Returns:** `{Wrapper}` @@ -24,3 +24,31 @@ expect(barByName.exists()).toBe(true) const barRef = wrapper.findComponent({ ref: 'bar' }) // => finds Bar by `ref` expect(barRef.exists()).toBe(true) ``` + +::: warning Usage with CSS selectors +Using `findComponent` with a CSS selector might have confusing behavior + +Consider this example: + +```js +const ChildComponent = { + name: 'Child', + template: '
' +} + +const RootComponent = { + name: 'Root', + components: { ChildComponent }, + template: '' +} + +const wrapper = mount(RootComponent) + +const rootByCss = wrapper.findComponent('.root') // => finds Root +expect(rootByCss.vm.$options.name).toBe('Root') +const childByCss = wrapper.findComponent('.child') +expect(childByCss.vm.$options.name).toBe('Root') // => still Root +``` + +The reason for such behavior is that `RootComponent` and `ChildComponent` are sharing the same DOM node and only the first matching component is returned for each unique DOM node +::: diff --git a/docs/fr/README.md b/docs/fr/README.md new file mode 100644 index 000000000..f980223a3 --- /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/) ciblant [Vue 2](https://github.com/vuejs/vue/). +- [Vue Test Utils 2](https://github.com/vuejs/test-utils) ciblant [Vue 3](https://github.com/vuejs/core). + +
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..f2da50ea6 --- /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 de remplacement (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..416587948 --- /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éciation 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ée à 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..a8d646872 --- /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 sans 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..c4a13604d --- /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..ced641c95 --- /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 à celle 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..252a44a01 --- /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`contenus 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..8cbf95b12 --- /dev/null +++ b/docs/fr/api/wrapper-array/at.md @@ -0,0 +1,26 @@ +## at + +Retourne le `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..10c2d1f82 --- /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..1e29f32c3 --- /dev/null +++ b/docs/fr/api/wrapper-array/is.md @@ -0,0 +1,37 @@ +## 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.wrappers.every(wrapper => wrapper.element.tagName === 'DOM_SELECTOR')`. +- `is('ATTR_NAME')` est une affirmation véridique d `wrapper.wrappers.every(wrapper => wrapper.attributes('ATTR_NAME'))`. +- `is('CLASS_NAME')` est une affirmation véridique d `wrapper.wrappers.every(wrapper => 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 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..6aeacbc09 --- /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 ou vnode + + + +## 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 + +!!!include(docs/fr/api/wrapper/attributes.md)!!! +!!!include(docs/fr/api/wrapper/classes.md)!!! +!!!include(docs/fr/api/wrapper/contains.md)!!! +!!!include(docs/fr/api/wrapper/destroy.md)!!! +!!!include(docs/fr/api/wrapper/emitted.md)!!! +!!!include(docs/fr/api/wrapper/emittedByOrder.md)!!! +!!!include(docs/fr/api/wrapper/exists.md)!!! +!!!include(docs/fr/api/wrapper/find.md)!!! +!!!include(docs/fr/api/wrapper/findAll.md)!!! +!!!include(docs/fr/api/wrapper/findComponent.md)!!! +!!!include(docs/fr/api/wrapper/findAllComponents.md)!!! +!!!include(docs/fr/api/wrapper/html.md)!!! +!!!include(docs/fr/api/wrapper/get.md)!!! +!!!include(docs/fr/api/wrapper/is.md)!!! +!!!include(docs/fr/api/wrapper/isEmpty.md)!!! +!!!include(docs/fr/api/wrapper/isVisible.md)!!! +!!!include(docs/fr/api/wrapper/isVueInstance.md)!!! +!!!include(docs/fr/api/wrapper/name.md)!!! +!!!include(docs/fr/api/wrapper/props.md)!!! +!!!include(docs/fr/api/wrapper/setChecked.md)!!! +!!!include(docs/fr/api/wrapper/setData.md)!!! +!!!include(docs/fr/api/wrapper/setMethods.md)!!! +!!!include(docs/fr/api/wrapper/setProps.md)!!! +!!!include(docs/fr/api/wrapper/setSelected.md)!!! +!!!include(docs/fr/api/wrapper/setValue.md)!!! +!!!include(docs/fr/api/wrapper/text.md)!!! +!!!include(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..34a9f2717 --- /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..496a59b6d --- /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. Utilisez plutôt [`getComponent`](./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..8c0dabb6a --- /dev/null +++ b/docs/fr/api/wrapper/isVisible.md @@ -0,0 +1,20 @@ +## isVisible + +Affirmer que `Wrapper` est visible. + +Retourne `false` si un élément parent 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..33ef3d275 --- /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 à l'état 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..d34ddcb88 --- /dev/null +++ b/docs/fr/api/wrapper/setProps.md @@ -0,0 +1,53 @@ +## setProps + +- **Arguments:** + + - `{Object} props` + +- **Usage:** + +Définir les props de `Wrapper` `vm` et forcer à mettre à 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..a366d3936 --- /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 à l'état 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 + + +
` + }) + + const wrapperArray = wrapper.findAll('.foo') + expect(wrapper.vm.t1).toEqual(false) + expect(wrapper.vm.t2).toEqual('') + await wrapperArray.setChecked() + expect(wrapper.vm.t1).toEqual(true) + expect(wrapper.vm.t2).toEqual('foo') +}) +``` diff --git a/docs/pt/api/wrapper-array/setData.md b/docs/pt/api/wrapper-array/setData.md new file mode 100644 index 000000000..94b13f4ac --- /dev/null +++ b/docs/pt/api/wrapper-array/setData.md @@ -0,0 +1,24 @@ +## O método setData + +Define os dados do `vm` do `Wrapper` (envolvedor) em cada `Wrapper` (envolvedor) dentro do `WrapperArray`. + +**Note que todo `Wrapper` deve conter uma instância de Vue.** + +- **Argumentos:** + + - `{Object} data` + +- **Exemplo:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +test('setData demo', async () => { + const wrapper = mount(Foo) + const barArray = wrapper.findAll(Bar) + await barArray.setData({ foo: 'bar' }) + expect(barArray.at(0).vm.foo).toBe('bar') +}) +``` diff --git a/docs/pt/api/wrapper-array/setMethods.md b/docs/pt/api/wrapper-array/setMethods.md new file mode 100644 index 000000000..086a00797 --- /dev/null +++ b/docs/pt/api/wrapper-array/setMethods.md @@ -0,0 +1,36 @@ +## O método setMethods + +::: warning Aviso de Depreciação +O método `setMethods` está depreciado e será removido nos futuros lançamentos. + +Não há um caminho claro para substituir `setMethods`, porque ele depende muito da sua utilização prévia. Ele guia facilmente para testes escamosos que dependem da implementação de detalhes, o que [é desencorajado](https://github.com/vuejs/rfcs/blob/668866fa71d70322f6a7689e88554ab27d349f9c/active-rfcs/0000-vtu-api.md#setmethods). + +Nós sugerimos que repense aqueles testes. + +Para forjar um método complexo extraia ele do componente e teste ele em quarentena. Para afirmar que um método for chamado, use o seu executor de teste para vigiar ele. +::: + +Define os métodos do `vm` do `Wrapper` (envolvedor) e força a atualização de cada `Wrapper` dentro do `WrapperArray`. + +**Note que todo `Wrapper` deve conter uma instância de Vue.** + +- **Argumentos:** + + - `{Object} methods` + +- **Exemplo:** + +```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/pt/api/wrapper-array/setProps.md b/docs/pt/api/wrapper-array/setProps.md new file mode 100644 index 000000000..5a2fea5c1 --- /dev/null +++ b/docs/pt/api/wrapper-array/setProps.md @@ -0,0 +1,24 @@ +## O método setProps + +Define as propriedades do `vm` do `Wrapper` (envolvedor) e força a atualização de cada `Wrapper` dentro do `WrapperArray`. + +**Note que todo `Wrapper` deve conter uma instância de Vue.** + +- **Argumentos:** + + - `{Object} props` + +- **Exemplo:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +test('setProps demo', async () => { + const wrapper = mount(Foo) + const barArray = wrapper.findAll(Bar) + await barArray.setProps({ foo: 'bar' }) + expect(barArray.at(0).vm.foo).toBe('bar') +}) +``` diff --git a/docs/pt/api/wrapper-array/setValue.md b/docs/pt/api/wrapper-array/setValue.md new file mode 100644 index 000000000..fcb8eb12d --- /dev/null +++ b/docs/pt/api/wrapper-array/setValue.md @@ -0,0 +1,40 @@ +## o método setValue + +Este método é um apelido do seguinte código. + +```js +wrapperArray.wrappers.forEach(wrapper => wrapper.setValue(value)) +``` + +- **Argumentos:** + + - `{any} value` + +- **Exemplo:** + +```js +import { mount } from '@vue/test-utils' + +const wrapper = mount({ + data() { + return { + t1: '', + t2: '' + } + }, + template: ` +
+ + +
` +}) + +test('setValue demo', async () => { + const wrapperArray = wrapper.findAll('.foo') + expect(wrapper.vm.t1).toEqual('') + expect(wrapper.vm.t2).toEqual('') + await wrapperArray.setValue('foo') + expect(wrapper.vm.t1).toEqual('foo') + expect(wrapper.vm.t2).toEqual('foo') +}) +``` diff --git a/docs/pt/api/wrapper-array/trigger.md b/docs/pt/api/wrapper-array/trigger.md new file mode 100644 index 000000000..48dd5eefa --- /dev/null +++ b/docs/pt/api/wrapper-array/trigger.md @@ -0,0 +1,29 @@ +## O método trigger + +Aciona um [evento](../../guides/dom-events.md#trigger-events) em todo `Wrapper` (envolvedor) dentro do `WrapperArray` de nó do DOM. + +**Note que todo `Wrapper` deve conter uma instância de Vue.** + +- **Argumentos:** + + - `{string} eventType` **obrigatório** + - `{Object} options` **opcional** + +- **Exemplo:** + +```js +import { mount } from '@vue/test-utils' +import sinon from 'sinon' +import Foo from './Foo.vue' + +test('trigger demo', async () => { + const clickHandler = sinon.stub() + const wrapper = mount(Foo, { + propsData: { clickHandler } + }) + + const divArray = wrapper.findAll('div') + await divArray.trigger('click') + expect(clickHandler.called).toBe(true) +}) +``` diff --git a/docs/pt/api/wrapper/README.md b/docs/pt/api/wrapper/README.md new file mode 100644 index 000000000..d8f1ac79f --- /dev/null +++ b/docs/pt/api/wrapper/README.md @@ -0,0 +1,57 @@ +# Wrapper + +O Vue Test Utils (Utilitário de Teste da Vue) é uma API baseada em envolvedor. + +Um `Wrapper` (envolvedor) é um objeto que contém um componente montado ou vnode (nó do vue) ou métodos para testar o componente ou vnode (nó do vue). + + + +## Propriedades + +### `vm` + +`Component` (somente-leitura): Isto é a instância de `Vue`. Você pode acessar todos os [métodos da instância e propriedades de um vm (modelo de vue)](https://vuejs.org/v2/api/#Instance-Properties) com o `wrapper.vm`. Isto só existe no envolvedor do componente de Vue ou no HTMLElement ligando o envolvedor do componente de Vue. + +### `element` + +`HTMLElement` (somente-leitura): o nó raiz do DOM de um envolvedor + +### `options` + +#### `options.attachedToDocument` + +`Boolean` (read-only): `true` se o componente estiver [ligado ao documento](../options.md) quando renderizado. + +### `selector` + +`Selector`: o seletor que foi usado pelo [`find()`](./find.md) ou pelo [`findAll()`](./findAll.md) para criar este envolvedor + +## Métodos + +!!!include(docs/pt/api/wrapper/attributes.md)!!! +!!!include(docs/pt/api/wrapper/classes.md)!!! +!!!include(docs/pt/api/wrapper/contains.md)!!! +!!!include(docs/pt/api/wrapper/destroy.md)!!! +!!!include(docs/pt/api/wrapper/emitted.md)!!! +!!!include(docs/pt/api/wrapper/emittedByOrder.md)!!! +!!!include(docs/pt/api/wrapper/exists.md)!!! +!!!include(docs/pt/api/wrapper/find.md)!!! +!!!include(docs/pt/api/wrapper/findAll.md)!!! +!!!include(docs/pt/api/wrapper/findComponent.md)!!! +!!!include(docs/pt/api/wrapper/findAllComponents.md)!!! +!!!include(docs/pt/api/wrapper/html.md)!!! +!!!include(docs/pt/api/wrapper/get.md)!!! +!!!include(docs/pt/api/wrapper/is.md)!!! +!!!include(docs/pt/api/wrapper/isEmpty.md)!!! +!!!include(docs/pt/api/wrapper/isVisible.md)!!! +!!!include(docs/pt/api/wrapper/isVueInstance.md)!!! +!!!include(docs/pt/api/wrapper/name.md)!!! +!!!include(docs/pt/api/wrapper/props.md)!!! +!!!include(docs/pt/api/wrapper/setChecked.md)!!! +!!!include(docs/pt/api/wrapper/setData.md)!!! +!!!include(docs/pt/api/wrapper/setMethods.md)!!! +!!!include(docs/pt/api/wrapper/setProps.md)!!! +!!!include(docs/pt/api/wrapper/setSelected.md)!!! +!!!include(docs/pt/api/wrapper/setValue.md)!!! +!!!include(docs/pt/api/wrapper/text.md)!!! +!!!include(docs/pt/api/wrapper/trigger.md)!!! diff --git a/docs/pt/api/wrapper/attributes.md b/docs/pt/api/wrapper/attributes.md new file mode 100644 index 000000000..7ae5178b6 --- /dev/null +++ b/docs/pt/api/wrapper/attributes.md @@ -0,0 +1,20 @@ +## O método attributes + +Retorna o `Wrapper` (envolvedor) do objeto de atributo de um nó do DOM. Se a `key` for fornecida, o valor para o `key` será retornado. + +- **Argumentos:** + + - `{string} key` **opcional** + +- **Retorna:** `{[attribute: string]: any} | string` + +- **Exemplo:** + +```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/pt/api/wrapper/classes.md b/docs/pt/api/wrapper/classes.md new file mode 100644 index 000000000..e44adfe2d --- /dev/null +++ b/docs/pt/api/wrapper/classes.md @@ -0,0 +1,22 @@ +## O método classes + +Retorna o `Wrapper` de classes do nó do DOM. + +Retorna um `Array` de nomes de classes ou um booleano se um nome de classe for fornecido. + +- **Argumentos:** + + - `{string} className` **opcional** + +- **Retorna:** `Array<{string}> | boolean` + +- **Exemplo:** + +```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/pt/api/wrapper/contains.md b/docs/pt/api/wrapper/contains.md new file mode 100644 index 000000000..bc7f7e1d8 --- /dev/null +++ b/docs/pt/api/wrapper/contains.md @@ -0,0 +1,27 @@ +## O método contains + +::: warning Deprecation warning +O uso de `contains` está depreciado e será removido nos futuros lançamentos. Use o [`find`](./find.md) para nós (nodes) do DOM (usando a sintaxe do `querySelector`), o [`findComponent`](./findComponent.md) para componentes, ou antes o [`wrapper.get`](./get.md). +::: + +Afirma que `Wrapper` contém um elemento ou componente que corresponde ao [seletor](../selectors.md). + +- **Argumentos:** + + - `{string|Component} selector` + +- **Retorna:** `{boolean}` + +- **Exemplo:** + +```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) +``` + +- **Consulte também:** [seletores](../selectors.md) diff --git a/docs/pt/api/wrapper/destroy.md b/docs/pt/api/wrapper/destroy.md new file mode 100644 index 000000000..97e7a1fc2 --- /dev/null +++ b/docs/pt/api/wrapper/destroy.md @@ -0,0 +1,23 @@ +## O método destroy + +Destrói uma instância de componente de Vue. + +- **Example:** + +```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) +``` + +Se tanto a opção `attachTo` ou `attachToDocument` forem a causa do componente montar no documento, o componente de elementos do DOM também será removido do documento. + +Para componentes funcionais, o `destroy` apenas remove os elementos do DOM renderizados do documento. diff --git a/docs/pt/api/wrapper/emitted.md b/docs/pt/api/wrapper/emitted.md new file mode 100644 index 000000000..997ddcc9a --- /dev/null +++ b/docs/pt/api/wrapper/emitted.md @@ -0,0 +1,61 @@ +## O método emitted + +Retorna um objeto contento eventos personalizados emitidos pelo `Wrapper` `vm`. + +- **Retorna:** `{ [name: string]: Array> }` + +- **Exemplo:** + +```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() // Espera até que $emits ter sido manipulado + + /* + wrapper.emitted() retorna o seguinte objeto: + { + foo: [[], [123]] + } + */ + + // afirma que o evento tem sido emitido + expect(wrapper.emitted().foo).toBeTruthy() + + // afirma que o evento contabiliza + expect(wrapper.emitted().foo.length).toBe(2) + + // afirma que evento carrega + expect(wrapper.emitted().foo[1]).toEqual([123]) +}) +``` + +Você também pode escrever o que está acima como o seguinte: + +```js +// afirma que o evento tem sido emitido +expect(wrapper.emitted('foo')).toBeTruthy() + +// afirma que o evento contabiliza +expect(wrapper.emitted('foo').length).toBe(2) + +// afirma que evento carrega +expect(wrapper.emitted('foo')[1]).toEqual([123]) +``` + +O método `.emitted()` retorna o mesmo objeto toda vez que ele for chamado, não um novo, e assim o objeto atualizará sempre que novos eventos forem disparados: + +```js +const emitted = wrapper.emitted() + +expect(emitted.foo.length).toBe(1) + +// faça alguma coisa para fazer `wrapper` emitir o evento "foo" + +expect(emitted.foo.length).toBe(2) +``` diff --git a/docs/pt/api/wrapper/emittedByOrder.md b/docs/pt/api/wrapper/emittedByOrder.md new file mode 100644 index 000000000..343940de6 --- /dev/null +++ b/docs/pt/api/wrapper/emittedByOrder.md @@ -0,0 +1,34 @@ +## O método emittedByOrder + +::: warning Aviso de Depreciação +O `emittedByOrder` está depreciado e será removido nos futuros lançamentos. + +Ao invés disso use o `wrapper.emitted`. +::: + +Retorna um objeto contento eventos personalizados emitidos pelo `Wrapper` (envolvedor) `vm`. + + +- **Retorna:** `Array<{ name: string, args: Array }>` + +- **Exemplo:** + +```js +import { mount } from '@vue/test-utils' + +const wrapper = mount(Component) + +wrapper.vm.$emit('foo') +wrapper.vm.$emit('bar', 123) + +/* +wrapper.emittedByOrder() retorna o seguinte `Array`: +[ + { name: 'foo', args: [] }, + { name: 'bar', args: [123] } +] +*/ + +// afirma que o evento emite a ordem +expect(wrapper.emittedByOrder().map(e => e.name)).toEqual(['foo', 'bar']) +``` diff --git a/docs/pt/api/wrapper/exists.md b/docs/pt/api/wrapper/exists.md new file mode 100644 index 000000000..4e2289842 --- /dev/null +++ b/docs/pt/api/wrapper/exists.md @@ -0,0 +1,18 @@ +## O método exists + +Afirma que o `Wrapper` (envolvedor) existe. + +Retorna `false` se chamando em um `Wrapper` o qual não existe. + +- **Retorna:** `{boolean}` + +- **Exemplo:** + +```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) +``` diff --git a/docs/pt/api/wrapper/find.md b/docs/pt/api/wrapper/find.md new file mode 100644 index 000000000..d017301e3 --- /dev/null +++ b/docs/pt/api/wrapper/find.md @@ -0,0 +1,43 @@ +## O método find + +::: warning Aviso de Depreciação +O uso do `find` para procurar por um componente está depreciado e será removido. Ao invés disso use o [`findComponent`](./findComponent.md). +O método `find` continuará a funcionar para achar elementos usando qualquer [seletor](../selectors.md) válido. +::: + +Retorna o `Wrapper` (envolvedor) do primeiro nó do DOM ou componente do Vue que corresponde ao seletor. + +Use qualquer seletor de DOM válido (usa a sintaxe de `querySelector`). + +- **Argumentos:** + + - `{string} selector` + +- **Retorna:** `{Wrapper}` + +- **Exemplo:** + +```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') +``` + +- **Nota:** + + - Você pode encadear juntas chamadas de `find`: + +```js +const button = wrapper.find({ ref: 'testButton' }) +expect(button.find('.icon').exists()).toBe(true) +``` + +Consulte também: o [get](./get.md). diff --git a/docs/pt/api/wrapper/findAll.md b/docs/pt/api/wrapper/findAll.md new file mode 100644 index 000000000..cfc0ee399 --- /dev/null +++ b/docs/pt/api/wrapper/findAll.md @@ -0,0 +1,32 @@ +## O método findAll + +::: warning Aviso de Depreciação +O uso de `findAll` para pesquisar por componentes está depreciado e será removido. Ao invés disso use `findAllComponents`. +O método `findAll` continuará a funcionar para achar elementos usando qualquer [seletor](../selectors.md) válido. +::: + +Retorna um [`WrapperArray`](../wrapper-array/). + +Usa qualquer [seletor](../selectors.md) válido. + +- **Argumentos:** + + - `{string|Component} selector` + +- **Retorna:** `{WrapperArray}` + +- **Exemplo:** + +```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) // Uso depreciado +expect(bar.is(Bar)).toBe(true) +``` diff --git a/docs/pt/api/wrapper/findAllComponents.md b/docs/pt/api/wrapper/findAllComponents.md new file mode 100644 index 000000000..24e6465f4 --- /dev/null +++ b/docs/pt/api/wrapper/findAllComponents.md @@ -0,0 +1,27 @@ +## O método findAllComponents + +Retorna um [`WrapperArray`](../wrapper-array/) de todos componentes de Vue correspondentes. + +- **Argumentos:** + + - O `selector` usa qualquer [seletor](../selectors.md) válido + +- **Retorna:** `{WrapperArray}` + +- **Exemplo:** + +```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(bars).toHaveLength(1) +``` + +::: warning Uso com seletores de CSS +Ao usar o `findAllComponents` com o seletor de CSS está sujeito as mesmas limitações do [findComponent](api/wrapper/findComponent.md) +::: diff --git a/docs/pt/api/wrapper/findComponent.md b/docs/pt/api/wrapper/findComponent.md new file mode 100644 index 000000000..2b782b840 --- /dev/null +++ b/docs/pt/api/wrapper/findComponent.md @@ -0,0 +1,54 @@ +## O método findComponent + +Retorna o `Wrapper` (envolvedor) do primeiro componente de Vue correspondente. + +- **Argumentos:** + + - `{Component|ref|string} selector` + +- **Retorna:** `{Wrapper}` + +- **Exemplo:** + +```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) // => Encontra Bar pela instância do componente +expect(bar.exists()).toBe(true) +const barByName = wrapper.findComponent({ name: 'bar' }) // => encontra Bar pelo `name` +expect(barByName.exists()).toBe(true) +const barRef = wrapper.findComponent({ ref: 'bar' }) // => encontra Bar pelo `ref` +expect(barRef.exists()).toBe(true) +``` + +::: warning Uso com seletores de CSS +Usar `findComponent` com um seletor de CSS pode resultar em confusão de comportamento + +Considere este exemplo: + +```js +const ChildComponent = { + name: 'Child', + template: '
' +} + +const RootComponent = { + name: 'Root', + components: { ChildComponent }, + template: '' +} + +const wrapper = mount(RootComponent) + +const rootByCss = wrapper.findComponent('.root') // => encontra o Root +expect(rootByCss.vm.$options.name).toBe('Root') +const childByCss = wrapper.findComponent('.child') +expect(childByCss.vm.$options.name).toBe('Root') // => continua sendo o Root +``` + +A razão para tal comportamento é que o `RootComponent` e o `ChildComponent` estão partilhando o mesmo nó do DOM e somente o primeiro componente correspondente é íncluido para cada nó do DOM único. +::: diff --git a/docs/pt/api/wrapper/get.md b/docs/pt/api/wrapper/get.md new file mode 100644 index 000000000..fe1640a07 --- /dev/null +++ b/docs/pt/api/wrapper/get.md @@ -0,0 +1,24 @@ +## O método get + +::: warning Aviso de Depreciação +O uso do método `get` para pesquisar por um componente está depreciado e será removido. Use o [`getComponent`](./getComponent.md) para isso. +::: + +Funciona de forma similar ao [`find`](./find.md) mas com a diferença de que lançará um erro se não encontrar nada que corresponda ao seletor dado. Você deve usar o `find` quando estiver procurando por um elemento que talvez não exista. Você deve usar o método `get` quando estiver buscando um elemento que deve existir e ele fornecerá um mensagem de erro agradável se não for o caso. + +```js +import { mount } from '@vue/test-utils' + +const wrapper = mount(Foo) + +// similar ao `wrapper.find`. +// `get` lançará um erro se um elemento não for encontrado. O `find` não fará nada. +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/pt/api/wrapper/getComponent.md b/docs/pt/api/wrapper/getComponent.md new file mode 100644 index 000000000..bae6dbd4e --- /dev/null +++ b/docs/pt/api/wrapper/getComponent.md @@ -0,0 +1,24 @@ +## O método getComponent + +Funciona de forma similar ao [`findComponent`](./findComponent.md) mas com a diferença de que lançará um erro se não encontrar nada que corresponda ao seletor dado. Você deve usar o `findComponent` quando estiver procurando por um elemento que talvez não exista. Você deve usar o método `getComponent` quando estiver buscando um elemento que deve existir e ele fornecerá um mensagem de erro agradável se não for o caso. + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = mount(Foo) + +// similar ao `wrapper.findComponent`. +// `getComponent` lançará um erro se um elemento não for encontrado. O `findComponent` não fará nada. +expect(wrapper.getComponent(Bar)) // => obtenha o Brar pela instância do componente +expect(wrapper.getComponent({ name: 'bar' })) // => obtenha o Bar pelo `name` +expect(wrapper.getComponent({ ref: 'bar' })) // => obtenha o Bar pelo `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/pt/api/wrapper/html.md b/docs/pt/api/wrapper/html.md new file mode 100644 index 000000000..c7994a359 --- /dev/null +++ b/docs/pt/api/wrapper/html.md @@ -0,0 +1,16 @@ +## O método html + +Returns HTML of `Wrapper` DOM node as a string. +Retorna o HTML do nó do DOM do `Wrapper` como uma sequência de caracteres (string). + +- **Retorna:** `{string}` + +- **Exemplo:** + +```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/pt/api/wrapper/is.md b/docs/pt/api/wrapper/is.md new file mode 100644 index 000000000..672473bf8 --- /dev/null +++ b/docs/pt/api/wrapper/is.md @@ -0,0 +1,36 @@ +## O método is + +::: warning Aviso de Depreciação +O uso do método `is` para afirmar que o envolvedor corresponde ao seletor de DOM está depreciado e será removido. + +Para tal caso de uso considere um correspondente personalizado tal como aqueles fornecidos no [jest-dom](https://github.com/testing-library/jest-dom#custom-matchers). +ou ao invés disso use [`Element.tagName`](https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName) nativo para afirmação do tipo elemento de DOM. + +Para manter estes testes, uma substituição válida para: + +- `is('DOM_SELECTOR')` é uma afirmação de `wrapper.element.tagName`. +- `is('ATTR_NAME')` é uma afirmação de veracidade de `wrapper.attributes('ATTR_NAME')`. +- `is('CLASS_NAME')` é uma afirmação de veracidade de `wrapper.classes('CLASS_NAME')`. + +Afirmação contra definição do componente não está depreciada + +Quando estiver usando com o `findComponent`, acesse o elemento do DOM com `findComponent(Comp).element` +::: + +Afirma que o nó do DOM do `Wrapper` (envolvedor) ou `vm` (modelo de vue) corresponde ao [seletor](../selectors.md). + +- **Argumentos:** + + - `{string|Component} selector` + +- **Retorna:** `{boolean}` + +- **Exemplo:** + +```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/pt/api/wrapper/isEmpty.md b/docs/pt/api/wrapper/isEmpty.md new file mode 100644 index 000000000..8e42babbf --- /dev/null +++ b/docs/pt/api/wrapper/isEmpty.md @@ -0,0 +1,23 @@ +## O método isEmpty + +::: warning Aviso de Depreciação +O método `isEmpty` está depreciado e será removido nos futuros lançamentos. + +Considere um correspondente personalizado tais como aqueles fornecidos pelo [jest-dom](https://github.com/testing-library/jest-dom#tobeempty). + +Quando estiver usando o `findComponent`, acesse o elemento do DOM com o `findComponent(Comp).elment` +::: + +Afiram que o `Wrapper` (envolvedor) não contém nó filho. + +- **Retorna:** `{boolean}` + +- **Exemplo:** + +```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/pt/api/wrapper/isVisible.md b/docs/pt/api/wrapper/isVisible.md new file mode 100644 index 000000000..5a65ce061 --- /dev/null +++ b/docs/pt/api/wrapper/isVisible.md @@ -0,0 +1,20 @@ +## O método isVisible + +Afirma que o `Wrapper` está visível. + +Retorna `false` se um elemento ancestral que tem o estilo `display: none`, `visibility: hidden`, `opacity: 0` está localizado dentro de uma tag `
` colapsada ou tem um atributo `hidden`. + +Isto pode ser usado para afirmar que um componente está escondido por `v-show`. + +- **Retorna:** `{boolean}` + +- **Exemplo:** + +```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/pt/api/wrapper/isVueInstance.md b/docs/pt/api/wrapper/isVueInstance.md new file mode 100644 index 000000000..e3d8c03b7 --- /dev/null +++ b/docs/pt/api/wrapper/isVueInstance.md @@ -0,0 +1,23 @@ +## O método isVueInstance + +::: warning Aviso de Depreciação +O método `isVueInstance` está depreciado e será removido nos futuros lançamentos. + +Testes que dependem da afirmação do método `isVueInstance` fornecem pouco ou nenhum valor. Nós sugerimos substituir eles por afirmações resolutas. + +Para manter esses testes, uma substituição válida para o método `isVueInstance()` é uma afirmação de veracidade (truthy) do `wrapper.find(...).vm`. +::: + +Afirma que o `Wrapper` é uma instância de Vue. + +- **Retorna:** `{boolean}` + +- **Exemplo:** + +```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/pt/api/wrapper/name.md b/docs/pt/api/wrapper/name.md new file mode 100644 index 000000000..c1b4db60e --- /dev/null +++ b/docs/pt/api/wrapper/name.md @@ -0,0 +1,21 @@ +## O método name + +::: warning Aviso de Depreciação +O método `name` está depreciado e será removido nos futuros lançamentos. Consulte o [vue-test-utils.vuejs.org/upgrading-to-v1/#name](https://vue-test-utils.vuejs.org/upgrading-to-v1/#name). +::: + +Retorna o nome do componente se o `Wrapper` (envolvedor) conter uma instância de Vue, ou nome da tag do nó do DOM do `Wrapper` se o `Wrapper` não conter uma instância de Vue. + +- **Retorna:** `{string}` + +- **Exemplo:** + +```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/pt/api/wrapper/overview.md b/docs/pt/api/wrapper/overview.md new file mode 100644 index 000000000..f36392fc8 --- /dev/null +++ b/docs/pt/api/wrapper/overview.md @@ -0,0 +1,47 @@ +## O método overview + +::: warning Aviso de Depreciação +O método está depreciado e será removido nos futuros lançamentos. +::: + +Imprime um simples resumo do `Wrapper` (envolvedor). + +- **Exemplo:** + +```js +import { mount } from '@vue/test-utils' +import Component from './Component.vue' + +const wrapper = mount(Component) +wrapper.overview() + +// Saída da consola +/* +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/pt/api/wrapper/props.md b/docs/pt/api/wrapper/props.md new file mode 100644 index 000000000..65e0dab32 --- /dev/null +++ b/docs/pt/api/wrapper/props.md @@ -0,0 +1,26 @@ +## O método props + +Retorna o objeto de propriedades do `Wrapper` (envolvedor) do `vm` (modelo do vue). Se a `key` for fornecida, o valor para a `key` será retornado. + +**Nota que o `Wrapper` deve conter uma instância de Vue.** + +- **Argumentos:** + + - `{string} key` **opcional** + +- **Retorna:** `{[prop: string]: any} | any` + +- **Exemplo:** + +```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/pt/api/wrapper/setChecked.md b/docs/pt/api/wrapper/setChecked.md new file mode 100644 index 000000000..53906fcf2 --- /dev/null +++ b/docs/pt/api/wrapper/setChecked.md @@ -0,0 +1,35 @@ +## O método setChecked + +Define o valor confirmado por um elemento `input` do tipo `checkbox` ou `radio` e atualiza o dado ligado ao `v-model`. + +- **Argumentos:** + + - `{Boolean} checked (default: true)` + +- **Exemplo:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +test('setChecked demo', async () => { + const wrapper = mount(Foo) + const radioInput = wrapper.find('input[type="radio"]') + + await radioInput.setChecked() + + expect(radioInput.element.checked).toBeTruthy() +}) +``` + +- **Nota:** + +Quando você tenta definir o valor para o estado via `v-model` pelo `radioInput.element.checked = true; radioInput.trigger('input')`, o `v-model` não é acionado. O `v-model` é acionado pelo evento `change`. + +`checkboxInput.setChecked(checked)` é um apelido do seguinte código. + +```js +checkboxInput.element.checked = checked +checkboxInput.trigger('click') +checkboxInput.trigger('change') +``` diff --git a/docs/pt/api/wrapper/setData.md b/docs/pt/api/wrapper/setData.md new file mode 100644 index 000000000..db9185095 --- /dev/null +++ b/docs/pt/api/wrapper/setData.md @@ -0,0 +1,26 @@ +## O método setData + +Define os dados do `vm` (modelo do vue) do `Wrapper` (envolvedor). + +O `setData` funciona através da chamada recursiva do `Vue.set`. + +**Nota que o `Wrapper` deve conter uma instância de Vue.** + +- **Argumentos:** + + - `{Object} data` + +- **Exemplo:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +test('setData demo', async () => { + const wrapper = mount(Foo) + + await wrapper.setData({ foo: 'bar' }) + + expect(wrapper.vm.foo).toBe('bar') +}) +``` diff --git a/docs/pt/api/wrapper/setMethods.md b/docs/pt/api/wrapper/setMethods.md new file mode 100644 index 000000000..ee11e776c --- /dev/null +++ b/docs/pt/api/wrapper/setMethods.md @@ -0,0 +1,34 @@ +## O método setMethods + +::: warning Aviso de Depreciação +O método `setMethods` está depreciado e será removido nos futuros lançamentos. + +Não há um caminho claro para substituir `setMethods`, porque ele depende muito da sua utilização prévia. Ele guia facilmente para testes escamosos que dependem da implementação de detalhes, o que [é desencorajado](https://github.com/vuejs/rfcs/blob/668866fa71d70322f6a7689e88554ab27d349f9c/active-rfcs/0000-vtu-api.md#setmethods). + +Nós sugerimos que repense aqueles testes. + +Para forjar um método complexo extraia ele do componente e teste ele em quarentena. Para afirmar que um método for chamado, use o seu executor de teste para vigiar ele. +::: + +Define os métodos do `vm` do `Wrapper` (envolvedor) e força a atualização. + +**Nota que o `Wrapper` deve conter uma instância de Vue.** + +- **Argumentos:** + + - `{Object} methods` + +- **Exemplo:** + +```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/pt/api/wrapper/setProps.md b/docs/pt/api/wrapper/setProps.md new file mode 100644 index 000000000..b61ac3d3d --- /dev/null +++ b/docs/pt/api/wrapper/setProps.md @@ -0,0 +1,53 @@ +## O método setProps + +- **Argumentos:** + + - `{Object} props` + +- **Uso:** + +Define as propriedades do `vm` (modelo do vue) do `Wrapper` (envolvedor) e força a atualização. + +::: warning +O método `setProps` deve ser chamado apenas para o componente de alto-nível, montado pelo método `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') +}) +``` + +Você pode também passar um objeto `propsData`, o qual inicializará a instância de Vue com os valores passados. + +```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/pt/api/wrapper/setSelected.md b/docs/pt/api/wrapper/setSelected.md new file mode 100644 index 000000000..222c9cde8 --- /dev/null +++ b/docs/pt/api/wrapper/setSelected.md @@ -0,0 +1,31 @@ +## O método setSelected + +Selects an option element and updates `v-model` bound data. +Seleciona um elemento de opção e atualiza o dado ligado ao `v-model`. + +- **Exemplo:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +test('setSelected demo', async () => { + const wrapper = mount(Foo) + const options = wrapper.find('select').findAll('option') + + await options.at(1).setSelected() + + expect(wrapper.find('option:checked').element.value).toBe('bar') +}) +``` + +- **Nota:** + +Quando você tenta definir o valor para o estado via `v-model` pelo `option.element.selected = true; parentSelect.trigger('input')`, o `v-model` não é acionado. O `v-model` é acionado pelo evento `change`. + +O `option.setSelected()` é um apelido do seguinte código. + +```js +option.element.selected = true +parentSelect.trigger('change') +``` diff --git a/docs/pt/api/wrapper/setValue.md b/docs/pt/api/wrapper/setValue.md new file mode 100644 index 000000000..8a30edfe7 --- /dev/null +++ b/docs/pt/api/wrapper/setValue.md @@ -0,0 +1,53 @@ +## O método setValue + +Define o valor de um controle de texo do elemento `input` ou do elemento `select` e atualiza o dado ligado ao `v-model`. + +- **Argumentos:** + + - `{any} value` + +- **Exemplo:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +test('setValue demo', async () => { + const wrapper = mount(Foo) + + const textInput = wrapper.find('input[type="text"]') + await textInput.setValue('some value') + + expect(wrapper.find('input[type="text"]').element.value).toBe('some value') + + const select = wrapper.find('select') + await select.setValue('option value') + + expect(wrapper.find('select').element.value).toBe('option value') + + // exige o