From e142d37e2bf4d957dccd41dbbb9f5ab2e1993b29 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Mon, 6 Jun 2022 11:05:28 +0100 Subject: [PATCH 01/93] docs(pt): prepare the ground to upload docs --- docs/.vuepress/config.js | 44 ++++++++++++++++++++++++++++++++++++++-- 1 file changed, 42 insertions(+), 2 deletions(-) diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 350d19781..922dede3d 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -24,7 +24,12 @@ module.exports = { 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'], head: [ @@ -203,7 +208,42 @@ module.exports = { '/fr/api/options', '/fr/api/components/' ] - } + }, + '/': { + 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/' + ] + }, } }, extendMarkdown: md => { From a6508b8e70c317ace4a157f474a26c056b06f5c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Mon, 6 Jun 2022 11:07:52 +0100 Subject: [PATCH 02/93] docs(pt): add `docs/pt/README.md` translated --- docs/pt/README.md | 93 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 93 insertions(+) create mode 100644 docs/pt/README.md diff --git a/docs/pt/README.md b/docs/pt/README.md new file mode 100644 index 000000000..f238b1bfb --- /dev/null +++ b/docs/pt/README.md @@ -0,0 +1,93 @@ +# Introdução + +Vue Test Utils é a biblioteca oficial de testes unitários para o Vue.js. + +Esta é a documentação para o Vue Test Utils versão 1, a qual se foca no Vue.js 2 e suas atualizações mais recentes. + +Em resumo: + +- [Vue Test Utils 1](https://github.com/vuejs/vue-test-utils/) é dedicado ao [Vue 2](https://github.com/vuejs/vue/). +- [Vue Test Utils 2](https://github.com/vuejs/vue-test-utils-next/) é dedicado ao [Vue 3](https://github.com/vuejs/vue-next/). + +
Aprenda a testar componentes Vue.js com Vue School
+ +- [Introdução](./installation/) +- [Guias](./guides/) + - [Começar agora](./guides/getting-started.md) + - [Dicas Gerais](guides/common-tips.md) + - [Mouse, Teclado e outros eventos do DOM](guides/dom-events.md) + - [Testando Comportamento Assíncronos](guides/testing-async-components.md) + - [Usando com TypeScript](guides/using-with-typescript.md) + - [Usando com Vue Router](guides/using-with-vue-router.md) + - [Usando com Vuex](guides/using-with-vuex.md) + - [Bibliotecas Úteis para Testes](guides/useful-libraries-for-testing.md) +- [API](api/) + - [mount](api/mount.md) + - [shallowMount](api/shallowMount.md) + - [render](api/render.md) + - [renderToString](api/renderToString.md) + - [Opções de Montagem](api/options.md) + - [context](api/options.md#context) + - [data](api/options.md#data) + - [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) + - [attachTo](api/options.md#attachto) + - [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#outras-opções) + - [Wrapper (Envolvedor)](api/wrapper/) + - [attributes](api/wrapper/attributes.md) + - [classes](api/wrapper/classes.md) + - [contains](api/wrapper/contains.md) + - [destroy](api/wrapper/destroy.md) + - [emitted](api/wrapper/emitted.md) + - [emittedByOrder](api/wrapper/emittedByOrder.md) + - [exists](api/wrapper/exists.md) + - [find](api/wrapper/find.md) + - [findAll](api/wrapper/findAll.md) + - [findAllComponents](api/wrapper/findAllComponents.md) + - [findComponent](api/wrapper/findComponent.md) + - [get](api/wrapper/get.md) + - [html](api/wrapper/html.md) + - [is](api/wrapper/is.md) + - [isEmpty](api/wrapper/isEmpty.md) + - [isVisible](api/wrapper/isVisible.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) + - [WrapperArray](api/wrapper-array/) + - [at](api/wrapper-array/at.md) + - [contains](api/wrapper-array/contains.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) + - [isVisible](api/wrapper-array/isVisible.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) + - [components (Componentes)](api/components/) + - [RouterLinkStub](api/components/RouterLinkStub.md) + - [Selectors](api/selectors.md) + - [createWrapper](api/createWrapper.md) + - [createLocalVue](api/createLocalVue.md) + - [config](api/config.md) From 023b0c598329c0130773501b9b90b7e0e9e11c0a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Mon, 6 Jun 2022 11:08:29 +0100 Subject: [PATCH 03/93] docs(pt): add `docs/pt/api/README.md` translated --- docs/pt/api/README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 docs/pt/api/README.md diff --git a/docs/pt/api/README.md b/docs/pt/api/README.md new file mode 100644 index 000000000..76699876e --- /dev/null +++ b/docs/pt/api/README.md @@ -0,0 +1,11 @@ +# API + +!!!include(docs/api/mount.md)!!! +!!!include(docs/api/shallowMount.md)!!! +!!!include(docs/api/render.md)!!! +!!!include(docs/api/renderToString.md)!!! +!!!include(docs/api/selectors.md)!!! +!!!include(docs/api/createLocalVue.md)!!! +!!!include(docs/api/createWrapper.md)!!! +!!!include(docs/api/config.md)!!! +!!!include(docs/api/enableAutoDestroy.md)!!! From 468319c8699e075fb7b4c2a30d27d192c17874b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Mon, 6 Jun 2022 11:09:14 +0100 Subject: [PATCH 04/93] docs(pt): add `docs/pt/api/components/README.md` translated --- docs/pt/api/components/README.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 docs/pt/api/components/README.md diff --git a/docs/pt/api/components/README.md b/docs/pt/api/components/README.md new file mode 100644 index 000000000..9e00a8aa5 --- /dev/null +++ b/docs/pt/api/components/README.md @@ -0,0 +1,5 @@ +# Os componentes + +A Vue Test Utils inclui utilitários de componentes que você pode usar para forjar componentes. + +!!!include(docs/api/components/RouterLinkStub.md)!!! From c426da36e24b0478aec0d2bdaef11105f5dd0ce6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Mon, 6 Jun 2022 11:11:01 +0100 Subject: [PATCH 05/93] docs(pt): add `docs/pt/api/components/RouterLinkStub.md` translated --- docs/pt/api/components/RouterLinkStub.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 docs/pt/api/components/RouterLinkStub.md diff --git a/docs/pt/api/components/RouterLinkStub.md b/docs/pt/api/components/RouterLinkStub.md new file mode 100644 index 000000000..590b45146 --- /dev/null +++ b/docs/pt/api/components/RouterLinkStub.md @@ -0,0 +1,20 @@ +## O componente RouterLinkStub + +Um componente para forjar o componente `router-link` do Vue Router. + +Você pode usar este componente para achar um componente `router-link` dentro da árvore de renderização. + +- **Uso:** + +Definir ele como um componente forjado dentro das opções de montagem: + +```js +import { mount, RouterLinkStub } from '@vue/test-utils' + +const wrapper = mount(Component, { + stubs: { + RouterLink: RouterLinkStub + } +}) +expect(wrapper.findComponent(RouterLinkStub).props().to).toBe('/some/path') +``` From 864231966c50628bd5fa6509314ba80a60333ad5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Mon, 6 Jun 2022 11:11:44 +0100 Subject: [PATCH 06/93] docs(pt): add `docs/pt/api/config.md` translated --- docs/pt/api/config.md | 114 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 114 insertions(+) create mode 100644 docs/pt/api/config.md diff --git a/docs/pt/api/config.md b/docs/pt/api/config.md new file mode 100644 index 000000000..4f7a31c47 --- /dev/null +++ b/docs/pt/api/config.md @@ -0,0 +1,114 @@ +## Configuração + +A Vue Test Utils incluem um objeto de configuração para as opções definidas usadas pela Vue Test Utils. + +### Opções de Configuração da Vue Test Utils + +### `showDeprecationWarnings` + +- tipo: `Boolean` +- valor padrão: `true` + +Controla se ou não mostrar avisos de depreciação. Quando definida para `true`, todos avisos de depreciação são visíveis na consola. + +Exemplo: + +```js +import { config } from '@vue/test-utils' + +config.showDeprecationWarnings = false +``` + +### `deprecationWarningHandler` + +- tipo: `Function` + +Permite controle delicado sobre os avisos de depreciação. Quando `showDeprecationWarnings` é definido para `true`, todos avisos de depreciação serão passados para este manipulador com o nome do método como primeiro argumento e a mensagem original como segundo argumento. + +::: tip +Isto poderia ser útil para registar mensagens de depreciação para separar a localização ou ajudar numa atualização gradual de base de código para última versão do utilitários de teste pela ignorância de certas funções de avisos depreciadas +::: + +Exemplo: + +```js +import { config } from '@vue/test-utils' + +config.showDeprecationWarnings = true +config.deprecationWarningHandler = (method, message) => { + if (method === 'emittedByOrder') return + + console.error(message) +} +``` + +### `stubs` + +- tipo: `{ [name: string]: Component | boolean | string }` +- valor padrão: `{}` + +O forjado guardado dentro de `config.stubs` é usado por padrão. +Forjados para usar dentro de componentes. Estes são sobrescritos pelo `stubs` passado dentro das opções em montagem. + +Quando estiver passando `stubs` como um arranjo dentro de opções em montagem, os `config.stubs` são convertidos para um arranjo, e forjarão componentes com um componente básico que retornam `<${component name}-stub>`. + +Exemplo: + +```js +import { config } from '@vue/test-utils' + +config.stubs['my-component'] = '
' +``` + +### `mocks` + +- tipo: `Object` +- valor padrão: `{}` + +Tal como nos `stubs`, os valores passados para o `config.mocks` são usados por padrão. Quaisquer valores passados para as opções de montagem do objeto `mocks` terão prioridade sobre aqueles declarados dentro de `config.mocks`. + +Exemplo: + +```js +import { config } from '@vue/test-utils' + +config.mocks['$store'] = { + state: { + id: 1 + } +} +``` + +### `methods` + +- tipo: `{ [name: string]: Function }` +- valor padrão: `{}` + +Você pode configurar métodos padrão usando o objeto `config`. Isto podem ser útil para plugins que injetam métodos aos componentes, tal como o [VeeValidate](https://logaretm.github.io/vee-validate/). Você pode sobrescrever métodos definidos dentro de `config` ao passar os `methods` dentro das opções em montagem. + +Exemplo: + +```js +import { config } from '@vue/test-utils' + +config.methods['getData'] = () => {} +``` + +### `provide` + +- tipo: `Object` +- valor padrão: `{}` + +Tal como em `stubs` ou `mocks`, os valores passados para o `config.provide` são usados por padrão. Quaisquer valores passados para opções em montagem do objeto `provide` terão prioridade sobre aqueles declarados dentro de `config.provide`. **Por favor repare que isto não é suportado para passar uma função como `config.provide`.** + +Exemplo: + +```js +import { config } from '@vue/test-utils' + +config.provide['$logger'] = { + log: (...args) => { + console.log(...args) + } +} +``` From 77654c5484d0fab99931fcdcf8cf7d7b1fe50f62 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Mon, 6 Jun 2022 11:12:29 +0100 Subject: [PATCH 07/93] docs(pt): add `docs/pt/api/createLocalVue.md` translated --- docs/pt/api/createLocalVue.md | 59 +++++++++++++++++++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 docs/pt/api/createLocalVue.md diff --git a/docs/pt/api/createLocalVue.md b/docs/pt/api/createLocalVue.md new file mode 100644 index 000000000..52861ffb8 --- /dev/null +++ b/docs/pt/api/createLocalVue.md @@ -0,0 +1,59 @@ +## O método createLocalVue() + +- **Argumentos:** + + - `{Object} options` + - `{Function} errorHandler` + +- **Retorna:** + + - `{Component}` + +- **Uso:** + +O `createLocalVue` retorna uma classe do Vue para você adicionar componentes, mixins (combinadores) e instalar plugins sem poluir a classe global do Vue. + +A opção `errorHandler` pode ser usada para manipular erros não capturados durante a função de renderizar do componente e observadores. + +Use ele com `options.localVue`: + +**Sem as opções:** + +```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) +``` + +**Com a opção [`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 lança um erro dentro um gatilho do ciclo de vida +const wrapper = shallowMount(Foo, { + localVue +}) +``` + +- **Consulte também:** [Dicas Comuns](../guides/common-tips.md#applying-global-plugins-and-mixins) From d0eece1a7c0d274b2087aba25e0bf8a477d91191 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Mon, 6 Jun 2022 11:12:53 +0100 Subject: [PATCH 08/93] docs(pt): add `docs/pt/api/createWrapper.md` translated --- docs/pt/api/createWrapper.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 docs/pt/api/createWrapper.md diff --git a/docs/pt/api/createWrapper.md b/docs/pt/api/createWrapper.md new file mode 100644 index 000000000..9d2760948 --- /dev/null +++ b/docs/pt/api/createWrapper.md @@ -0,0 +1,25 @@ +## O método createWrapper(node [, options]) + +- **Argumentos:** + + - `{vm|HTMLElement} node` + - `{Object} options` + - `{Boolean} attachedToDocument` + +- **Retorna:** + + - `{Wrapper}` + +- **Uso:** + +O `createWrapper` cria um `Wrapper` (envolvedor) para uma instância do Vue montada, ou um elemento 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) +``` From a804bafbd4ab6585d2c4df5066091711309198ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Mon, 6 Jun 2022 11:13:23 +0100 Subject: [PATCH 09/93] docs(pt): add `docs/pt/api/enableAutoDestroy.md` translated --- docs/pt/api/enableAutoDestroy.md | 55 ++++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 docs/pt/api/enableAutoDestroy.md diff --git a/docs/pt/api/enableAutoDestroy.md b/docs/pt/api/enableAutoDestroy.md new file mode 100644 index 000000000..00d9e2fdf --- /dev/null +++ b/docs/pt/api/enableAutoDestroy.md @@ -0,0 +1,55 @@ +## O método enableAutoDestroy(hook) + +- **Argumentos:** + + - `{Function} hook` + +- **Uso:** + +O método `enableAutoDestroy` destruirá todas as instâncias de `Wrapper` (envolvedor) usando a função gatilho passada (por exemplo o [`afterEach`](https://jestjs.io/docs/en/api#aftereachfn-timeout)). Depois de chamar o método, você pode reverter para o comportamento padrão ao chamar o método `resetAutoDestroyState`. + +```js +import { enableAutoDestroy, mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +// chama wrapper.destroy() depois de cada teste +enableAutoDestroy(afterEach) + +describe('Foo', () => { + it('renders a div', () => { + const wrapper = mount(Foo) + expect(wrapper.contains('div')).toBe(true) + // não há necessidade de chamar wrapper.destroy() aqui + }) +}) +``` + +## A função resetAutoDestroyState + +- **Uso:** + +Depois de chamar `enableAutoDestroy` você pode precisar desativar o comportamento de autodestruição (por exemplo quando algum do seu conjunto de testes depender do wrapper (envolvedor) ser persistente através de testes separados) + +Para alcançar isso você pode chamar `resetAutoDestroyState` para desativar o gatilho registado anteriormente + +```js +import { + enableAutoDestroy, + resetAutoDestroyState, + mount +} from '@vue/test-utils' +import Foo from './Foo.vue' + +// chama wrapper.destroy() depois de cada teste +enableAutoDestroy(afterEach) +// redefine a autodestruição depois do conjunto terminar +afterAll(resetAutoDestroyState) + +describe('Foo', () => { + it('renders a div', () => { + const wrapper = mount(Foo) + expect(wrapper.contains('div')).toBe(true) + // não há necessidade de chamar wrapper.destroy() aqui + }) +}) +``` From 3b5722a6ba6f737bc94a3c44bd57a49ff9715b40 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Mon, 6 Jun 2022 11:13:44 +0100 Subject: [PATCH 10/93] docs(pt): add `docs/pt/api/mount.md` translated --- docs/pt/api/mount.md | 137 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 137 insertions(+) create mode 100644 docs/pt/api/mount.md diff --git a/docs/pt/api/mount.md b/docs/pt/api/mount.md new file mode 100644 index 000000000..90cc1502d --- /dev/null +++ b/docs/pt/api/mount.md @@ -0,0 +1,137 @@ +## O método mount() + +- **Argumentos:** + + - `{Component} component` + - `{Object} options` + +- **Retorna:** `{Wrapper}` + +- **Opções:** + +Consulte as [opções](options.md) + +- **Uso:** + +Cria um [`Wrapper` (envolvedor)](wrapper/) que contém o componente Vue montado e renderizado. + +**Sem as opções:** + +```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) + }) +}) +``` + +**Com as opções do 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') + }) +}) +``` + +**Ligar ao 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() + }) +}) +``` + +**Encaixes padrão e nomeados:** + +```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, // Corresponderá a ``. + foo: '
' + } + }) + expect(wrapper.contains('div')).toBe(true) + }) +}) +``` + +**Forjando propriedades globais:** + +```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) + }) +}) +``` + +**Forjando componentes:** + +```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) + }) +}) +``` + +**Nota de Depreciação:** + +Quando você estiver forjando componentes, o fornecimento de uma string (`ComponentToStub: '
`) já não é suportado. + +- **Consulte também:** [Wrapper (envolvedor)](wrapper/) From b8416cec039098519596c9013d54d96b047ee986 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Mon, 6 Jun 2022 11:14:03 +0100 Subject: [PATCH 11/93] docs(pt): add `docs/pt/api/options.md` translated --- docs/pt/api/options.md | 471 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 471 insertions(+) create mode 100644 docs/pt/api/options.md diff --git a/docs/pt/api/options.md b/docs/pt/api/options.md new file mode 100644 index 000000000..e7ad6ba2b --- /dev/null +++ b/docs/pt/api/options.md @@ -0,0 +1,471 @@ +# Opções de Montagem + +Opções para o método `mount` e `shallowMount`. + +:::tip +Além das opções documentadas abaixo, o objeto `options` pode conter qualquer opção que seria válida dentro de uma chamada para `new Vue({ /* as opções vão aqui */ })`. +Essas opções será combinada com as opções do componente existente quando montada com o método `mount` ou `shallowMount` + +[Consulte outras opções para exemplos](#outras-opções) +::: + +- [Opções de Montagem](#opções-de-montagem) + - [A propriedade context](#a-propriedade-context) + - [A propriedade data](#a-propriedade-data) + - [A propriedade slots](#a-propriedade-slots) + - [A propriedade scopedSlots](#a-propriedade-scopedslots) + - [A propriedade stubs](#a-propriedade-stubs) + - [A propriedade mocks](#a-propriedade-mocks) + - [A propriedade localVue](#a-propriedade-localvue) + - [A propriedade attachTo](#a-propriedade-attachto) + - [A propriedade attachToDocument](#a-propriedade-attachtodocument) + - [A propriedade attrs](#a-propriedade-attrs) + - [A propriedade propsData](#a-propriedade-propsdata) + - [A propriedade listeners](#a-propriedade-listeners) + - [A propriedade parentComponent](#a-propriedade-parentcomponent) + - [A propriedade provide](#a-propriedade-provide) + - [Outras opções](#outras-opções) + +## A propriedade context + +- Tipo: `Object` + +Passa o contexto para um componente funcional. Apenas pode ser usado com [componentes funcionais](https://vuejs.org/v2/guide/render-function.html#Functional-Components). + +Exemplo: + +```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) +``` + +## A propriedade data + +- Tipo: `Function` + +Passa os dados para um componente. Será combinada com a função `data` existente. + +Exemplo: + +```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' +``` + +## A propriedade slots + +- Tipo: `{ [name: string]: Array|Component|string }` + +Fornece um objeto de encaixe de conteúdo para um componente. A chave corresponde ao nome do encaixe. O valor pode ser tanto um componente, um arranjo de componentes, ou um modelo de sequência de caracteres, ou texto. + +Exemplo: + +```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, // Corresponderá a ``. + foo: '
', + bar: 'bar', + baz: bazComponent, + qux: '', + quux: '' + }, + stubs: { + // usado para registar componentes personalizados + 'my-component': MyComponent, + 'your-component': yourComponent + }, + mocks: { + // usado para adicionar propriedades para o contexto de renderização + yourProperty: 'ipsum' + } +}) + +expect(wrapper.find('div')).toBe(true) +``` + +## A propriedade scopedSlots + +- Tipo: `{ [name: string]: string|Function }` + +Fornece um objeto de encaixes escopados ao componente. A chave responde ao nome do encaixe. + +Você pode definir o nome das propriedades com o uso do atributo `slot-scope`: + +```js +shallowMount(Component, { + scopedSlots: { + foo: '

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

' + } +}) +``` + +Otherwise props are available as a `props` object when the slot is evaluated: +De outro modo as propriedades estarão disponíveis como um objeto `props` quando o encaixe for avaliado: + +```js +shallowMount(Component, { + scopedSlots: { + default: '

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

' + } +}) +``` + +You can also pass a function that takes the props as an argument: +Você pode também passar uma função que recebem as propriedades como um argumento: + +```js +shallowMount(Component, { + scopedSlots: { + foo: function(props) { + return this.$createElement('div', props.index) + } + } +}) +``` + +Ou você pode usar JSX. Se você escrever em JSX dentro de um método, o `this.$createElement` é injetado automaticamente pelo `babel-plugin-transform-vue-jsx`: + +```js +shallowMount(Component, { + scopedSlots: { + foo(props) { + return
{props.text}
+ } + } +}) +``` + +::: warning Elemento Raíz Obrigatório +Devido a implementação interna desta funcionalidade, o encaixe de conteúdo tem de retornar um elemento raíz, mesma a um encaixe escopado é permitido retornar um arranjo de elementos. + +Se você alguma vez precisar disto em um teste, a maneira recomendada para dar a volta a isso é envolver o componente em teste dentro de outro componente e montar esse: +::: + +```js +const WrapperComp = { + template: ` + +

Using the {{props.a}}

+

Using the {{props.a}}

+ + `, + components: { + ComponentUnderTest + } +} +const wrapper = mount(WrapperComp).findComponent(ComponentUnderTest) +``` + +## A propriedade stubs + +- Tipo: `{ [name: string]: Component | string | boolean } | Array` + +Forja componentes filhos que podem estar em um arranjo de nomes de componentes para forjar, ou em um objeto. Se a propriedade `stubs` for um arranjo, todo elemento forjado é um `<${component name}-stub>`. + +**Aviso de Depreciação:** + +Quando estiver forjando componentes, o fornecimento de uma sequência de caracteres (`ComponentToStub: '
`) não é mais suportado. + +Exemplo: + +```js +import Foo from './Foo.vue' + +mount(Component, { + stubs: ['registered-component'] +}) + +shallowMount(Component, { + stubs: { + // forja com uma implementação específica + 'registered-component': Foo, + // cria um forjado padrão. + // neste caso o nome do componente de um forjado padrão é `another-component`. + // o forjado padrão é `<${the component name of default stub}-stub>`. + 'another-component': true + } +}) +``` + +## A propriedade mocks + +- Tipo: `Object` + +Adiciona propriedades adicionais à instância. Útil para moldar injeções globais. + +Exemplo: + +```js +const $route = { path: 'http://www.example-path.com' } +const wrapper = shallowMount(Component, { + mocks: { + $route + } +}) +expect(wrapper.vm.$route.path).toBe($route.path) +``` + +::: tip +Para moldar o `$root` use a opção `parentComponent` como descrita [aqui](https://github.com/vuejs/vue-test-utils/issues/481#issuecomment-423716430) +::: + +## A propriedade localVue + +- Tipo: `Vue` + +Uma cópia local de Vue criada pelo método [`createLocalVue`](./createLocalVue.md) para usar quando estiver montando o componente. Instalar plugins sobre esta cópia de `Vue` impedi a polução da cópia original de `Vue`. + +Exemplo: + +```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) +``` + +## A propriedade attachTo + +- Tipo: `HTMLElement | string` +- Valor padrão: `null` + +Isto especifica um `HTMLElement` específico ou sequência de caracteres de seletor CSS apontando um `HTMLElement`, para qual o seu componente será completamente montado dentro do documento. + +Quando estiver ligando ao DOM, você deve chamar o `wrapper.destroy()` no final do seu teste para remover os elementos renderizados do documento e destruir a instância do componente. + +::: tip +Quando estiver usando o `attachTo: document.body` o novo `div` ao invés de substituir o corpo inteiro, o novo `
` será adicionado. Isto foi desenhado para imitar o comportamento do Vue 3 e simplificar a futura migração. Para mais detalhes consulte [este comentário](https://github.com/vuejs/vue-test-utils/issues/1578#issuecomment-674652747) +::: + +```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).not.toBeNull() +wrapper.destroy() + +wrapper = mount(Component, { + attachTo: document.getElementById('root') +}) +expect(wrapper.vm.$el.parentNode).not.toBeNull() +wrapper.destroy() +``` + +## A propriedade attachToDocument + +- Tipo: `boolean` +- Valor padrão: `false` + +::: warning Aviso de Depreciação +A propriedade `attachToDocument` está depreciada e será removida nos futuros lançamentos. Use o [`attachTo`](#a-propriedade-attachto) no lugar. Por exemplo, se você precisar ligar o componente ao `document.body`: + +```js +wrapper = mount(Component, { + attachTo: document.body +}) +``` + +Para mais informações, consulte a dica do [`attachTo`](#a-propriedade-attachto) acima. +::: + +Tal como o [`attachTo`](#a-propriedade-attachto), porém ele cria automaticamente um novo elemento `div` por você e insere ele dentro do seu corpo. + +Quando estiver ligando ao DOM, você deve chamar o `wrapper.destroy()` no final do seu teste para remover os elementos renderizados do documento e destruir a instância do componente. + +## A propriedade attrs + +- Tipo: `Object` + +Define o objeto `$attrs` da instância do componente. + +## A propriedade propsData + +- Tipo: `Object` + +Define as propriedades da instância do componente quando o componente estiver montado. + +Exemplo: + +```js +const Component = { + template: '
{{ msg }}
', + props: ['msg'] +} +const wrapper = mount(Component, { + propsData: { + msg: 'aBC' + } +}) +expect(wrapper.text()).toBe('aBC') +``` + +::: tip +É digno de menção que o `propsData` é de fato uma [API do Vue](https://vuejs.org/v2/api/#propsData), não uma opção de montagem do Vue Test Utils. +::: + +## A propriedade listeners + +- Tipo: `Object` + +Define o objeto `$listeners` da instância do componente. + +Exemplo: + +```js +const Component = { + template: '' +} +const onClick = jest.fn() +const wrapper = mount(Component, { + listeners: { + click: onClick + } +}) + +wrapper.trigger('click') +expect(onClick).toHaveBeenCalled() +``` + +## A propriedade parentComponent + +- Tipo: `Object` + +O componente para ser usado como pai para o componente montado. + +Exemplo: + +```js +import Foo from './Foo.vue' + +const wrapper = shallowMount(Component, { + parentComponent: Foo +}) +expect(wrapper.vm.$parent.$options.name).toBe('foo') +``` + +## A propriedade provide + +- Tipo: `Object` + +Passa as propriedades para os componentes usarem na injeção. Consulte o [provide/inject](https://vuejs.org/v2/api/#provide-inject). + +Exemplo: + +```js +const Component = { + inject: ['foo'], + template: '
{{this.foo()}}
' +} + +const wrapper = shallowMount(Component, { + provide: { + foo() { + return 'fooValue' + } + } +}) + +expect(wrapper.text()).toBe('fooValue') +``` + +## Outras opções + +Quando as opções para o método `mount` e `shallowMount` contém as opções, outras opções para além das opções de montagem, as opções do componente são sobrescritas por aquelas usando o [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') +``` From b757c0436d34d9292be5e7404f9022bee1df47dc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Mon, 6 Jun 2022 11:14:31 +0100 Subject: [PATCH 12/93] docs(pt): add `docs/pt/api/render.md` translated --- docs/pt/api/render.md | 103 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 103 insertions(+) create mode 100644 docs/pt/api/render.md diff --git a/docs/pt/api/render.md b/docs/pt/api/render.md new file mode 100644 index 000000000..31a9a8923 --- /dev/null +++ b/docs/pt/api/render.md @@ -0,0 +1,103 @@ +## O método render() + +- **Argumentos:** + + - `{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` + +- **Retorna:** `{Promise}` + +- **Opções:** + +Consulte as [opções](./options.md) + +- **Uso:** + +Transforma um objeto em uma string e retorna um [cheerio wrapper (envolvedor)](https://github.com/cheeriojs/cheerio). + +Cheerio é uma biblioteca parecida com o JQuery para atravessar o DOM dentro do Node.js. Ela tem uma API semelhante ao [`Wrapper` (envolvedor)](wrapper/) da Vue Test Utils. + +O `render` usa [`vue-server-renderer`](https://ssr.vuejs.org/en/basic.html) nos bastidores, para transformar um componente em HTML estático. + +O `render` está incluído dentro do pacote `@vue/server-test-utils`. + +**Sem as opções:** + +```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('
') + }) +}) +``` + +**Com as opções do 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') + }) +}) +``` + +**Encaixes padrão e nomeados:** + +```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, // Corresponderá a , + foo: '
' + } + }) + expect(wrapper.text()).toContain('
') + }) +}) +``` + +**Forjando propriedades globais:** + +```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) + }) +}) +``` From dbcdcb2fc917a7258733a3f7336073740fd6ea66 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Mon, 6 Jun 2022 11:14:59 +0100 Subject: [PATCH 13/93] docs(pt): add `docs/pt/api/renderToString.md` translated --- docs/pt/api/renderToString.md | 101 ++++++++++++++++++++++++++++++++++ 1 file changed, 101 insertions(+) create mode 100644 docs/pt/api/renderToString.md diff --git a/docs/pt/api/renderToString.md b/docs/pt/api/renderToString.md new file mode 100644 index 000000000..5194a71b2 --- /dev/null +++ b/docs/pt/api/renderToString.md @@ -0,0 +1,101 @@ +## O método renderToString() + +- **Argumentos:** + + - `{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` + +- **Retorna:** `{Promise}` + +- **Opções:** + +Consulte as [opções](./options.md) + +- **Uso:** + +Transforma um componente em HTML. + +O `renderToString` usa o [`vue-server-renderer`](https://ssr.vuejs.org/en/basic.html) nos bastidores, para transformar um componente em HTML. + +O `renderToString` está incluído dentro do pacote `@vue/server-test-utils`. + +**Sem as opções:** + +```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('
') + }) +}) +``` + +**Com as opções do 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') + }) +}) +``` + +**Encaixes padrão e nomeados:** + +```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, // Corresponderá a , + foo: '
' + } + }) + expect(str).toContain('
') + }) +}) +``` + +**Forjando propriedades globais:** + +```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) + }) +}) +``` From 077f0cc86997159b32593944fbe65f3d7ccf3a3f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Mon, 6 Jun 2022 11:15:58 +0100 Subject: [PATCH 14/93] docs(pt): add `docs/pt/api/selectors.md` translated --- docs/pt/api/selectors.md | 61 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 docs/pt/api/selectors.md diff --git a/docs/pt/api/selectors.md b/docs/pt/api/selectors.md new file mode 100644 index 000000000..e37c90f94 --- /dev/null +++ b/docs/pt/api/selectors.md @@ -0,0 +1,61 @@ +## Os seletores + +Há muitos métodos que recebem um seletor como um argumento. Um seletor pode ser tanto um seletor CSS, um componente do Vue, ou um método `find` de objeto. + +### Seletores CSS + +O mount manipula qualquer seletor css válido: + +- seletores de tags (`div`, `foo`, `bar`) +- seletores de classe (`.foo`, `.bar`) +- seletores de atributos (`[foo]`, `[foo="bar"]`) +- seletores de id (`#foo`, `#bar`) +- pseudo-seletores (`div:first-of-type`) + +You can also use combinators: +Você também pode usar combinações: + +- combinador de descendente direto (`div > #bar > .foo`) +- combinador de descendente genérico (`div #bar .foo`) +- seletor de irmão adjacente (`div + .foo`) +- seletor de irmão genérico (`div ~ .foo`) + +### Componentes do Vue + +Os componentes do Vue também são seletores válidos. + +```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) +``` + +### Método `Find` de Objeto + +#### Name (nome) + +Ao usar um método `find` de objeto, o Vue Test Utils permite a seleção de elementos pelo `name` do componente no wrapper (envolvedor) de componentes. + +```js +const buttonWrapper = wrapper.find({ name: 'my-button' }) +buttonWrapper.trigger('click') +``` + +#### Ref (referência) + +Ao usar um método `find` de objeto, o Vue Test Utils permite a seleção de elementos pelo `$ref` no wrapper (envolvedor) de componentes. + +```js +const buttonWrapper = wrapper.find({ ref: 'myButton' }) +buttonWrapper.trigger('click') +``` From 0b6c3c6ca94f9f1e633a565691dbe6fa4b8b873d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Mon, 6 Jun 2022 11:16:31 +0100 Subject: [PATCH 15/93] docs(pt): add `docs/pt/api/shallowMount.md` translated --- docs/pt/api/shallowMount.md | 118 ++++++++++++++++++++++++++++++++++++ 1 file changed, 118 insertions(+) create mode 100644 docs/pt/api/shallowMount.md diff --git a/docs/pt/api/shallowMount.md b/docs/pt/api/shallowMount.md new file mode 100644 index 000000000..8de84f23b --- /dev/null +++ b/docs/pt/api/shallowMount.md @@ -0,0 +1,118 @@ +## O método shallowMount() + +- **Argumentos:** + + - `{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` + +- **Retorna:** `{Wrapper}` + +- **Opções:** + +Consulte as [opções](./options.md) + +- **Uso:** + +Tal como o [`mount`](mount.md), ele cria um [`Wrapper` (envolvedor)](wrapper/) que contém o componente Vue montado e renderizado, mas com componentes filhos forjados. + +**Sem as opções:** + +```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) + }) +}) +``` + +**Com as opções do 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') + }) +}) +``` + +**Ligar ao 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() + }) +}) +``` + +**Encaixes padrão e nomeados:** + +```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, // Corresponderá a , + foo: '
' + } + }) + expect(wrapper.contains('div')).toBe(true) + }) +}) +``` + +**Forjando propriedades globais:** + +```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) + }) +}) +``` From 87a3626af5ecd310e0fc6b77a5a21b48635fc0a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Mon, 6 Jun 2022 11:18:33 +0100 Subject: [PATCH 16/93] docs(pt): add `docs/pt/api/wrapper-array/README.md` translated --- docs/pt/api/wrapper-array/README.md | 30 +++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 docs/pt/api/wrapper-array/README.md diff --git a/docs/pt/api/wrapper-array/README.md b/docs/pt/api/wrapper-array/README.md new file mode 100644 index 000000000..e90239b78 --- /dev/null +++ b/docs/pt/api/wrapper-array/README.md @@ -0,0 +1,30 @@ +# O objeto WrapperArray + +Um `WrapperArray` é um objeto que contém um array de [`Wrappers` (envolvedores)](../wrapper/), e métodos para testar os `Wrappers` (envolvedores). + +## Propriedades + +### `wrappers` (envolvedores) + +Um `array` (somente-leitura): os `Wrappers` contidos dentro do `WrapperArray` + +### `length` (comprimento) + +Um `number` (somente-leitura): o número de `Wrappers` contidos dentro do `WrapperArray` + +## Métodos + +!!!include(docs/api/wrapper-array/at.md)!!! +!!!include(docs/api/wrapper-array/contains.md)!!! +!!!include(docs/api/wrapper-array/destroy.md)!!! +!!!include(docs/api/wrapper-array/exists.md)!!! +!!!include(docs/api/wrapper-array/filter.md)!!! +!!!include(docs/api/wrapper-array/is.md)!!! +!!!include(docs/api/wrapper-array/isEmpty.md)!!! +!!!include(docs/api/wrapper-array/isVueInstance.md)!!! +!!!include(docs/api/wrapper-array/setChecked.md)!!! +!!!include(docs/api/wrapper-array/setData.md)!!! +!!!include(docs/api/wrapper-array/setMethods.md)!!! +!!!include(docs/api/wrapper-array/setProps.md)!!! +!!!include(docs/api/wrapper-array/setValue.md)!!! +!!!include(docs/api/wrapper-array/trigger.md)!!! From 5b086e5d41ffbc83077e298962912258df1bb0b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Mon, 6 Jun 2022 11:19:07 +0100 Subject: [PATCH 17/93] docs(pt): add `docs/pt/api/wrapper-array/at.md` translated --- docs/pt/api/wrapper-array/at.md | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 docs/pt/api/wrapper-array/at.md diff --git a/docs/pt/api/wrapper-array/at.md b/docs/pt/api/wrapper-array/at.md new file mode 100644 index 000000000..38c3c10ec --- /dev/null +++ b/docs/pt/api/wrapper-array/at.md @@ -0,0 +1,26 @@ +## O método at + +Retorna o `Wrapper` (envolvedor) no `índice` passado. Usa numeração baseada em zero (exemplo. o primeiro item está no índice 0). +Se o `índice` for negativo, a indexação começa com o último elemento (exemplo. o último item está no índice -1). + +- **Argumentos:** + + - `{number} index` + +- **Retorna:** `{Wrapper}` + +- **Exemplo:** + +```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) +``` From 8eb162f486d0e2c458757bd4aa3169228519a7c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Mon, 6 Jun 2022 11:19:23 +0100 Subject: [PATCH 18/93] docs(pt): add `docs/pt/api/wrapper-array/contains.md` translated --- docs/pt/api/wrapper-array/contains.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 docs/pt/api/wrapper-array/contains.md diff --git a/docs/pt/api/wrapper-array/contains.md b/docs/pt/api/wrapper-array/contains.md new file mode 100644 index 000000000..97c3c453a --- /dev/null +++ b/docs/pt/api/wrapper-array/contains.md @@ -0,0 +1,24 @@ +## O método contains + +Afirma que todo wrapper (envolvedor) dentro do `WrapperArray` contém o seletor. + +Use qualquer [seletor](../selectors.md) válido. + +- **Argumentos:** + + - `{string|Component} selector` + +- **Returna:** `{boolean}` + +- **Exemplo:** + +```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) +``` From 1d3b1a927f93b48f25b3cb36c987b0aedf1a24a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Mon, 6 Jun 2022 11:20:13 +0100 Subject: [PATCH 19/93] docs(pt): add `docs/pt/api/wrapper-array/destroy.md` translated --- docs/pt/api/wrapper-array/destroy.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 docs/pt/api/wrapper-array/destroy.md diff --git a/docs/pt/api/wrapper-array/destroy.md b/docs/pt/api/wrapper-array/destroy.md new file mode 100644 index 000000000..af97cd6fa --- /dev/null +++ b/docs/pt/api/wrapper-array/destroy.md @@ -0,0 +1,16 @@ +## O método destroy + +Destrói cada `Wrapper` (envolvedor) de Vue dentro do `WrapperArray`. + +- **Exemplo:** + +```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) +``` From f3964aeff3154bc0ab89a913158188449baeccd3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Mon, 6 Jun 2022 11:20:37 +0100 Subject: [PATCH 20/93] docs(pt): add `docs/pt/api/wrapper-array/exists.md` translated --- docs/pt/api/wrapper-array/exists.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 docs/pt/api/wrapper-array/exists.md diff --git a/docs/pt/api/wrapper-array/exists.md b/docs/pt/api/wrapper-array/exists.md new file mode 100644 index 000000000..2c1168322 --- /dev/null +++ b/docs/pt/api/wrapper-array/exists.md @@ -0,0 +1,18 @@ +## O método exists + +Afirma que `WrapperArray` existe. + +Retorna `false` se for chamado em um `WrapperArray` sem objetos `Wrapper` (envolvedor), ou se qualquer um deles não existir. + +- **Retorna:** `{boolean}` + +- **Exemplo:** + +```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) +``` From 54654883b48869a8fe4d53f8ac609a642cba53ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Tue, 7 Jun 2022 10:24:46 +0100 Subject: [PATCH 21/93] docs(pt): add `docs/pt/api/wrapper-array/filter.md` translated --- docs/pt/api/wrapper-array/filter.md | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 docs/pt/api/wrapper-array/filter.md diff --git a/docs/pt/api/wrapper-array/filter.md b/docs/pt/api/wrapper-array/filter.md new file mode 100644 index 000000000..e58069edf --- /dev/null +++ b/docs/pt/api/wrapper-array/filter.md @@ -0,0 +1,26 @@ +## O método filter + +Filtra o `WrapperArray` com uma função atribuída sobre objetos `Wrapper` (envoledor). + +O comportamento deste método é similar ao [Array.prototype.filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter). + + +- **Argumentos:** + + - `{function} predicate` + +- **Retorna:** `{WrapperArray}` + +Uma nova instância de `WrapperArray` contendo instâncias de `Wrapper` que torna `true` para a função atribuída. + +- **Exemplo:** + +```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')) +``` From 6e2e201ddb54b346261fa3f01c5eee46af8d1df6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Tue, 7 Jun 2022 10:25:02 +0100 Subject: [PATCH 22/93] docs(pt): add `docs/pt/api/wrapper-array/is.md` translated --- docs/pt/api/wrapper-array/is.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 docs/pt/api/wrapper-array/is.md diff --git a/docs/pt/api/wrapper-array/is.md b/docs/pt/api/wrapper-array/is.md new file mode 100644 index 000000000..9af9e8e9a --- /dev/null +++ b/docs/pt/api/wrapper-array/is.md @@ -0,0 +1,20 @@ +## O método is + +Afirma que todo `Wrapper` dentro do nó do DOM de `WrapperArray`ou `vm` corresponde a um [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) +const divArray = wrapper.findAll('div') +expect(divArray.is('div')).toBe(true) +``` From 89cec1849eb807dd0b9d004f4eef42de185531e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Tue, 7 Jun 2022 10:25:23 +0100 Subject: [PATCH 23/93] docs(pt): add `docs/pt/api/wrapper-array/isEmpty.md` translated --- docs/pt/api/wrapper-array/isEmpty.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 docs/pt/api/wrapper-array/isEmpty.md diff --git a/docs/pt/api/wrapper-array/isEmpty.md b/docs/pt/api/wrapper-array/isEmpty.md new file mode 100644 index 000000000..041e4997b --- /dev/null +++ b/docs/pt/api/wrapper-array/isEmpty.md @@ -0,0 +1,24 @@ +## O método isEmpty + +::: warning Aviso de Depreciação +O `isEmpty` está depreciado e será removido nos futuros lançamentos. + +Considere um correspondente personalizado tais como aqueles fornecidos dentro do [jest-dom](https://github.com/testing-library/jest-dom#tobeempty). + +Sempre que estiver usando com `findComponent` acesse o elemento do DOM com `findComponent(Comp).element` +::: + +Afirma que todo `Wrapper` dentro do `WrapperArray` 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) +const divArray = wrapper.findAll('div') +expect(divArray.isEmpty()).toBe(true) +``` From 8280b8b5fc155d81db60c63569dadacc98f99944 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Tue, 7 Jun 2022 10:25:40 +0100 Subject: [PATCH 24/93] docs(pt): add `docs/pt/api/wrapper-array/isVisible.md` translated --- docs/pt/api/wrapper-array/isVisible.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 docs/pt/api/wrapper-array/isVisible.md diff --git a/docs/pt/api/wrapper-array/isVisible.md b/docs/pt/api/wrapper-array/isVisible.md new file mode 100644 index 000000000..789bba01a --- /dev/null +++ b/docs/pt/api/wrapper-array/isVisible.md @@ -0,0 +1,21 @@ +## O método isVisible + +Afirma que todo `Wrapper` (envolvedor) dentro do `WrapperArray` está visível. + +Retorna `false` se pelo menos elemento ancestral tiver o estilo `display: none`, `visibility: hidden`, `opacity: 0`, estiver localizado dentro tag `
` colapsada ou tiver o atributo `hidden`. + +Isto pode ser usado para afirmar que o componente está oculto pelo `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.findAll('.is-not-visible').isVisible()).toBe(false) +expect(wrapper.findAll('.is-visible').isVisible()).toBe(true) +``` From 4e60bc10e6964a3ed83b0382ac7d9d5e9a404889 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Tue, 7 Jun 2022 10:26:38 +0100 Subject: [PATCH 25/93] docs(pt): add `docs/pt/api/wrapper-array/isVueInstance.md` translated --- docs/pt/api/wrapper-array/isVueInstance.md | 25 ++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 docs/pt/api/wrapper-array/isVueInstance.md diff --git a/docs/pt/api/wrapper-array/isVueInstance.md b/docs/pt/api/wrapper-array/isVueInstance.md new file mode 100644 index 000000000..b5753045e --- /dev/null +++ b/docs/pt/api/wrapper-array/isVueInstance.md @@ -0,0 +1,25 @@ +## 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 todo `Wrapper` (envolvedor) dentro do `WrapperArray` é uma instância de Vue. + +- **Retorna:** `{boolean}` + +- **Exemplo:** + +```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) +``` From 0979ddbb17fdef2d4889edb70f8f80e3d03e56e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Tue, 7 Jun 2022 10:27:06 +0100 Subject: [PATCH 26/93] docs(pt): add `docs/pt/api/wrapper-array/setChecked.md` translated --- docs/pt/api/wrapper-array/setChecked.md | 41 +++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 docs/pt/api/wrapper-array/setChecked.md diff --git a/docs/pt/api/wrapper-array/setChecked.md b/docs/pt/api/wrapper-array/setChecked.md new file mode 100644 index 000000000..87abcd55d --- /dev/null +++ b/docs/pt/api/wrapper-array/setChecked.md @@ -0,0 +1,41 @@ +## O método setChecked + +Este método é um apelido do seguinte código. + +```js +wrapperArray.wrappers.forEach(wrapper => wrapper.setChecked(checked)) +``` + +- **Argumentos:** + + - `{Boolean} checked (default: true)` + +- **Exemplo:** + +```js +import { mount } from '@vue/test-utils' + +test('setChecked demo', async () => { + 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('') + await wrapperArray.setChecked() + expect(wrapper.vm.t1).toEqual(true) + expect(wrapper.vm.t2).toEqual('foo') +}) +``` From 5655858926476d2f8f1ddf5477006aa270739afd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Tue, 7 Jun 2022 10:27:24 +0100 Subject: [PATCH 27/93] docs(pt): add `docs/pt/api/wrapper-array/setData.md` translated --- docs/pt/api/wrapper-array/setData.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 docs/pt/api/wrapper-array/setData.md 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') +}) +``` From 3c350c93efdcb03b76ee358fbf33b6fce0c3e78e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Tue, 7 Jun 2022 10:27:43 +0100 Subject: [PATCH 28/93] docs(pt): add `docs/pt/api/wrapper-array/setMethods.md` translated --- docs/pt/api/wrapper-array/setMethods.md | 36 +++++++++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 docs/pt/api/wrapper-array/setMethods.md 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) +``` From 75db1a13a5d8fac680e92902e117dc5b661f5561 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Tue, 7 Jun 2022 10:31:49 +0100 Subject: [PATCH 29/93] docs(pt): add `docs/pt/api/wrapper-array/setProps.md` translated --- docs/pt/api/wrapper-array/setProps.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 docs/pt/api/wrapper-array/setProps.md 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') +}) +``` From 24be242c8d4a9440c23e55ec341802118d866bd3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Tue, 7 Jun 2022 10:32:04 +0100 Subject: [PATCH 30/93] docs(pt): add `docs/pt/api/wrapper-array/setValue.md` translated --- docs/pt/api/wrapper-array/setValue.md | 40 +++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 docs/pt/api/wrapper-array/setValue.md 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') +}) +``` From 04523c56c1608c10bf6e22cdb8a450d71697fefa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Tue, 7 Jun 2022 10:32:24 +0100 Subject: [PATCH 31/93] docs(pt): add `docs/pt/api/wrapper-array/trigger.md` translated --- docs/pt/api/wrapper-array/trigger.md | 29 ++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 docs/pt/api/wrapper-array/trigger.md 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) +}) +``` From 3b06cb6814eadf6d597fa226c205040081854de4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Tue, 7 Jun 2022 10:33:39 +0100 Subject: [PATCH 32/93] docs(pt): add `docs/pt/api/wrapper/README.md` translated --- docs/pt/api/wrapper/README.md | 57 +++++++++++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 docs/pt/api/wrapper/README.md diff --git a/docs/pt/api/wrapper/README.md b/docs/pt/api/wrapper/README.md new file mode 100644 index 000000000..61a265b23 --- /dev/null +++ b/docs/pt/api/wrapper/README.md @@ -0,0 +1,57 @@ +# Wrapper (Envolvedor) + +O Vue Test Utils (Utilitário de Teste do 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). + +
Aprenda sobre o objeto Wrapper em um vídeo aula gratuita da Vue School
+ +## 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/api/wrapper/attributes.md)!!! +!!!include(docs/api/wrapper/classes.md)!!! +!!!include(docs/api/wrapper/contains.md)!!! +!!!include(docs/api/wrapper/destroy.md)!!! +!!!include(docs/api/wrapper/emitted.md)!!! +!!!include(docs/api/wrapper/emittedByOrder.md)!!! +!!!include(docs/api/wrapper/exists.md)!!! +!!!include(docs/api/wrapper/find.md)!!! +!!!include(docs/api/wrapper/findAll.md)!!! +!!!include(docs/api/wrapper/findComponent.md)!!! +!!!include(docs/api/wrapper/findAllComponents.md)!!! +!!!include(docs/api/wrapper/html.md)!!! +!!!include(docs/api/wrapper/get.md)!!! +!!!include(docs/api/wrapper/is.md)!!! +!!!include(docs/api/wrapper/isEmpty.md)!!! +!!!include(docs/api/wrapper/isVisible.md)!!! +!!!include(docs/api/wrapper/isVueInstance.md)!!! +!!!include(docs/api/wrapper/name.md)!!! +!!!include(docs/api/wrapper/props.md)!!! +!!!include(docs/api/wrapper/setChecked.md)!!! +!!!include(docs/api/wrapper/setData.md)!!! +!!!include(docs/api/wrapper/setMethods.md)!!! +!!!include(docs/api/wrapper/setProps.md)!!! +!!!include(docs/api/wrapper/setSelected.md)!!! +!!!include(docs/api/wrapper/setValue.md)!!! +!!!include(docs/api/wrapper/text.md)!!! +!!!include(docs/api/wrapper/trigger.md)!!! From c388879555b75ac2e2d6d108b264a008338a7289 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Tue, 7 Jun 2022 10:34:45 +0100 Subject: [PATCH 33/93] docs(pt): add `docs/pt/api/wrapper/attributes.md` translated --- docs/pt/api/wrapper/attributes.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 docs/pt/api/wrapper/attributes.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') +``` From e4c52c1e70842c7ac0098edf6678855e7f5fea3e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Tue, 7 Jun 2022 10:35:04 +0100 Subject: [PATCH 34/93] docs(pt): add `docs/pt/api/wrapper/classes.md` translated --- docs/pt/api/wrapper/classes.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 docs/pt/api/wrapper/classes.md diff --git a/docs/pt/api/wrapper/classes.md b/docs/pt/api/wrapper/classes.md new file mode 100644 index 000000000..701256b19 --- /dev/null +++ b/docs/pt/api/wrapper/classes.md @@ -0,0 +1,22 @@ +## O método classes + +Retorna o `Wrapper` (envolvedor) 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) +``` From 5912a932813950ff3a92246cc2be8631b0439942 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Tue, 7 Jun 2022 10:35:18 +0100 Subject: [PATCH 35/93] docs(pt): add `docs/pt/api/wrapper/contains.md` translated --- docs/pt/api/wrapper/contains.md | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 docs/pt/api/wrapper/contains.md diff --git a/docs/pt/api/wrapper/contains.md b/docs/pt/api/wrapper/contains.md new file mode 100644 index 000000000..4fc4ca2b8 --- /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` (envolvedor) contém um lemento 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) From 7c29ac4863ba8337693dea3d20e6cf19e6ce869a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Tue, 7 Jun 2022 10:35:45 +0100 Subject: [PATCH 36/93] docs(pt): add `docs/pt/api/wrapper/destroy.md` translated --- docs/pt/api/wrapper/destroy.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 docs/pt/api/wrapper/destroy.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. From 947dbd312892027d7b05f784a7cbb403e17b05cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Tue, 7 Jun 2022 10:36:02 +0100 Subject: [PATCH 37/93] docs(pt): add `docs/pt/api/wrapper/emitted.md` translated --- docs/pt/api/wrapper/emitted.md | 61 ++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 docs/pt/api/wrapper/emitted.md diff --git a/docs/pt/api/wrapper/emitted.md b/docs/pt/api/wrapper/emitted.md new file mode 100644 index 000000000..1473a68cb --- /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` (envolvedor) `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) +``` From 14b0f588d97814d6a8b06868b94f942e9c283bb4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Tue, 7 Jun 2022 10:37:35 +0100 Subject: [PATCH 38/93] docs(pt): add `docs/pt/api/wrapper/emittedByOrder.md` translated --- docs/pt/api/wrapper/emittedByOrder.md | 34 +++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 docs/pt/api/wrapper/emittedByOrder.md 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']) +``` From 0ce35334ec671ffbe488278f5cbe011bb087bf60 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Tue, 7 Jun 2022 10:37:53 +0100 Subject: [PATCH 39/93] docs(pt): add `docs/pt/api/wrapper/exists.md` translated --- docs/pt/api/wrapper/exists.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 docs/pt/api/wrapper/exists.md 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) +``` From 65e73b1f4222df65c7ddba5ff39ffdcb48928325 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Tue, 7 Jun 2022 10:41:32 +0100 Subject: [PATCH 40/93] docs(pt): add `docs/pt/api/wrapper/find.md` translated --- docs/pt/api/wrapper/find.md | 43 +++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 docs/pt/api/wrapper/find.md 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). From 729233a583a605563da38cc994b260650c54f5aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Thu, 9 Jun 2022 06:05:44 +0100 Subject: [PATCH 41/93] docs(pt): add `docs/pt/api/wrapper/findAll.md` translated --- docs/pt/api/wrapper/findAll.md | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 docs/pt/api/wrapper/findAll.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) +``` From 1808296bcc0fa367b37c7dcc0bff2e5a9c837892 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Thu, 9 Jun 2022 06:06:23 +0100 Subject: [PATCH 42/93] docs(pt): add `docs/pt/api/wrapper/findAllComponents.md` translated --- docs/pt/api/wrapper/findAllComponents.md | 27 ++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 docs/pt/api/wrapper/findAllComponents.md 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) +::: From 227c3be274a9c944fb86d0e3d23ec6f753562060 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Thu, 9 Jun 2022 06:06:53 +0100 Subject: [PATCH 43/93] docs(pt): add `docs/pt/api/wrapper/findComponent.md` translated --- docs/pt/api/wrapper/findComponent.md | 54 ++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 docs/pt/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..285d891b3 --- /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 +Ao usar `findAllComponents` com o seletor de CSS pode resultar em comportamento confuso + +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. +::: From 025559b254fccfc829356d0649eb9916ea4fbc6a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Thu, 9 Jun 2022 06:07:20 +0100 Subject: [PATCH 44/93] docs(pt): add `docs/pt/api/wrapper/get.md` translated --- docs/pt/api/wrapper/get.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 docs/pt/api/wrapper/get.md 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...
' + ) +``` From 5e6dde45768a3485d1803f15794f4f2b313c3447 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Thu, 9 Jun 2022 06:07:50 +0100 Subject: [PATCH 45/93] docs(pt): add `docs/pt/api/wrapper/getComponent.md` translated --- docs/pt/api/wrapper/getComponent.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 docs/pt/api/wrapper/getComponent.md 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...
" + ) +``` From 6efe69e442118a24031a9a1273659f5ea1105899 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Thu, 9 Jun 2022 06:08:25 +0100 Subject: [PATCH 46/93] docs(pt): add `docs/pt/api/wrapper/html.md` translated --- docs/pt/api/wrapper/html.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 docs/pt/api/wrapper/html.md 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

') +``` From e0abbe08b43472ecd5384b868f5a82c0603d04ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Thu, 9 Jun 2022 06:09:44 +0100 Subject: [PATCH 47/93] docs(pt): add `docs/pt/api/wrapper/is.md` translated --- docs/pt/api/wrapper/is.md | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 docs/pt/api/wrapper/is.md 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) +``` From 0a582009ad781511999ddf87bd4ccebc8ea96244 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Thu, 9 Jun 2022 06:10:03 +0100 Subject: [PATCH 48/93] docs(pt): add `docs/pt/api/wrapper/isEmpty.md` translated --- docs/pt/api/wrapper/isEmpty.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 docs/pt/api/wrapper/isEmpty.md 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) +``` From 4a875022309a9e2ec87b52a504c01f5b46b493a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Thu, 9 Jun 2022 06:10:27 +0100 Subject: [PATCH 49/93] docs(pt): add `docs/pt/api/wrapper/isVisible.md` translated --- docs/pt/api/wrapper/isVisible.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 docs/pt/api/wrapper/isVisible.md 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) +``` From 42e9bf8d2d02c27b2d364c820ee0383ba016e282 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Thu, 9 Jun 2022 06:10:56 +0100 Subject: [PATCH 50/93] docs(pt): add `docs/pt/api/wrapper/isVueInstance.md` translated --- docs/pt/api/wrapper/isVueInstance.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 docs/pt/api/wrapper/isVueInstance.md 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) +``` From fbe270d74e738105bd93c117abf48ae7a5ece587 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Thu, 9 Jun 2022 06:11:16 +0100 Subject: [PATCH 51/93] docs(pt): add `docs/pt/api/wrapper/name.md` translated --- docs/pt/api/wrapper/name.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 docs/pt/api/wrapper/name.md 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') +``` From 4969f349924a0f918b39d8628ea28ecfc4d77c21 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Thu, 9 Jun 2022 06:11:51 +0100 Subject: [PATCH 52/93] docs(pt): add `docs/pt/api/wrapper/overview.md` translated --- docs/pt/api/wrapper/overview.md | 47 +++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 docs/pt/api/wrapper/overview.md 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 ]' + ] +} + +*/ +``` From 0d83d0fee312f7a0b92318ca0952219c6c4119e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Thu, 9 Jun 2022 06:12:16 +0100 Subject: [PATCH 53/93] docs(pt): add `docs/pt/api/wrapper/props.md` translated --- docs/pt/api/wrapper/props.md | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 docs/pt/api/wrapper/props.md 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') +``` From f87b81aff30e568eb85bb3b946c0815fc1b1ca5c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Thu, 9 Jun 2022 06:12:47 +0100 Subject: [PATCH 54/93] docs(pt): add `docs/pt/api/wrapper/setChecked.md` translated --- docs/pt/api/wrapper/setChecked.md | 35 +++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 docs/pt/api/wrapper/setChecked.md 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') +``` From 3cbaa57ae6a339cbf1b27834de360b49e16d4f57 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Thu, 9 Jun 2022 06:13:13 +0100 Subject: [PATCH 55/93] docs(pt): add `docs/pt/api/wrapper/setData.md` translated --- docs/pt/api/wrapper/setData.md | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 docs/pt/api/wrapper/setData.md 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') +}) +``` From 58762290212628f2c966e8a59057ab6a9b7e282c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Thu, 9 Jun 2022 06:13:56 +0100 Subject: [PATCH 56/93] docs(pt): add `docs/pt/api/wrapper/setMethods.md` translated --- docs/pt/api/wrapper/setMethods.md | 34 +++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 docs/pt/api/wrapper/setMethods.md 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) +``` From 1a694351c3adaa659c3642d7db909e3f0558c91f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Thu, 9 Jun 2022 06:14:36 +0100 Subject: [PATCH 57/93] docs(pt): add `docs/pt/api/wrapper/setProps.md` translated --- docs/pt/api/wrapper/setProps.md | 53 +++++++++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 docs/pt/api/wrapper/setProps.md 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') +``` From cd0d8a728ec15cf5dcea6f37a5a660285a017616 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Thu, 9 Jun 2022 06:15:06 +0100 Subject: [PATCH 58/93] docs(pt): add `docs/pt/api/wrapper/setSelected.md` translated --- docs/pt/api/wrapper/setSelected.md | 31 ++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 docs/pt/api/wrapper/setSelected.md 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') +``` From 46c8cc68320e622a862cbba7260747d45027bb6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Thu, 9 Jun 2022 06:15:38 +0100 Subject: [PATCH 59/93] docs(pt): add `docs/pt/api/wrapper/setValue.md` translated --- docs/pt/api/wrapper/setValue.md | 53 +++++++++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 docs/pt/api/wrapper/setValue.md 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