diff --git a/docs/.vuepress/_redirects b/docs/.vuepress/_redirects index 86da66f9e..fac8b530f 100644 --- a/docs/.vuepress/_redirects +++ b/docs/.vuepress/_redirects @@ -23,3 +23,11 @@ /zh/api/wrapper/* /zh/api/wrapper.html/#:splat /zh/api/wrapper-array/* /zh/api/wrapper-array.html/#:splat + +/ru/api/mount /ru/api/#mount +/ru/api/shallowMount /ru/api/#shallowmount +/ru/api/createLocalVue /ru/api/#createlocalvue +/ru/api/config /ru/api/#config + +/ru/api/wrapper/* /ru/api/wrapper.html/#:splat +/ru/api/wrapper-array/* /ru/api/wrapper-array.html/#:splat diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 2bfaa5445..8ac01fb68 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -14,6 +14,11 @@ module.exports = { lang: 'zh-CN', title: 'Vue Test Utils', description: '测试 Vue 组件的实用工具' + }, + '/ru/': { + lang: 'ru', + title: 'Vue Test Utils', + description: 'Библиотека для тестирования Vue-компонентов' } }, serviceWorker: true, @@ -93,7 +98,31 @@ module.exports = { '/ja/api/options', '/ja/api/components/' ] - } + }, + '/ru/': { + label: 'Русский', + selectText: 'Переводы', + editLinkText: 'Изменить эту страницу на GitHub', + nav: [ + { + text: 'API', + link: '/ru/api/' + }, + { + text: 'Руководства', + link: '/ru/guides/' + } + ], + sidebar: [ + '/ru/', + '/ru/guides/', + '/ru/api/', + '/ru/api/wrapper/', + '/ru/api/wrapper-array/', + '/ru/api/options', + '/ru/api/components/' + ] + }, } }, markdown: { @@ -102,4 +131,4 @@ module.exports = { md.use(require('markdown-it-include')) } } -} \ No newline at end of file +} diff --git a/docs/ru/README.md b/docs/ru/README.md new file mode 100644 index 000000000..9bd029757 --- /dev/null +++ b/docs/ru/README.md @@ -0,0 +1,79 @@ +# Введение + +Vue Test Utils — официальная библиотека модульного тестирования для Vue.js. + +* [Руководства](guides/) + * [Введение](guides/getting-started.md) + * [Общие советы](guides/common-tips.md) + * [Мышь, клавиши и другие события DOM](guides/dom-events.md) + * [Чем запускать тесты](guides/choosing-a-test-runner.md) + * [Тестирование однофайловых компонентов с Jest](guides/testing-SFCs-with-jest.md) + * [Тестирование однофайловых компонентов с Mocha + webpack](guides/testing-SFCs-with-mocha-webpack.md) + * [Testing однофайловых компонентов с Karma](guides/testing-SFCs-with-karma.md) + * [Тестирование асинхронной логики](guides/testing-async-components.md) + * [Использование с Vue Router](guides/using-with-vue-router.md) + * [Использование с Vuex](guides/using-with-vuex.md) +* [API](api/) + * [mount](api/mount.md) + * [shallowMount](api/shallowMount.md) + * [render](api/render.md) + * [renderToString](api/renderToString.md) + * [Опции монтирования](api/options.md) + - [context](api/options.md#context) + - [slots](api/options.md#slots) + - [scopedSlots](api/options.md#scopedslots) + - [stubs](api/options.md#stubs) + - [mocks](api/options.md#mocks) + - [localVue](api/options.md#localvue) + - [attachToDocument](api/options.md#attachtodocument) + - [attrs](api/options.md#attrs) + - [listeners](api/options.md#listeners) + - [provide](api/options.md#provide) + - [sync](api/options.md#sync) + - [другие опции](api/options.md#other-options) + * [Wrapper](api/wrapper/) + * [attributes](api/wrapper/attributes.md) + * [classes](api/wrapper/classes.md) + * [contains](api/wrapper/contains.md) + * [emitted](api/wrapper/emitted.md) + * [emittedByOrder](api/wrapper/emittedByOrder.md) + * [exists](api/wrapper/exists.md) + * [destroy](api/wrapper/destroy.md) + * [find](api/wrapper/find.md) + * [findAll](api/wrapper/findAll.md) + * [html](api/wrapper/html.md) + * [is](api/wrapper/is.md) + * [isEmpty](api/wrapper/isEmpty.md) + * [isVueInstance](api/wrapper/isVueInstance.md) + * [name](api/wrapper/name.md) + * [props](api/wrapper/props.md) + * [setChecked](api/wrapper/setChecked.md) + * [setData](api/wrapper/setData.md) + * [setMethods](api/wrapper/setMethods.md) + * [setProps](api/wrapper/setProps.md) + * [setSelected](api/wrapper/setSelected.md) + * [setValue](api/wrapper/setValue.md) + * [text](api/wrapper/text.md) + * [trigger](api/wrapper/trigger.md) + * [isVisible](api/wrapper/isVisible.md) + * [WrapperArray](api/wrapper-array/) + * [at](api/wrapper-array/at.md) + * [contains](api/wrapper-array/contains.md) + * [exists](api/wrapper/exists.md) + * [destroy](api/wrapper-array/destroy.md) + * [filter](api/wrapper-array/filter.md) + * [is](api/wrapper-array/is.md) + * [isEmpty](api/wrapper-array/isEmpty.md) + * [isVueInstance](api/wrapper-array/isVueInstance.md) + * [setData](api/wrapper-array/setData.md) + * [setMethods](api/wrapper-array/setMethods.md) + * [setProps](api/wrapper-array/setProps.md) + * [trigger](api/wrapper-array/trigger.md) + * [isVisible](api/wrapper-array/isVisible.md) + * [Компоненты](api/components/) + * [TransitionStub](api/components/TransitionStub.md) + * [TransitionGroupStub](api/components/TransitionGroupStub.md) + * [RouterLinkStub](api/components/RouterLinkStub.md) + * [Селекторы](api/selectors.md) + * [createLocalVue](api/createLocalVue.md) + * [Конфигурация](api/config.md) diff --git a/docs/ru/api/README.md b/docs/ru/api/README.md new file mode 100644 index 000000000..42da72b82 --- /dev/null +++ b/docs/ru/api/README.md @@ -0,0 +1,9 @@ +# API + +!!!include(docs/ru/api/mount.md)!!! +!!!include(docs/ru/api/shallowMount.md)!!! +!!!include(docs/ru/api/render.md)!!! +!!!include(docs/ru/api/renderToString.md)!!! +!!!include(docs/ru/api/selectors.md)!!! +!!!include(docs/ru/api/createLocalVue.md)!!! +!!!include(docs/ru/api/config.md)!!! \ No newline at end of file diff --git a/docs/ru/api/components/README.md b/docs/ru/api/components/README.md new file mode 100644 index 000000000..b4c577d9d --- /dev/null +++ b/docs/ru/api/components/README.md @@ -0,0 +1,7 @@ +# Компоненты + +Vue Test Utils включает утилиты, которые вы можете использовать для создания заглушек компонентов. + +!!!include(docs/ru/api/components/RouterLinkStub.md)!!! +!!!include(docs/ru/api/components/TransitionStub.md)!!! +!!!include(docs/ru/api/components/TransitionGroupStub.md)!!! \ No newline at end of file diff --git a/docs/ru/api/components/RouterLinkStub.md b/docs/ru/api/components/RouterLinkStub.md new file mode 100644 index 000000000..7fbbeef30 --- /dev/null +++ b/docs/ru/api/components/RouterLinkStub.md @@ -0,0 +1,20 @@ +## RouterLinkStub + +Компонент для заглушки компонента Vue Router `router-link`. + +Вы можете использовать этот компонент для поиска компонента router-link в дереве рендеринга. + +- **Использование:** + +Чтобы установить его как заглушку в опциях монтирования: + +```js +import { mount, RouterLinkStub } from '@vue/test-utils' + +const wrapper = mount(Component, { + stubs: { + RouterLink: RouterLinkStub + } +}) +expect(wrapper.find(RouterLinkStub).props().to).toBe('/some/path') +``` diff --git a/docs/ru/api/components/TransitionGroupStub.md b/docs/ru/api/components/TransitionGroupStub.md new file mode 100644 index 000000000..f9bc7c75d --- /dev/null +++ b/docs/ru/api/components/TransitionGroupStub.md @@ -0,0 +1,31 @@ +## TransitionGroupStub + +Компонент для создания заглушки компонента `transition-group`. Вместо асинхронного выполнения переходов он возвращает дочерние компоненты синхронно. + +Это настроено на заглушку всех компонентов `transition-group` по умолчанию в конфигурации vue-test-utils. Чтобы использовать стандартный компонент `transition-group` установите `config.stubs['transition-group']` в значение false: + +```js +import { config } from '@vue/test-utils' + +config.stubs['transition-group'] = false +``` + +Чтобы переустановить обратно на заглушки компонентов `transition-group`: + +```js +import { config, TransitionGroupStub } from '@vue/test-utils' + +config.stubs['transition-group'] = TransitionGroupStub +``` + +Для установки заглушек в настройках монтирования: + +```js +import { mount, TransitionGroupStub } from '@vue/test-utils' + +mount(Component, { + stubs: { + 'transition-group': TransitionGroupStub + } +}) +``` \ No newline at end of file diff --git a/docs/ru/api/components/TransitionStub.md b/docs/ru/api/components/TransitionStub.md new file mode 100644 index 000000000..7ecd19297 --- /dev/null +++ b/docs/ru/api/components/TransitionStub.md @@ -0,0 +1,30 @@ +## TransitionStub + +Компонент для создания заглушки компонента `transition`. Вместо асинхронного выполнения переходов он возвращает дочерний компонент синхронно. + +Это настроено на заглушку всех компонентов `transition` по умолчанию в конфигурации vue-test-utils. Чтобы использовать стандартный компонент `transition` установите `config.stubs.transition` в значение false: + +```js +import { config } from '@vue/test-utils' + +config.stubs.transition = false +``` + +Чтобы переустановить обратно на заглушки компонентов `transition`: +```js +import { config, TransitionStub } from '@vue/test-utils' + +config.stubs.transition = TransitionStub +``` + +Для установки заглушек в настройках монтирования: + +```js +import { mount, TransitionStub } from '@vue/test-utils' + +mount(Component, { + stubs: { + transition: TransitionStub + } +}) +``` \ No newline at end of file diff --git a/docs/ru/api/config.md b/docs/ru/api/config.md new file mode 100644 index 000000000..214b28d28 --- /dev/null +++ b/docs/ru/api/config.md @@ -0,0 +1,111 @@ +## Конфигурация + +Vue Test Utils включает объект конфигурации для определения опций, используемых Vue Test Utils. + +### Конфигурация настроек Vue Test Utils + +### `stubs` + +- Тип: `Object` +- По умолчанию: `{ + transition: TransitionStub, + 'transition-group': TransitionGroupStub +}` + +Заглушки указанные в `config.stubs` используются по умолчанию. +Заглушки, используемые в компонентах. Они перезаписываются значениями `stubs` переданными в настройках монтирования. + +При передаче `stubs` в качестве массива в настройках монтирования, `config.stubs` будет преобразована в массив, и будут создаваться компоненты заглушки с базовым компонентом, который возвращает `<${component name}-stub>`. + +Пример: + +```js +import VueTestUtils from '@vue/test-utils' + +VueTestUtils.config.stubs['my-component'] = '
' +``` + +### `mocks` + +- Тип: `Object` +- По умолчанию: `{}` + +По аналогии с `stubs`, значения, переданные в `config.mocks` используются по умолчанию. Любые значения, переданные настройкам монтирования объекта `mocks`, будут иметь приоритет выше, по сравнению с объявленными в `config.mocks`. + +Пример: + +```js +import VueTestUtils from '@vue/test-utils' + +VueTestUtils.config.mocks['$store'] = { + state: { + id: 1 + } +} +``` + +### `methods` + +- Тип: `Object` +- По умолчанию: `{}` + +Вы можете настроить методы по умолчанию с помощью объекта `config`. Это может быть полезно для плагинов, которые вводят методы в компоненты, такие как [VeeValidate](https://baianat.github.io/vee-validate/). Вы можете переопределить методы, установленные в `config`, передав `methods` в настройках монтирования. + +Пример: + +```js +import VueTestUtils from '@vue/test-utils' + +VueTestUtils.config.methods['errors'] = () => { + any: () => false +} +``` + +### `provide` + +- Тип: `Object` +- По умолчанию: `{}` + +Как `stubs` или `mocks`, значения, переданные `config.provide`, используются по умолчанию. Любые значения, переданные настройкам монтирования объекта `provide`, будут иметь приоритет выше по сравнению с объявленными в `config.provide`. **Обратите внимание, что не поддерживается передача функции в качестве `config.provide`.** + +Пример: + +```js +import VueTestUtils from '@vue/test-utils' + +VueTestUtils.config.provide['$logger'] = { + log: (...args) => { + console.log(...args) + } +} +``` + +### `logModifiedComponents` + +- Тип: `Boolean` +- По умолчанию: `true` + +Логирует о предупреждениях, когда для расширенных дочерних компонентов автоматически создаётся заглушка. Скрывает предупреждения, когда установлено значение `false`. В отличие от других опций конфигурации, это невозможно установить в настройках монтирования. + +Пример: + +```js +import VueTestUtils from '@vue/test-utils' + +VueTestUtils.config.logModifiedComponents = false +``` + +### `silent` + +- Тип: `Boolean` +- По умолчанию: `true` + +Подавляет предупреждения, вызванные Vue во время изменения наблюдаемых компонентов (например, входных параметров). Если установлено значение `false`, все предупреждения показываются в консоли. Это настраиваемый способ, который основывается на `Vue.config.silent`. + +Пример: + +```js +import VueTestUtils from '@vue/test-utils' + +VueTestUtils.config.silent = false +``` diff --git a/docs/ru/api/createLocalVue.md b/docs/ru/api/createLocalVue.md new file mode 100644 index 000000000..6af6c278c --- /dev/null +++ b/docs/ru/api/createLocalVue.md @@ -0,0 +1,27 @@ +## createLocalVue() + +- **Возвращает:** + - `{Component}` + +- **Использование:** + +`createLocalVue` возвращает класс Vue, чтобы вы могли добавлять компоненты, примеси и устанавливать плагины без загрязнения глобального класса Vue. + +Используйте вместе с `options.localVue`: + +```js +import { createLocalVue, shallowMount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const localVue = createLocalVue() +const wrapper = shallowMount(Foo, { + localVue, + mocks: { foo: true } +}) +expect(wrapper.vm.foo).toBe(true) + +const freshWrapper = shallowMount(Foo) +expect(freshWrapper.vm.foo).toBe(false) +``` + +- **См. также:** [Общие советы](../guides/common-tips.md#добавnение-гnобаnьных-пnагинов-и-примесей) diff --git a/docs/ru/api/mount.md b/docs/ru/api/mount.md new file mode 100644 index 000000000..9f6dec1c4 --- /dev/null +++ b/docs/ru/api/mount.md @@ -0,0 +1,130 @@ +## mount() + +- **Принимает:** + + - `{Component} component` + - `{Object} options` + +- **Возвращает:** `{Wrapper}` + +- **Опции:** + +См. [опции монтирования](options.md) + +- **Использование:** + +Создаёт [`Wrapper`](wrapper/), который содержит примонтированный и отрендеренный компонент Vue. + +**Без опций:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', () => { + const wrapper = mount(Foo) + expect(wrapper.contains('div')).toBe(true) + }) +}) +``` + +**С опциями Vue:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', () => { + const wrapper = mount(Foo, { + propsData: { + color: 'red' + } + }) + expect(wrapper.props().color).toBe('red') + }) +}) +``` + +**Прикрепление к DOM:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', () => { + const wrapper = mount(Foo, { + attachToDocument: true + }) + expect(wrapper.contains('div')).toBe(true) + }) +}) +``` + +**Слот по умолчанию и именованные слоты:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' +import Bar from './Bar.vue' +import FooBar from './FooBar.vue' + +describe('Foo', () => { + it('renders a div', () => { + const wrapper = mount(Foo, { + slots: { + default: [Bar, FooBar], + fooBar: FooBar, // будет соответствовать `` + foo: '
' + } + }) + expect(wrapper.contains('div')).toBe(true) + }) +}) +``` + +**Заглушки глобальных свойств:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', () => { + const $route = { path: 'http://www.example-path.com' } + const wrapper = mount(Foo, { + mocks: { + $route + } + }) + expect(wrapper.vm.$route.path).toBe($route.path) + }) +}) +``` + +**Заглушки компонентов:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' +import Bar from './Bar.vue' +import Faz from './Faz.vue' + +describe('Foo', () => { + it('renders a div', () => { + const wrapper = mount(Foo, { + stubs: { + Bar: '
', + BarFoo: true, + FooBar: Faz + } + }) + expect(wrapper.contains('.stubbed')).toBe(true) + expect(wrapper.contains(Bar)).toBe(true) + }) +}) +``` + +- **См. также:** [Wrapper](wrapper/) diff --git a/docs/ru/api/options.md b/docs/ru/api/options.md new file mode 100644 index 000000000..3c55ac7ea --- /dev/null +++ b/docs/ru/api/options.md @@ -0,0 +1,228 @@ +# Опции монтирования + +Опции для `mount` и `shallowMount`. Объект опций может содержать как настройки монтирования Vue Test Utils, так и другие опции Vue. + +- [`context`](#context) +- [`slots`](#slots) +- [`scopedSlots`](#scopedslots) +- [`stubs`](#stubs) +- [`mocks`](#mocks) +- [`localVue`](#localvue) +- [`attachToDocument`](#attachtodocument) +- [`attrs`](#attrs) +- [`listeners`](#listeners) +- [`provide`](#provide) +- [`sync`](#sync) + +## context + +- Тип: `Object` + +Передаёт контекст в функциональный компонент. Может использоваться только с функциональными компонентами. + +Пример: + +```js +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = mount(Component, { + context: { + props: { show: true }, + children: [Foo, Bar] + } +}) + +expect(wrapper.is(Component)).toBe(true) +``` + +## slots + +- Тип: `{ [name: string]: Array|Component|string }` + +Предоставляет объект с содержимым слотов компоненту. Ключ соответствует имени слота. Значение может быть компонентом, массивом компонентов или строковым шаблоном, или текстом. + +Пример: + +```js +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = shallowMount(Component, { + slots: { + default: [Foo, Bar], + fooBar: Foo, // будет соответствовать `` + foo: '
', + bar: 'bar' + } +}) +expect(wrapper.find('div')).toBe(true) +``` + +## scopedSlots + +- Тип: `{ [name: string]: string }` + +Предоставляет объект содержимое слотов с ограниченной областью видимости для компонента. Ключ соответствует имени слота. Значение может быть строкой шаблона. + +Есть три ограничения. + +* Эта опция поддерживается только с vue@2.5+. + +* Вы не можете использовать тег `