From df444b726d07940cf1146b3ae788ebf391c630b7 Mon Sep 17 00:00:00 2001 From: sh7dm Date: Sun, 21 Apr 2019 17:58:59 +0300 Subject: [PATCH 1/3] docs: update russian translation --- docs/ru/README.md | 1 + docs/ru/api/config.md | 2 +- docs/ru/api/createWrapper.md | 26 ++++++++++ docs/ru/api/options.md | 48 +++++++++++++----- docs/ru/api/wrapper/attributes.md | 7 ++- docs/ru/api/wrapper/classes.md | 7 ++- docs/ru/api/wrapper/destroy.md | 5 ++ docs/ru/api/wrapper/html.md | 2 +- docs/ru/api/wrapper/props.md | 7 ++- docs/ru/api/wrapper/setChecked.md | 4 +- docs/ru/api/wrapper/setValue.md | 4 +- docs/ru/guides/common-tips.md | 50 +++++++++++++++++++ docs/ru/guides/dom-events.md | 10 +++- ...esting-single-file-components-with-jest.md | 6 ++- ...ngle-file-components-with-mocha-webpack.md | 2 +- docs/ru/guides/using-with-typescript.md | 8 +-- docs/ru/guides/using-with-vuex.md | 7 +-- 17 files changed, 162 insertions(+), 34 deletions(-) create mode 100644 docs/ru/api/createWrapper.md diff --git a/docs/ru/README.md b/docs/ru/README.md index b014fff5b..fd592d272 100644 --- a/docs/ru/README.md +++ b/docs/ru/README.md @@ -80,5 +80,6 @@ Vue Test Utils — официальная библиотека модульно - [TransitionGroupStub](api/components/TransitionGroupStub.md) - [RouterLinkStub](api/components/RouterLinkStub.md) - [Селекторы](api/selectors.md) + - [createWrapper](api/createWrapper.md) - [createLocalVue](api/createLocalVue.md) - [Конфигурация](api/config.md) diff --git a/docs/ru/api/config.md b/docs/ru/api/config.md index d82aff8a7..d67fe4014 100644 --- a/docs/ru/api/config.md +++ b/docs/ru/api/config.md @@ -2,7 +2,7 @@ Vue Test Utils включает объект конфигурации для определения опций, используемых Vue Test Utils. -### Конфигурация настроек Vue Test Utils +### Настройки Vue Test Utils ### `stubs` diff --git a/docs/ru/api/createWrapper.md b/docs/ru/api/createWrapper.md new file mode 100644 index 000000000..1d791d306 --- /dev/null +++ b/docs/ru/api/createWrapper.md @@ -0,0 +1,26 @@ +## createWrapper(node [, options]) + +- **Аргументы:** + + - `{vm|HTMLElement} node` + - `{Object} options` + - `{Boolean} sync` + - `{Boolean} attachedToDocument` + +- **Возвращает:** + + - `{Wrapper}` + +- **Использование:** + +`createWrapper` создает `Wrapper` для смонтированного экземпляра Vue или HTML-элемента. + +```js +import { createWrapper } from '@vue/test-utils' +import Foo from './Foo.vue' + +const Constructor = Vue.extend(Foo) +const vm = new Constructor().$mount() +const wrapper = createWrapper(vm) +expect(wrapper.vm.foo).toBe(true) +``` diff --git a/docs/ru/api/options.md b/docs/ru/api/options.md index ada0ec4f8..7ac233d44 100644 --- a/docs/ru/api/options.md +++ b/docs/ru/api/options.md @@ -2,19 +2,28 @@ Опции для `mount` и `shallowMount`. Объект опций может содержать как настройки монтирования Vue Test Utils, так и другие опции Vue. -- [`context`](#context) -- [`slots`](#slots) -- [`scopedSlots`](#scopedslots) -- [`stubs`](#stubs) -- [`mocks`](#mocks) -- [`localVue`](#localvue) -- [`attachToDocument`](#attachtodocument) -- [`propsData`](#propsdata) -- [`attrs`](#attrs) -- [`listeners`](#listeners) -- [`parentComponent`](#parentcomponent) -- [`provide`](#provide) -- [`sync`](#sync) +:::tip СОВЕТ +Кроме опций, описанных ниже, обЪект `options` может содержать любую опцию, которую можно указать при вызове `new Vue ({ /* опции здесь */ })`. +Эти опции будут объединены с сущесвующими опциями компонента при монтировании с помощью `mount` / `shallowMount` + +[См. другие опции в примере](#other-options) +::: + +- [Опции монтирования](#%D0%BE%D0%BF%D1%86%D0%B8%D0%B8-%D0%BC%D0%BE%D0%BD%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F) + - [context](#context) + - [slots](#slots) + - [scopedSlots](#scopedslots) + - [stubs](#stubs) + - [mocks](#mocks) + - [localVue](#localvue) + - [attachToDocument](#attachtodocument) + - [attrs](#attrs) + - [propsData](#propsdata) + - [listeners](#listeners) + - [parentComponent](#parentcomponent) + - [provide](#provide) + - [sync](#sync) + - [Другие опции](#%D0%B4%D1%80%D1%83%D0%B3%D0%B8%D0%B5-%D0%BE%D0%BF%D1%86%D0%B8%D0%B8) ## context @@ -108,6 +117,16 @@ shallowMount(Component, { Или вы можете использовать JSX. Если вы пишете JSX в методе, `this.$createElement` автоматически внедряется babel-plugin-transform-vue-jsx: +```js +shallowMount(Component, { + scopedSlots: { + foo(props) { + return
{props.text}
+ } + } +}) +``` + ## stubs - Тип: `{ [name: string]: Component | boolean } | Array` @@ -190,6 +209,9 @@ expect(wrapper.vm.$route).toBeInstanceOf(Object) Компонент будет прикрепляться к DOM при рендеринге, если установлено в `true`. +Если компонент прикреплен к DOM, вы должны вызвать `wrapper.destroy()` в конце вашего теста для того, +чтобы удалить отрисованные элементы из документа и удалить экземпляр компонента. + ## attrs - Тип: `Object` diff --git a/docs/ru/api/wrapper/attributes.md b/docs/ru/api/wrapper/attributes.md index 2fcdc9a82..a80d7e8ed 100644 --- a/docs/ru/api/wrapper/attributes.md +++ b/docs/ru/api/wrapper/attributes.md @@ -1,6 +1,10 @@ ## attributes() -Возвращает объект атрибута DOM-узла `Wrapper`. +Возвращает объект атрибутов DOM-узла `Wrapper`. Если аргумент `key` присутствует, метод вернёт значение атрибута, заданного через `key`. + +- **Аргументы:** + + - `{string} key` **опционально** - **Возвращает:** `{[attribute: string]: any}` @@ -12,4 +16,5 @@ import Foo from './Foo.vue' const wrapper = mount(Foo) expect(wrapper.attributes().id).toBe('foo') +expect(wrapper.attributes('id')).toBe('foo') ``` diff --git a/docs/ru/api/wrapper/classes.md b/docs/ru/api/wrapper/classes.md index a15de7701..d19931685 100644 --- a/docs/ru/api/wrapper/classes.md +++ b/docs/ru/api/wrapper/classes.md @@ -2,7 +2,11 @@ Возвращает классы DOM-узла `Wrapper`. -Возвращает массив имён классов. +Возвращает массив имён классов. Либо `true`/`false` если передано имя класса. + +- **Аргументы:** + + - `{string} className` **опционально** - **Возвращает:** `Array<{string}>` @@ -14,4 +18,5 @@ import Foo from './Foo.vue' const wrapper = mount(Foo) expect(wrapper.classes()).toContain('bar') +expect(wrapper.classes('bar')).toBe(true) ``` diff --git a/docs/ru/api/wrapper/destroy.md b/docs/ru/api/wrapper/destroy.md index 4ff04d42f..fac0f2a8a 100644 --- a/docs/ru/api/wrapper/destroy.md +++ b/docs/ru/api/wrapper/destroy.md @@ -17,3 +17,8 @@ mount({ }).destroy() expect(spy.calledOnce).toBe(true) ``` + +Если опция `attachToDocument` была `true` при монтировании, DOM жлементы компонента +будут также удалены из документа. + +Для функциональных компонентов, `destroy` только удаляет отрисованные элементы DOM из документа. diff --git a/docs/ru/api/wrapper/html.md b/docs/ru/api/wrapper/html.md index eb0d42a54..01e435b5e 100644 --- a/docs/ru/api/wrapper/html.md +++ b/docs/ru/api/wrapper/html.md @@ -1,6 +1,6 @@ ## html() -Возвращает HTML `Wrapper` DOM-узла в виде строки. +Возвращает HTML-код DOM-узла `Wrapper`а в виде строки. - **Возвращает:** `{string}` diff --git a/docs/ru/api/wrapper/props.md b/docs/ru/api/wrapper/props.md index 7b8db0073..883d46f69 100644 --- a/docs/ru/api/wrapper/props.md +++ b/docs/ru/api/wrapper/props.md @@ -1,9 +1,13 @@ ## props() -Возвращает объект с входными параметрами `vm` для `Wrapper`. +Возвращает объект с входными параметрами `vm` для `Wrapper`. Если `key` передан, метод вернёт значения свойства с именем `key`. **Обратите внимание что Wrapper должен содержать экземпляр Vue.** +- **Принимает:** + + - `{string} key` **опйионально** + - **Возвращает:** `{[prop: string]: any}` - **Пример:** @@ -18,4 +22,5 @@ const wrapper = mount(Foo, { } }) expect(wrapper.props().bar).toBe('baz') +expect(wrapper.props('bar')).toBe('baz') ``` diff --git a/docs/ru/api/wrapper/setChecked.md b/docs/ru/api/wrapper/setChecked.md index 16365127f..41f6e3cd3 100644 --- a/docs/ru/api/wrapper/setChecked.md +++ b/docs/ru/api/wrapper/setChecked.md @@ -13,8 +13,8 @@ import { mount } from '@vue/test-utils' import Foo from './Foo.vue' const wrapper = mount(Foo) -const option = wrapper.find('input[type="radio"]') -option.setChecked() +const radioInput = wrapper.find('input[type="radio"]') +radioInput.setChecked() ``` - **Примечание:** diff --git a/docs/ru/api/wrapper/setValue.md b/docs/ru/api/wrapper/setValue.md index fc432d061..5c3b0521b 100644 --- a/docs/ru/api/wrapper/setValue.md +++ b/docs/ru/api/wrapper/setValue.md @@ -14,8 +14,8 @@ import Foo from './Foo.vue' const wrapper = mount(Foo) -const input = wrapper.find('input[type="text"]') -input.setValue('some value') +const textInput = wrapper.find('input[type="text"]') +textInput.setValue('some value') const select = wrapper.find('select') select.setValue('option value') diff --git a/docs/ru/guides/common-tips.md b/docs/ru/guides/common-tips.md index 58eda11a5..f7f33b313 100644 --- a/docs/ru/guides/common-tips.md +++ b/docs/ru/guides/common-tips.md @@ -58,6 +58,56 @@ expect(wrapper.emitted().foo[1]).toEqual([123]) Вы также можете получить массив событий в порядке их вызова с помощью [`wrapper.emittedByOrder()`](../api/wrapper/emittedByOrder.md). +### События дочерних компонентов + +Вы можете создавать пользовательские события в дочерних компонентах получая доступ к экземпляру. + +**Тестируемый компонент** + +```html + + + +``` + +**Тест** + +```js +import { shallowMount } from '@vue/test-utils' +import ParentComponent from '@/components/ParentComponent' +import ChildComponent from '@/components/ChildComponent' + +describe('ParentComponent', () => { + it("displays 'Emitted!' when custom event is emitted", () => { + const wrapper = shallowMount(ParentComponent) + wrapper.find(ChildComponent).vm.$emit('custom') + expect(wrapper.html()).toContain('Emitted!') + }) +}) +``` + ### Манипулирование состоянием компонента Вы можете напрямую манипулировать состоянием компонента с помощью методов `setData` или `setProps` на обёртке: diff --git a/docs/ru/guides/dom-events.md b/docs/ru/guides/dom-events.md index be49eaabe..b3ce272cb 100644 --- a/docs/ru/guides/dom-events.md +++ b/docs/ru/guides/dom-events.md @@ -41,14 +41,17 @@ wrapper.trigger('click', { button: 0 }) +