diff --git a/docs/LANGS.md b/docs/LANGS.md index 734a128c2..2a971c5a0 100644 --- a/docs/LANGS.md +++ b/docs/LANGS.md @@ -1,3 +1,4 @@ * [English](en/) * [日本語](ja/) * [简体中文](zh-cn/) +* [Portuguese (Brazil)](pt-br/) diff --git a/docs/pt-br/README.md b/docs/pt-br/README.md new file mode 100644 index 000000000..f092ea048 --- /dev/null +++ b/docs/pt-br/README.md @@ -0,0 +1,74 @@ +# vue-test-utils + +`vue-test-utils` é a biblioteca oficial de testes de unidade para o Vue.js. + +## Índice + +* [Guia](guides/README.md) + * [Iniciando](guides/getting-started.md) + * [Dicas comuns](guides/common-tips.md) + * [Mouse, Tecla e outros eventos do DOM](guides/dom-events.md) + * [Escolhendo um executador de testes](guides/choosing-a-test-runner.md) + * [Testando SFCs com Jest](guides/testing-SFCs-with-jest.md) + * [Testando SFCs com Mocha + webpack](guides/testing-SFCs-with-mocha-webpack.md) + * [Usando com o Vue Router](guides/using-with-vue-router.md) + * [Usando com o Vuex](guides/using-with-vuex.md) +* [API](api/README.md) + * [mount](api/mount.md) + * [shallow](api/shallow.md) + * [Opções de montagem](api/options.md) + - [context](api/options.md#context) + - [slots](api/options.md#slots) + - [stubs](api/options.md#stubs) + - [mocks](api/options.md#mocks) + - [localVue](api/options.md#localvue) + - [attachToDocument](api/options.md#attachtodocument) + - [attrs](api/options.md#attrs) + - [listeners](api/options.md#listeners) + - [clone](api/options.md#clone) + * [Wrapper](api/wrapper/README.md) + * [contains](api/wrapper/contains.md) + * [emitted](api/wrapper/emitted.md) + * [emittedByOrder](api/wrapper/emittedByOrder.md) + * [find](api/wrapper/find.md) + * [findAll](api/wrapper/findAll.md) + * [hasAttribute](api/wrapper/hasAttribute.md) + * [hasClass](api/wrapper/hasClass.md) + * [hasProp](api/wrapper/hasProp.md) + * [hasStyle](api/wrapper/hasStyle.md) + * [html](api/wrapper/html.md) + * [is](api/wrapper/is.md) + * [isEmpty](api/wrapper/isEmpty.md) + * [isVueInstance](api/wrapper/isVueInstance.md) + * [name](api/wrapper/name.md) + * [setComputed](api/wrapper/setComputed.md) + * [setData](api/wrapper/setData.md) + * [setMethods](api/wrapper/setMethods.md) + * [setProps](api/wrapper/setProps.md) + * [text](api/wrapper/text.md) + * [trigger](api/wrapper/trigger.md) + * [update](api/wrapper/update.md) + * [destroy](api/wrapper/destroy.md) + * [WrapperArray](api/wrapper-array/README.md) + * [at](api/wrapper-array/at.md) + * [contains](api/wrapper-array/contains.md) + * [hasAttribute](api/wrapper-array/hasAttribute.md) + * [hasClass](api/wrapper-array/hasClass.md) + * [hasProp](api/wrapper-array/hasProp.md) + * [hasStyle](api/wrapper-array/hasStyle.md) + * [is](api/wrapper-array/is.md) + * [isEmpty](api/wrapper-array/isEmpty.md) + * [isVueInstance](api/wrapper-array/isVueInstance.md) + * [setComputed](api/wrapper-array/setComputed.md) + * [setData](api/wrapper-array/setData.md) + * [setMethods](api/wrapper-array/setMethods.md) + * [setProps](api/wrapper-array/setProps.md) + * [trigger](api/wrapper-array/trigger.md) + * [update](api/wrapper-array/update.md) + * [destroy](api/wrapper-array/destroy.md) + * [Componentes](api/components/README.md) + * [TransitionStub](api/components/TransitionStub.md) + * [TransitionGroupStub](api/components/TransitionGroupStub.md) + * [Seletores](api/selectors.md) + * [createLocalVue](api/createLocalVue.md) + * [config](api/config.md) diff --git a/docs/pt-br/SUMMARY.md b/docs/pt-br/SUMMARY.md new file mode 100644 index 000000000..0c5cdceb7 --- /dev/null +++ b/docs/pt-br/SUMMARY.md @@ -0,0 +1,70 @@ +## Índice + +* [Guia](guides/README.md) + * [Iniciando](guides/getting-started.md) + * [Dicas comuns](guides/common-tips.md) + * [Mouse, Tecla e outros eventos do DOM](guides/dom-events.md) + * [Escolhendo um executador de testes](guides/choosing-a-test-runner.md) + * [Testando SFCs com Jest](guides/testing-SFCs-with-jest.md) + * [Testando SFCs com Mocha + webpack](guides/testing-SFCs-with-mocha-webpack.md) + * [Usando com o Vue Router](guides/using-with-vue-router.md) + * [Usando com o Vuex](guides/using-with-vuex.md) +* [API](api/README.md) + * [mount](api/mount.md) + * [shallow](api/shallow.md) + * [Opções de montagem](api/options.md) + - [context](api/options.md#context) + - [slots](api/options.md#slots) + - [stubs](api/options.md#stubs) + - [mocks](api/options.md#mocks) + - [localVue](api/options.md#localvue) + - [attachToDocument](api/options.md#attachtodocument) + - [attrs](api/options.md#attrs) + - [listeners](api/options.md#listeners) + - [clone](api/options.md#clone) + * [Wrapper](api/wrapper/README.md) + * [contains](api/wrapper/contains.md) + * [emitted](api/wrapper/emitted.md) + * [emittedByOrder](api/wrapper/emittedByOrder.md) + * [find](api/wrapper/find.md) + * [findAll](api/wrapper/findAll.md) + * [hasAttribute](api/wrapper/hasAttribute.md) + * [hasClass](api/wrapper/hasClass.md) + * [hasProp](api/wrapper/hasProp.md) + * [hasStyle](api/wrapper/hasStyle.md) + * [html](api/wrapper/html.md) + * [is](api/wrapper/is.md) + * [isEmpty](api/wrapper/isEmpty.md) + * [isVueInstance](api/wrapper/isVueInstance.md) + * [name](api/wrapper/name.md) + * [setComputed](api/wrapper/setComputed.md) + * [setData](api/wrapper/setData.md) + * [setMethods](api/wrapper/setMethods.md) + * [setProps](api/wrapper/setProps.md) + * [text](api/wrapper/text.md) + * [trigger](api/wrapper/trigger.md) + * [update](api/wrapper/update.md) + * [destroy](api/wrapper/destroy.md) + * [WrapperArray](api/wrapper-array/README.md) + * [at](api/wrapper-array/at.md) + * [contains](api/wrapper-array/contains.md) + * [hasAttribute](api/wrapper-array/hasAttribute.md) + * [hasClass](api/wrapper-array/hasClass.md) + * [hasProp](api/wrapper-array/hasProp.md) + * [hasStyle](api/wrapper-array/hasStyle.md) + * [is](api/wrapper-array/is.md) + * [isEmpty](api/wrapper-array/isEmpty.md) + * [isVueInstance](api/wrapper-array/isVueInstance.md) + * [setComputed](api/wrapper-array/setComputed.md) + * [setData](api/wrapper-array/setData.md) + * [setMethods](api/wrapper-array/setMethods.md) + * [setProps](api/wrapper-array/setProps.md) + * [trigger](api/wrapper-array/trigger.md) + * [update](api/wrapper-array/update.md) + * [destroy](api/wrapper-array/destroy.md) + * [Componentes](api/components/README.md) + * [TransitionStub](api/components/TransitionStub.md) + * [TransitionGroupStub](api/components/TransitionGroupStub.md) + * [Seletores](api/selectors.md) + * [createLocalVue](api/createLocalVue.md) + * [config](api/config.md) diff --git a/docs/pt-br/api/README.md b/docs/pt-br/api/README.md new file mode 100644 index 000000000..6941e1a63 --- /dev/null +++ b/docs/pt-br/api/README.md @@ -0,0 +1,49 @@ +# API + +* [mount](./mount.md) +* [shallow](./shallow.md) +* [Opções de montagem](./options.md) + - [context](./options.md#context) + - [slots](./options.md#slots) + - [stubs](./options.md#stubs) + - [mocks](./options.md#mocks) + - [localVue](./options.md#localvue) + - [attachToDocument](./options.md#attachtodocument) + - [attrs](./options.md#attrs) + - [listeners](./options.md#listeners) + - [clone](./options.md#clone) +* [Wrapper](./wrapper/README.md) + * [contains](./wrapper/contains.md) + * [emitted](./wrapper/emitted.md) + * [emittedByOrder](./wrapper/emittedByOrder.md) + * [find](./wrapper/find.md) + * [hasAttribute](./wrapper/hasAttribute.md) + * [hasClass](./wrapper/hasClass.md) + * [hasProp](./wrapper/hasProp.md) + * [hasStyle](./wrapper/hasStyle.md) + * [html](./wrapper/html.md) + * [is](./wrapper/is.md) + * [isEmpty](./wrapper/isEmpty.md) + * [isVueInstance](./wrapper/isVueInstance.md) + * [name](./wrapper/name.md) + * [update](./wrapper/update.md) + * [setData](./wrapper/setData.md) + * [setProps](./wrapper/setProps.md) + * [text](./wrapper/text.md) + * [trigger](./wrapper/trigger.md) +* [WrapperArray](./wrapper-array/README.md) + * [at](./wrapper-array/at.md) + * [contains](./wrapper-array/contains.md) + * [hasAttribute](./wrapper-array/hasAttribute.md) + * [hasClass](./wrapper-array/hasClass.md) + * [hasProp](./wrapper-array/hasProp.md) + * [hasStyle](./wrapper-array/hasStyle.md) + * [is](./wrapper-array/is.md) + * [isEmpty](./wrapper-array/isEmpty.md) + * [isVueInstance](./wrapper-array/isVueInstance.md) + * [update](./wrapper-array/update.md) + * [setData](./wrapper-array/setData.md) + * [setProps](./wrapper-array/setProps.md) + * [trigger](./wrapper-array/trigger.md) +* [createLocalVue](./createLocalVue.md) +* [Seletores](./selectors.md) diff --git a/docs/pt-br/api/components/README.md b/docs/pt-br/api/components/README.md new file mode 100644 index 000000000..9fe182248 --- /dev/null +++ b/docs/pt-br/api/components/README.md @@ -0,0 +1,5 @@ +# Componentes + +O vue-test-utils apresenta alguns componentes utilitários para que você possa esboçar componentes. + +O [TransitionStub](./TransitionStub.md) e o [TransitionGroupStub](./TransitionGroupStub.md) por padrão são usados para esboçar componentes de transições e grupo de transições. Mas você pode editar esses esboços editando as configurações do mesmo. diff --git a/docs/pt-br/api/components/TransitionGroupStub.md b/docs/pt-br/api/components/TransitionGroupStub.md new file mode 100644 index 000000000..20ce86cb1 --- /dev/null +++ b/docs/pt-br/api/components/TransitionGroupStub.md @@ -0,0 +1,31 @@ +# TransitionGroupStub (Esboço de grupo de transições) + +É um componente para substituir o componente `transition-group`. Em vez de executar as transições do grupo de forma assíncrona, ele retorna os componentes filhos de forma síncrona. + +Por padrão é configurado para trocar todos os componentes `transitions-group` da sua aplicação. Para desativar o componente `transition-group`, passe `config.stubs['transition-group']` para false: + +```js +import VueTestUtils from 'vue-test-utils' + +VueTestUtils.config.stubs['transition-group'] = false +``` + +Para redefinir os grupos de transições no esboço, use: + +```js +import VueTestUtils, { TransitionGroupStub } from 'vue-test-utils' + +VueTestUtils.config.stubs['transition-group'] = TransitionGroupStub +``` + +Para configura-lo na montagem, use: + +```js +import { mount, TransitionGroupStub } from 'vue-test-utils' + +mount(Component, { + stubs: { + 'transition-group': TransitionGroupStub + } +}) +``` diff --git a/docs/pt-br/api/components/TransitionStub.md b/docs/pt-br/api/components/TransitionStub.md new file mode 100644 index 000000000..ca537fc3c --- /dev/null +++ b/docs/pt-br/api/components/TransitionStub.md @@ -0,0 +1,31 @@ +# TransitionStub (esboço de transição) + +É um componente para substituir o componente `transition`. Em vez de executar as transições de forma assíncrona, ele retorna o componente filho de forma síncrona. + +Por padrão é configurado para trocar todos os componentes `transitions` da sua aplicação. Para desativar o componente `transition`, passe `config.stubs.transition` para false: + +```js +import VueTestUtils from 'vue-test-utils' + +VueTestUtils.config.stubs.transition = false +``` + +Para redefini-lo como componente de transição, use: + +```js +import VueTestUtils, { TransitionStub } from 'vue-test-utils' + +VueTestUtils.config.stubs.transition = TransitionStub +``` + +Para configura-lo como um esboço nas opções de montagem, use: + +```js +import { mount, TransitionStub } from 'vue-test-utils' + +mount(Component, { + stubs: { + transition: TransitionStub + } +}) +``` diff --git a/docs/pt-br/api/config.md b/docs/pt-br/api/config.md new file mode 100644 index 000000000..dce461a84 --- /dev/null +++ b/docs/pt-br/api/config.md @@ -0,0 +1,25 @@ +# Configurações + +O vue-test-utils apresenta um objeto de configuração para que você possa definir as opções usadas no wrapper. + +## Opções de configurações do `vue-test-utils + +### Esboços + +- tipo: `Object` +- padrão: `{ + transition: TransitionStub, + 'transition-group': TransitionGroupStub +}` + +Esboços são usados em todos componentes. Eles são substituídos pelos esboços passados nas opções da montagem. + +Quando você passa os esboços como um Array de String nas opções de montagens, o `config.stubs` é convertido em um Array e os componentes são esboçados com um componente que retorna uma div. + +Exemplo: + +```js +import VueTestUtils from 'vue-test-utils' + +VueTestUtils.config.stubs['meu-componente'] = '
' +``` diff --git a/docs/pt-br/api/createLocalVue.md b/docs/pt-br/api/createLocalVue.md new file mode 100644 index 000000000..e735e3864 --- /dev/null +++ b/docs/pt-br/api/createLocalVue.md @@ -0,0 +1,30 @@ +# createLocalVue() + +- **Retorna:** + - `{Component}` + +- **Uso:** + +O `createLocalVue` retorna uma classe do Vue para que você possa adicionar componentes, mixins e plugins sem poluir sua classe global do Vue. + +Usando com o `options.localVue` + +```js +import { createLocalVue, shallow } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const localVue = createLocalVue() +const wrapper = shallow(Foo, { + localVue, + mocks: { foo: true } +}) + +expect(wrapper.vm.foo).toBe(true) + +const wrapperSemMock = shallow(Foo) + +expect(wrapperSemMock.vm.foo).toBe(false) +``` + +- **Veja também:** [Dicas comuns](../guides/common-tips.md#applying-global-plugins-and-mixins) diff --git a/docs/pt-br/api/mount.md b/docs/pt-br/api/mount.md new file mode 100644 index 000000000..b219581f6 --- /dev/null +++ b/docs/pt-br/api/mount.md @@ -0,0 +1,138 @@ +# mount(component {, options}]) + +- **Argumentos:** + + - `{Component} component` + - `{Object} options` + +- **Retorna:** `{Wrapper}` + +- **Opções:** + +Veja [opções](options.md) + +- **Uso:** + +Retorna um [`Wrapper`](wrapper/README.md) do primeiro elemento do DOM ou o componente Vue correspondente ao seletor. + +Use qualquer [seletor](selectors.md) válido. + +**Sem opções:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renderiza uma div', () => { + const wrapper = mount(Foo) + expect(wrapper.contains('div')).toBe(true) + }) +}) +``` + +**Com opções do Vue:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('verifica valor padrão da cor', () => { + const wrapper = mount(Foo, { + propsData: { + cor: 'vermelha' + } + }) + expect(wrapper.hasProp('cor', 'vermelha')).toBe(true) + }) +}) +``` + +**Anexar ao DOM:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('adiciona anexado ao DOM', () => { + const wrapper = mount(Foo, { + attachToDocument: true + }) + expect(wrapper.contains('div')).toBe(true) + }) +}) +``` + +**Com slots padrões ou nomeados:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' +import Bar from './Bar.vue' +import FooBar from './FooBar.vue' + +describe('Foo', () => { + it('registra slots padrões e nomeados', () => { + const wrapper = mount(Foo, { + slots: { + default: [Bar, FooBar], + fooBar: FooBar, // Corresponde a , + foo: '
' + } + }) + expect(wrapper.contains('div')).toBe(true) + }) +}) +``` + +**Adicionando propriedades globais:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('adicionando mock global do $route', () => { + const $route = { path: 'http://www.meusite.com.br' } + const wrapper = mount(Foo, { + mocks: { + $route + } + }) + expect(wrapper.vm.$route.path).toBe($route.path) + }) +}) +``` + +**Esboçando componentes filhos:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' +import Bar from './Bar.vue' +import Faz from './Faz.vue' + +describe('Foo', () => { + it('verifica componentes filhos de Foo', () => { + const wrapper = mount(Foo, { + stub: { + Bar: '
, + foo: '
' + } +}) +expect(wrapper.find('div')).toBe(true) +``` + +### Esboços + +- tipo: `{ [name: String]: Component | Boolean } | Array` + +Esboça os componentes filhos. Pode ser um Array com os nomes dos componentes ou um objeto. + +Exemplo: + +```js +import Foo from './Foo.vue' + +mount(Component, { + stubs: ['componente-registrado'] +}) + +shallow(Component, { + stubs: { + // esboço com uma implementação específica + 'componente-registrado': Foo, + // criar um esboço padrão (simulado com mock) + 'outro componente': true + } +}) +``` + +### `mocks` + +- tipo: `Object` + +Adiciona uma propriedade adicional à instância. Ótimo para simular injeções globais. + +Exemplo: + +```js +import { expect } from 'chai' + +const $route = { path: 'http://www.meusite.com.br' } +const wrapper = shallow(Component, { + mocks: { + $route + } +}) +expect(wrapper.vm.$route.path).toBe($route.path) +``` + +### `localVue` + +- tipo: `Vue` + +Uma cópia local do Vue é criada pelo [createLocalVue](./createLocalVue.md) para usar quando for montar um componente. A instalação de plugins e outros nessa cópia previne que seu Vue original seja poluído. + +Exemplo: + +```js +import { createLocalVue, mount } from 'vue-test-utils' +import VueRouter from 'vue-router' +import { expect } from 'chai' +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) +``` + +### `attachToDocument` + +- tipo: `Boolean` +- padrão: `false` + +O componente será anexado ao DOM quando configurado como `true`. Isso pode ser usado com o [`hasStyle`](wrapper/hasStyle.md) para verificar os seletores do CSS de vários elementos. + +### `attrs` + +- tipo: `Object` + +Define o objeto `$attrs` da instância do componente. + +### `listeners` + +- tipo: `Object` + +Define o objeto `$listeners` da instância do componente. + +### `clone` + +- tipo: `Boolean` +- padrão: `true` + +Clona o componente antes de monta-lo se o valor for `true`, evitando qualquer mutação no componente original. + +`options.mocks` (`Object`): Adiciona variáveis global à instância do Vue. + +`options.localVue` (`Object`): classe do Vue usada no método `mount`. Veja [createLocalVue](createLocalVue.md) diff --git a/docs/pt-br/api/selectors.md b/docs/pt-br/api/selectors.md new file mode 100644 index 000000000..ce97f2483 --- /dev/null +++ b/docs/pt-br/api/selectors.md @@ -0,0 +1,43 @@ +# Seletores + +Muitos métodos desse wrapper leva um seletor como argumento. Um seletor pode ser um seletor CSS ou um componente do Vue. + +## Seletores CSS + +O método `mount` controla e suporta qualquer seletor válido: + +- seletores de tag (div, foo, bar) +- seletores de classes (.foo, .bar) +- seletores de atributos ([foo], [foo="bar"]) +- seletores de ids (#foo, #bar) +- pseudo seletores (div:first-of-type) + +Você também pode usar qualquer combinação: + +- combinador de descendente direto (div > #bar > .foo) +- combinador de descendente geral (div #bar .foo) +- seletor de irmão adjacente (div + .foo) +- seletor geral de irmãos (div ~ .foo) + +## Componentes do Vue + +Os componentes do Vue também são seletores válidos. + +O vue-test-utils usa a propriedade `name` para buscar a instância na árvore de componentes do Vue. + +```js +// Foo.vue + +export default{ + name: 'FooComponente' +} +``` + +```js +import { shallow } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = shallow(Foo) +expect(wrapper.is(Foo)).toBe(true) +``` diff --git a/docs/pt-br/api/shallow.md b/docs/pt-br/api/shallow.md new file mode 100644 index 000000000..e3189be2a --- /dev/null +++ b/docs/pt-br/api/shallow.md @@ -0,0 +1,124 @@ +# shallow(component {, options}]) + +- **Argumentos:** + + - `{Component} component` + - `{Object} options` + - `{Boolean} attachToDocument` + - `{Object} context` + - `{Object} slots` + - `{Array|Component|String} default` + - `{Array|Component|String} named` + - `{Object} mocks` + - `{Object|Array} stubs` + - `{Boolean} clone` + - `{Object} children` + - `{Vue} localVue` + +- **Retorna:** `{Wrapper}` + +- **Opções:** + +Veja as [opçoes](./options.md) + +- **Uso:** + +Retorna um [`Wrapper`](wrapper/README.md) do primeiro elemento do DOM ou o componente Vue correspondente ao seletor. + +Esboça todos os componentes filhos. + +Use qualquer [seletor](selectors.md) válido. + +**Sem opções:** + +```js +import { shallow } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('Renderiza uma div', () => { + const wrapper = shallow(Foo) + expect(wrapper.contains('div')).toBe(true) + }) +}) +``` + +**With Vue options:** + +```js +import { shallow } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', () => { + const wrapper = shallow(Foo, { + propsData: { + color: 'red' + } + }) + expect(wrapper.hasProp('color', 'red')).toBe(true) + }) +}) +``` + +**Anexa ao DOM:** + +```js +import { shallow } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('adiciona anexado ao DOM', () => { + const wrapper = shallow(Foo, { + attachToDocument: true + }) + expect(wrapper.contains('div')).toBe(true) + }) +}) +``` + +**Com slots padrões ou nomeados:** + +```js +import { shallow } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' +import Bar from './Bar.vue' +import FooBar from './FooBar.vue' + +describe('Foo', () => { + it('adiciona slots ao componente', () => { + const wrapper = shallow(Foo, { + slots: { + default: [Bar, FooBar], + fooBar: FooBar, // Corresponde a , + foo: '
' + } + }) + expect(wrapper.find('div')).toBe(true) + }) +}) +``` + +**Adicionando propriedades globais:** + +```js +import { shallow } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('adicionando mock global do $route', () => { + const $route = { path: 'http://www.meusite.com.br' } + const wrapper = shallow(Foo, { + mocks: { + $route + } + }) + expect(wrapper.vm.$route.path).toBe($route.path) + }) +}) +``` diff --git a/docs/pt-br/api/wrapper-array/README.md b/docs/pt-br/api/wrapper-array/README.md new file mode 100644 index 000000000..eec9b4d17 --- /dev/null +++ b/docs/pt-br/api/wrapper-array/README.md @@ -0,0 +1,11 @@ +# WrapperArray (Array de wrappers) + +Um Array de wrappers é um objeto que contem uma lista com [Wrappers](../wrapper/README.md), e os alguns métodos para testar esses wrappers. + +- **Propriedades:** + +`length` `number`: O número de wrappers contidos nesse Array. + +- **Métodos:** + +Nessa documentação você tem uma lista detalhada dos métodos apresentados na seção WrapperArray. diff --git a/docs/pt-br/api/wrapper-array/at.md b/docs/pt-br/api/wrapper-array/at.md new file mode 100644 index 000000000..30d331b8a --- /dev/null +++ b/docs/pt-br/api/wrapper-array/at.md @@ -0,0 +1,22 @@ +# at(indice) + +Retorna o wrapper correspondente ao `indice` passado. Use números para corresponder ao item do arra, por exemplo o `indice` 0 para o primeiro elemento. + +- **Argumentos:** + - `{number} indice` + +- **Retorna:** `{Wrapper}` + +- **Exemplo:** + +```js +import { shallow } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = shallow(Foo) +const divArray = wrapper.findAll('div') + +const segundaDiv = divArray.at(1) +expect(segundaDiv.is('p')).toBe(true) +``` diff --git a/docs/pt-br/api/wrapper-array/contains.md b/docs/pt-br/api/wrapper-array/contains.md new file mode 100644 index 000000000..870d355e2 --- /dev/null +++ b/docs/pt-br/api/wrapper-array/contains.md @@ -0,0 +1,25 @@ +# contains(selector) + +Verifica se cada wrapper do Array contém correspondência do seletor informado. + +Use qualquer [seletor](../selectors.md) válido. + +- **Argumentos:** + - `{String|Component} selector` + +- **Retorna:** `{Boolean}` + +- **Exemplo:** + +```js +import { shallow } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = shallow(Foo) +const divArray = wrapper.findAll('div') + +expect(divArray.contains('p')).toBe(true) +expect(divArray.contains(Bar)).toBe(true) +``` diff --git a/docs/pt-br/api/wrapper-array/destroy.md b/docs/pt-br/api/wrapper-array/destroy.md new file mode 100644 index 000000000..0cf53a90d --- /dev/null +++ b/docs/pt-br/api/wrapper-array/destroy.md @@ -0,0 +1,19 @@ +# destroy() + +Destroí a instância do Vue da cada um dos wrappers do Array. + +- **Exemplo:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) + +const divArray = wrapper.findAll('div') +expect(divArray.contains('p')).toBe(true) +divArray.destroy() + +expect(divArray.contains('p')).toBe(false) +``` diff --git a/docs/pt-br/api/wrapper-array/hasAttribute.md b/docs/pt-br/api/wrapper-array/hasAttribute.md new file mode 100644 index 000000000..faaa0cc54 --- /dev/null +++ b/docs/pt-br/api/wrapper-array/hasAttribute.md @@ -0,0 +1,22 @@ +# hasAttribute(attribute, value) + +Verifica se algum wrapper do Array tem o `atributo` com `value` correspondente no elemento do DOM. + +- **Argumentos:** + - `{String} attribute` + - `{String} value` + +- **Retorna:** `{Boolean}` + +- **Exemplo:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +const divArray = wrapper.findAll('div') + +expect(divArray.hasAttribute('id', 'foo')).toBe(true) +``` diff --git a/docs/pt-br/api/wrapper-array/hasClass.md b/docs/pt-br/api/wrapper-array/hasClass.md new file mode 100644 index 000000000..4dc2ad891 --- /dev/null +++ b/docs/pt-br/api/wrapper-array/hasClass.md @@ -0,0 +1,21 @@ +# hasClass(className) + +Verifica se algum wrapper do Array contém uma classe com o nome `className` no elemento do DOM. + +- **Argumentos:** + - `{String} className` + +- **Retorna:** `{Boolean}` + +- **Exemplo:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +const divArray = wrapper.findAll('div') + +expect(divArray.hasClass('bar')).toBe(true) +``` diff --git a/docs/pt-br/api/wrapper-array/hasProp.md b/docs/pt-br/api/wrapper-array/hasProp.md new file mode 100644 index 000000000..d2649b55a --- /dev/null +++ b/docs/pt-br/api/wrapper-array/hasProp.md @@ -0,0 +1,25 @@ +# hasProp(propriedade, value) + +Verifica se algum wrapper do Array possui a `propriedade` com o `value` no `vm`. + +**Nota: o wrapper deve ser uma intância do Vue.** + +- **Argumentos:** + - `{String} propriedade` + - `{any} value` + +- **Retorna:** `{Boolean}` + +- **Exemplo:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = mount(Foo) +const barArray = wrapper.findAll(Bar) + +expect(barArray.hasProp('bar', 10)).toBe(true) +``` diff --git a/docs/pt-br/api/wrapper-array/hasStyle.md b/docs/pt-br/api/wrapper-array/hasStyle.md new file mode 100644 index 000000000..24e5e45bc --- /dev/null +++ b/docs/pt-br/api/wrapper-array/hasStyle.md @@ -0,0 +1,26 @@ +# hasStyle(style, value) + +Verifica se algum wrapper do Array tem o `style` com o `value` no elemento do DOM. + +Retorna `true` se o wrapper contém o `style` com o `value`. + +**Nota: para detectarmos os styles deve-se usar o `jsdom`.** + +- **Argumentos:** + - `{String} style` + - `{String} value` + +- **Retorna:** `{Boolean}` + +- **Exemplo:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +const divArray = wrapper.findAll('div') + +expect(divArray.hasStyle('cor', 'vermelha')).toBe(true) +``` diff --git a/docs/pt-br/api/wrapper-array/is.md b/docs/pt-br/api/wrapper-array/is.md new file mode 100644 index 000000000..f2ee1a422 --- /dev/null +++ b/docs/pt-br/api/wrapper-array/is.md @@ -0,0 +1,21 @@ +# is(selector) + +Verifica se algum wrapper do Array possui o [seletor](../selectors.md) no seu `vm`. + +- **Argumentos:** + - `{String|Component} selector` + +- **Retorna:** `{Boolean}` + +- **Exemplo:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +const divArray = wrapper.find('div') + +expect(divArray.is('div')).toBe(true) +``` diff --git a/docs/pt-br/api/wrapper-array/isEmpty.md b/docs/pt-br/api/wrapper-array/isEmpty.md new file mode 100644 index 000000000..83fc9b324 --- /dev/null +++ b/docs/pt-br/api/wrapper-array/isEmpty.md @@ -0,0 +1,18 @@ +# isEmpty() + +Verifica se algum wrapper do Array não tem um elemento filho. + +- **Retorna:** `{Boolean}` + +- **Exemplo:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +const divArray = wrapper.findAll('div') + +expect(divArray.isEmpty()).toBe(true) +``` diff --git a/docs/pt-br/api/wrapper-array/isVueInstance.md b/docs/pt-br/api/wrapper-array/isVueInstance.md new file mode 100644 index 000000000..e6a58ac8c --- /dev/null +++ b/docs/pt-br/api/wrapper-array/isVueInstance.md @@ -0,0 +1,19 @@ +# isVueInstance() + +Verifica se algum wrapper do Array é uma instância do Vue. + +- **Retorna:** `{Boolean}` + +- **Exemplo:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = mount(Foo) +const barArray = wrapper.findAll(Bar) + +expect(barArray.isVueInstance()).toBe(true) +``` diff --git a/docs/pt-br/api/wrapper-array/setComputed.md b/docs/pt-br/api/wrapper-array/setComputed.md new file mode 100644 index 000000000..70abc1df0 --- /dev/null +++ b/docs/pt-br/api/wrapper-array/setComputed.md @@ -0,0 +1,25 @@ +# setComputed(computedProperties) + +Define as propriedades computadas e força a atualização de cada um dos wrappers no Array. + +**Nota: cada wrapper deve ser uma instância do Vue.** +**Nota2: cada instância de cada wrapper deve ter as propriedades computadas já declaradas, pois esse método apenas simular o seu valor.** + +- **Argumentos:** + - `{Object} computedPropertiess` + +- **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) + +barArray.setComputed({ + propriedade1: 'nova-propriedade1', + propriedade2: 'nova-propriedade2' +}) +``` diff --git a/docs/pt-br/api/wrapper-array/setData.md b/docs/pt-br/api/wrapper-array/setData.md new file mode 100644 index 000000000..0dd0d2940 --- /dev/null +++ b/docs/pt-br/api/wrapper-array/setData.md @@ -0,0 +1,23 @@ +# setData(data) + +Define os dados e força a atualização de cada wrapper presente no Array. + +**Nota: cada wrapper deve ser uma instância do Vue.** + +- **Argumentos:** + - `{Object} data` + +- **Exemplho:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = mount(Foo) +const barArray = wrapper.findAll(Bar) + +barArray.setData({ foo: 'bar' }) +expect(barArray.at(0).vm.foo).toBe('bar') +``` diff --git a/docs/pt-br/api/wrapper-array/setMethods.md b/docs/pt-br/api/wrapper-array/setMethods.md new file mode 100644 index 000000000..bb877a95d --- /dev/null +++ b/docs/pt-br/api/wrapper-array/setMethods.md @@ -0,0 +1,26 @@ +# setMethods(methods) + +Define os métodos do componente e força sua atualização para cada wrapper no Array. + +**Nota: cada wrapper deve ser uma instância do Vue.** + +- **Argumentos:** + - `{Object} methods` + +- **Exemplo:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import sinon from 'sinon' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = mount(Foo) +const barArray = wrapper.findAll(Bar) +const mockClique = sinon.stub() + +barArray.setMethods({ methodoClique: mockClique }) +barArray.at(0).trigger('click') +expect(mockClique.called).toBe(true) +``` diff --git a/docs/pt-br/api/wrapper-array/setProps.md b/docs/pt-br/api/wrapper-array/setProps.md new file mode 100644 index 000000000..b6e19d410 --- /dev/null +++ b/docs/pt-br/api/wrapper-array/setProps.md @@ -0,0 +1,23 @@ +# setProps(props) + +Define as `propriedades` do componente e força sua atualização para cada wrapper no Array. + +**Nota: cada wrapper deve ser uma instância do Vue.** + +- **Argumentos:** + - `{Object} propriedades` + +- **Exemplo:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = mount(Foo) +const barArray = wrapper.findAll(Bar) + +barArray.setProps({ foo: 'bar' }) +expect(barArray.at(0).vm.foo).toBe('bar') +``` diff --git a/docs/pt-br/api/wrapper-array/trigger.md b/docs/pt-br/api/wrapper-array/trigger.md new file mode 100644 index 000000000..b73fb1ad5 --- /dev/null +++ b/docs/pt-br/api/wrapper-array/trigger.md @@ -0,0 +1,27 @@ +# trigger(eventName) + +Aciona um evento no elemeto do DOM de cada wrapper no Array. + +**Nota: cada wrapper deve ser uma instância do Vue.** + +- **Argumentos:** + - `{String} eventName` + +- **Exemplo:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import sinon from 'sinon' +import Foo from './Foo.vue' + +const mockDoClique = sinon.stub() +const wrapper = mount(Foo, { + propsData: { mockDoClique } +}) + +const divArray = wrapper.findAll('div') +divArray.trigger('click') + +expect(mockDoClique.called).toBe(true) +``` diff --git a/docs/pt-br/api/wrapper-array/update.md b/docs/pt-br/api/wrapper-array/update.md new file mode 100644 index 000000000..a67237565 --- /dev/null +++ b/docs/pt-br/api/wrapper-array/update.md @@ -0,0 +1,22 @@ +# update() + +Força a atualização e redesenho do componente Vue de cada wrapper do Array. + +Se for chamado a partir de um componente Vue, força a atualização de cada componente do Array. + +- **Exemplo:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +const divArray = wrapper.findAll('div') + +expect(divArray.at(0).vm.bar).toBe('bar') +divArray.at(0).vm.bar = 'novo valor' +divArray.update() + +expect(divArray.at(0).vm.bar).toBe('novo valor') +``` diff --git a/docs/pt-br/api/wrapper/README.md b/docs/pt-br/api/wrapper/README.md new file mode 100644 index 000000000..b7eccd817 --- /dev/null +++ b/docs/pt-br/api/wrapper/README.md @@ -0,0 +1,17 @@ +# Wrapper + +vue-test-utils é uma API baseada em *wrapper*. + +Um `Wrapper` é um objeto que contém um componente montado ou um vnode e alguns métodos para testar esse item envelopado. + +- **Propriedades:** + +`vm` `Component`: é uma instância Vue. Você pode acessar todos os [métodos de instância e propriedades de um vm](https://vuejs.org/v2/api/#Instance-Properties) com o `wrapper.vm`. Ela só exite em wrappers de componentes Vue. + +`element` `HTMLElement`: elemento raiz do DOM do wrapper. + +`options` `Object`: Objeto que contém as opções do vue-test-utils para ser passado para o `mount` ou `shallow`. + +- **Métodos:** + +Exite uma lista detalhada de métodos na seção Wrapper dessa documentação. diff --git a/docs/pt-br/api/wrapper/contains.md b/docs/pt-br/api/wrapper/contains.md new file mode 100644 index 000000000..115b7d365 --- /dev/null +++ b/docs/pt-br/api/wrapper/contains.md @@ -0,0 +1,23 @@ +# contains(selector) + +Verifica se o wrapper contém um elemento ou componente com o [seletor](../selectors.md) informado. + +- **Argumentos:** + - `{String|Component} selector` + +- **Retorna:** `{Boolean}` + +- **Exemplo:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +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) +``` + +- **Veja também:** [seletores](../selectors.md) diff --git a/docs/pt-br/api/wrapper/destroy.md b/docs/pt-br/api/wrapper/destroy.md new file mode 100644 index 000000000..fc04358b9 --- /dev/null +++ b/docs/pt-br/api/wrapper/destroy.md @@ -0,0 +1,22 @@ +# destroy() + +Destrói a instância do componente Vue. + +- **Exemplo:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import sinon from 'sinon' + +const spy = sinon.stub() + +mount({ + render: null, + destroyed () { + spy() + } +}).destroy() + +expect(spy.calledOnce).to.equal(true) +``` diff --git a/docs/pt-br/api/wrapper/emitted.md b/docs/pt-br/api/wrapper/emitted.md new file mode 100644 index 000000000..e62207bd9 --- /dev/null +++ b/docs/pt-br/api/wrapper/emitted.md @@ -0,0 +1,33 @@ +# emitted() + +Retorna um objeto contendo os eventos cutomizados emitidos pelo `vm` do wrapper. + +- **Retorna:** `{ [name: String]: Array> }` + +- **Exemplo:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' + +const wrapper = mount(Componente) + +wrapper.vm.$emit('foo') +wrapper.vm.$emit('foo', 123) + +/* +wrapper.emitted() retorna o seguinte objeto: +{ + foo: [[], [123]] +} +*/ + +// Verifica se o evento foi emitido +expect(wrapper.emitted().foo).toBeTruthy() + +// Verifica aquantidade de emissões do evento +expect(wrapper.emitted().foo.length).toBe(2) + +// Verifica a carga do segundo evento foo emitido +expect(wrapper.emitted().foo[1]).toEqual([123]) +``` diff --git a/docs/pt-br/api/wrapper/emittedByOrder.md b/docs/pt-br/api/wrapper/emittedByOrder.md new file mode 100644 index 000000000..5421e8c91 --- /dev/null +++ b/docs/pt-br/api/wrapper/emittedByOrder.md @@ -0,0 +1,28 @@ +# emittedByOrder() + +Retorna um Array contendo os eventos customizados emitidos pelo `vm` do wrapper. + +- **Retorna:** `Array<{ name: String, args: Array }>` + +- **Exemplo:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' + +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] } +] +*/ + +// Verifica a ordem dos eventos chamados +expect(wrapper.emittedByOrder().map(e => e.name)).toEqual(['foo', 'bar']) +``` diff --git a/docs/pt-br/api/wrapper/exists.md b/docs/pt-br/api/wrapper/exists.md new file mode 100644 index 000000000..3a79864e0 --- /dev/null +++ b/docs/pt-br/api/wrapper/exists.md @@ -0,0 +1,22 @@ +# exists() + +Verifica se o `Wrapper` ou o `WrapperArray` existe. + +Retorna `false` se chamado com um `Wrapper` ou `WrapperArray` vazio. + +- **Retorna:** `{Boolean}` + +- **Exemplo:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) + +expect(wrapper.exists()).toBe(true) +expect(wrapper.find('nao-existe').exists()).toBe(false) +expect(wrapper.findAll('div').exists()).toBe(true) +expect(wrapper.findAll('nao-existe').exists()).toBe(false) +``` diff --git a/docs/pt-br/api/wrapper/find.md b/docs/pt-br/api/wrapper/find.md new file mode 100644 index 000000000..aae3f1a47 --- /dev/null +++ b/docs/pt-br/api/wrapper/find.md @@ -0,0 +1,29 @@ +# find(selector) + +Retorna um wrapper [`Wrapper`](README.md) com o primeiro elmento do DOM ou o componente Vue encontrado a partir do seletor + +Use qualquer [seletor](../selectors.md) válido. + +- **Argumentos:** + - `{String|Component} selector` + +- **Retorna:** `{Wrapper}` + +- **Exemplo:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = mount(Foo) + +const div = wrapper.find('div') +expect(div.is('div')).toBe(true) + +const bar = wrapper.find(Bar) +expect(bar.is(Bar)).toBe(true) +``` + +- **Veja também:** [Wrapper](README.md) diff --git a/docs/pt-br/api/wrapper/findAll.md b/docs/pt-br/api/wrapper/findAll.md new file mode 100644 index 000000000..bc89034a4 --- /dev/null +++ b/docs/pt-br/api/wrapper/findAll.md @@ -0,0 +1,29 @@ +# findAll(selector) + +Retorna um [`WrapperArray`](../wrapper-array/README.md) de [Wrappers](README.md). + +Use qualquer [seletor](../selectors.md) válido. + +- **Argumentos:** + - `{String|Component} selector` + +- **Retorna:** `{WrapperArray}` + +- **Exemplo:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +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) +expect(bar.is(Bar)).toBe(true) +``` + +- **Veja também:** [Wrapper](README.md) diff --git a/docs/pt-br/api/wrapper/hasAttribute.md b/docs/pt-br/api/wrapper/hasAttribute.md new file mode 100644 index 000000000..e41123238 --- /dev/null +++ b/docs/pt-br/api/wrapper/hasAttribute.md @@ -0,0 +1,38 @@ +# hasAttribute(attribute, value) + +Verifica se o wrapper contém o atributo mencionado no seu elemento do DOM. + +Retorna `true` se o wrapper contém o atributo. + +- **Argumentos:** + - `{String} attribute` + - `{String} value` + +- **Retorna:** `{Boolean}` + +- **Exemplo:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +// Exemplo
...
+const wrapper = mount(Foo) +expect(wrapper.hasAttribute('id', 'foo')).toBe(true) +``` + +- **Alternativa:** + +Você poderia obter o atributo do `Wrapper.element` para então verificar baseado no valor retornado: + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.element.getAttribute('id')).toBe('foo') +``` + +Isso faz com que o erro da asserção sejá mais informativo. diff --git a/docs/pt-br/api/wrapper/hasClass.md b/docs/pt-br/api/wrapper/hasClass.md new file mode 100644 index 000000000..32e69fae9 --- /dev/null +++ b/docs/pt-br/api/wrapper/hasClass.md @@ -0,0 +1,21 @@ +# hasClass(className) + +Verifica se o wrapper do elemento do DOM contém uma classe informada pelo `className`. + +Retorna `true` se o wrapper contém a classe. + +- **Argumentos:** + - `{String} className` + +- **Retorna:** `{Boolean}` + +- **Exemplo:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.hasClass('bar')).toBe(true) +``` diff --git a/docs/pt-br/api/wrapper/hasProp.md b/docs/pt-br/api/wrapper/hasProp.md new file mode 100644 index 000000000..7b9dd2f7e --- /dev/null +++ b/docs/pt-br/api/wrapper/hasProp.md @@ -0,0 +1,24 @@ +# hasProp(propriedade, value) + +Verifica se o `vm` do wrapper possui uma pripriedade com o valor definido. + +Retorna `true` se o `vm` do wrapper tem a `propriedade` com o `value` passado. + +**Nota: o wrapper deve conter uma instância do Vue.** + +- **Argumentos:** + - `{String} propriedade` + - `{any} value` + +- **Retorna:** `{Boolean}` + +- **Exemplo:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.hasProp('bar', 10)).toBe(true) +``` diff --git a/docs/pt-br/api/wrapper/hasStyle.md b/docs/pt-br/api/wrapper/hasStyle.md new file mode 100644 index 000000000..2a1b29265 --- /dev/null +++ b/docs/pt-br/api/wrapper/hasStyle.md @@ -0,0 +1,24 @@ +# hasStyle(style, value) + +Verifica se o elemento do DOM do wrapper possui uma propriedade de estilo com esse valor. + +Retorna `true` se o wrapper possui um `style` com o `value`. + +**Nota: só iremos detectar os estilos quando executado com o `jsdom`.** + +- **Argumentos:** + - `{String} style` + - `{String} value` + +- **Retorna:** `{Boolean}` + +- **Exemplo:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.hasStyle('color', 'red')).toBe(true) +``` diff --git a/docs/pt-br/api/wrapper/html.md b/docs/pt-br/api/wrapper/html.md new file mode 100644 index 000000000..8f504fda3 --- /dev/null +++ b/docs/pt-br/api/wrapper/html.md @@ -0,0 +1,16 @@ +# html() + +Retorna o HTML do elemento do wrapper como uma String. + +- **Retorna:** `{String}` + +- **Exemplo:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.html()).toBe('

Foo

') +``` diff --git a/docs/pt-br/api/wrapper/is.md b/docs/pt-br/api/wrapper/is.md new file mode 100644 index 000000000..d90eff3b4 --- /dev/null +++ b/docs/pt-br/api/wrapper/is.md @@ -0,0 +1,19 @@ +# is(selector) + +Verifica se o `vm` do wrapper possui o [seletor](../selectors.md) informado. + +- **Argumentos:** + - `{String|Component} selector` + +- **Retorna:** `{Boolean}` + +- **Exemplo:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.is('div')).toBe(true) +``` diff --git a/docs/pt-br/api/wrapper/isEmpty.md b/docs/pt-br/api/wrapper/isEmpty.md new file mode 100644 index 000000000..c27344a0e --- /dev/null +++ b/docs/pt-br/api/wrapper/isEmpty.md @@ -0,0 +1,16 @@ +# isEmpty() + +Verifica se o wrapper não contem elementos filhos. + +- **Retorna:** `{Boolean}` + +- **Exemplo:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.isEmpty()).toBe(true) +``` diff --git a/docs/pt-br/api/wrapper/isVueInstance.md b/docs/pt-br/api/wrapper/isVueInstance.md new file mode 100644 index 000000000..f73fa8685 --- /dev/null +++ b/docs/pt-br/api/wrapper/isVueInstance.md @@ -0,0 +1,16 @@ +# isVueInstance() + +Verifica se o wrapper é uma intância do Vue. + +- **Retorna:** `{Boolean}` + +- **Exemplo:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.isVueInstance()).toBe(true) + ``` diff --git a/docs/pt-br/api/wrapper/name.md b/docs/pt-br/api/wrapper/name.md new file mode 100644 index 000000000..787a2ae83 --- /dev/null +++ b/docs/pt-br/api/wrapper/name.md @@ -0,0 +1,18 @@ +# name() + +Retorna o nome do componente se o wrapper for uma instância do Vue, ou então o nome da tag se o wrapper for um elemento do DOM e não for uma instância do Vue. + +- **Retorna:** `{String}` + +- **Exemplo:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.name()).toBe('Foo') +const p = wrapper.find('p') +expect(p.name()).toBe('p') +``` diff --git a/docs/pt-br/api/wrapper/setComputed.md b/docs/pt-br/api/wrapper/setComputed.md new file mode 100644 index 000000000..925fc96e5 --- /dev/null +++ b/docs/pt-br/api/wrapper/setComputed.md @@ -0,0 +1,43 @@ +# setComputed(computedProperties) + +Define as propriedades computadas do `vm` do wrapper e força a sua atualização. + +**Nota: o wrapper deve ser uma instância do Vue.** +**Nota2: a instância já deve ter as propriedades computadas passadas para o setComputed declaradas.** + + +- **Argumentos:** + - `{Object} computedProperties` + +- **Exemplo:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' + +const wrapper = mount({ + template: '
{{ propriedade1 }} {{ propriedade2 }}
', + data () { + return { + inicial: 'inicial' + } + }, + computed: { + propriedade1 () { + return this.inicial + }, + propriedade2 () { + return this.inicial + } + } +}) + +expect(wrapper.html()).toBe('
inicial inicial
') + +wrapper.setComputed({ + propriedade1: 'nova-propriedade1', + propriedade2: 'nova-propriedade2' +}) + +expect(wrapper.html()).toBe('
nova-propriedade1 nova-propriedade2
') +``` diff --git a/docs/pt-br/api/wrapper/setData.md b/docs/pt-br/api/wrapper/setData.md new file mode 100644 index 000000000..ac7e70acf --- /dev/null +++ b/docs/pt-br/api/wrapper/setData.md @@ -0,0 +1,20 @@ +# setData(data) + +Define os dados do `vm` do wrapper e força a sua atualização. + +**Nota: o wrapper deve ser uma instância do Vue.** + +- **Argumentos:** + - `{Object} data` + +- **Exemplo:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +wrapper.setData({ foo: 'bar' }) +expect(wrapper.vm.foo).toBe('bar') +``` diff --git a/docs/pt-br/api/wrapper/setMethods.md b/docs/pt-br/api/wrapper/setMethods.md new file mode 100644 index 000000000..a73fabc64 --- /dev/null +++ b/docs/pt-br/api/wrapper/setMethods.md @@ -0,0 +1,24 @@ +# setMethods(methods) + +Define os métodos do `vm` do wrapper e força sua atualização. + +**Nota: o wrapper deve ser uma instância do Vue.** + +- **Argumentos:** + - `{Object} methods` + +- **Exemplo:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import sinon from 'sinon' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +const mockClique = sinon.stub() + +wrapper.setMethods({ metodoClique: mockClique }) +wrapper.find('button').trigger('click') +expect(mockClique.called).toBe(true) +``` diff --git a/docs/pt-br/api/wrapper/setProps.md b/docs/pt-br/api/wrapper/setProps.md new file mode 100644 index 000000000..c18efe20e --- /dev/null +++ b/docs/pt-br/api/wrapper/setProps.md @@ -0,0 +1,48 @@ +# setProps(props) + +Define as propriedades do `vm` do wrapper e força sua atualização. + +**Nota: o wrapper deve ser uma instância do Vue.** + +- **Argumentos:** + - `{Object} propriedades` + +- **Exemplo:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +wrapper.setProps({ foo: 'bar' }) +expect(wrapper.vm.foo).to.equal('bar') +``` + +Além disso, você pode passar o objeto `propsData`, que irá inicializar a instância do Vue com os valores passados. + +``` js +// Foo.vue +export default { + props: { + foo: { + type: String, + required: true + } + } +} +``` + +``` js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo, { + propsData: { + foo: 'bar' + } +}) + +expect(wrapper.vm.foo).to.equal('bar') +``` diff --git a/docs/pt-br/api/wrapper/text.md b/docs/pt-br/api/wrapper/text.md new file mode 100644 index 000000000..e1a4e52b3 --- /dev/null +++ b/docs/pt-br/api/wrapper/text.md @@ -0,0 +1,16 @@ +# text() + +Retorna o texto contido no wrapper. + +- **Retorna:** `{String}` + +- **Exemplo:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.text()).toBe('bar') +``` diff --git a/docs/pt-br/api/wrapper/trigger.md b/docs/pt-br/api/wrapper/trigger.md new file mode 100644 index 000000000..f2882e941 --- /dev/null +++ b/docs/pt-br/api/wrapper/trigger.md @@ -0,0 +1,38 @@ +# trigger(eventName {, options}]) + +Aciona um evento do elemento do wrapper. + +O método `trigger` usa o objeto opicional `options`, essas opções serão adicionadas ao evento. + +Você pode rodar o preventDefault em um evento passando `preventDefault: true` no objeto de `options`. + +- **Argumentos:** + - `{String} eventName` + - `{Object} options` + - `{Boolean} preventDefault` + +- **Exemplo:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import sinon from 'sinon' +import Foo from './Foo' + +const eventoClique = sinon.stub() +const wrapper = mount(Foo, { + propsData: { eventoClique } +}) + +wrapper.trigger('click') + +wrapper.trigger('click', { + botao: 0 +}) + +wrapper.trigger('click', { + preventDefault: true +}) + +expect(clickHandler.called).toBe(true) +``` diff --git a/docs/pt-br/api/wrapper/update.md b/docs/pt-br/api/wrapper/update.md new file mode 100644 index 000000000..c138dc589 --- /dev/null +++ b/docs/pt-br/api/wrapper/update.md @@ -0,0 +1,19 @@ +# update() + +Força o componente Vue a ser redesenhado. + +Se você chamar esse método em um wrapper que contém `vm`, ele forçará o `vm` do wrapper a se redesenhar. + +- **Exemplo:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.vm.bar).toBe('bar') +wrapper.vm.bar = 'novo valor' +wrapper.update() +expect(wrapper.vm.bar).toBe('novo valor') +``` diff --git a/docs/pt-br/guides/README.md b/docs/pt-br/guides/README.md new file mode 100644 index 000000000..0983fe375 --- /dev/null +++ b/docs/pt-br/guides/README.md @@ -0,0 +1,10 @@ +# Guia + +* [Iniciando](./getting-started.md) +* [Dicas comuns](./common-tips.md) +* [Escolhendo um executador de testes](./choosing-a-test-runner.md) +* [Usando com o Jest](./using-with-jest.md) +* [Testando SFCs com Jest](./testing-SFCs-with-jest.md) +* [Testando SFCs com Mocha + webpack](./testing-SFCs-with-mocha-webpack.md) +* [Usando com o Vue Router](./using-with-vue-router.md) +* [Usando com o Vuex](./using-with-vuex.md) diff --git a/docs/pt-br/guides/choosing-a-test-runner.md b/docs/pt-br/guides/choosing-a-test-runner.md new file mode 100644 index 000000000..94a6ec1a0 --- /dev/null +++ b/docs/pt-br/guides/choosing-a-test-runner.md @@ -0,0 +1,46 @@ +# Escolhendo um executador de testes + +Um *test runner* é um programa com objetivo de executar seus testes. + +Existem muitos executadores de testes populares no Javascript, o `vue-test-utils` funciona com todos eles. + +Há algumas coisas a considerar ao escolher um *test runner*: conjunto de recursos, desempenho e suporte a pré-compilação de componentes de arquivo único (SFC). Depois de comparar cuidadosamente as bibliotecas existentes, aqui estão dois *test runner* que recomendamos: + +- [Jest](https://facebook.github.io/jest/docs/en/getting-started.html#content) é o executador de testes mais completo. Ele requer menos configuração, usa JSDOM por padrão, e fornece uma ótima experiência de usuário na linha de comando. Contudo, você vai precisar de um pré-processador para ser possível importar componentes SFC em seus testes. Nos criamos o pré-processador `vue-jest`, para lidar com os recursos SFC mais comuns, mas atualmente não possuímos 100% de compatibilidade com o `vue-loader`. + +- [mocha-webpack](https://github.com/zinserjan/mocha-webpack) é um +wrapper que envolve o webpack e o Mocha, mas com uma interface simplificada e um modo observador. O benefício dessa configuração é o suporte SFC completo via webpack + `vue-loader`, mas isso requer maiores configurações antecipadas. + +## Ambiente de navegador + +O `vue-test-utils` depende de um ambiente de navegador. Tecnicamente, você pode executa-lo em um navegador real, mas não recomendamos isso por causa da complexidade de executar navegadores reais em diferentes plataformas. Portanto, recomendamos que execute seus testes no Node.js com um ambiente virtual de navegador usando o [JSDOM](https://github.com/tmpvar/jsdom). + +O Jets configura automaticamente o JSDOM. Para outros *test runners*, você pode configurar o JSDOM manualmente para os seus testes usando o [jsdom-global](https://github.com/rstacruz/jsdom-global) na entrada dos testes: + +``` bash +npm install --save-dev jsdom jsdom-global +``` +--- +``` js +// na entrada ou configurações dos testes +require('jsdom-global')() +``` + +## Testando componentes de arquivo único (SFC) + +Os componentes de arquivo único do Vue requerem uma pré-compilação antes que possam ser executados no Node ou no navegador. Há duas maneiras recomendadas para executar essa compilação: com o pré-processador Jest ou diretamente usando o webpack. + +O pré-processador `vue-jest` suporta as funcionalidades básicas dos SFCs, mas atualmente não manipula blocos de estilos ou personalizados, que são suportados apenas no `vue-loader`. Se você depender desses recursos ou de outras configurações específicas do webpack, você precisará usar uma configuração baseada no webpack + `vue-loader`. + +Leia os guias a seguir para cofigurações diferentes: + +- [Testando SFCs com Jest](./testing-SFCs-with-jest.md) +- [Testando SFCs com Mocha + webpack](./testing-SFCs-with-mocha-webpack.md) + +## Recursos + +- [Comparação de desempenho entre test runners](https://github.com/eddyerburgh/vue-unit-test-perf-comparison) +- [Projeto de exemplo com o Jest](https://github.com/vuejs/vue-test-utils-jest-example) +- [Projeto de exemplo com o Mocha](https://github.com/vuejs/vue-test-utils-mocha-webpack-example) +- [Projeto de exemplo com o tape](https://github.com/eddyerburgh/vue-test-utils-tape-example) +- [Projeto de exemplo com o AVA](https://github.com/eddyerburgh/vue-test-utils-ava-example) diff --git a/docs/pt-br/guides/common-tips.md b/docs/pt-br/guides/common-tips.md new file mode 100644 index 000000000..798245c80 --- /dev/null +++ b/docs/pt-br/guides/common-tips.md @@ -0,0 +1,138 @@ +# Dicas comuns + +## Sabendo o que testar + +Para componentes com interface não recomendamos o foco na cobertura completa baseada em linha, porque ela leva muito o foco para detalhes internos da implementação dos componentes, podendo resultar em testes frágeis. + +Em vez disso, nós recomendamos escrever testes que verifiquem seus componentes com interface pública e trate os internos como uma caixa preta. Um caso de teste único irá verificar se a entrada (interações do usuário ou troca de props) forneceu o resultado (renderização ou emissão de eventos) esperado para o componente. + +Por exemplo, para o componente `Counter` que incrementa um contador em cada vez que um botão é clicado, seu caso de teste teria que silumar o clique e verificar se a saída renderizada se incrementou. O teste não se importa sobre como `Counter` incrementou o valor, ele apenas se preocupa com a entrada e a saída dos dados. + +O benefício desta abordagem é que enquanto a interface pública do seu componente permanece a mesma, seus testes irão passar sem se importar de como o componente faz a implementação do código interno e se houve ou não mudanças por lá. + +Esse tópico é discutido com mais detalhes em uma [excelente apresentação de Matt O'Connell](http://slides.com/mattoconnell/deck#/). + +## Renderização superficial + +Em testes de unidade, normalmente queremos nos focar no componente a ser testeado, isolando-o como uma unidade e evitando verificações indiretas em comportamentos dos seus filhos. + +Além disso, para componentes que possuem muitos componentes filhos, toda a árvore de renderização pode ficar realmente grande. A repetição de renderização de todos componentes filhos vão deixar seus testes lentos. + +O `vue-test-utils` permite que você monte um componente sem renderizar seus componentes filhos, para isso, use o método `shallow`: + +```js +import { shallow } from 'vue-test-utils' + +// obtém o wrapper contendo a instância montada de Componente +const wrapper = shallow(Componente) +wrapper.vm // instância do Vue já montada +``` + +## Verificando os eventos emitidos + +Cada wrapper montado grava automaticamente todos os eventos emitidos pela instância Vue contida. Você pode recuperar os eventos registrados usando o método `emitted`: + +``` js +wrapper.vm.$emit('foo') +wrapper.vm.$emit('foo', 123) + +/* +wrapper.emitted() retorna o objeto a seguir: +{ + foo: [ [], [123] ] +} +*/ +``` + +Então você pode criar asserções baseadas nesses dados: + +``` js +import { expect } from 'chai' + +// verifica se o evento 'foo' foi emitido +expect(wrapper.emitted().foo).toBeTruthy() + +// verifica as vezes que o evento 'foo' doi emitido +expect(wrapper.emitted().foo.length).toBe(2) + +// verifica a carga do segundo evento 'foo' emitido +expect(wrapper.emitted().foo[1]).toEqual([123]) +``` + +Além disso, você pode pegar um Array dos eventos emitidos em ordem de chamada com o método [wrapper.emittedByOrder()](../api/wrapper/emittedByOrder.md). + +## Manipulando o estado do componente + +Você pode manipular diretamente o estado do componente usando os métodos `setData` ou `setProps` no wrapper: + +```js +wrapper.setData({ contador: 10 }) + +wrapper.setProps({ foo: 'bar' }) +``` + +## Simulando propriedades + +Você pode passar propriedades para o componente usando a opção `propsData` integrada no Vue: + +```js +import { mount } from 'vue-test-utils' + +mount(Component, { + propsData: { + umaProp: 'qualquer valor' + } +}) +``` + +Você também pode atualizar as propriedades mesmo com o componente já montado, para isso use o método `wrapper.setProps({})`. + +*Para ver a lista completa de opções, por favor veja a seção [opções de montagem](../api/options.md) nessa documentação.* + +## Aplicando plugins e mixins globais + +Alguns dos seus componentes podem ter características injetadas por um plugin ou mixin global, por exemplo o `vuex`, `vue-router` e `vue-multilanguage`. + +Se você está escrevendo testes para componentes de uma aplicação específica, você pode configurar os plugins e mixins globais uma vez na entrada dos seus testes. Mas, em alguns casos, por exemplo, testando um pacote de componentes genéricos que podem ser compartilhados em diferentes aplicações, será melhor testar seus componentes com uma configuração mais isolada, sem popular o construtor global do Vue. Nós podemos usar o método [createLocalVue](../api/createLocalVue.md) para conseguir isso: + +``` js +import createLocalVue from 'vue-test-utils' + +// criando um construtor ampliado do Vue +const localVue = createLocalVue() + +// Instalando normalmente os seus plugins +localVue.use(MeuPlugin) + +// Passe o localVue para o wrapper do componente +mount(Componente, { + localVue +}) +``` + +## Simulando injeções + +Outra estratégia para injetar propriedades é simplesmente simular ela. Você pode fazer isso com a opção `mocks`: + +```js +import { mount } from 'vue-test-utils' + +const $route = { + path: '/', + hash: '', + params: { id: '123' }, + query: { q: 'hello' } +} + +mount(Component, { + mocks: { + // adiciona o objeto $route simulado na instância Vue + // antes da montagem do componente + $route + } +}) +``` + +## Lidando com o roteamento + +Uma vez que o roteamento, por definição, tem a ver com a estrutura geral da aplicação e envolve muitos componentes, é melhor testado atráves de testes de integração ou de ponta a ponta. Para componentes individuais que dependem dos recursos do `vue-router`, você pode simula-lo usando as técnicas mencionadas acima. diff --git a/docs/pt-br/guides/dom-events.md b/docs/pt-br/guides/dom-events.md new file mode 100644 index 000000000..ebc526af8 --- /dev/null +++ b/docs/pt-br/guides/dom-events.md @@ -0,0 +1,196 @@ +# Testando mouse, teclas e outros eventos do DOM + +## Desencadear eventos + +O wrapper (wrapper) expõe o método `trigger`. Ele pode ser usado para desencadear eventos do DOM. + +```js +const wrapper = mount(MeuBotao) + +wrapper.trigger('click') +``` + +Você deve estar ciente que esse método também retorna um wrapper. Assumindo que em `MeuComponente` há um botão, o código a seguir simula o clique no botão. + +```js +const wrapper = mount(MeuComponente) + +wrapper.find('button').trigger('click') +``` + +## Opções + +O método `trigger` pode receber um objeto `options` opcional. As propriedades no objeto `options` serão adicionadas no evento. + +Você pode executar `preventDefault` no evento passando `preventDefault: true` no objeto `options`: + +```js +const wrapper = mount(MeuBotao) + +wrapper.trigger('click', { preventDefault: true }) +``` + +## Exemplo de clique no mouse + +**Componente que será testado** + +```html + + + +``` + +**Teste** + +```js +import SimNaoComponente from '@/componentes/SimNaoComponente' +import { mount } from 'vue-test-utils' +import sinon from 'sinon' + +describe('Evento de clique', () => { + it('Clieque no botão sim chama o método com o argumento "sim"', () => { + const spy = sinon.spy() + const wrapper = mount(SimNaoComponente, { + propsData: { + meLigou: spy + } + }) + wrapper.find('button.sim').trigger('click') + + spy.should.have.been.calledWith('sim') + }) +}) +``` + +## Exemplo do teclado + +**Componente a ser testado** + +Esse componente permite incrementar ou decrementar o contador usando várias teclas do teclado. + +```html + + + +``` + +**Test** + +```js +import ContadorComponente from '@/componentes/ContadorComponente' +import { mount } from 'vue-test-utils' + +describe('Testes de eventos de tecla', () => { + it('Contador é zero por padrão', () => { + const wrapper = mount(ContadorComponente) + expect(wrapper.vm.contador).to.equal(0) + }) + + it('Tecla para cima incrementa contador para um', () => { + const wrapper = mount(ContadorComponente) + wrapper.trigger('keydown.up') + expect(wrapper.vm.contador).to.equal(1) + }) + + it('Tecla para baixo decrementa contador para quatro', () => { + const wrapper = mount(ContadorComponente) + wrapper.vm.contador = 5 + wrapper.trigger('keydown.down') + expect(wrapper.vm.contador).to.equal(4) + }) + + it('Tecla esc volta o contador para zero', () => { + const wrapper = mount(ContadorComponente) + wrapper.vm.contador = 5 + wrapper.trigger('keydown.esc') + expect(wrapper.vm.contador).to.equal(0) + }) + + it('Tecla A define o contador para 13', () => { + const wrapper = mount(ContadorComponente) + wrapper.trigger('keydown', { + which: 65 + }) + expect(wrapper.vm.contador).to.equal(13) + }) +}) + +``` + +**Limitações** + +O nome da tecla depois do ponto em `keydown.up` é traduzido para o `keyCode`. Isso é suportado para os seguintes nomes: + +* enter, tab, delete, esc, space, up, down, left, right + +## Importante + +vue-test-utils desencadeia eventos de forma síncrona. Consequentemente, o uso do `vue.nextTick` não é necessário. diff --git a/docs/pt-br/guides/getting-started.md b/docs/pt-br/guides/getting-started.md new file mode 100644 index 000000000..f311e289e --- /dev/null +++ b/docs/pt-br/guides/getting-started.md @@ -0,0 +1,116 @@ +# Iniciando + +## Configuração + +Para obter um exemplo rápido de uso do `vue-test-utils` clone nosso repositório de demonstração que contém as configurações básicas e instale as dependências: + +``` bash +git clone https://github.com/vuejs/vue-test-utils-getting-started +cd vue-test-utils-getting-started +npm install +``` + +Você verá que o projeto inclui um componente simples, chamado `counter.js`: + +```js +// counter.js + +export default { + template: ` +
+ {{ count }} + +
+ `, + + data () { + return { + count: 0 + } + }, + + methods: { + increment () { + this.count++ + } + } +} +``` + +### Montando seus componentes + +O `vue-test-utils` testa os componentes do Vue montando-os isoladamente, simulando as entradas necessárias (propriedades, slots e eventos de usuário) e verificando as saídas (renderização, eventos personalizados emitidos). + +Os componentes montados são retornados em um wrapper (wrapper) que expõe muitos métodos para manipular, percorrer e consultar a instância do componente Vue correspondente. + +Você pode criar essses wrappers usando o método `mount`. Vamos criar um chamado `test.js`: + +```js +// test.js + +// Importando o método mount() do test utils +// e o componente Counter para ser testado +import { mount } from 'vue-test-utils' +import Counter from './counter' + +// Agora montamos o componente e obtermos o wrapper +const wrapper = mount(Counter) + +// Você pode acessar a instância atual do Vue através de wrapper.vm +const vm = wrapper.vm + +// Para inspecionar a composição do wrapper exiba-o no console +// ...Sua aventura com o vue-test-utils começa agora :) +console.log(wrapper) +``` + +### Testar a saída HTML do componente + +Agora que nós já temos o wrapper, a primeira coisa que podemos fazer é verificar se a saída HTML que componente nos entrega é a esperada. + +```js +import { mount } from 'vue-test-utils' +import Counter from './counter' + +describe('Counter', () => { + // Montando o componente e obtendo o wrapper + const wrapper = mount(Counter) + + it('renderiza o HTML correto', () => { + expect(wrapper.html()).toContain('0') + }) + + // Também é fácil verificar se um elemento existe + it('verifica se o botão foi desenhado', () => { + expect(wrapper.contains('button')).toBe(true) + }) +}) +``` + +Agora execute os testes com o comando `npm tests`. Você deve ver os testes passando. + +### Simulando a interação do usuário + +Nosso `Counter` deve incrementar o contador quando o usuário clica no botão. Para simular esse comportamento, primeiro precisamos localizar o botão com `wrapper.find()`, que retorna um wrapper (wrapper) para o elemento do botão. Agora nós podemos simular o evento de clique, chamando o método `trigger()` no wrapper do botão: + +```js +it('o clique do botão deve incrementar a contagem', () => { + expect(wrapper.vm.count).toBe(0) + const button = wrapper.find('button') + button.trigger('click') + expect(wrapper.vm.count).toBe(1) +}) +``` + +### E quanto ao `nextTick`? + +Os lotes Vue estão pendentes de atualizações do DOM, aplicando-as de forma assíncrona para evitar re-renders desnecessários causados por múltiplas mutações de dados. É por isso que, na prática, muitas vezes temos que usar `Vue.nextTick` para esperar até que o Vue realize a atualização real do DOM, depois de ativar algumas mudanças de estado. + +Para simplificar o uso, o `vue-test-utils` aplica todas as atualizações de forma síncrona, então você não precisa usar o `Vue.nextTick` para esperar por atualizações do DOM nos seus testes. + +*Nota: o `nextTick` ainda é necessário para quando você precisa avançar explicitamente o ciclo do evento, ou seja, para operações como retorno de chamadas assíncronas ou resultados de uma Promise.* + +## A seguir + +- Integre o `vue-test-utils` no seu projeto [escolhendo seu executador de testes](./choosing-a-test-runner.md) +- Leia mais sobre [técnicas comuns ao escrever testes](./common-tips.md) diff --git a/docs/pt-br/guides/testing-SFCs-with-jest.md b/docs/pt-br/guides/testing-SFCs-with-jest.md new file mode 100644 index 000000000..6eb88cb6c --- /dev/null +++ b/docs/pt-br/guides/testing-SFCs-with-jest.md @@ -0,0 +1,178 @@ +# Testando componentes de arquivo único com Jest + +> Um projeto de exemplo para esta configuração está disponível no [GitHub](https://github.com/vuejs/vue-test-utils-jest-example). + +Jest é um executador de teste desenvolvido pelo Facebook, visa entregar uma bateria de testes de unidade. Você pode aprender mais sobre o Jets na sua [documentanção oficial](https://facebook.github.io/jest/). + +## Configurando o Jest + +Nós vamos assumir que você está iniciando com a configuração que já possui o webpack, vue-loader e Babel configurados corretamente - por exemplo o template `webpack-simple` fornecido pelo `vue-cli`. + +A primeira coisa para se fazer é instalar o Jest e o `vue-test-utils`: + +```bash +$ npm install --save-dev jest vue-test-utils +``` + +Posteriormente, devemos definir um script novo no `package.json`: + +```json +// package.json +{ + "scripts": { + "test": "jest" + } +} +``` + +## Processando SFCs com o Jest + +Para ensinar o Jest cmo processar arquivos `*.vue`, precisamos instalar e configurar o pré-processador `vue-jest`: + +``` bash +npm install --save-dev vue-jest +``` + +Agora, crie um bloco chamado `jest` no `package.json`: + +``` json +{ + // ... + "jest": { + "moduleFileExtensions": [ + "js", + "json", + // diga que o Jest irá reconhecer arquivos vue + "vue" + ], + "transform": { + // processa arquivos vue com o vue-jest + ".*\\.(vue)$": "/node_modules/vue-jest" + }, + "mapCoverage": true + } +} +``` + +> **Nota:** o `vue-jest` atualmente não suporta todos os recursos do `vue-loader`, por exemplo, blocos personalizados e estilo de carregamento. Além disso, alguns recursos específicos do webpack, como o [code-splitting](http://www.vuejs-brasil.com.br/separando-codigo-vue), também não são suportados. Para usá-los, leia o guia [testando SFCs com Mocha + webpack](./testing-SFCs-with-mocha-webpack.md). + +## Manipulação de alias do webpack + +Se você usa um alias de resolução na configuração do webpack, por exemplo usar `@` como atalho para `/src`, você precisará adicionar uma configuração correspondente para o Jest, usando a opção `moduleNameMapper`: + +``` json +{ + // ... + "jest": { + // ... + // suporta o mapeamento @ para /src do código fonte + "moduleNameMapper": { + "^@/(.*)$": "/src/$1" + } + } +} +``` + +## Configurando o Babel no Jest + +Apesar das últimas versões do Node já suportar muitos recursos do ES2015, você ainda pode querer usar a síntaxe e stage-x nos módulos ES em seus testes. Para isso, precisamos instalar o `babel-jest`: + +``` bash +npm install --save-dev babel-jest +``` + +Agora, nos precisamos dizer ao Jest para processar o arquivos de teste em Javascript com o `babel-jest`. Para isso, adicionamos uma entrada `jest.transform` no `package.json`: + +``` json +{ + // ... + "jest": { + // ... + "transform": { + // ... + // processar arquivos .js com o babel-jest + "^.+\\.js$": "/node_modules/babel-jest" + }, + // ... + } +} +``` + +> Por padrão, o `babel-jest` configura-se automaticamente enquanto estiver instalado. Contudo, adicionamos explicitamente uma transformação para arquivos `*.vue`, então agora precisamos configurar isso no `babel-jest` também. + +Assumindo que você usa o `babel-preset-env` com o webpack, a configuração padrão do Babel desabilitará a transpilação dos módulos ES porque o webpack já sabe como lidar com módulos ES. Entretanto, precisamos habilitar isso para nossos testes, porque o Jest executa seus testes diretamente no Node. + +Além disso, podemos dizer ao `babel-preset-env` para segmentar a versão do Node que estamos usando. Isso ignora a transposição de recursos desnecessários e faz com que nossos testes sejam mais rápidos. + +Para aplicar todas essas opções apenas para os testes, coloque-as em uma configuração separada em `env.test` (isso será automaticamente pego pelo `babel-jest`). + +Exemplo do novo `.babelrc`: + +``` json +{ + "presets": [ + ["env", { "modules": false }] + ], + "env": { + "test": { + "presets": [ + ["env", { "targets": { "node": "current" }}] + ] + } + } +} +``` + +### Teste instantâneo + +Você pode usar o [`vue-server-renderer`](https://github.com/vuejs/vue/tree/dev/packages/vue-server-renderer) para transformar um componente em uma String para que ele possa ser salvo como instântaneo para o [teste instântaneo com Jest](https://facebook.github.io/jest/docs/en/snapshot-testing.html). + +O resultado do `vue-server-renderer` inclui alguns atributos específicos de SSR e ignora espaços em branco, dificultando a detecção de um diff. Podemos melhorar o instantâneo salvo com um serializador personalizado: + +``` bash +npm install --save-dev jest-serializer-vue +``` + +Em seguida, configure-o no `package.json`: + +``` json +{ + // ... + "jest": { + // ... + // serializador para o instantâneo + "snapshotSerializers": [ + "/node_modules/jest-serializer-vue" + ] + } +} +``` + +### Colocando arquivos de teste + +Por padrão, o Jest irá recursivamente pegar todos os arquivosque tenham uma extensão `.spec.js` ou `.test.js` em todo o seu projeto. Se isso não for de acordo com o seu esperado, é possível [alterar o testRegex](https://facebook.github.io/jest/docs/en/configuration.html#testregex-String) na seção `config` no arquivo `package.json`. + +O Jest recomenda a criação de um diretório `__tests__` logo ao lado do código que está sendo testado, mas sinta-se livre para estruturar seus testes conforme entender. Apenas tenha cuidado com o fato de o Jest criar um diretório `__snapshots__` ao lado dos arquivos de teste que executam testes instantâneos. + +### Exemplo de spec + +Se você está familiarizado com o Jasmine, você deve se sentir em casa com a [API de asserção](https://facebook.github.io/jest/docs/en/expect.html#content) do Jest: + +```js +import { mount } from 'vue-test-utils' +import Componente from './componente' + +describe('Componente', () => { + test('é uma instância do Vue', () => { + const wrapper = mount(Componente) + expect(wrapper.ehInstanciaVue()).toBeTruthy() + }) +}) +``` + +### Recursos + +- [Exemplo de projeto para esta configuração](https://github.com/vuejs/vue-test-utils-jest-example) +- [Exemplos e slides do Vue Conf 2017](https://github.com/codebryo/vue-testing-with-jest-conf17) +- [Jest](https://facebook.github.io/jest/) +- [Babel preset env](https://github.com/babel/babel-preset-env) diff --git a/docs/pt-br/guides/testing-SFCs-with-mocha-webpack.md b/docs/pt-br/guides/testing-SFCs-with-mocha-webpack.md new file mode 100644 index 000000000..5d51059a0 --- /dev/null +++ b/docs/pt-br/guides/testing-SFCs-with-mocha-webpack.md @@ -0,0 +1,180 @@ +# Testando componentes de arquivo único com o Mocha + webpack + +> Um projeto de exemplo com essa configuração está disponível no [GitHub](https://github.com/vuejs/vue-test-utils-mocha-webpack-example). + +Outra estratégia para testar SFCs é compilar todos os seus testes via webpack e depois rodar em um *test runner*. A vantagem dessa abordagem é poder ter o suporte total para todos os recursos do webpack e `vue-loader`, por isso não temos que fazer compromissos em nosso código-fonte. + +Tecnicamente você pode usar qualquer executador de teste que você goste e alinhar as coisas de forma manual, mas descobrimos o [`mocha-webpack`](https://github.com/zinserjan/mocha-webpack) para fornecer uma experiência muito simplificada para essa tarefa específica. + +## Configurando o `mocha-webpack` + +Assumiremos que você está começando com o webpack, vue-loader e babel corretamente configurados, por exemplo com o template `webpack-simple` fornecido pelo `vue-cli`. + +A primeira coisa a se fazer é instalar as dependências dos testes: + +``` bash +npm install --save-dev vue-test-utils mocha mocha-webpack +``` + +Posteriormente, defina o script `test` no `package.json`: + +```json +// package.json +{ + "scripts": { + "test": "mocha-webpack --webpack-config webpack.config.js --require test/setup.js test/**/*.spec.js" + } +} +``` + +Temos algumas coisas a serem observadas aqui: + +- A flag `--webpack-config` especifica o arquivo de configuração do webpack para seus testes. Na maioria dos casos, ele é idêntico à configuração que você usa para o projeto real, mas com um pequeno ajuste que falaremos mais tarde. + +- A flag `--require` garante que o arquivo `test/setup.js` seja executado antes de qualquer teste, nele nós podemos configurar o ambiente global para nossos testes que irão ser executados. + +- O último argumento é um glob para os arquivos de teste a serem incluídos no pacote de teste. + +### Configurações extras do webpack + +#### Externalização das dependências do NPM + +Em nossos testes, provavelmente importaremos uma série de dependências do NPM - algumas dessas dependências podem ser escritas sem o uso do navegador em mente e simplesmente não serão empacotadas corretamente pelo webpack. Então consideramos a externalização das dependências, que melhora consideravelmente a velocidade na inicialização dos testes. Podemos externalizar todas as dependências do NPM com o `webpack-node-externals`: + +```js +// webpack.config.js +const nodeExternals = require('webpack-node-externals') + +module.exports = { + // ... + externals: [nodeExternals()] +} +``` + +#### Mapas de origem + +Os mapas de origem precisam ser incorporados pra ser capturados pelo `mocha-webpack`. A configuração recomendada é: + +``` js +module.exports = { + // ... + devtool: 'inline-cheap-module-source-map' +} +``` + +Se for depurar pela IDE, também recomendamos adicionar o seguinte: + +``` js +module.exports = { + // ... + output: { + // ... + // use caminhos absolutos nos mapas de origem (depuração via IDE) + devtoolModuleFilenameTemplate: '[absolute-resource-path]', + devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]' + } +} +``` + +### Configurando o ambiente de navegador + +O `vue-test-utils` requere um ambiente de navegador para ser executado. Nos simulamos isso no Node.js usando o `jsdom-global`: + +```bash +npm install --save-dev jsdom jsdom-global +``` + +Então, em `test/setup.js`: + +``` js +require('jsdom-global')() +``` + +Isso adiciona um ambiente de navegador ao Node, de modo que o `vue-test-utils` possa ser executado corretamente. + +### Escolhendo uma biblioteca de asserção + +[Chai](http://chaijs.com/) é uma biblioteca popular que é comumente usada ao lado do Mocha. Você também pode querer usar o [Sinon](http://sinonjs.org/) para criar spies e esboços. + +Como alternativa, você pode usar o `expect` que agora é uma parte do Jest e expõe [exatamente a mesma API](http://facebook.github.io/jest/docs/en/expect.html#content) na documentação do Jest. + +Estaremos usando o `expect`aqui e o tornaremos disponível globlamente para que não tenhamos que importá-lo em cada teste: + +``` bash +npm install --save-dev expect +``` + +Então, em `test/setup.js`: + +``` js +require('jsdom-global')() + +global.expect = require('expect') +``` + +### Otimizando o Babel para os testes + +Observe que estamos usando o `babel-loader` para lidar com o JavaScript. Você já deve ter o Babel configurado se existir um arquivo `.babelrc` no seu projeto. O `babel-loader` usará automaticamente o mesmo arquivo para realizar a configuração. + +Uma coisa deve ser observada se você está usando o Node 6+, a partir dessa versão ele suporta a maioria dos recursos do ES2015, então você pode configurar separadamente a opção Babel [env option](https://babeljs.io/docs/usage/babelrc/#env-option) que transpila somente os recursos que ainda não são suportados na versão do Node instalada, por exemplo o stage-2 ou o suporte de síntaxe de fluxo, entre outros. + +### Adicionando um teste + +Crie um arquivo no diretório `src` chamado `Contador.vue`: + +``` html + + + +``` + +Agora crie um arquivo de teste chamado `test/Contador.spec.js` com o código a seguir: + +```js +import { shallow } from 'vue-test-utils' +import Contador from '../src/Contador.vue' + +describe('Contador.vue', () => { + it('incrementa o contador quando o botão é clicado', () => { + const wrapper = shallow(Contador) + wrapper.find('button').trigger('click') + expect(wrapper.find('div').text()).toMatch('1') + }) +}) +``` + +Agora nós podemos executar o teste usando: + +``` +npm run unit +``` + +Woohoo :o, nossos testes estão rodando! + +### Recursos + +- [Projeto de exemplo com essa configuração](https://github.com/vuejs/vue-test-utils-mocha-webpack-example) +- [Mocha](https://mochajs.org/) +- [mocha-webpack](http://zinserjan.github.io/mocha-webpack/) +- [Chai](http://chaijs.com/) +- [Sinon](http://sinonjs.org/) +- [jest/expect](http://facebook.github.io/jest/docs/en/expect.html#content) diff --git a/docs/pt-br/guides/using-with-vue-router.md b/docs/pt-br/guides/using-with-vue-router.md new file mode 100644 index 000000000..395792fda --- /dev/null +++ b/docs/pt-br/guides/using-with-vue-router.md @@ -0,0 +1,71 @@ +# Usando com o Vue Router + +## Instalando o Vue Router nos testes + +Você nunca deveria instalar o Vue Router no construtor base do Vue dos seus testes. A instalação do Vue Router adiciona `$route` e `$router` como propriedades de somente leitura no protótipo dos componentes Vue. + +Para evitar isso, nós criamos o `localVue` e instalamos o Vue Router no seu interior. + +```js +import VueRouter from 'vue-router' +const localVue = createLocalVue() + +localVue.use(VueRouter) + +shallow(Component, { + localVue +}) +``` + +## Testando componentes que usam `router-link` ou `router-view` + +Quando você instala o Vue Router, os componentes `router-link` e `router-view` são registrados. Isso significa que podemos usa-los em qualquer lugar da nossa aplicação sem precisar importá-los. + +Quando executamos os testes, nós precisamos disponibilizar os componentes do Vue Router para os componentes que estamos montando. Existem dois métodos para se fazer isso. + +### Usando esboços + +```js +shallow(Componente, { + stubs: ['router-link', 'router-view'] +}) +``` + +### Instalando o Vue Router com o localVue + +```js +import VueRouter from 'vue-router' +const localVue = createLocalVue() + +localVue.use(VueRouter) + +shallow(Componente, { + localVue +}) +``` + +## Simulando o `$route` e o `$router` + +Às vezes você quer testar que um componente faz algo com os parâmetros dos objetos `$route` e `$router`. Para fazer isso você pode passar mocks personalizados para a instância do Vue. + +```js +const $route = { + path: '/rota/qualquer' +} + +const wrapper = shallow(Component, { + mocks: { + $route + } +}) + +wrapper.vm.$router // /rota/qualquer +``` + +## Obstáculos comuns + +A instalação do Vue Router adiciona `$route` e `$router` como propriedades de somente leitura do protótipo Vue. + +Isso significa que todos os testes futuros que tentam simular o `$route` ou o `$router` irão falhar. + +Para evitar isso, nunca instale o Vue Router quando estiver executando seus testes. diff --git a/docs/pt-br/guides/using-with-vuex.md b/docs/pt-br/guides/using-with-vuex.md new file mode 100644 index 000000000..7fd355a75 --- /dev/null +++ b/docs/pt-br/guides/using-with-vuex.md @@ -0,0 +1,266 @@ +# Usando com o Vuex + +Nesse guia verems como testar o Vuex nos componentes com o `vue-test-utils`. + +## Simulando ações + +Vejamos algum código... + +Esse é o componente que queremos testar. Ele chama ações do Vuex. + +``` html + + + +``` + +Para os fins desse teste, não nos importa o que cada ação do Vuex faz ou como a store é criada. Nos precisamos apenas saber que essas ações estão sendo disparadas quando deveriam, e que elas são disparadas com os valores esperados. + +Para testar isso, precisamos passar um mock da store para o Vue quando envelopamos nosso componente. + +Em vez de passar a store para o construtor do Vue, nós passamos um [localVue](../api/options.md#localvue). Um localVue é um construtor local do Vue com escopo que permite alterações sem afetar o construtor global. + +Vamos ver como isso se apreenta no código: + +``` js +import { shallow, createLocalVue } from 'vue-test-utils' +import Vuex from 'vuex' +import Acoes from '../../../src/componentes/Acoes' + +const localVue = createLocalVue() + +localVue.use(Vuex) + +describe('Acoes.vue', () => { + let acoes + let store + + beforeEach(() => { + acoes = { + acaoDeClique: jest.fn(), + acaoInput: jest.fn() + } + + store = new Vuex.Store({ + state: {}, + acoes + }) + }) + + it('chama a ação acaoInput da store quando o valor do input é inserido e um evento do input é disparado', () => { + const wrapper = shallow(Acoes, { store, localVue }) + const input = wrapper.find('input') + input.element.value = 'input' + input.trigger('input') + expect(acoes.acaoInput).toHaveBeenCalled() + }) + + it('não liga a ação acaoInput da store quando o valor do input não é inserido e um evento do input é disparado', () => { + const wrapper = shallow(Acoes, { store, localVue }) + const input = wrapper.find('input') + input.element.value = 'not input' + input.trigger('input') + expect(acoes.acaoInput).not.toHaveBeenCalled() + }) + + it('calls store action actionClick when button is clicked', () => { + const wrapper = shallow(Actions, { store, localVue }) + wrapper.find('button').trigger('click') + expect(actions.actionClick).toHaveBeenCalled() + }) +}) +``` + +O que está acontecendo aqui? Primeiro contamos ao localVue que ele usará o Vuex no método `localVue.use`. Este é apenas um wrapper do `Vue.use`. + +Em seguida, fazemos uma store simulada chamando o método `Vuex.Store` com os valores do mock. Nós apenas passamos as ações, já que é o que nos importa no momento. + +As ações são [funções de mock do Jest](https://facebook.github.io/jest/docs/en/mock-functions.html). Essas funções simuladas nos dão alguns métodos para verificar se as determinadas ações foram ou não chamadas. + +Então, podemos fazer a asserção nos nossos testes esperando que essas ações do Vuex foram chamadas no momento esperado. + +A forma como definimos a store pode parecer um pouco estranha para você. + +Nós usamos o `beforeEach` para garantir que teremos uma store limpa antes de cada teste. O `beforeEach` é um método gancho do Mocha que é chamado antes de cada teste. Em nosso teste, reatribuímos os valores da store. Se nós não fizessemos isso, as funções simuladas deveriam ser reiniciadas automaticamente. Esse método também permite que alteremos o estado nos testes sem que afete os testes posteriores, pois ele será redefinido entre esses testes. + +A coisa mais impotante a ser notada neste teste é que **criamos um mock da store e depois passamos ela para o vue-test-utils**. + +Ótimo, agora que nós já conseguimos simular as actions, vamos ver como simular o getters. + +## Simulando os getters + +``` html + + + +``` + +Esse é um componente bastante simples, Ele mostra os resultados capturados pelos getters `cliques` e `valorDoInput`. Mais um vez, nós não importamos com o que esses getters retornam e o que fazem no seu interior, mas sim com o resultado que ele acarretará no componente a ser testado. + +Valos ver o teste do componente: + +``` js +import { shallow, createLocalVue } from 'vue-test-utils' +import Vuex from 'vuex' +import GettersComponente from '../../../src/componentes/GettersComponente' + +const localVue = createLocalVue() + +localVue.use(Vuex) + +describe('GettersComponente.vue', () => { + let getters + let store + + beforeEach(() => { + getters = { + cliques: () => 2, + valorDoInput: () => 'input' + } + + store = new Vuex.Store({ + getters + }) + }) + + it('Renderiza o valor do input na primeira tag P', () => { + const wrapper = shallow(GettersComponente, { store, localVue }) + const p = wrapper.find('p') + expect(p.text()).toBe(getters.valorDoInput()) + }) + + it('Renderiza o valor de cliques na segunda tag P', () => { + const wrapper = shallow(GettersComponente, { store, localVue }) + const p = wrapper.findAll('p').at(1) + expect(p.text()).toBe(getters.cliques().toString()) + }) +}) +``` + +Esse teste é bastante similar com nosso teste de actions. Criamos um mock da store antes de cada teste, passamos ele como uma opção do método `shallow`, e verificamos o valor retornado pelo getter, verificando se o mesmo foi renderizado no template do componente. + +Isso é ótimo, mas se quisermos garantir que nossos getters estão retornando a parte correta do nosso state? + +## Criando mocks com módulos + +Os [módulos](https://vuex.vuejs.org/en/modules.html) são úteis para separar nossa store em partes gerenciáveis. Podemos usa-los em nossos testes. + +Dê uma olhada nesse nosso componente: + +``` html + + + +``` + +Esse simples componente incluí uma ação e um getter. + +E seu teste fica assim: + +``` js +import { shallow, createLocalVue } from 'vue-test-utils' +import Vuex from 'vuex' +import ModuloComponente from '../../../src/componentes/ModuloComponente' +import modulo from '../../../src/store/modulo' + +const localVue = createLocalVue() + +localVue.use(Vuex) + +describe('ModuloComponente.vue', () => { + let actions + let state + let store + + beforeEach(() => { + state = { + modulo: { + cliques: 2 + } + } + + actions = { + cliqueEmModulo: jest.fn() + } + + store = new Vuex.Store({ + state, + actions, + getters: modulo.getters + }) + }) + + it('chama a ação cliqueEmModulo quand o botão é clicado', () => { + const wrapper = shallow(ModuloComponente, { store, localVue }) + const button = wrapper.find('button') + button.trigger('click') + expect(actions.cliqueEmModulo).toHaveBeenCalled() + }) + + it('Renderiza os cliques do state do módulo no primeiro P', () => { + const wrapper = shallow(ModuloComponente, { store, localVue }) + const p = wrapper.find('p') + expect(p.text()).toBe(state.modulo.cliques.toString()) + }) +}) +``` + +### Recursos + +- [Projeto de exemplo com essa configuração](https://github.com/eddyerburgh/vue-test-utils-vuex-example) +- [localVue](../api/options.md#localvue) +- [createLocalVue](../api/createLocalVue.md) diff --git a/package-lock.json b/package-lock.json index 13c90f371..3386e28e1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "vue-test-utils", - "version": "1.0.0-beta.4", + "version": "1.0.0-beta.5", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -1710,7 +1710,6 @@ "requires": { "anymatch": "1.3.2", "async-each": "1.0.1", - "fsevents": "1.1.2", "glob-parent": "2.0.0", "inherits": "2.0.3", "is-binary-path": "1.0.1", @@ -3628,905 +3627,6 @@ "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", "dev": true }, - "fsevents": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.1.2.tgz", - "integrity": "sha512-Sn44E5wQW4bTHXvQmvSHwqbuiXtduD6Rrjm2ZtUEGbyrig+nUH3t/QD4M4/ZXViY556TBpRgZkHLDx3JxPwxiw==", - "dev": true, - "optional": true, - "requires": { - "nan": "2.7.0", - "node-pre-gyp": "0.6.36" - }, - "dependencies": { - "abbrev": { - "version": "1.1.0", - "bundled": true, - "dev": true, - "optional": true - }, - "ajv": { - "version": "4.11.8", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "co": "4.6.0", - "json-stable-stringify": "1.0.1" - } - }, - "ansi-regex": { - "version": "2.1.1", - "bundled": true, - "dev": true - }, - "aproba": { - "version": "1.1.1", - "bundled": true, - "dev": true, - "optional": true - }, - "are-we-there-yet": { - "version": "1.1.4", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "delegates": "1.0.0", - "readable-stream": "2.2.9" - } - }, - "asn1": { - "version": "0.2.3", - "bundled": true, - "dev": true, - "optional": true - }, - "assert-plus": { - "version": "0.2.0", - "bundled": true, - "dev": true, - "optional": true - }, - "asynckit": { - "version": "0.4.0", - "bundled": true, - "dev": true, - "optional": true - }, - "aws-sign2": { - "version": "0.6.0", - "bundled": true, - "dev": true, - "optional": true - }, - "aws4": { - "version": "1.6.0", - "bundled": true, - "dev": true, - "optional": true - }, - "balanced-match": { - "version": "0.4.2", - "bundled": true, - "dev": true - }, - "bcrypt-pbkdf": { - "version": "1.0.1", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "tweetnacl": "0.14.5" - } - }, - "block-stream": { - "version": "0.0.9", - "bundled": true, - "dev": true, - "requires": { - "inherits": "2.0.3" - } - }, - "boom": { - "version": "2.10.1", - "bundled": true, - "dev": true, - "requires": { - "hoek": "2.16.3" - } - }, - "brace-expansion": { - "version": "1.1.7", - "bundled": true, - "dev": true, - "requires": { - "balanced-match": "0.4.2", - "concat-map": "0.0.1" - } - }, - "buffer-shims": { - "version": "1.0.0", - "bundled": true, - "dev": true - }, - "caseless": { - "version": "0.12.0", - "bundled": true, - "dev": true, - "optional": true - }, - "co": { - "version": "4.6.0", - "bundled": true, - "dev": true, - "optional": true - }, - "code-point-at": { - "version": "1.1.0", - "bundled": true, - "dev": true - }, - "combined-stream": { - "version": "1.0.5", - "bundled": true, - "dev": true, - "requires": { - "delayed-stream": "1.0.0" - } - }, - "concat-map": { - "version": "0.0.1", - "bundled": true, - "dev": true - }, - "console-control-strings": { - "version": "1.1.0", - "bundled": true, - "dev": true - }, - "core-util-is": { - "version": "1.0.2", - "bundled": true, - "dev": true - }, - "cryptiles": { - "version": "2.0.5", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "boom": "2.10.1" - } - }, - "dashdash": { - "version": "1.14.1", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "assert-plus": "1.0.0" - }, - "dependencies": { - "assert-plus": { - "version": "1.0.0", - "bundled": true, - "dev": true, - "optional": true - } - } - }, - "debug": { - "version": "2.6.8", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "ms": "2.0.0" - } - }, - "deep-extend": { - "version": "0.4.2", - "bundled": true, - "dev": true, - "optional": true - }, - "delayed-stream": { - "version": "1.0.0", - "bundled": true, - "dev": true - }, - "delegates": { - "version": "1.0.0", - "bundled": true, - "dev": true, - "optional": true - }, - "ecc-jsbn": { - "version": "0.1.1", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "jsbn": "0.1.1" - } - }, - "extend": { - "version": "3.0.1", - "bundled": true, - "dev": true, - "optional": true - }, - "extsprintf": { - "version": "1.0.2", - "bundled": true, - "dev": true - }, - "forever-agent": { - "version": "0.6.1", - "bundled": true, - "dev": true, - "optional": true - }, - "form-data": { - "version": "2.1.4", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "asynckit": "0.4.0", - "combined-stream": "1.0.5", - "mime-types": "2.1.15" - } - }, - "fs.realpath": { - "version": "1.0.0", - "bundled": true, - "dev": true - }, - "fstream": { - "version": "1.0.11", - "bundled": true, - "dev": true, - "requires": { - "graceful-fs": "4.1.11", - "inherits": "2.0.3", - "mkdirp": "0.5.1", - "rimraf": "2.6.1" - } - }, - "fstream-ignore": { - "version": "1.0.5", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "fstream": "1.0.11", - "inherits": "2.0.3", - "minimatch": "3.0.4" - } - }, - "gauge": { - "version": "2.7.4", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "aproba": "1.1.1", - "console-control-strings": "1.1.0", - "has-unicode": "2.0.1", - "object-assign": "4.1.1", - "signal-exit": "3.0.2", - "string-width": "1.0.2", - "strip-ansi": "3.0.1", - "wide-align": "1.1.2" - } - }, - "getpass": { - "version": "0.1.7", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "assert-plus": "1.0.0" - }, - "dependencies": { - "assert-plus": { - "version": "1.0.0", - "bundled": true, - "dev": true, - "optional": true - } - } - }, - "glob": { - "version": "7.1.2", - "bundled": true, - "dev": true, - "requires": { - "fs.realpath": "1.0.0", - "inflight": "1.0.6", - "inherits": "2.0.3", - "minimatch": "3.0.4", - "once": "1.4.0", - "path-is-absolute": "1.0.1" - } - }, - "graceful-fs": { - "version": "4.1.11", - "bundled": true, - "dev": true - }, - "har-schema": { - "version": "1.0.5", - "bundled": true, - "dev": true, - "optional": true - }, - "har-validator": { - "version": "4.2.1", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "ajv": "4.11.8", - "har-schema": "1.0.5" - } - }, - "has-unicode": { - "version": "2.0.1", - "bundled": true, - "dev": true, - "optional": true - }, - "hawk": { - "version": "3.1.3", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "boom": "2.10.1", - "cryptiles": "2.0.5", - "hoek": "2.16.3", - "sntp": "1.0.9" - } - }, - "hoek": { - "version": "2.16.3", - "bundled": true, - "dev": true - }, - "http-signature": { - "version": "1.1.1", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "assert-plus": "0.2.0", - "jsprim": "1.4.0", - "sshpk": "1.13.0" - } - }, - "inflight": { - "version": "1.0.6", - "bundled": true, - "dev": true, - "requires": { - "once": "1.4.0", - "wrappy": "1.0.2" - } - }, - "inherits": { - "version": "2.0.3", - "bundled": true, - "dev": true - }, - "ini": { - "version": "1.3.4", - "bundled": true, - "dev": true, - "optional": true - }, - "is-fullwidth-code-point": { - "version": "1.0.0", - "bundled": true, - "dev": true, - "requires": { - "number-is-nan": "1.0.1" - } - }, - "is-typedarray": { - "version": "1.0.0", - "bundled": true, - "dev": true, - "optional": true - }, - "isarray": { - "version": "1.0.0", - "bundled": true, - "dev": true - }, - "isstream": { - "version": "0.1.2", - "bundled": true, - "dev": true, - "optional": true - }, - "jodid25519": { - "version": "1.0.2", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "jsbn": "0.1.1" - } - }, - "jsbn": { - "version": "0.1.1", - "bundled": true, - "dev": true, - "optional": true - }, - "json-schema": { - "version": "0.2.3", - "bundled": true, - "dev": true, - "optional": true - }, - "json-stable-stringify": { - "version": "1.0.1", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "jsonify": "0.0.0" - } - }, - "json-stringify-safe": { - "version": "5.0.1", - "bundled": true, - "dev": true, - "optional": true - }, - "jsonify": { - "version": "0.0.0", - "bundled": true, - "dev": true, - "optional": true - }, - "jsprim": { - "version": "1.4.0", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "assert-plus": "1.0.0", - "extsprintf": "1.0.2", - "json-schema": "0.2.3", - "verror": "1.3.6" - }, - "dependencies": { - "assert-plus": { - "version": "1.0.0", - "bundled": true, - "dev": true, - "optional": true - } - } - }, - "mime-db": { - "version": "1.27.0", - "bundled": true, - "dev": true - }, - "mime-types": { - "version": "2.1.15", - "bundled": true, - "dev": true, - "requires": { - "mime-db": "1.27.0" - } - }, - "minimatch": { - "version": "3.0.4", - "bundled": true, - "dev": true, - "requires": { - "brace-expansion": "1.1.7" - } - }, - "minimist": { - "version": "0.0.8", - "bundled": true, - "dev": true - }, - "mkdirp": { - "version": "0.5.1", - "bundled": true, - "dev": true, - "requires": { - "minimist": "0.0.8" - } - }, - "ms": { - "version": "2.0.0", - "bundled": true, - "dev": true, - "optional": true - }, - "node-pre-gyp": { - "version": "0.6.36", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "mkdirp": "0.5.1", - "nopt": "4.0.1", - "npmlog": "4.1.0", - "rc": "1.2.1", - "request": "2.81.0", - "rimraf": "2.6.1", - "semver": "5.3.0", - "tar": "2.2.1", - "tar-pack": "3.4.0" - } - }, - "nopt": { - "version": "4.0.1", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "abbrev": "1.1.0", - "osenv": "0.1.4" - } - }, - "npmlog": { - "version": "4.1.0", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "are-we-there-yet": "1.1.4", - "console-control-strings": "1.1.0", - "gauge": "2.7.4", - "set-blocking": "2.0.0" - } - }, - "number-is-nan": { - "version": "1.0.1", - "bundled": true, - "dev": true - }, - "oauth-sign": { - "version": "0.8.2", - "bundled": true, - "dev": true, - "optional": true - }, - "object-assign": { - "version": "4.1.1", - "bundled": true, - "dev": true, - "optional": true - }, - "once": { - "version": "1.4.0", - "bundled": true, - "dev": true, - "requires": { - "wrappy": "1.0.2" - } - }, - "os-homedir": { - "version": "1.0.2", - "bundled": true, - "dev": true, - "optional": true - }, - "os-tmpdir": { - "version": "1.0.2", - "bundled": true, - "dev": true, - "optional": true - }, - "osenv": { - "version": "0.1.4", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "os-homedir": "1.0.2", - "os-tmpdir": "1.0.2" - } - }, - "path-is-absolute": { - "version": "1.0.1", - "bundled": true, - "dev": true - }, - "performance-now": { - "version": "0.2.0", - "bundled": true, - "dev": true, - "optional": true - }, - "process-nextick-args": { - "version": "1.0.7", - "bundled": true, - "dev": true - }, - "punycode": { - "version": "1.4.1", - "bundled": true, - "dev": true, - "optional": true - }, - "qs": { - "version": "6.4.0", - "bundled": true, - "dev": true, - "optional": true - }, - "rc": { - "version": "1.2.1", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "deep-extend": "0.4.2", - "ini": "1.3.4", - "minimist": "1.2.0", - "strip-json-comments": "2.0.1" - }, - "dependencies": { - "minimist": { - "version": "1.2.0", - "bundled": true, - "dev": true, - "optional": true - } - } - }, - "readable-stream": { - "version": "2.2.9", - "bundled": true, - "dev": true, - "requires": { - "buffer-shims": "1.0.0", - "core-util-is": "1.0.2", - "inherits": "2.0.3", - "isarray": "1.0.0", - "process-nextick-args": "1.0.7", - "string_decoder": "1.0.1", - "util-deprecate": "1.0.2" - } - }, - "request": { - "version": "2.81.0", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "aws-sign2": "0.6.0", - "aws4": "1.6.0", - "caseless": "0.12.0", - "combined-stream": "1.0.5", - "extend": "3.0.1", - "forever-agent": "0.6.1", - "form-data": "2.1.4", - "har-validator": "4.2.1", - "hawk": "3.1.3", - "http-signature": "1.1.1", - "is-typedarray": "1.0.0", - "isstream": "0.1.2", - "json-stringify-safe": "5.0.1", - "mime-types": "2.1.15", - "oauth-sign": "0.8.2", - "performance-now": "0.2.0", - "qs": "6.4.0", - "safe-buffer": "5.0.1", - "stringstream": "0.0.5", - "tough-cookie": "2.3.2", - "tunnel-agent": "0.6.0", - "uuid": "3.0.1" - } - }, - "rimraf": { - "version": "2.6.1", - "bundled": true, - "dev": true, - "requires": { - "glob": "7.1.2" - } - }, - "safe-buffer": { - "version": "5.0.1", - "bundled": true, - "dev": true - }, - "semver": { - "version": "5.3.0", - "bundled": true, - "dev": true, - "optional": true - }, - "set-blocking": { - "version": "2.0.0", - "bundled": true, - "dev": true, - "optional": true - }, - "signal-exit": { - "version": "3.0.2", - "bundled": true, - "dev": true, - "optional": true - }, - "sntp": { - "version": "1.0.9", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "hoek": "2.16.3" - } - }, - "sshpk": { - "version": "1.13.0", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "asn1": "0.2.3", - "assert-plus": "1.0.0", - "bcrypt-pbkdf": "1.0.1", - "dashdash": "1.14.1", - "ecc-jsbn": "0.1.1", - "getpass": "0.1.7", - "jodid25519": "1.0.2", - "jsbn": "0.1.1", - "tweetnacl": "0.14.5" - }, - "dependencies": { - "assert-plus": { - "version": "1.0.0", - "bundled": true, - "dev": true, - "optional": true - } - } - }, - "string-width": { - "version": "1.0.2", - "bundled": true, - "dev": true, - "requires": { - "code-point-at": "1.1.0", - "is-fullwidth-code-point": "1.0.0", - "strip-ansi": "3.0.1" - } - }, - "string_decoder": { - "version": "1.0.1", - "bundled": true, - "dev": true, - "requires": { - "safe-buffer": "5.0.1" - } - }, - "stringstream": { - "version": "0.0.5", - "bundled": true, - "dev": true, - "optional": true - }, - "strip-ansi": { - "version": "3.0.1", - "bundled": true, - "dev": true, - "requires": { - "ansi-regex": "2.1.1" - } - }, - "strip-json-comments": { - "version": "2.0.1", - "bundled": true, - "dev": true, - "optional": true - }, - "tar": { - "version": "2.2.1", - "bundled": true, - "dev": true, - "requires": { - "block-stream": "0.0.9", - "fstream": "1.0.11", - "inherits": "2.0.3" - } - }, - "tar-pack": { - "version": "3.4.0", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "debug": "2.6.8", - "fstream": "1.0.11", - "fstream-ignore": "1.0.5", - "once": "1.4.0", - "readable-stream": "2.2.9", - "rimraf": "2.6.1", - "tar": "2.2.1", - "uid-number": "0.0.6" - } - }, - "tough-cookie": { - "version": "2.3.2", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "punycode": "1.4.1" - } - }, - "tunnel-agent": { - "version": "0.6.0", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "safe-buffer": "5.0.1" - } - }, - "tweetnacl": { - "version": "0.14.5", - "bundled": true, - "dev": true, - "optional": true - }, - "uid-number": { - "version": "0.0.6", - "bundled": true, - "dev": true, - "optional": true - }, - "util-deprecate": { - "version": "1.0.2", - "bundled": true, - "dev": true - }, - "uuid": { - "version": "3.0.1", - "bundled": true, - "dev": true, - "optional": true - }, - "verror": { - "version": "1.3.6", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "extsprintf": "1.0.2" - } - }, - "wide-align": { - "version": "1.1.2", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "string-width": "1.0.2" - } - }, - "wrappy": { - "version": "1.0.2", - "bundled": true, - "dev": true - } - } - }, "function-bind": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", diff --git a/package.json b/package.json index cbce42e2b..2cb48fea9 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "build": "node build/build.js", "docs": "cd docs && gitbook install && gitbook serve", "docs:deploy": "build/update-docs.sh", + "docs:serve": "cd docs && gitbook serve", "flow": "flow check", "lint": "eslint --ext js,vue src test flow build --ignore-path .gitignore", "lint:docs": "eslint --ext js,vue,md docs --ignore-path .gitignore",